@extends('components.layouts.manager.index')
@section('content')
    <div class="md:flex md:justify-between items-center mt-2">
        <div class="inline-flex gap-4 " role="group">
            <x-link.link-group
                path="{{route('manager.audio-books.create')}}"
                target=""
                text="اضافه کردن"
                class="">
                <x-icon.plus class="size-6 me-2"/>
            </x-link.link-group>
            <x-link.link-group
                path="{{route('manager.audio-books.trash')}}"
                target=""
                text="سطل آشغال"
                class="">
                <x-icon.trash class="size-6 me-2"/>
            </x-link.link-group>
        </div>
        <form
            method="get"
            action="{{route('manager.audio-books')}}"
            class=" mt-2 w-full md:w-96 ">
            <x-inputs.search-bar
                name="search"
                value="{{ app('request')->input('search') }}"
                placeholder="جستجو در کتاب ها"/>
        </form>
    </div>
    <x-manager.table.table>
        <x-slot:head>
            <th scope="col" class="px-6 py-3">
                ردیف
            </th>
            <th scope="col" class="px-6 py-3">
                اواتار
            </th>
            <th scope="col" class="px-6 py-3">
                وضعیت
            </th>
            <th scope="col" class="px-6 py-3">
                نام کتاب
            </th>
            <th scope="col" class="px-6 py-3">
                توضیحات کوتاه کتاب
            </th>
            <th scope="col" class="px-6 py-3">
                ویرایش
            </th>
        </x-slot:head>
        @foreach($datas as $data)
            <tr class=" hover:bg-orange-300 border-b ">
                <th scope="row" class="px-6 py-4 ">
                    {{$loop->index +1}}
                </th>
                <th scope="row" class="px-6 py-4   ">
                    <img
                        class="w-24"
                        src="{{$data->avatar}}" alt="">
                </th>
                <th scope="row" class="px-6 py-4 ">
                    <livewire:manager.audio-book-status audioBook="{{$data->id}}"/>
                </th>
                <th scope="row" class="px-6 py-4 ">
                    {{$data->name}}
                </th>
                <th scope="row" class="px-6 py-4 ">
                    {{$data->short_description}}
                </th>

                <th scope="row" class="px-6 py-4 w-full">
                    <div class="inline-flex w-full items-center">
                        <a
                            class="bg-green-300 p-2 rounded-r-md"
                            href="{{route('manager.audio-books.edit' , $data)}}">ویرایش</a>
                        <form
                            method="post"
                            action="{{route('manager.audio-books.destroy')}}">
                            @csrf
                            @method('delete')
                            <input
                                name="audioBooks"
                                value="{{$data->id}}"
                                type="hidden">
                            <button
                                type="submit"
                                class="bg-red-300 p-2 rounded-l-md">
                                پاک کردن
                            </button>
                        </form>
                    </div>
                </th>
            </tr>
        @endforeach
    </x-manager.table.table>

    {{$datas->links()}}
@endsection