@extends('layout.layoutForm')

@section('title', "Estim'bien - Estimateur de biens immobilier sur Montpellier - step6 estimation appartement ")


@section('content')
<section id="fondForm">
    <form action="{{ route('estimation.appartement.step6') }}" method="POST" class="form-step4">
        @csrf
        <div class="container-form">
            <div class="progress-bar">
                <div class="progress" style="width: {{ ($currentStep / 9) * 100 }}%;"></div>
            </div>
            <h2>La résidence</h2>
            <div class="row select-resi">
                <div class=" col-md-6 col-12">
                    <label for="annee_construction">Année de construction</label>
                    <input type="number" placeholder="AAAA" class="year" min="1000" max="2025" 
                           name="annee_construction" 
                           value="{{ old('annee_construction', session('formData.appartement.annee_construction')) }}" 
                           style="border-radius: 10px !important">
                </div>
                <div class=" col-md-6 col-12">
                    <label for="standing">Standing</label>
                    <div class="select-wrapper">
                        <select name="standing" id="standing" class="select-form">
                            <option value="" disabled {{ !old('standing', session('formData.appartement.standing')) ? 'selected' : '' }}>Choisir une option</option>
                            <option value="standard" {{ (old('standing', session('formData.appartement.standing')) == 'standard') ? 'selected' : '' }}>Standard</option>
                            <option value="élevé" {{ (old('standing', session('formData.appartement.standing')) == 'élevé') ? 'selected' : '' }}>Elevé</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row select-resi">
                <div class=" col-md-6 col-12">
                    <label for="ravalement_de_façade">Ravalement de façade</label>
                    <div class="select-wrapper">
                        <select name="ravalement_de_façade" id="ravalement_de_façade" class="select-form">
                            <option value="" disabled {{ !old('ravalement_de_façade', session('formData.appartement.ravalement_de_façade')) ? 'selected' : '' }}>Choisir une option</option>
                            <option value="récent" {{ (old('ravalement_de_façade', session('formData.appartement.ravalement_de_façade')) == 'récent') ? 'selected' : '' }}>Récent</option>
                            <option value="bon état" {{ (old('ravalement_de_façade', session('formData.appartement.ravalement_de_façade')) == 'bon état') ? 'selected' : '' }}>Bon état</option>
                            <option value="à refaire" {{ (old('ravalement_de_façade', session('formData.appartement.ravalement_de_façade')) == 'à refaire') ? 'selected' : '' }}>A refaire</option>
                        </select>
                    </div>
                </div>
                <div class=" col-md-6 col-12">
                    <label for="toiture">Toiture</label>
                    <div class="select-wrapper">
                        <select name="toiture" id="toiture" class="select-form">
                            <option value="" disabled {{ !old('toiture', session('formData.appartement.toiture')) ? 'selected' : '' }}>Choisir une option</option>
                            <option value="récent" {{ (old('toiture', session('formData.appartement.toiture')) == 'récent') ? 'selected' : '' }}>Récent</option>
                            <option value="bon état" {{ (old('toiture', session('formData.appartement.toiture')) == 'bon état') ? 'selected' : '' }}>Bon état</option>
                            <option value="à refaire" {{ (old('toiture', session('formData.appartement.toiture')) == 'à refaire') ? 'selected' : '' }}>A refaire</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6 col-12">
                    <label for="etat_parties_communes">Etat parties communes</label>
                    <div class="select-wrapper">
                        <select name="etat_parties_communes" id="etat_parties_communes" class="select-form">
                            <option value="" disabled {{ !old('etat_parties_communes', session('formData.appartement.etat_parties_communes')) ? 'selected' : '' }}>Choisir une option</option>
                            <option value="récent" {{ (old('etat_parties_communes', session('formData.appartement.etat_parties_communes')) == 'récent') ? 'selected' : '' }}>Récent</option>
                            <option value="bon état" {{ (old('etat_parties_communes', session('formData.appartement.etat_parties_communes')) == 'bon état') ? 'selected' : '' }}>Bon état</option>
                            <option value="à refaire" {{ (old('etat_parties_communes', session('formData.appartement.etat_parties_communes')) == 'à refaire') ? 'selected' : '' }}>A refaire</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="form-group checkbox-container">
                <label for="">Parties communes</label>
                <div class="checkbox-between communes">
                    <!-- Case à cocher "Ascenseur" -->
                    <input type="checkbox" id="ascenseur" name="parties_communes[]" value="ascenseur" class="checkbox_parties_communes" 
                        {{ in_array('ascenseur', old('parties_communes', session('formData.appartement.parties_communes', []))) ? 'checked' : '' }}>
                    <label class="checkbox-label-parties-communes" for="ascenseur">Ascenseur</label>

                    <!-- Case à cocher "Jardins communs" -->
                    <input type="checkbox" id="jardins_communs" name="parties_communes[]" value="jardins communs" class="checkbox_parties_communes" 
                        {{ in_array('jardins communs', old('parties_communes', session('formData.appartement.parties_communes', []))) ? 'checked' : '' }}>
                    <label class="checkbox-label-parties-communes" for="jardins_communs">Jardins communs</label>

                    <!-- Case à cocher "Piscine" -->
                    <input type="checkbox" id="piscine" name="parties_communes[]" value="piscine" class="checkbox_parties_communes" 
                        {{ in_array('piscine', old('parties_communes', session('formData.appartement.parties_communes', []))) ? 'checked' : '' }}>
                    <label class="checkbox-label-parties-communes" for="piscine">Piscine</label>

                    <!-- Case à cocher "Piscine" -->
                    <input type="checkbox" id="velo" name="parties_communes[]" value="local à vélo" class="checkbox_parties_communes" 
                        {{ in_array('local à vélo', old('parties_communes', session('formData.appartement.parties_communes', []))) ? 'checked' : '' }}>
                    <label class="checkbox-label-parties-communes" for="velo">Local à vélo</label>

                    <!-- Case à cocher "Autre" -->
                    <input type="checkbox" id="autre_checkbox" name="parties_communes[]" value="" class="checkbox_parties_communes">
                    <label class="checkbox-label-parties-communes" for="autre_checkbox">Autre</label>
                </div>
                <!-- Input texte pour "Autre", masqué par défaut -->
                <input type="text" id="autre_input" placeholder="Précisez..." class="hidden-input" style="display: none;">
            </div>
            <div class="form-group radio-container">
                <label for="commodités">Proximité commodités et transport</label>
                <div class="radio-between">
                    <input type="radio" id="commodités_proche" name="commodités" value="proche" class="radio_comm" 
                        {{ old('commodités', session('formData.appartement.commodités')) == 'proche' ? 'checked' : '' }}>
                    <label class="radio-label-commodités" for="commodités_proche">Proche</label>

                    <input type="radio" id="commodités_intermédiaire" name="commodités" value="intermédiaire" class="radio_comm" 
                        {{ old('commodités', session('formData.appartement.commodités')) == 'intermédiaire' ? 'checked' : '' }}>
                    <label class="radio-label-commodités" for="commodités_intermédiaire">Intermédiaire</label>

                    <input type="radio" id="commodités_éloigné" name="commodités" value="éloigné" class="radio_comm" 
                        {{ old('commodités', session('formData.appartement.commodités')) == 'éloigné' ? 'checked' : '' }}>
                    <label class="radio-label-commodités" for="commodités_éloigné">Éloigné</label>
                </div>
            </div>
            <!-- Boutons de navigation -->
            <div class="buttons-step">
                <a href="{{ route('estimation.appartement.step5') }}" id="precedent">
                    <img src="{{ asset('images/chevron.png') }}" alt="revenir étape précédente">
                    <p>Précédent</p>
                </a>
                <button type="submit" id="suivant">
                    <p>Étape suivante</p>
                    <img src="{{ asset('images/chevron-right.png') }}" alt="étape suivante">
                </button>
            </div>
        </div>
    </form>
</section>
@endsection

@push('scripts')
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const autreCheckbox = document.getElementById('autre_checkbox');
        const autreInput = document.getElementById('autre_input');

        // Quand la case "Autre" est cochée/décochée
        autreCheckbox.addEventListener('change', function () {
            if (this.checked) {
                autreInput.style.display = 'inline-block'; // Afficher l'input
                autreInput.required = true; // Rendre le champ requis
            } else {
                autreInput.style.display = 'none'; // Masquer l'input
                autreInput.value = ''; // Réinitialiser l'input
                autreInput.required = false; // Supprimer la contrainte "requis"
                this.value = ''; // Réinitialiser la valeur de la checkbox
            }
        });

        // Quand on saisit du texte dans l'input
        autreInput.addEventListener('input', function () {
            autreCheckbox.value = this.value; // Mettre à jour la valeur de la checkbox
        });
    });
</script>
@endpush