@extends('admin.layouts.admin')

@section('title', 'Gestion des créneaux - Admin KONTIXX')
@section('page-title', 'Gestion des créneaux')
@section('page-description', 'Créez et gérez facilement tous vos créneaux de rendez-vous')

@section('content')
<div class="space-y-3 sm:space-y-4">
    {{-- STATISTIQUES --}}
    <div class="grid grid-cols-1 md:grid-cols-5 gap-3 sm:gap-4">
        <div class="card-premium rounded-xl p-3 sm:p-4 hover-lift group cursor-pointer">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-semibold text-gray-600 mb-0.5">Total créneaux</p>
                    <p class="text-2xl sm:text-3xl font-bold text-gray-900 mt-1 group-hover:scale-110 transition-transform duration-300">{{ $stats['total'] }}</p>
                    <p class="text-xs text-gray-500 mt-1">Tous les créneaux</p>
                </div>
                <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <div class="card-premium rounded-xl p-3 sm:p-4 hover-lift group cursor-pointer">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-semibold text-gray-600 mb-0.5">Disponibles</p>
                    <p class="text-2xl sm:text-3xl font-bold text-green-600 mt-1 group-hover:scale-110 transition-transform duration-300">{{ $stats['available'] }}</p>
                    <p class="text-xs text-gray-500 mt-1">Créneaux ouverts</p>
                </div>
                <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-green-400 to-green-600 rounded-xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <div class="card-premium rounded-xl p-3 sm:p-4 hover-lift group cursor-pointer">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-semibold text-gray-600 mb-0.5">En attente</p>
                    <p class="text-2xl sm:text-3xl font-bold text-yellow-600 mt-1 group-hover:scale-110 transition-transform duration-300">{{ $stats['pending'] ?? 0 }}</p>
                    <p class="text-xs text-gray-500 mt-1">En attente validation</p>
                </div>
                <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-yellow-400 to-yellow-600 rounded-xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <div class="card-premium rounded-xl p-3 sm:p-4 hover-lift group cursor-pointer">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-semibold text-gray-600 mb-0.5">Confirmés</p>
                    <p class="text-2xl sm:text-3xl font-bold text-blue-600 mt-1 group-hover:scale-110 transition-transform duration-300">{{ $stats['confirmed'] ?? 0 }}</p>
                    <p class="text-xs text-gray-500 mt-1">Créneaux confirmés</p>
                </div>
                <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>
        </div>

        <div class="card-premium rounded-xl p-3 sm:p-4 hover-lift group cursor-pointer">
            <div class="flex items-center justify-between">
                <div class="flex-1">
                    <p class="text-xs font-semibold text-gray-600 mb-0.5">Indisponibles</p>
                    <p class="text-2xl sm:text-3xl font-bold text-red-600 mt-1 group-hover:scale-110 transition-transform duration-300">{{ $stats['unavailable'] }}</p>
                    <p class="text-xs text-gray-500 mt-1">Créneaux désactivés</p>
                </div>
                <div class="w-12 h-12 sm:w-14 sm:h-14 bg-gradient-to-br from-red-400 to-red-600 rounded-xl flex items-center justify-center shadow-lg group-hover:scale-110 transition-transform duration-300">
                    <svg class="w-6 h-6 sm:w-7 sm:h-7 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-3 sm:gap-4">
        {{-- FORMULAIRE DE CRÉATION EN MASSE --}}
        <div class="lg:col-span-1">
            <div class="card-premium rounded-xl p-3 sticky top-4">
                <div class="flex items-center mb-3">
                    <div class="w-10 h-10 bg-gradient-to-br from-blue-400 to-blue-600 rounded-lg flex items-center justify-center mr-3">
                        <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                    </div>
                    <div>
                        <h2 class="text-lg font-bold text-gray-900">Créer des créneaux</h2>
                        <p class="text-xs text-gray-500">Génération en masse</p>
                    </div>
                </div>

                <form action="{{ route('admin.slots.storeBulk') }}" method="POST" class="space-y-3">
                    @csrf

                    {{-- PÉRIODE --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1.5">Période</label>
                        <div class="grid grid-cols-2 gap-2">
                            <div>
                                <label class="block text-xs text-gray-600 mb-0.5">Date de début</label>
                                <input type="date" name="start_date" value="{{ old('start_date', now()->format('Y-m-d')) }}" required
                                    class="input-premium w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs text-gray-600 mb-0.5">Date de fin</label>
                                <input type="date" name="end_date" value="{{ old('end_date', now()->addDays(30)->format('Y-m-d')) }}" required
                                    class="input-premium w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            </div>
                        </div>
                    </div>

                    {{-- HORAIRES --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1.5">Horaires</label>
                        <div class="grid grid-cols-2 gap-2">
                            <div>
                                <label class="block text-xs text-gray-600 mb-0.5">Heure de début</label>
                                <input type="time" name="start_time" value="{{ old('start_time', '09:00') }}" required
                                    class="input-premium w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            </div>
                            <div>
                                <label class="block text-xs text-gray-600 mb-0.5">Heure de fin</label>
                                <input type="time" name="end_time" value="{{ old('end_time', '18:00') }}" required
                                    class="input-premium w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            </div>
                        </div>
                    </div>

                    {{-- DURÉE DES CRÉNEAUX --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1.5">Durée des créneaux</label>
                        <select name="duration" required
                            class="input-premium w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                            <option value="15" {{ old('duration') == '15' ? 'selected' : '' }}>15 minutes</option>
                            <option value="30" {{ old('duration') == '30' ? 'selected' : 'selected' }}>30 minutes</option>
                            <option value="45" {{ old('duration') == '45' ? 'selected' : '' }}>45 minutes</option>
                            <option value="60" {{ old('duration') == '60' ? 'selected' : '' }}>1 heure</option>
                        </select>
                    </div>

                    {{-- JOURS DE LA SEMAINE --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1.5">Jours de la semaine</label>
                        <div class="grid grid-cols-2 gap-1.5">
                            @php
                                $days = [
                                    1 => 'Lundi',
                                    2 => 'Mardi',
                                    3 => 'Mercredi',
                                    4 => 'Jeudi',
                                    5 => 'Vendredi',
                                    6 => 'Samedi',
                                    0 => 'Dimanche',
                                ];
                            @endphp
                            @foreach($days as $value => $label)
                                <label class="flex items-center p-2 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer transition-colors">
                                    <input type="checkbox" name="days_of_week[]" value="{{ $value }}" 
                                        {{ in_array($value, old('days_of_week', [1,2,3,4,5])) ? 'checked' : '' }}
                                        class="mr-1.5 w-3.5 h-3.5 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                                    <span class="text-xs text-gray-700 font-medium">{{ $label }}</span>
                                </label>
                            @endforeach
                        </div>
                    </div>

                    {{-- FUSEAU HORAIRE --}}
                    <div>
                        <label class="block text-xs font-semibold text-gray-700 mb-1.5">Fuseau horaire</label>
                        <input type="text" name="timezone" value="{{ old('timezone', 'Indian/Antananarivo') }}"
                            class="input-premium w-full px-3 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm">
                    </div>

                    {{-- BOUTON DE SOUMISSION --}}
                    <button type="submit" class="w-full btn-premium bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold py-2.5 px-4 rounded-lg hover:from-blue-700 hover:to-blue-800 transition-all duration-300 shadow-lg hover:shadow-xl flex items-center justify-center text-sm">
                        <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
                        </svg>
                        Créer les créneaux
                    </button>
                </form>
            </div>
        </div>

        {{-- LISTE DES CRÉNEAUX --}}
        <div class="lg:col-span-2">
            <div class="card-premium rounded-xl p-3">
                <div class="flex items-center justify-between mb-3">
                    <div>
                        <h2 class="text-lg font-bold text-gray-900 flex items-center">
                            <svg class="w-5 h-5 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
                            </svg>
                            Liste des créneaux
                        </h2>
                        <p class="text-xs text-gray-500 mt-0.5">{{ $slots->total() }} créneau(x) au total</p>
                    </div>
                </div>

                @if($slots->count() > 0)
                    {{-- MESSAGE INFORMATIF DE SÉLECTION --}}
                    <div id="selectionInfo" class="mb-2.5 p-2.5 bg-blue-50 border border-blue-200 rounded-lg hidden">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center space-x-2">
                                <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                <span class="text-xs font-semibold text-blue-900" id="selectedCount">0 créneaux sélectionnés (page actuelle)</span>
                            </div>
                            <button type="button" onclick="selectAllPages()" class="text-xs text-blue-600 hover:text-blue-800 font-semibold flex items-center underline">
                                <span>👉 Sélectionner tous les {{ $slots->total() }} créneaux ?</span>
                            </button>
                        </div>
                    </div>

                    {{-- FORMULAIRE DE SUPPRESSION EN MASSE --}}
                    <form id="bulkDeleteForm" action="{{ route('admin.slots.destroyBulk') }}" method="POST" class="mb-2.5 p-2.5 bg-gray-50 rounded-lg">
                        @csrf
                        @method('POST')
                        
                        <div class="flex items-center space-x-3 flex-wrap gap-2">
                            <button type="button" onclick="selectAll()" class="text-xs text-blue-600 hover:text-blue-800 font-semibold flex items-center">
                                <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                                </svg>
                                Tout sélectionner
                            </button>
                            <button type="button" onclick="deselectAll()" class="text-xs text-gray-600 hover:text-gray-800 font-semibold flex items-center">
                                <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                </svg>
                                Tout désélectionner
                            </button>
                            <button type="button" id="deleteSelectedBtn" onclick="openDeleteSelectedModal()" 
                                disabled
                                class="ml-auto text-xs bg-red-600 text-white px-3 py-1.5 rounded-lg hover:bg-red-700 transition-colors font-semibold flex items-center disabled:bg-gray-300 disabled:text-gray-500 disabled:cursor-not-allowed disabled:hover:bg-gray-300">
                                <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                </svg>
                                Supprimer sélectionnés
                            </button>
                            <button type="button" onclick="openDeleteAllModal()" 
                                class="text-xs bg-red-700 text-white px-3 py-1.5 rounded-lg hover:bg-red-800 transition-colors font-semibold flex items-center">
                                <svg class="w-3.5 h-3.5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                                </svg>
                                Supprimer tous les créneaux
                            </button>
                        </div>
                    </form>

                    {{-- TABLEAU DES CRÉNEAUX --}}
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gradient-to-r from-gray-50 to-gray-100">
                                <tr>
                                    <th class="px-3 py-2 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">
                                        <input type="checkbox" id="selectAll" onchange="toggleAll(this)" class="w-3.5 h-3.5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                    </th>
                                    <th class="px-3 py-2 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Date</th>
                                    <th class="px-3 py-2 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Heure</th>
                                    <th class="px-3 py-2 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Durée</th>
                                    <th class="px-3 py-2 text-left text-xs font-bold text-gray-700 uppercase tracking-wider">Statut</th>
                                    <th class="px-3 py-2 text-left text-xs font-bold text-gray-700 uppercase tracking-wider min-w-[180px]">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-100">
                                @foreach($slots as $slot)
                                    <tr class="hover:bg-blue-50/50 transition-colors duration-200">
                                        <td class="px-3 py-2 whitespace-nowrap">
                                            @if($slot->status === 'available' || $slot->status === 'expired' || $slot->status === 'cancelled')
                                                <input type="checkbox" form="bulkDeleteForm" name="slot_ids[]" value="{{ $slot->id }}" class="slot-checkbox w-3.5 h-3.5 text-blue-600 border-gray-300 rounded focus:ring-blue-500">
                                            @else
                                                <span class="text-gray-400">-</span>
                                            @endif
                                        </td>
                                        <td class="px-3 py-2 whitespace-nowrap">
                                            <div class="flex items-center text-xs font-medium text-gray-900">
                                                <svg class="w-3.5 h-3.5 mr-1.5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                                </svg>
                                                {{ $slot->date->locale('fr')->isoFormat('dddd D MMMM YYYY') }}
                                            </div>
                                        </td>
                                        <td class="px-3 py-2 whitespace-nowrap">
                                            <div class="flex items-center text-xs text-gray-900">
                                                <svg class="w-3.5 h-3.5 mr-1.5 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                </svg>
                                                {{ \Carbon\Carbon::createFromFormat('H:i:s', $slot->start_time)->format('H:i') }} - 
                                                {{ \Carbon\Carbon::createFromFormat('H:i:s', $slot->end_time)->format('H:i') }}
                                            </div>
                                        </td>
                                        <td class="px-3 py-2 whitespace-nowrap">
                                            <span class="px-2 py-0.5 text-xs font-semibold bg-gray-100 text-gray-800 rounded-lg">{{ $slot->getDurationInMinutes() }} min</span>
                                        </td>
                                        <td class="px-3 py-2 whitespace-nowrap">
                                            @if($slot->status === 'available')
                                                <span class="px-2 py-1 inline-flex text-xs font-bold rounded-full bg-green-100 text-green-800 border border-green-200">
                                                    Disponible
                                                </span>
                                            @elseif($slot->status === 'pending')
                                                <span class="px-2 py-1 inline-flex text-xs font-bold rounded-full bg-yellow-100 text-yellow-800 border border-yellow-200">
                                                    En attente
                                                </span>
                                            @elseif($slot->status === 'confirmed')
                                                <span class="px-2 py-1 inline-flex text-xs font-bold rounded-full bg-blue-100 text-blue-800 border border-blue-200">
                                                    Confirmé
                                                </span>
                                            @elseif($slot->status === 'cancelled')
                                                <span class="px-2 py-1 inline-flex text-xs font-bold rounded-full bg-gray-100 text-gray-800 border border-gray-200">
                                                    Annulé
                                                </span>
                                            @elseif($slot->status === 'expired')
                                                <span class="px-2 py-1 inline-flex text-xs font-bold rounded-full bg-purple-100 text-purple-800 border border-purple-200">
                                                    Expiré
                                                </span>
                                            @else
                                                <span class="px-2 py-1 inline-flex text-xs font-bold rounded-full bg-red-100 text-red-800 border border-red-200">
                                                    Indisponible
                                                </span>
                                            @endif
                                        </td>
                                        <td class="px-3 py-2 text-xs font-medium">
                                            <div class="flex items-center flex-wrap gap-1.5">
                                                <form action="{{ route('admin.slots.updateAvailability', $slot->id) }}" method="POST" class="inline">
                                                    @csrf
                                                    @method('PATCH')
                                                    <input type="hidden" name="is_available" value="{{ $slot->is_available ? 0 : 1 }}">
                                                    <button type="submit" class="px-2.5 py-1 bg-blue-50 text-blue-700 rounded-lg hover:bg-blue-100 transition-colors font-semibold text-xs whitespace-nowrap">
                                                        {{ $slot->is_available ? 'Désactiver' : 'Activer' }}
                                                    </button>
                                                </form>
                                                @if($slot->status === 'available' || $slot->status === 'expired' || $slot->status === 'cancelled')
                                                    <form action="{{ route('admin.slots.destroy', $slot->id) }}" method="POST" class="inline" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce créneau ?')">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="px-2.5 py-1 bg-red-50 text-red-700 rounded-lg hover:bg-red-100 transition-colors font-semibold text-xs whitespace-nowrap">
                                                            Supprimer
                                                        </button>
                                                    </form>
                                                @endif
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    {{-- PAGINATION --}}
                    <div class="mt-4 pt-3 border-t border-gray-200">
                        {{ $slots->links() }}
                    </div>
                @else
                    <div class="text-center py-6">
                        <svg class="mx-auto h-10 w-10 text-gray-400 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                        </svg>
                        <h3 class="mt-2 text-base font-semibold text-gray-900">Aucun créneau</h3>
                        <p class="mt-1 text-xs text-gray-500">Commencez par créer des créneaux en utilisant le formulaire à gauche.</p>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>

{{-- MODAL DE CONFIRMATION POUR SUPPRIMER LES CRÉNEAUX SÉLECTIONNÉS --}}
<div id="deleteSelectedModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
    <div class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4">
        <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-4">
                <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
            </div>
            <div>
                <h3 class="text-lg font-bold text-gray-900">Supprimer les créneaux sélectionnés</h3>
                <p class="text-sm text-gray-500 mt-1">Cette action est irréversible</p>
            </div>
        </div>
        
        <div class="mb-4">
            <p class="text-sm text-gray-700 mb-3">
                Vous êtes sur le point de supprimer <strong class="text-red-600" id="selectedCountModal">0 créneau(x)</strong> sélectionné(s).
            </p>
            <p class="text-xs text-gray-600">
                Les créneaux déjà réservés seront automatiquement ignorés et conservés.
            </p>
        </div>
        
        <div class="flex items-center justify-end space-x-3">
            <button type="button" onclick="closeDeleteSelectedModal()" 
                    class="px-4 py-2 text-sm font-semibold text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                Annuler
            </button>
            <form id="bulkDeleteFormModal" action="{{ route('admin.slots.destroyBulk') }}" method="POST">
                @csrf
                @method('POST')
                <div id="selectedSlotIdsContainer"></div>
                <button type="submit" 
                        class="px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors">
                    Supprimer
                </button>
            </form>
        </div>
    </div>
</div>

{{-- MODAL DE CONFIRMATION POUR SUPPRIMER TOUS LES CRÉNEAUX --}}
<div id="deleteAllModal" class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center">
    <div class="bg-white rounded-2xl shadow-xl p-6 max-w-md w-full mx-4">
        <div class="flex items-center mb-4">
            <div class="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center mr-4">
                <svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
                </svg>
            </div>
            <div>
                <h3 class="text-lg font-bold text-gray-900">Supprimer tous les créneaux</h3>
                <p class="text-sm text-gray-500 mt-1">Cette action est irréversible</p>
            </div>
        </div>
        
        <div class="mb-4">
            <p class="text-sm text-gray-700 mb-3">
                Vous êtes sur le point de supprimer <strong class="text-red-600">tous les créneaux non réservés</strong>. 
                Les créneaux déjà réservés seront conservés.
            </p>
            <p class="text-xs text-gray-600 mb-4">
                Pour confirmer, veuillez taper <strong class="text-red-600 font-mono">oui</strong> dans le champ ci-dessous :
            </p>
            <input type="text" id="confirmDeleteInput" placeholder="Tapez: oui" 
                   class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-red-500 focus:border-red-500 text-sm">
        </div>
        
        <div class="flex items-center justify-end space-x-3">
            <button type="button" onclick="closeDeleteAllModal()" 
                    class="px-4 py-2 text-sm font-semibold text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors">
                Annuler
            </button>
            <form action="{{ route('admin.slots.destroyAll') }}" method="POST" id="deleteAllForm">
                @csrf
                @method('DELETE')
                <button type="submit" id="confirmDeleteBtn" disabled
                        class="px-4 py-2 text-sm font-semibold text-white bg-red-600 rounded-lg hover:bg-red-700 transition-colors disabled:bg-gray-300 disabled:cursor-not-allowed">
                    Supprimer tous les créneaux
                </button>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    const totalSlots = {{ $slots->total() }};

    function toggleAll(checkbox) {
        const checkboxes = document.querySelectorAll('.slot-checkbox');
        checkboxes.forEach(cb => {
            if (!cb.disabled) {
                cb.checked = checkbox.checked;
            }
        });
        updateSelectionInfo();
    }

    function selectAll() {
        const checkboxes = document.querySelectorAll('.slot-checkbox');
        checkboxes.forEach(cb => {
            if (!cb.disabled) {
                cb.checked = true;
            }
        });
        const selectAllCheckbox = document.getElementById('selectAll');
        if (selectAllCheckbox) {
            selectAllCheckbox.checked = true;
        }
        updateSelectionInfo();
    }

    function deselectAll() {
        const checkboxes = document.querySelectorAll('.slot-checkbox');
        checkboxes.forEach(cb => {
            if (!cb.disabled) {
                cb.checked = false;
            }
        });
        const selectAllCheckbox = document.getElementById('selectAll');
        if (selectAllCheckbox) {
            selectAllCheckbox.checked = false;
        }
        updateSelectionInfo();
    }

    function selectAllPages() {
        // Cette fonction pourrait être étendue pour sélectionner tous les créneaux de toutes les pages
        // Pour l'instant, on sélectionne juste tous ceux de la page actuelle
        selectAll();
    }

    function updateSelectionInfo() {
        const checkboxes = document.querySelectorAll('.slot-checkbox:not([disabled]):checked');
        const count = checkboxes.length;
        const infoDiv = document.getElementById('selectionInfo');
        const countSpan = document.getElementById('selectedCount');
        const deleteSelectedBtn = document.getElementById('deleteSelectedBtn');
        
        // Mettre à jour le message informatif
        if (count > 0) {
            infoDiv.classList.remove('hidden');
            countSpan.textContent = `☑ ${count} créneau(x) sélectionné(s) (page actuelle)`;
        } else {
            infoDiv.classList.add('hidden');
        }
        
        // Activer/désactiver le bouton "Supprimer sélectionnés"
        if (deleteSelectedBtn) {
            if (count > 0) {
                deleteSelectedBtn.disabled = false;
            } else {
                deleteSelectedBtn.disabled = true;
            }
        }
    }

    // Modal pour supprimer les créneaux sélectionnés
    function openDeleteSelectedModal() {
        const checkboxes = document.querySelectorAll('.slot-checkbox:not([disabled]):checked');
        const selectedIds = Array.from(checkboxes).map(cb => cb.value);
        const count = selectedIds.length;
        
        if (count === 0) {
            return;
        }
        
        const modal = document.getElementById('deleteSelectedModal');
        const countSpan = document.getElementById('selectedCountModal');
        const slotIdsContainer = document.getElementById('selectedSlotIdsContainer');
        
        // Mettre à jour le nombre de créneaux sélectionnés
        countSpan.textContent = `${count} créneau(x)`;
        
        // Créer les champs cachés pour chaque ID sélectionné
        slotIdsContainer.innerHTML = '';
        selectedIds.forEach(id => {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = 'slot_ids[]';
            input.value = id;
            slotIdsContainer.appendChild(input);
        });
        
        // Afficher le modal
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        document.body.style.overflow = 'hidden';
    }

    function closeDeleteSelectedModal() {
        const modal = document.getElementById('deleteSelectedModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.body.style.overflow = '';
    }

    // Modal pour supprimer tous les créneaux
    function openDeleteAllModal() {
        const modal = document.getElementById('deleteAllModal');
        modal.classList.remove('hidden');
        modal.classList.add('flex');
        document.body.style.overflow = 'hidden';
        document.getElementById('confirmDeleteInput').value = '';
        document.getElementById('confirmDeleteBtn').disabled = true;
    }

    function closeDeleteAllModal() {
        const modal = document.getElementById('deleteAllModal');
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        document.body.style.overflow = '';
        document.getElementById('confirmDeleteInput').value = '';
    }

    // Validation du champ de confirmation
    document.addEventListener('DOMContentLoaded', function() {
        const confirmInput = document.getElementById('confirmDeleteInput');
        const confirmBtn = document.getElementById('confirmDeleteBtn');
        const deleteAllForm = document.getElementById('deleteAllForm');
        const requiredText = 'oui';

        if (confirmInput && confirmBtn) {
            confirmInput.addEventListener('input', function() {
                if (this.value.trim().toLowerCase() === requiredText) {
                    confirmBtn.disabled = false;
                } else {
                    confirmBtn.disabled = true;
                }
            });

            // Empêcher la soumission si le texte n'est pas correct
            deleteAllForm.addEventListener('submit', function(e) {
                if (confirmInput.value.trim().toLowerCase() !== requiredText) {
                    e.preventDefault();
                    alert('Veuillez taper exactement: ' + requiredText);
                    return false;
                }
            });
        }

        // Fermer les modals en cliquant en dehors
        const deleteAllModal = document.getElementById('deleteAllModal');
        if (deleteAllModal) {
            deleteAllModal.addEventListener('click', function(e) {
                if (e.target === deleteAllModal) {
                    closeDeleteAllModal();
                }
            });
        }

        const deleteSelectedModal = document.getElementById('deleteSelectedModal');
        if (deleteSelectedModal) {
            deleteSelectedModal.addEventListener('click', function(e) {
                if (e.target === deleteSelectedModal) {
                    closeDeleteSelectedModal();
                }
            });
        }

        // Mettre à jour le checkbox "selectAll" quand les checkboxes individuels changent
        const checkboxes = document.querySelectorAll('.slot-checkbox');
        const selectAllCheckbox = document.getElementById('selectAll');
        
        checkboxes.forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                const allCheckboxes = document.querySelectorAll('.slot-checkbox:not([disabled])');
                const checkedCheckboxes = document.querySelectorAll('.slot-checkbox:not([disabled]):checked');
                if (selectAllCheckbox) {
                    selectAllCheckbox.checked = allCheckboxes.length > 0 && checkedCheckboxes.length === allCheckboxes.length;
                }
                updateSelectionInfo();
            });
        });

        // Initialiser l'affichage et l'état du bouton
        updateSelectionInfo();
    });
</script>
@endpush
@endsection