@extends('layouts.app')

@section('content')

<link rel="stylesheet" href="{{ asset('css/form.css') }}">

<div class="container centered">

    <h1>Formulaire d'inscription à la FCPE - Coordo</h1>

    <h3>ATTENTION A BIEN REMPLIR CE FORMULAIRE ET A RENTRER LE BON MOIS DE RENDEZ-VOUS.</h3>

    @if ($errors->any())
        <div style="color: red; text-align: center;">
            <ul>
                @foreach ($errors->all() as $error)
                    <li><p>Tous les champs obligatoires n'ont pas été remplis.</p></li>
                @endforeach
            </ul>
        </div>
    @endif

    @if (session('success'))
        <div style="color: green; text-align: center;">
            {{ session('success') }}
        </div>
    @endif

    <form method="POST" action="{{ route('creer_rendezvous.store') }}">
        @csrf

        <div class="form-group">
            <label for="civilite">Civilité :</label>
            <select id="civilite" name="civilite" required>
                <option value="">Choisissez une civilité</option>
                <option value="Mr" {{ old('civilite') == 'Mr' ? 'selected' : '' }}>Mr</option>
                <option value="Mme" {{ old('civilite') == 'Mme' ? 'selected' : '' }}>Mme</option>
            </select>
        </div>
        <div class="form-group">
            <label for="nom">Nom du parent :</label>
            <input type="text" id="nom" name="nom" value="{{ old('nom') }}" required>
        </div>

        <div class="form-group">
            <label for="prenom">Prénom du parent :</label>
            <input type="text" id="prenom" name="prenom" value="{{ old('prenom') }}" required>
        </div>

        <div class="form-group">
            <label for="email">Email du parent :</label>
            <input type="email" id="email" name="email" value="{{ old('email') }}" required>
        </div>
        <div class="form-group">
            <label for="telephone">Téléphone du parent :</label>
            <input type="text" id="telephone" name="telephone" value="{{ old('telephone') }}" required>
        </div>

        <div class="form-group">
            <label for="lycee">Lycée :</label>
            <select id="lycee" name="lycee" required>
                <option value="">Choisissez un lycée</option>

                @foreach($lycees as $lycee)
                    <option value="{{ $lycee->id }}" {{ old('lycee') == $lycee->id ? 'selected' : '' }}>
                        {{ $lycee->nom }}
                    </option>
                @endforeach
            </select>
        </div>

        <div class="form-group">
            <label for="date">Date du rendez-vous :</label>
            <select id="date" name="date" required>
                <option value="">Choisissez d’abord un lycée</option>
            </select>
        </div>

        <div class="form-group">
            <label for="heure">Heure du rendez-vous :</label>
            <select id="heure" name="heure" required>
                <option value="">Choisissez d’abord une date</option>
            </select>
        </div>

        <button type="submit">Créer le rendez-vous</button>
    </form>

</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const lyceeSelect = document.getElementById('lycee');
    const dateSelect = document.getElementById('date');
    const heureSelect = document.getElementById('heure');

    const oldDate = "{{ old('date') }}";
    const oldHeure = "{{ old('heure') }}";

    function chargerDates() {
        const lyceeId = lyceeSelect.value;

        dateSelect.innerHTML = '<option value="">Chargement...</option>';
        heureSelect.innerHTML = '<option value="">Choisissez d’abord une date</option>';

        if (!lyceeId) {
            dateSelect.innerHTML = '<option value="">Choisissez d’abord un lycée</option>';
            return;
        }

        fetch(`{{ route('creer_rendezvous.datesDisponibles') }}?lycee_id=${lyceeId}`)
            .then(response => response.json())
            .then(dates => {
                dateSelect.innerHTML = '';

                if (dates.length === 0) {
                    dateSelect.innerHTML = '<option value="">Aucune date disponible</option>';
                    heureSelect.innerHTML = '<option value="">Aucun horaire disponible</option>';
                    return;
                }

                dateSelect.innerHTML = '<option value="">Choisissez une date</option>';

                dates.forEach(date => {
                    const option = document.createElement('option');
                    option.value = date;

                    const dateObj = new Date(date);
                    option.textContent = dateObj.toLocaleDateString('fr-FR');

                    if (date === oldDate) {
                        option.selected = true;
                    }

                    dateSelect.appendChild(option);
                });

                if (dateSelect.value) {
                    chargerHoraires();
                }
            })
            .catch(error => {
                console.error(error);
                dateSelect.innerHTML = '<option value="">Erreur de chargement</option>';
            });
    }

    function chargerHoraires() {
        const lyceeId = lyceeSelect.value;
        const date = dateSelect.value;

        heureSelect.innerHTML = '<option value="">Chargement...</option>';

        if (!lyceeId || !date) {
            heureSelect.innerHTML = '<option value="">Choisissez d’abord une date</option>';
            return;
        }

        fetch(`{{ route('creer_rendezvous.heuresDisponibles') }}?lycee_id=${lyceeId}&date=${date}`)
            .then(response => response.json())
            .then(heures => {
                heureSelect.innerHTML = '';

                if (heures.length === 0) {
                    heureSelect.innerHTML = '<option value="">Aucun horaire disponible</option>';
                    return;
                }

                heureSelect.innerHTML = '<option value="">Choisissez un horaire</option>';

                heures.forEach(heure => {
                    const option = document.createElement('option');
                    option.value = heure;
                    option.textContent = heure;

                    if (heure === oldHeure) {
                        option.selected = true;
                    }

                    heureSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error(error);
                heureSelect.innerHTML = '<option value="">Erreur de chargement</option>';
            });
    }

    lyceeSelect.addEventListener('change', chargerDates);
    dateSelect.addEventListener('change', chargerHoraires);

    if (lyceeSelect.value) {
        chargerDates();
    }
});
</script>

@endsection