@section('title', 'Slider')
<div class="py-12">
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
            Slider
        </h2>
    </x-slot>
    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div class="overflow-hidden bg-white shadow-sm dark:bg-gray-800 sm:rounded-lg">
            <div class="flex gap-3 p-6">
                <x-filament::button size="sm" icon="heroicon-s-plus" wire:navigate tag="a"
                    href="{{ route('slider.create') }}" color="info">
                    Tambah
                </x-filament::button>
                <x-filament::button size="sm" icon="heroicon-m-arrow-path" wire:click="refresh" color="info"
                    outlined>
                    Muat Ulang
                </x-filament::button>
            </div>
            <div class="flex gap-3 px-6 mb-3">
                <div class="text-sm text-gray-700 dark:text-gray-300">Tipe</div>
                <x-filament::link wire:navigate @class(['underline' => $type === 'all', 'dark:decoration-slate-300']) :href="route('slider.index', ['type' => 'all'])">
                    Semua
                </x-filament::link>
                <x-filament::link wire:navigate @class([
                    'underline' => $type === 'published',
                    'dark:decoration-slate-300',
                ]) :href="route('slider.index', ['type' => 'published'])">
                    Terbit
                </x-filament::link>
            </div>
            @if ($type === 'published')
                <div class="px-6">
                    <div class="flex p-4 mb-4 text-sm text-blue-800 rounded-lg bg-blue-50 dark:bg-gray-800 dark:text-blue-400"
                        role="alert">
                        <svg class="flex-shrink-0 inline w-4 h-4 me-3" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z" />
                        </svg>
                        <span class="sr-only">Info</span>
                        <div class="grid">
                            <span class="font-semibold">Info</span>
                            <span>Drag & Drop untuk mengubah urutan slider.</span>
                        </div>
                    </div>
                </div>
            @endif
            <div class="px-6 pb-6 text-gray-900 dark:text-gray-100">
                <div id="slider-list" x-data x-init="new Sortable(document.getElementById('slider-list'), {
                    animation: 150,
                    ghostClass: 'bg-blue-400',
                    disabled: @json($type !== 'published') || @json(count($sliders) === 1),
                    store: {
                        set: function(sortable) {
                            $wire.dispatch('sort-slider', {
                                ordering: sortable.toArray()
                            });
                        }
                    }
                })" class="grid gap-3">
                    @forelse ($sliders as $slider)
                        <x-card.base data-id="{{ $slider->ulid }}">
                            <div class="grid grid-cols-1 gap-5 md:grid-cols-3">
                                <div class="">
                                    @php
                                        $media = $slider->getMedia()->first();
                                    @endphp
                                    @if ($media)
                                        <img src="{{ route('media.photo', ['uuid' => $media->uuid]) }}" />
                                    @endif
                                </div>
                                <div class="flex flex-col items-center gap-3">
                                    @if ($slider->published_at)
                                        <div>
                                            <x-filament::badge class="font-semibold tracking-wider uppercase shrink-0"
                                                size="sm" color="success">
                                                Terbit
                                            </x-filament::badge>
                                        </div>
                                    @endif
                                </div>
                                <div class="flex content-start">
                                    <div class="flex flex-wrap self-start gap-3">
                                        <x-filament::button class="self-start" size="sm" icon="heroicon-o-pencil"
                                            wire:click="edit('{{ $slider->ulid }}')" color="info" outlined>
                                            Ubah
                                        </x-filament::button>
                                        <x-filament::button class="self-start" size="sm" icon="heroicon-o-trash"
                                            wire:click="onDelete('{{ $slider->ulid }}')" color="danger" outlined>
                                            Hapus
                                        </x-filament::button>
                                    </div>
                                </div>
                            </div>
                        </x-card.base>
                    @empty
                        <x-card.no-data>
                            <div class="text-sm">
                                Slider belum tersedia
                            </div>
                        </x-card.no-data>
                    @endforelse
                </div>
                @if (count($sliders))
                    <div class="mt-4">
                        <x-filament::pagination :paginator="$sliders" />
                    </div>
                @endif
            </div>
        </div>
    </div>
    <x-filament::modal icon-color="danger" :close-by-clicking-away="false" alignment="center" id="delete-slider"
        icon="heroicon-o-trash">
        <x-slot name="heading">
            Hapus Slider
        </x-slot>
        <x-slot name="description">
            Apakah Anda yakin akan menghapus slider tersebut?
        </x-slot>
        <x-slot name="footer">
            <div class="flex justify-end gap-3">
                <x-filament::button size="sm" icon="heroicon-o-arrow-long-left"
                    x-on:click="$dispatch('close-modal', { id: 'delete-slider' })" color="info" outlined> Kembali
                </x-filament::button>
                <x-filament::button size="sm" icon="heroicon-o-trash" wire:click="delete()" color="danger">
                    Hapus
                </x-filament::button>
            </div>
        </x-slot>
    </x-filament::modal>
</div>