@extends('layouts.admin-layout')

@section('title', 'Ajouter un Événement')

@section('content')
    <div class="p-6">
        <!-- Page Header -->
        <div class="mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Ajouter un Événement</h1>
            <p class="mt-2 text-gray-600">Créez un nouvel événement dans votre réseau</p>
        </div>

        <div class="max-w-4xl mx-auto">
            <div class="bg-white overflow-hidden shadow-lg sm:rounded-xl border border-gray-200">
                <div class="p-8 text-gray-900">
                    <form action="{{ route('admin.events.store') }}" method="POST">
                        @csrf

                        <!-- Section: Informations de base -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-blue-500">
                                <div class="bg-blue-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-info-circle text-blue-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Informations de base</h2>
                            </div>

                            <div class="mb-6">
                                <label for="title" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                    <i class="fas fa-heading text-blue-600 mr-2"></i>
                                    <span>Titre de l'événement</span>
                                    <span class="ml-1 text-red-500">*</span>
                                </label>
                                <input type="text" name="title" id="title" value="{{ old('title') }}" required
                                    placeholder="Ex: Culte du Dimanche"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base">
                                @error('title')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            <div class="mb-6">
                                <label for="description" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-blue-50 px-4 py-2 rounded-lg border-l-4 border-blue-500">
                                    <i class="fas fa-align-left text-blue-600 mr-2"></i>
                                    <span>Description</span>
                                </label>
                                <textarea name="description" id="description" rows="5"
                                    placeholder="Décrivez l'événement, son objectif, le public cible..."
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 text-base">{{ old('description') }}</textarea>
                                @error('description')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </div>

                        <!-- Section: Date et Heure -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-purple-500">
                                <div class="bg-purple-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-calendar-alt text-purple-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Date et Heure</h2>
                            </div>

                            <div class="grid md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="event_date" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                        <i class="fas fa-calendar-day text-purple-600 mr-2"></i>
                                        <span>Date de l'événement</span>
                                        <span class="ml-1 text-red-500">*</span>
                                    </label>
                                    <input type="date" name="event_date" id="event_date" value="{{ old('event_date') }}" required
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base">
                                    @error('event_date')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>

                                <div>
                                    <label for="event_time" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                        <i class="fas fa-clock text-purple-600 mr-2"></i>
                                        <span>Heure de début</span>
                                        <span class="ml-1 text-red-500">*</span>
                                    </label>
                                    <input type="time" name="event_time" id="event_time" value="{{ old('event_time') }}" required
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base">
                                    @error('event_time')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>

                            <div class="grid md:grid-cols-2 gap-6 mb-6">
                                <div>
                                    <label for="end_time" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                        <i class="fas fa-clock text-purple-600 mr-2"></i>
                                        <span>Heure de fin</span>
                                    </label>
                                    <input type="time" name="end_time" id="end_time" value="{{ old('end_time') }}"
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base">
                                    @error('end_time')
                                        <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                            <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                        </p>
                                    @enderror
                                </div>
                            </div>

                            <div class="mb-6">
                                <label for="end_date" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-purple-50 px-4 py-2 rounded-lg border-l-4 border-purple-500">
                                    <i class="fas fa-calendar-check text-purple-600 mr-2"></i>
                                    <span>Date de fin</span>
                                </label>
                                <input type="date" name="end_date" id="end_date" value="{{ old('end_date') }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-purple-500 focus:ring-2 focus:ring-purple-500 text-base">
                                @error('end_date')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                                <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                    <i class="fas fa-info-circle mr-1"></i>Laissez vide si l'événement se termine le même jour
                                </p>
                            </div>
                        </div>

                        <!-- Section: Récurrence -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-indigo-500">
                                <div class="bg-indigo-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-repeat text-indigo-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Récurrence</h2>
                            </div>

                            <div class="mb-6">
                                <label class="flex items-center cursor-pointer bg-indigo-50 px-4 py-3 rounded-lg border-l-4 border-indigo-500 hover:bg-indigo-100 transition">
                                    <input type="checkbox" name="is_recurring" id="is_recurring" value="1" {{ old('is_recurring') ? 'checked' : '' }}
                                        class="w-5 h-5 text-indigo-600 rounded focus:ring-2 focus:ring-indigo-500 mr-3">
                                    <div class="flex-1">
                                        <span class="text-sm font-bold text-gray-800 flex items-center">
                                            <i class="fas fa-calendar-days text-indigo-600 mr-2"></i>
                                            Cet événement est récurrent
                                        </span>
                                        <p class="text-xs text-gray-600 mt-1">Cochez cette case si l'événement se répète régulièrement</p>
                                    </div>
                                </label>
                            </div>

                            <div id="recurrence-options" class="space-y-6" style="display: none;">
                                <div class="grid md:grid-cols-2 gap-6">
                                    <div>
                                        <label for="recurrence_type" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-indigo-50 px-4 py-2 rounded-lg border-l-4 border-indigo-500">
                                            <i class="fas fa-sync text-indigo-600 mr-2"></i>
                                            <span>Type de récurrence</span>
                                        </label>
                                        <select name="recurrence_type" id="recurrence_type"
                                            class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 text-base">
                                            <option value="">Sélectionner...</option>
                                            <option value="daily" {{ old('recurrence_type') === 'daily' ? 'selected' : '' }}>Quotidienne</option>
                                            <option value="weekly" {{ old('recurrence_type') === 'weekly' ? 'selected' : '' }}>Hebdomadaire</option>
                                            <option value="monthly" {{ old('recurrence_type') === 'monthly' ? 'selected' : '' }}>Mensuelle</option>
                                            <option value="yearly" {{ old('recurrence_type') === 'yearly' ? 'selected' : '' }}>Annuelle</option>
                                        </select>
                                    </div>

                                    <div>
                                        <label for="recurrence_interval" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-indigo-50 px-4 py-2 rounded-lg border-l-4 border-indigo-500">
                                            <i class="fas fa-hashtag text-indigo-600 mr-2"></i>
                                            <span>Intervalle</span>
                                        </label>
                                        <input type="number" name="recurrence_interval" id="recurrence_interval" value="{{ old('recurrence_interval', 1) }}" min="1"
                                            placeholder="Ex: 2 (pour tous les 2 jours/semaines/mois)"
                                            class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 text-base">
                                        <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                            <i class="fas fa-info-circle mr-1"></i>1 = chaque jour/semaine/mois, 2 = tous les 2 jours/semaines/mois, etc.
                                        </p>
                                    </div>
                                </div>

                                <div id="weekly-options" style="display: none;">
                                    <label class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-indigo-50 px-4 py-2 rounded-lg border-l-4 border-indigo-500">
                                        <i class="fas fa-calendar-week text-indigo-600 mr-2"></i>
                                        <span>Jours de la semaine</span>
                                    </label>
                                    <div class="grid grid-cols-7 gap-2">
                                        <label class="flex flex-col items-center cursor-pointer bg-white border-2 border-gray-200 rounded-lg p-3 hover:border-indigo-500 transition">
                                            <input type="checkbox" name="recurrence_days[]" value="0" class="mb-2">
                                            <span class="text-xs font-semibold">Dim</span>
                                        </label>
                                        <label class="flex flex-col items-center cursor-pointer bg-white border-2 border-gray-200 rounded-lg p-3 hover:border-indigo-500 transition">
                                            <input type="checkbox" name="recurrence_days[]" value="1" class="mb-2">
                                            <span class="text-xs font-semibold">Lun</span>
                                        </label>
                                        <label class="flex flex-col items-center cursor-pointer bg-white border-2 border-gray-200 rounded-lg p-3 hover:border-indigo-500 transition">
                                            <input type="checkbox" name="recurrence_days[]" value="2" class="mb-2">
                                            <span class="text-xs font-semibold">Mar</span>
                                        </label>
                                        <label class="flex flex-col items-center cursor-pointer bg-white border-2 border-gray-200 rounded-lg p-3 hover:border-indigo-500 transition">
                                            <input type="checkbox" name="recurrence_days[]" value="3" class="mb-2">
                                            <span class="text-xs font-semibold">Mer</span>
                                        </label>
                                        <label class="flex flex-col items-center cursor-pointer bg-white border-2 border-gray-200 rounded-lg p-3 hover:border-indigo-500 transition">
                                            <input type="checkbox" name="recurrence_days[]" value="4" class="mb-2">
                                            <span class="text-xs font-semibold">Jeu</span>
                                        </label>
                                        <label class="flex flex-col items-center cursor-pointer bg-white border-2 border-gray-200 rounded-lg p-3 hover:border-indigo-500 transition">
                                            <input type="checkbox" name="recurrence_days[]" value="5" class="mb-2">
                                            <span class="text-xs font-semibold">Ven</span>
                                        </label>
                                        <label class="flex flex-col items-center cursor-pointer bg-white border-2 border-gray-200 rounded-lg p-3 hover:border-indigo-500 transition">
                                            <input type="checkbox" name="recurrence_days[]" value="6" class="mb-2">
                                            <span class="text-xs font-semibold">Sam</span>
                                        </label>
                                    </div>
                                </div>

                                <div>
                                    <label for="recurrence_end_date" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-indigo-50 px-4 py-2 rounded-lg border-l-4 border-indigo-500">
                                        <i class="fas fa-calendar-xmark text-indigo-600 mr-2"></i>
                                        <span>Date de fin de récurrence</span>
                                    </label>
                                    <input type="date" name="recurrence_end_date" id="recurrence_end_date" value="{{ old('recurrence_end_date') }}"
                                        class="w-full rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 text-base">
                                    <p class="mt-2 text-xs text-gray-500 italic flex items-center">
                                        <i class="fas fa-info-circle mr-1"></i>Laissez vide pour une récurrence indéfinie
                                    </p>
                                </div>
                            </div>
                        </div>

                        <!-- Section: Localisation -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-green-500">
                                <div class="bg-green-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-map-marker-alt text-green-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Localisation</h2>
                            </div>

                            <div class="mb-6">
                                <label for="location" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-green-50 px-4 py-2 rounded-lg border-l-4 border-green-500">
                                    <i class="fas fa-location-dot text-green-600 mr-2"></i>
                                    <span>Lieu de l'événement</span>
                                </label>
                                <input type="text" name="location" id="location" value="{{ old('location') }}"
                                    placeholder="Ex: Salle principale, Amphithéâtre, En ligne..."
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-2 focus:ring-green-500 text-base">
                                @error('location')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>

                            <div class="mb-6">
                                <label for="church_id" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-green-50 px-4 py-2 rounded-lg border-l-4 border-green-500">
                                    <i class="fas fa-church text-green-600 mr-2"></i>
                                    <span>Église organisatrice</span>
                                    <span class="ml-1 text-red-500">*</span>
                                </label>
                                <select name="church_id" id="church_id" required
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-green-500 focus:ring-2 focus:ring-green-500 text-base">
                                    <option value="">Sélectionner une église</option>
                                    @foreach($churches as $church)
                                        <option value="{{ $church->id }}" {{ old('church_id') == $church->id ? 'selected' : '' }}>
                                            {{ $church->name }}
                                        </option>
                                    @endforeach
                                </select>
                                @error('church_id')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </div>

                        <!-- Section: Paramètres -->
                        <div class="mb-8">
                            <div class="flex items-center mb-6 pb-3 border-b-2 border-orange-500">
                                <div class="bg-orange-100 w-10 h-10 rounded-full flex items-center justify-center mr-3">
                                    <i class="fas fa-cog text-orange-600"></i>
                                </div>
                                <h2 class="text-xl font-bold text-gray-900">Paramètres</h2>
                            </div>

                            <div class="mb-6">
                                <label for="status" class="flex items-center text-sm font-bold text-gray-800 mb-3 bg-orange-50 px-4 py-2 rounded-lg border-l-4 border-orange-500">
                                    <i class="fas fa-toggle-on text-orange-600 mr-2"></i>
                                    <span>Statut de l'événement</span>
                                </label>
                                <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded-lg mb-3">
                                    <div class="flex items-start">
                                        <i class="fas fa-magic text-blue-600 mt-1 mr-3"></i>
                                        <div>
                                            <p class="text-sm font-semibold text-blue-900 mb-1">Statut automatique</p>
                                            <p class="text-xs text-blue-800">Le statut de l'événement est calculé automatiquement en fonction de la date. Vous pouvez uniquement marquer un événement comme "Annulé" si nécessaire.</p>
                                        </div>
                                    </div>
                                </div>
                                <label class="flex items-center cursor-pointer bg-red-50 px-4 py-3 rounded-lg border-l-4 border-red-500 hover:bg-red-100 transition">
                                    <input type="checkbox" name="status" id="status_cancelled" value="cancelled" {{ old('status') === 'cancelled' ? 'checked' : '' }}
                                        class="w-5 h-5 text-red-600 rounded focus:ring-2 focus:ring-red-500 mr-3">
                                    <div class="flex-1">
                                        <span class="text-sm font-bold text-gray-800 flex items-center">
                                            <i class="fas fa-ban text-red-600 mr-2"></i>
                                            Marquer cet événement comme annulé
                                        </span>
                                        <p class="text-xs text-gray-600 mt-1">Cochez uniquement si l'événement est annulé</p>
                                    </div>
                                </label>
                                @error('status')
                                    <p class="mt-2 text-sm text-red-600 flex items-center bg-red-50 px-3 py-2 rounded-lg">
                                        <i class="fas fa-exclamation-circle mr-2"></i>{{ $message }}
                                    </p>
                                @enderror
                            </div>
                        </div>

                        <!-- Boutons d'action -->
                        <div class="flex gap-4 pt-6 border-t">
                            <a href="{{ route('admin.events.index') }}"
                                class="flex-1 px-6 py-3 bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold rounded-lg text-center transition duration-200 flex items-center justify-center">
                                <i class="fas fa-times mr-2"></i>Annuler
                            </a>
                            <button type="submit"
                                class="flex-1 px-6 py-3 bg-gradient-to-r from-green-600 to-green-700 hover:from-green-700 hover:to-green-800 text-white font-bold rounded-lg shadow-lg hover:shadow-xl transition duration-200 flex items-center justify-center">
                                <i class="fas fa-save mr-2"></i>Créer l'événement
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const isRecurringCheckbox = document.getElementById('is_recurring');
            const recurrenceOptions = document.getElementById('recurrence-options');
            const recurrenceType = document.getElementById('recurrence_type');
            const weeklyOptions = document.getElementById('weekly-options');

            // Show/hide recurrence options based on checkbox
            isRecurringCheckbox.addEventListener('change', function() {
                if (this.checked) {
                    recurrenceOptions.style.display = 'block';
                } else {
                    recurrenceOptions.style.display = 'none';
                }
            });

            // Show/hide weekly days based on recurrence type
            recurrenceType.addEventListener('change', function() {
                if (this.value === 'weekly') {
                    weeklyOptions.style.display = 'block';
                } else {
                    weeklyOptions.style.display = 'none';
                }
            });

            // Check on page load if the checkbox is checked (for old input)
            if (isRecurringCheckbox.checked) {
                recurrenceOptions.style.display = 'block';
                if (recurrenceType.value === 'weekly') {
                    weeklyOptions.style.display = 'block';
                }
            }
        });
    </script>
    @endpush
@endsection