@if (!isset($event) || (isset($event) && $event->has_civility))
    <div class="form-group">
        <label class="col-form-label">Civilité : <span class="asterisk">*</span></label>
        <div class="form-check">
            {{-- <p> {{ $user->civility }}</p>
        <p> {{ $user->civility == 'Mme' }} -
            {{ $user->civility == 'Mme' ? 'checked' : '' }}</p>
        <p> {{ $user->civility == 'Mr' }} -
            {{ $user->civility == 'Mr' ? 'checked' : '' }}</p> --}}

            {{-- <input value="Mme" {{ old('civility', $user->civility == 'Mme' ? 'checked' : '') }} class="form-check-input"
            type="radio" name="civility" id="mme" required> --}}

            <input value="Mme"
                {{ old('civility') == 'Mme' || (isset($user) && $user->civility == 'Mme') ? 'checked' : '' }}
                class="form-check-input" type="radio" name="civility" id="mme" required>


            <label class="form-check-label" for="mme">
                Mme
            </label>
        </div>
        <div class="form-check">
            {{-- <input value="Mr" {{ old('civility', $user->civility == 'Mr' ? 'checked' : '') }} class="form-check-input"
            type="radio" name="civility" id="mr" required> --}}

            <input value="Mr"
                {{ old('civility') == 'Mr' || (isset($user) && $user->civility == 'Mr') ? 'checked' : '' }}
                class="form-check-input" type="radio" name="civility" id="mr" required>


            <label class="form-check-label" for="mr">
                Mr
            </label>
            <div class="invalid-feedback">La civilité est obligatoire
            </div>
        </div>
    </div>
@endif

<div class="row">
    <div class="col-lg-6 col-md-6">
        <div class="form-group">
            <label class="col-form-label">Prénom : <span class="asterisk">*</span></label>
            <input type="text" value="{{ old('firstname', isset($user) ? $user->firstname : '') }}"
                class="form-control" name="firstname" id="firstname" autocomplete="off" required>

            <div class="invalid-feedback">Le prénom est obligatoire
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6">
        <div class="form-group">
            <label class="col-form-label">Nom : <span class="asterisk">*</span></label>
            <input type="text" value="{{ old('name', $user->name ?? '') }}" class="form-control" name="name"
                id="name" autocomplete="off" required>
            <div class="invalid-feedback">Le nom est obligatoire
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-lg-6 col-md-6">
        <div class="form-group group-img">
            <label class="col-form-label">Email : <span class="asterisk">*</span></label>
            <div class="group-img">
                <i class="feather-mail"></i>
                <input type="text" value="{{ old('email', $user->email ?? request('email')) }}" class="form-control"
                    name="email" id="email" autocomplete="off" required>
                <div class="invalid-feedback">L'email est obligatoire
                </div>
                @error('email')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>
    <div class="col-lg-6 col-md-6">
        <div class="form-group group-img">
            <label class="col-form-label">Téléphone : <span class="asterisk">*</span></label>
            <div class="group-img">
                <i class="feather-phone"></i>
                <input type="text" value="{{ old('phone', $user->phone ?? '') }}" class="form-control" name="phone"
                    id="phone" autocomplete="off" required>
                <div class="invalid-feedback">Le téléphone est obligatoire
                </div>
                @error('phone')
                    <div class="text-danger">{{ $message }}</div>
                @enderror
            </div>
        </div>
    </div>
</div>

@if (!isset($event) || (isset($event) && ($event->has_establishment || $event->has_fonction)))
    <div class="row">
        @if ($event->has_establishment)
            <div class="col-lg-6 col-md-6">
                <div class="form-group">
                    <label class="col-form-label">Organisme : <span class="asterisk">*</span></label>
                    <input type="text" value="{{ old('establishment', isset($user) ? $user->establishment : '') }}"
                        class="form-control" name="establishment" id="establishment" autocomplete="off" required>
                    <div class="invalid-feedback">L'organisme est obligatoire
                    </div>
                </div>
            </div>
        @endif
        @if ($event->has_fonction)
            <div class="col-lg-6 col-md-6">
                <div class="form-group">
                    <label class="col-form-label">Fonction : </label>
                    <input type="text" value="{{ old('fonction', $user->fonction ?? '') }}" class="form-control"
                        name="fonction" id="fonction" autocomplete="off">
                </div>
            </div>
        @endif
    </div>
@endif

@if (!isset($event) || (isset($event) && $event->has_domain))
    <div class="form-group">
        <label class="col-form-label">Domaine d'activité : <span class="asterisk">*</span></label>
        <div class="form-group">
            <select id="domaine" name="domain" class="form-select" required>
                <option value="">Sélectionner un domaine</option>
                @php $domainMatch = false; @endphp
                @foreach ($domaines as $domaine)
                    <option value="{{ $domaine->name }}"
                        @if (isset($user) && $user->domain == $domaine->name) selected
        @php 
        $domainMatch = true; 
        @endphp @endif>
                        {{ $domaine->name }}
                    </option>
                @endforeach
                <option value="Autre domaine" {{ isset($user) && $user->domain && !$domainMatch ? 'selected' : '' }}>
                    Autre domaine
                </option>
            </select>
        </div>
    </div>
@endif

@if (!isset($event) || (isset($event) && $event->has_domain))
    <div class="form-group" id="row-autre-domaine"
        style="display: {{ isset($user) && $user->domain && !$domainMatch ? 'block' : 'none' }};">
        <label for="autre-domaine" class="col-form-label">Autre
            domaine
            d'activité : <span class="asterisk">*</span></label>
        <div class="form-group">
            <input type="text" id="autre-domaine" name="other_domain" class="form-control"
                placeholder="Précisez un autre domaine"
                value="{{ isset($user) && $user->domain && !$domainMatch ? $user->specialty : '' }}" required>
        </div>
    </div>
@endif

@if (!isset($event) || (isset($event) && $event->has_speciality))
    <div class="form-group" id="row-speciality" style="display: none;">
        <label for="speciality" class="col-sm-5 col-form-label">Spécialité :
            <span class="asterisk">*</span></label>
        <div class="form-group">
            <select id="speciality" name="specialty" class="form-select" required>
                <option value="">Sélectionner une spécialité
                </option>
                @if (isset($user->domain) &&
                        $domaines->firstWhere('name', $user->domain) &&
                        $domaines->firstWhere('name', $user->domain)->specialities->isNotEmpty())
                    @foreach ($domaines->firstWhere('name', $user->domain)->specialities as $speciality)
                        <option value="{{ $speciality->name }}"
                            {{ isset($user->specialty) && $user->specialty == $speciality->name ? 'selected' : '' }}>
                            {{ $speciality->name }}
                        </option>
                    @endforeach
                @endif
                <option value="Autre" {{ isset($user->specialty) && $user->specialty == 'Autre' ? 'selected' : '' }}>
                    Autre
                </option>
            </select>
        </div>
    </div>
@endif

@if (!isset($event) || (isset($event) && $event->has_speciality))
    <div class="form-group" id="row-autre-specialite" style="display: none;">
        <label for="autre-specialite" class="col-sm-5 col-form-label">Autre
            Spécialité : <span class="asterisk">*</span></label>
        <div class="form-group">
            <input type="text" id="autre-specialite" name="other_specialty" class="form-control"
                placeholder="Précisez une autre spécialité"
                value="{{ isset($user->specialty) ? $user->specialty : '' }}" required>
        </div>
    </div>
@endif

@if (!isset($event) || (isset($event) && $event->has_mode))
    <div id="exercise-modes" style="display: none;">
        <div class="form-group">
            <label class="col-sm-5 col-form-label">Mode d'exercice :
                <span class="asterisk">*</span></label>
            <div class="col-sm-7">
                @php
                    $modeChecked = false; // Variable pour vérifier si un mode est déjà sélectionné
                @endphp
                @foreach ($modes as $mode)
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="mode" id="mode_{{ $mode->id }}"
                            value="{{ $mode->name }}"
                            {{ isset($user) && $user->mode == $mode->name ? 'checked' : '' }}>
                        <label class="form-check-label" for="mode_{{ $mode->id }}">
                            {{ $mode->name }}
                        </label>
                    </div>
                    @php
                        if (isset($user) && $user->mode === $mode->name) {
                            $modeChecked = true; // Si un mode correspond à $user->mode, on le note
                        }
                    @endphp
                @endforeach

                <div class="form-check">
                    <input class="form-check-input" type="radio" name="mode" id="mode_autre" value="Autre"
                        {{ isset($user) && (!$modeChecked && $user->mode) ? 'checked' : '' }}>
                    <label class="form-check-label" for="mode_autre">
                        Autre
                    </label>
                </div>
            </div>
        </div>
        <div class="form-group" id="row-autre-mode" style="display: none;">
            <label for="autre-mode" class="col-sm-5 col-form-label">Autre mode
                d'exercice : <span class="asterisk">*</span></label>
            <div class="col-sm-7">
                <input type="text" id="autre-mode" name="other_mode" class="form-control"
                    placeholder="Précisez un autre mode"
                    value="{{ !$modeChecked && isset($user) ? $user->mode : '' }}">
            </div>
        </div>
    </div>
@endif

<script>
    // Récupérer les spécialités sélectionnées
    const userSpecialityName = "{!! $user->specialty ?? '' !!}";
    const data = @json($domaines);
    console.log(data);

    const userDomainName = "{!! $user->domain ?? '' !!}";
    // Fonction pour mettre à jour les champs d'affichage en fonction du domaine
    function updateSpecialityDropdown(domaineName) {
        console.log(domaineName, userDomainName);
        const specialitySelect = document.getElementById('speciality');
        const rowSpeciality = document.getElementById('row-speciality');
        const rowAutreDomaine = document.getElementById('row-autre-domaine');
        const rowAutreSpecialite = document.getElementById('row-autre-specialite');
        const inputAutreDomaine = document.getElementById('autre-domaine');
        const inputAutreSpecialite = document.getElementById('autre-specialite');

        specialitySelect.innerHTML = '<option value="">Sélectionner une spécialité</option>'; // Réinitialiser
        rowSpeciality.style.display = 'none'; // Cacher par défaut
        rowAutreDomaine.style.display = 'none'; // Cacher le champ "autre domaine"
        rowAutreSpecialite.style.display = 'none'; // Cacher le champ "autre spécialité"

        inputAutreDomaine.disabled = true; // Désactiver par défaut
        inputAutreSpecialite.disabled = true; // Désactiver par défaut

        if (domaineName === "Autre domaine" || !data.find(domaine => domaine.name === domaineName)) {
            rowAutreDomaine.style.display = 'block'; // Afficher "autre domaine"
            inputAutreDomaine.disabled = false; // Activer le champ "autre domaine"
            specialitySelect.disabled = true;
        } else if (domaineName) {
            specialitySelect.disabled = false;
            const selectedDomaine = data.find(domaine => domaine.name === domaineName);
            if (selectedDomaine && selectedDomaine.specialities.length > 0) {
                rowSpeciality.style.display = 'block'; // Afficher les spécialités si elles existent
                let flag = true;
                selectedDomaine.specialities.forEach(speciality => {
                    // console.log(speciality.name + ' - ' + userSpecialityName);
                    const option = document.createElement('option');
                    option.value = speciality.name;
                    option.textContent = speciality.name;
                    if (domaineName === userDomainName && speciality.name === userSpecialityName) {
                        option.selected = true;
                        flag = false;
                    }
                    specialitySelect.appendChild(option);
                });
                const autreOption = document.createElement('option');
                autreOption.value = "Autre";
                autreOption.textContent = "Autre";
                if (domaineName === userDomainName && (flag || userSpecialityName === "Autre")) {
                    autreOption.selected = true;
                    rowAutreSpecialite.style.display = 'block';
                    inputAutreSpecialite.disabled = false; // Activer le champ "autre spécialité"
                }
                specialitySelect.appendChild(autreOption);
            } else {
                specialitySelect.disabled = true;
            }
        }
    }

    // Écouter les changements sur la liste déroulante du domaine
    document.getElementById('domaine').addEventListener('change', function() {
        updateSpecialityDropdown(this.value);
        toggleExerciseModes();
    });

    // Écouter les changements sur la liste déroulante des spécialités
    document.getElementById('speciality').addEventListener('change', function() {
        const rowAutreSpecialite = document.getElementById('row-autre-specialite');
        const inputAutreSpecialite = document.getElementById('autre-specialite');

        if (this.value === "Autre") {
            rowAutreSpecialite.style.display = 'block';
            inputAutreSpecialite.disabled = false; // Activer le champ "autre spécialité"
            inputAutreSpecialite.value = '';
        } else {
            rowAutreSpecialite.style.display = 'none';
            inputAutreSpecialite.disabled = true; // Désactiver le champ "autre spécialité"
        }
    });

    // Initialiser l'affichage selon la valeur du domaine et de la spécialité pré-sélectionnée
    @if (isset($user))
        if ("{{ $user->domain }}") {
            updateSpecialityDropdown("{{ $user->domain }}");
        }
    @endif

    @if (isset($user))
        if ("{{ $user->specialty }}" === "Autre") {
            document.getElementById('row-autre-specialite').style.display = 'block';
            document.getElementById('autre-specialite').disabled = false;
        }
    @endif

    function toggleExerciseModes() {
        const domain = document.getElementById('domaine').value;
        console.log('domain : ' + domain);
        const exerciseModesDiv = document.getElementById('exercise-modes');
        exerciseModesDiv.style.display = domain === 'Médecine' ? 'block' : 'none';

        if (domain === 'Médecine') {
            document.querySelectorAll('input[name="mode"]').forEach((element) => {
                element.disabled = false; // Activer les modes d'exercice
            });
        } else {
            document.querySelectorAll('input[name="mode"]').forEach((element) => {
                element.disabled = true; // Activer les modes d'exercice
            });
        }

        // Afficher le champ "Autre mode" si "Autre" est déjà sélectionné
        const autreModeRow = document.getElementById('row-autre-mode');
        const isOtherSelected = document.querySelector('input[name="mode"]:checked')?.value === 'Autre';
        autreModeRow.style.display = isOtherSelected && domain === 'Médecine' ? 'block' : 'none';

    }

    // Appeler la fonction au chargement de la page pour gérer la pré-sélection
    document.addEventListener('DOMContentLoaded', function() {
        toggleExerciseModes();
    });

    // Afficher le champ "Autre mode" si "Autre" est sélectionné
    document.querySelectorAll('input[name="mode"]').forEach((element) => {
        element.addEventListener('change', function() {
            const autreModeRow = document.getElementById('row-autre-mode');
            autreModeRow.style.display = this.value === 'Autre' ? 'block' : 'none';
        });
    });
</script>

<div class="row">
    @if (!isset($event) || (isset($event) && $event->has_city))
        <div class="col-lg-6 col-md-6">
            <div class="form-group">
                <label class="col-form-label">Ville : </label>
                <input type="text" value="{{ old('city', isset($user) ? $user->city : '') }}"
                    class="form-control" name="city" id="city" autocomplete="off">
                <div class="invalid-feedback">La ville est obligatoire
                </div>
            </div>
        </div>
    @endif
</div>

@if (!isset($event) || (isset($event) && ($event->has_country || $event->has_region)))
    <div class="row">
        <div class="col-lg-6 col-md-6">
            <div class="form-group">
                <label class="col-form-label">Pays : <span class="asterisk">*</span></label>
                <div class="search-input line">
                    <div class="form-group">
                        <select class="form-control form-select select country-select" name="country" id="country"
                            required>
                            <option value="">Non spécifié</option>
                            @foreach ($countries as $country)
                                <option
                                    {{ old('country', isset($user) && $user->country == $country ? 'selected' : '') }}
                                    value="{{ $country }}">
                                    {{ $country }}
                                </option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">Le pays est obligatoire
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-6">
            <div class="form-group">
                <label class="col-form-label"id="gouvernorat-label">Gouvernorat :
                    <span class="asterisk">*</span></label>
                <label class="col-form-label" id="region-label" style="display:none">Région
                    :</label>
                <div class="search-input line">
                    <div class="form-group">
                        <input disabled style="display:none" type="text"
                            value="{{ old('gouvernorat', isset($user) ? $user->gouvernorat : '') }}"
                            class="form-control" name="gouvernorat" id="region" autocomplete="off">
                        <select class="form-control form-select select gouvernorat-select" name="gouvernorat"
                            id="gouvernorat" required>
                            <option value="">Non spécifié</option>
                            @foreach ($gouvernorats as $gouvernorat)
                                <option
                                    {{ old('gouvernorat', isset($user) && $user->gouvernorat == $gouvernorat ? 'selected' : '') }}
                                    value="{{ $gouvernorat }}">
                                    {{ $gouvernorat }}
                                </option>
                            @endforeach
                        </select>
                        <div class="invalid-feedback">Le gouvernorat est obligatoire
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif