@extends('layouts.dashboard')

@section('content')
<div
    x-data="sliderManager({
        initialSlides: @js($slides),
        routes: {
            base: '{{ route('dashboard.slides.index', [], false) }}',
            store: '{{ route('dashboard.slides.store', [], false) }}',
            reorder: '{{ route('dashboard.slides.reorder', [], false) }}',
            toggle_suffix: '/toggle-active'
        },
        csrf: '{{ csrf_token() }}'
    })"
    x-init="init()"
>
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl">
            <i class="bi bi-film mr-2"></i>
            Carrousel
        </h1>
        <button type="button" 
                class="px-4 cursor-pointer py-2 rounded-md bg-gray-900 text-white hover:bg-black transition-colors"
                x-on:click="openCreate()">
            <i class="bi bi-plus-circle mr-2"></i>
            Ajouter un slide
        </button>
    </div>

    <div class="bg-white rounded-lg p-6 border-1 border-gray-200">
        <template x-if="slides.length === 0">
            <div class="text-center py-8 text-gray-500">
                <div class="text-4xl mb-4">📝</div>
                <p>Aucun slide pour le moment.</p>
                <p class="text-sm mt-1">Cliquez sur "Ajouter un slide" pour commencer.</p>
            </div>
        </template>

        <ul class="space-y-3" x-cloak x-ref="list" x-show="slides.length > 0">
            <template x-for="(slide, index) in slides" :key="slide.id">
                <li class="border border-gray-200 rounded-md ps-4 pe-8 py-2 flex items-center justify-between" :data-id="slide.id">
                    <div class="flex items-center gap-5 min-w-0">
                        <div class="flex flex-col gap-1">
                            <button
                                type="button"
                                class="text-gray-500 hover:text-gray-700 p-2 cursor-pointer text-lg rounded disabled:opacity-40"
                                :disabled="index === 0"
                                x-on:click="moveUp(index)"
                                aria-label="Monter"
                                title="Monter">
                                <i class="bi bi-chevron-up"></i>
                            </button>
                            <button
                                type="button"
                                class="text-gray-500 hover:text-gray-700 p-1 cursor-pointer text-lg rounded disabled:opacity-40"
                                :disabled="index === slides.length - 1"
                                x-on:click="moveDown(index)"
                                aria-label="Descendre"
                                title="Descendre">
                                <i class="bi bi-chevron-down"></i>
                            </button>
                        </div>
                    
                        <div class="w-20 h-15 bg-gray-100 rounded overflow-hidden flex items-center justify-center flex-shrink-0">
                            <template x-if="slide.type === 'image'">
                                <img :src="slide.src" alt="Aperçu" class="object-cover w-full h-full">
                            </template>
                            <template x-if="slide.type === 'video'">
                                <div class="text-xs px-1 py-0.5 bg-gray-900 text-white rounded font-mono">VID</div>
                            </template>
                            <template x-if="!slide.type || (!slide.src && !slide.type)">
                                <div class="text-xs text-gray-400">📁</div>
                            </template>
                        </div>

                        <div class="min-w-0 flex-1">
                            <div class="text-sm text-gray-500 truncate" x-text="slide.subtitle || '—'"></div>
                            <div class="font-medium break-words" x-html="nl2br(slide.title || 'Sans titre')"></div>
                        </div>
                    </div>

                    <div class="flex items-center gap-2 flex-shrink-0">
                        <button type="button"
                                title="Activer/Désactiver"
                                role="switch"
                                :aria-checked="slide.is_active ? 'true' : 'false'"
                                class="relative cursor-pointer me-4 inline-flex h-6 w-14 items-center rounded-sm transition-colors focus:outline-none focus:ring-1 focus:ring-offset-2"
                                :class="slide.is_active ? 'bg-brand focus:ring-brand' : 'bg-gray-300 focus:ring-gray-200'"
                                x-bind:disabled="slide._switching"
                                x-on:click="toggleActive(slide)">
                            <span class="absolute left-1.5 top-1 inline-block h-4 w-4 rounded-sm bg-white shadow-md transform transition-transform duration-300 ease-in-out"
                                :class="slide.is_active ? 'translate-x-7' : 'translate-x-0'"></span>
                        </button>

                        <button type="button" 
                                class="px-2 py-1 cursor-pointer rounded border hover:bg-black hover:text-white transition-ease duration-300  text-sm"
                                x-on:click="openEdit(slide)" 
                                aria-label="Modifier"
                                title="Modifier le slide">
                            <i class="bi bi-pen"></i>
                        </button>
                        
                        <button type="button" 
                                class="px-2 py-1 cursor-pointer rounded border border-red-300 text-red-600 hover:bg-red-600 hover:text-white transition-ease duration-300 text-sm"
                                x-on:click="confirmRemove(slide)" 
                                aria-label="Supprimer"
                                title="Supprimer le slide">
                            <i class="bi bi-trash"></i>
                        </button>
                    </div>
                </li>
            </template>
        </ul>
    </div>
    <div
        x-show="slideModal.open"
        x-cloak
        x-trap.noscroll="slideModal.open"
        @keydown.escape.window="slideModal.open = false"
        class="fixed inset-0 z-50 flex items-center justify-center px-4"
    >
        <div
            class="absolute inset-0 bg-black/40"
            x-on:click="slideModal.open = false"
        ></div>

        <div
            class="relative w-full max-w-4xl bg-white rounded-lg p-6 shadow-lg max-h-[90vh] overflow-y-auto"
        >
            <h2 class="text-xl flex justify-between font-bold mb-4">
                <span x-text="slideModal.mode === 'create' ? 'Nouveau slide' : 'Modifier le slide'"></span>
                <button class="text-gray-900 hover:text-black cursor-pointer " 
                        x-on:click="slideModal.open = false" aria-label="Fermer">
                    <i class="bi bi-x-lg"></i>
                </button>
            </h2>

            @include('dashboard.forms.slides-form')
        </div>
    </div>
    <div x-show="slideDeleteModal.open" 
        x-cloak
        x-trap.noscroll="slideDeleteModal.open"
        @keydown.escape.window="slideDeleteModal.open = false"
        class="fixed inset-0 z-60 flex items-center justify-center px-4"
    >
        <div
            class="absolute inset-0 bg-black/40"
            x-on:click="slideDeleteModal.open = false"
            x-bind:class="{ 'pointer-events-none': slideDeleteModal.loading }"
        ></div>
        
        <div
            class="relative w-full max-w-lg bg-white rounded-lg p-6 shadow-lg"
        >
            <h2 class="text-xl flex justify-between font-bold mb-4">
                <span>Confirmer la suppression</span>
                <button class="text-gray-900 hover:text-black cursor-pointer" 
                        x-on:click="slideDeleteModal.open = false" aria-label="Fermer"
                        x-bind:disabled="slideDeleteModal.loading">
                    <i class="bi bi-x-lg"></i>
                </button>
            </h2>
            
            <p class="text-sm text-gray-600 mt-2">
                Voulez-vous vraiment supprimer ce slide ? Cette action est irréversible.
            </p>
            
            <div class="mt-4 flex justify-end gap-3">
                <button class="cursor-pointer px-3 py-2 hover:bg-gray-300 transition-ease duration-300 rounded-md border border-gray-300" 
                        x-on:click="slideDeleteModal.open = false"
                        x-bind:disabled="slideDeleteModal.loading">
                    Annuler
                </button>
                <button class="px-3 py-2 cursor-pointer hover:bg-red-800 transition-ease duration-300 rounded bg-red-600 text-white flex items-center gap-2" 
                        x-on:click="removeConfirmed()" x-bind:disabled="slideDeleteModal.loading">
                    <span>Supprimer</span>
                    <span x-show="slideDeleteModal.loading" class="inline-block">
                        <svg class="animate-spin h-4 w-4 text-white" viewBox="0 0 24 24" fill="none">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"/>
                        </svg>
                    </span>
                </button>
            </div>
        </div>
    </div>
</div>
@endsection