<x-Deshboard-layout>

    <!-- Table Section -->
    <div class=" py-10 ">
        <!-- Card -->
        <div class="flex flex-col">
            <div class="-m-1.5 overflow-x-auto">
                <div class="p-1.5 min-w-full inline-block align-middle">
                    <div
                        class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden dark:bg-slate-900 dark:border-gray-700">
                        <!-- Header -->
                        <div
                            class="px-6 py-4 grid gap-3 md:flex md:justify-between md:items-center border-b border-gray-200 dark:border-gray-700">
                            <div>
                                <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                                    Slider
                                </h2>
                                <p class="text-sm text-gray-600 dark:text-gray-400">
                                    Add slide, edit and more.
                                </p>
                            </div>

                            <div>
                                <div class="inline-flex gap-x-2">

                                    <a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-blue-600 text-white hover:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                                        href="#" data-hs-overlay="#slide-create-model">
                                        <svg class="flex-shrink-0 w-3 h-3" xmlns="http://www.w3.org/2000/svg"
                                            width="16" height="16" viewBox="0 0 16 16" fill="none">
                                            <path d="M2.63452 7.50001L13.6345 7.5M8.13452 13V2" stroke="currentColor"
                                                stroke-width="2" stroke-linecap="round" />
                                        </svg>
                                        Add Slide
                                    </a>
                                </div>
                            </div>
                        </div>
                        <!-- End Header -->

                        <!-- Table -->
                        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
                            <thead class="bg-gray-50 dark:bg-slate-800">
                                <tr>
                                    <th class="ps-6 py-3 text-start w-60">
                                        <div class="flex items-center ">
                                            <span
                                                class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200">
                                                Image
                                            </span>
                                        </div>
                                    </th>


                                    <th scope="col" class="px-6 py-3 text-start w-[50%]">
                                        <div class="flex items-center gap-x-2">
                                            <span
                                                class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200">
                                                Content
                                            </span>
                                        </div>
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-start w-60">
                                        <div class="flex  gap-x-2">
                                            <span
                                                class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200">
                                                Button
                                            </span>
                                        </div>
                                    </th>
                                    <th scope="col" class="px-6 py-3 text-start">
                                        <div class="flex items-center gap-x-2">
                                            <span
                                                class="text-xs font-semibold uppercase tracking-wide text-gray-800 dark:text-gray-200">
                                                Action
                                            </span>
                                        </div>
                                    </th>

                                    <th scope="col" class="px-6 py-3 text-end"></th>
                                </tr>
                            </thead>

                            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
                                @foreach ($sliders as $slide)
                                    <tr>
                                        <td class="h-px w-px whitespace-nowrap">
                                            <div class="ps-6 py-3">
                                                <img class="w-50 h-40" src="{{ asset('images/' . $slide->image) }}"
                                                    alt="Image Description">
                                            </div>
                                        </td>
                                        <td class="h-px w-px whitespace-nowrap">
                                            <div class="ps-6 lg:ps-3 xl:ps-0 pe-6 py-3">
                                                <div class=" p-3  w-full h-40 overflow-auto">
                                                    <div class="grow">
                                                        {!! $slide->content !!}
                                                    </div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="h-px w-72 whitespace-nowrap">
                                            <div class="px-6 py-3">
                                                <span
                                                    class="block text-sm font-semibold text-gray-800 dark:text-gray-200">{{ $slide->btn_name }}</span>
                                                <span class="block text-sm text-gray-500">{{ $slide->btn_url }}</span>
                                            </div>
                                        </td>

                                        <td class="h-px w-px whitespace-nowrap">
                                            <div class="px-6 py-1.5">
                                                <a data="{{ $slide }}" id="update"
                                                    class="inline-flex no-underline items-center gap-x-1 text-sm text-blue-600 decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                                                    href="#" data-hs-overlay="#slide-edit-model">
                                                    <i class="fa-solid fa-user-pen  "></i>
                                                </a>
                                                <form action="{{ route('slider.destroy', $slide->id) }}"
                                                    class="inline-block" method="post" id="delete">
                                                    @method('delete')
                                                    @csrf
                                                    <button type="submit"
                                                        class="inline-flex no-underline items-center gap-x-1 text-sm text-blue-600 decoration-2 hover:underline font-medium dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600">
                                                        <i class="text-red-700 fa-solid fa-trash-can"></i>
                                                    </button>
                                                </form>

                                            </div>
                                        </td>
                                    </tr>
                                @endforeach

                        </table>
                        <!-- End Table -->
                    </div>
                </div>
            </div>
        </div>
        <!-- End Card -->
    </div>
    <!-- End Table Section -->
    @include('backend.pages.sliders.model.slide-create-model')
    @include('backend.pages.sliders.model.slide-edit-model')


    @if ($message = Session::get('success'))
        <x-backend.flash-error :message="$message" :type="'success'" />
    @endif

</x-Deshboard-layout>

<x-backend.server-error :form_id="'slide-create'" :request_form="'Slider\SlideStoreRequest'" />
<x-backend.server-error :form_id="'slide-edit'" :request_form="'Slider\SlideUpdateRequest'" />
<script>
    $(document).on('submit', '#delete', function() {
        let con = confirm('Are you sure to Delete it')
        if (con) {

            return true;

        } else {
            return false;
        }

    })
</script>
