@extends('layout.layoutForm')

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


@section('content')

    <section id="fondForm">
        <form action="{{ route('estimation.appartement.step4') }}" 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>Caractéristiques du bien</h2>
                
                <!-- Vue du bien -->
                <div class="form-group">
                    <div style="width: 100%;">
                        <label for="vueBien">Vue du bien*</label>
                        <div class="select-wrapper">
                            <select name="vueBien" id="vueBien" class="select-form">
                                <option value="" disabled hidden {{ !session()->has('formData.appartement.vueBien') ? 'selected' : '' }}>Choisir une option</option>
                                <option value="vis-à-vis" {{ old('vueBien', session('formData.appartement.vueBien')) == 'vis-à-vis' ? 'selected' : '' }}>Vis-à-vis</option>
                                <option value="sans vis-à-vis" {{ old('vueBien', session('formData.appartement.vueBien')) == 'sans vis-à-vis' ? 'selected' : '' }}>Sans vis-à-vis</option>
                                <option value="dégagé" {{ old('vueBien', session('formData.appartement.vueBien')) == 'dégagé' ? 'selected' : '' }}>Dégagé</option>
                                <option value="exceptionnelle" {{ old('vueBien', session('formData.appartement.vueBien')) == 'exceptionnelle' ? 'selected' : '' }}>Exceptionnelle</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Bruits -->
                <div class="form-group radio-container">
                    <label for="bruit">Bruits*</label> 
                    <div class="radio-between">
                        <input type="radio" id="tres_bruyant" name="bruit" value="très bruyant" class="radio_bruit" 
                               {{ old('bruit', session('formData.appartement.bruit')) == 'très bruyant' ? 'checked' : '' }} required>
                        <label class="radio-label-bruit" for="tres_bruyant">Très bruyant</label>

                        <input type="radio" id="bruyant" name="bruit" value="bruyant" class="radio_bruit" 
                               {{ old('bruit', session('formData.appartement.bruit')) == 'bruyant' ? 'checked' : '' }}>
                        <label class="radio-label-bruit" for="bruyant">Bruyant</label>

                        <input type="radio" id="standard_bruit" name="bruit" value="standard" class="radio_bruit" 
                               {{ old('bruit', session('formData.appartement.bruit')) == 'standard' ? 'checked' : '' }}>
                        <label class="radio-label-bruit" for="standard_bruit">Standard</label>

                        <input type="radio" id="calme" name="bruit" value="calme" class="radio_bruit" 
                               {{ old('bruit', session('formData.appartement.bruit')) == 'calme' ? 'checked' : '' }}>
                        <label class="radio-label-bruit" for="calme">Calme</label>

                        <input type="radio" id="tres_calme" name="bruit" value="très calme" class="radio_bruit" 
                               {{ old('bruit', session('formData.appartement.bruit')) == 'très calme' ? 'checked' : '' }}>
                        <label class="radio-label-bruit" for="tres_calme">Très calme</label>
                    </div>
                </div>

                <!-- Luminosité -->
                <div class="form-group radio-container">
                    <label for="luminosite">Luminosité*</label> 
                    <div class="radio-between">
                        <input type="radio" id="sombre" name="luminosite" value="sombre" class="radio_luminosite" 
                               {{ old('luminosite', session('formData.appartement.luminosite')) == 'sombre' ? 'checked' : '' }} required>
                        <label class="radio-label-luminosite" for="sombre">Sombre</label>

                        <input type="radio" id="peu_clair" name="luminosite" value="peu clair" class="radio_luminosite" 
                               {{ old('luminosite', session('formData.appartement.luminosite')) == 'peu clair' ? 'checked' : '' }}>
                        <label class="radio-label-luminosite" for="peu_clair">Peu clair</label>

                        <input type="radio" id="standard_luminosite" name="luminosite" value="standard" class="radio_luminosite" 
                               {{ old('luminosite', session('formData.appartement.luminosite')) == 'standard' ? 'checked' : '' }}>
                        <label class="radio-label-luminosite" for="standard_luminosite">Standard</label>

                        <input type="radio" id="clair" name="luminosite" value="clair" class="radio_luminosite" 
                               {{ old('luminosite', session('formData.appartement.luminosite')) == 'clair' ? 'checked' : '' }}>
                        <label class="radio-label-luminosite" for="clair">Clair</label>

                        <input type="radio" id="tres_clair" name="luminosite" value="très clair" class="radio_luminosite" 
                               {{ old('luminosite', session('formData.appartement.luminosite')) == 'très clair' ? 'checked' : '' }}>
                        <label class="radio-label-luminosite" for="tres_clair">Très clair</label>
                    </div>
                </div>

                <!-- Expositions -->
                <div class="form-group checkbox-container">
                    <label for="expositions">Expositions*</label>
                    <div class="row checkbox-between">
                        <div class=" col-md-3 col-sm-6 col-12">
                            <input type="checkbox" id="sud" name="expositions[]" value="sud" class="checkbox_exposition" 
                                {{ in_array('sud', old('expositions', session('formData.appartement.expositions', []))) ? 'checked' : '' }}>
                            <label class="checkbox-label-exposition" for="sud">Sud</label>
                        </div>

                        <div class=" col-md-3 col-sm-6 col-12">
                            <input type="checkbox" id="sud_est" name="expositions[]" value="sud-est" class="checkbox_exposition" 
                                {{ in_array('sud-est', old('expositions', session('formData.appartement.expositions', []))) ? 'checked' : '' }}>
                            <label class="checkbox-label-exposition" for="sud_est">Sud-Est</label>
                        </div>

                        <div class=" col-md-3 col-sm-6 col-12">
                            <input type="checkbox" id="est" name="expositions[]" value="est" class="checkbox_exposition" 
                                {{ in_array('est', old('expositions', session('formData.appartement.expositions', []))) ? 'checked' : '' }}>
                            <label class="checkbox-label-exposition" for="est">Est</label>
                        </div>

                        <div class=" col-md-3 col-sm-6 col-12">
                            <input type="checkbox" id="nord_est" name="expositions[]" value="nord-est" class="checkbox_exposition" 
                                {{ in_array('nord-est', old('expositions', session('formData.appartement.expositions', []))) ? 'checked' : '' }}>
                            <label class="checkbox-label-exposition" for="nord_est">Nord-Est</label>
                        </div>

                        <div class=" col-md-3 col-sm-6 col-12">
                            <input type="checkbox" id="nord" name="expositions[]" value="nord" class="checkbox_exposition" 
                                {{ in_array('nord', old('expositions', session('formData.appartement.expositions', []))) ? 'checked' : '' }}>
                            <label class="checkbox-label-exposition" for="nord">Nord</label>
                        </div>

                        <div class=" col-md-3 col-sm-6 col-12">
                            <input type="checkbox" id="nord_ouest" name="expositions[]" value="nord-ouest" class="checkbox_exposition" 
                                {{ in_array('nord-ouest', old('expositions', session('formData.appartement.expositions', []))) ? 'checked' : '' }}>
                            <label class="checkbox-label-exposition" for="nord_ouest">Nord-Ouest</label>
                        </div>

                        <div class=" col-md-3 col-sm-6 col-12">
                            <input type="checkbox" id="ouest" name="expositions[]" value="ouest" class="checkbox_exposition" 
                                {{ in_array('ouest', old('expositions', session('formData.appartement.expositions', []))) ? 'checked' : '' }}>
                            <label class="checkbox-label-exposition" for="ouest">Ouest</label>
                        </div>

                        <div class=" col-md-3 col-sm-6 col-12">
                            <input type="checkbox" id="sud_ouest" name="expositions[]" value="sud-ouest" class="checkbox_exposition" 
                                {{ in_array('sud-ouest', old('expositions', session('formData.appartement.expositions', []))) ? 'checked' : '' }}>
                            <label class="checkbox-label-exposition" for="sud_ouest">Sud-Ouest</label>
                        </div>
                    </div>
                </div>



                <!-- DPE -->
                <div class="form-group select-group">
                    <div style="width: 50%;">
                        <label for="DPE">DPE (performance énergétique)*</label>
                        <div class="select-wrapper">
                            <select name="DPE" id="DPE" class="select-form">
                                <option value="" disabled hidden {{ !session()->has('formData.appartement.DPE') ? 'selected' : '' }}>Choisir une option</option>
                                <option value="Non renseigné" {{ old('DPE', session('formData.appartement.DPE')) == 'Non renseigné' ? 'selected' : '' }} >Non renseigné</option>
                                <option value="A" {{ old('DPE', session('formData.appartement.DPE')) == 'A' ? 'selected' : '' }}>A</option>
                                <option value="B" {{ old('DPE', session('formData.appartement.DPE')) == 'B' ? 'selected' : '' }}>B</option>
                                <option value="C" {{ old('DPE', session('formData.appartement.DPE')) == 'C' ? 'selected' : '' }}>C</option>
                                <option value="D" {{ old('DPE', session('formData.appartement.DPE')) == 'D' ? 'selected' : '' }}>D</option>
                                <option value="E" {{ old('DPE', session('formData.appartement.DPE')) == 'E' ? 'selected' : '' }}>E</option>
                                <option value="F" {{ old('DPE', session('formData.appartement.DPE')) == 'F' ? 'selected' : '' }}>F</option>
                                <option value="G" {{ old('DPE', session('formData.appartement.DPE')) == 'G' ? 'selected' : '' }}>G</option>
                            </select>
                        </div>
                    </div>

                    <!-- Etat d'occupation -->
                    <div style="width: 50%;">
                        <label for="etatOccupation">Etat d'occupation</label>
                        <div class="select-wrapper">
                            <select name="etatOccupation" id="etatOccupation" class="select-form">
                                <option value="" disabled hidden {{ !session()->has('formData.appartement.etatOccupation') ? 'selected' : '' }}>Choisir une option</option>
                                <option value="occupé" {{ old('etatOccupation', session('formData.appartement.etatOccupation')) == 'occupé' ? 'selected' : '' }}>Occupé</option>
                                <option value="libre" {{ old('etatOccupation', session('formData.appartement.etatOccupation')) == 'libre' ? 'selected' : '' }}>Libre</option>
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Etat du bien -->
                <div class="form-group select-group">
                    <div style="width: 50%;">
                        <label for="etatBien">Etat du bien</label>
                        <div class="select-wrapper">
                            <select name="etatBien" id="etatBien" class="select-form">
                                <option value="" disabled hidden {{ !session()->has('formData.appartement.etatBien') ? 'selected' : '' }}>Choisir une option</option>
                                <option value="récent" {{ old('etatBien', session('formData.appartement.etatBien')) == 'récent' ? 'selected' : '' }}>Récent</option>
                                <option value="standard" {{ old('etatBien', session('formData.appartement.etatBien')) == 'standard' ? 'selected' : '' }}>Standard</option>
                                <option value="à rénover" {{ old('etatBien', session('formData.appartement.etatBien')) == 'à rénover' ? 'selected' : '' }}>À rénover</option>
                                <option value="ancien" {{ old('etatBien', session('formData.appartement.etatBien')) == 'ancien' ? 'selected' : '' }}>Ancien</option>
                                <option value="neuf" {{ old('etatBien', session('formData.appartement.etatBien')) == 'neuf' ? 'selected' : '' }}>Neuf</option>
                            </select>
                        </div>
                    </div>

                    <!-- Qualité par rapport aux autres biens de l'immeuble -->
                    <div style="width: 50%;">
                        <label for="qualitéRapport" class="label-small">Qualité par rapport aux autres biens de l'immeuble</label>
                        <div class="select-wrapper">
                            <select name="qualitéRapport" id="qualitéRapport" class="select-form">
                                <option value="" disabled hidden {{ !session()->has('formData.appartement.qualitéRapport') ? 'selected' : '' }}>Choisir une option</option>
                                <option value="inférieur" {{ old('qualitéRapport', session('formData.appartement.qualitéRapport')) == 'inférieur' ? 'selected' : '' }}>Inférieur</option>
                                <option value="comparable" {{ old('qualitéRapport', session('formData.appartement.qualitéRapport')) == 'comparable' ? 'selected' : '' }}>Comparable</option>
                                <option value="supérieur" {{ old('qualitéRapport', session('formData.appartement.qualitéRapport')) == 'supérieur' ? 'selected' : '' }}>Supérieur</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="form-group select-group">
                    <div style="width: 50%;">
                        <label for="cuisine">Cuisine</label>
                        <div class="select-wrapper">
                            <select name="cuisine" id="cuisine" class="select-form">
                                <option value="" disabled hidden {{ !session()->has('formData.maison.cuisine') ? 'selected' : '' }}>Choisir une option</option>
                                <option value="cuisine équipée" {{ old('etatBien', session('formData.maison.cuisine')) == 'cuisine équipée' ? 'selected' : '' }}>Cuisine équipée</option>
                                <option value="cuisine non équipée" {{ old('etatBien', session('formData.maison.cuisine')) == 'cuisine non équipée' ? 'selected' : '' }}>Cuisine non équipée</option>
                            </select>
                        </div>
                    </div>
                    <div style="width: 50%;"></div>
                </div>


                <!-- Boutons de navigation -->
                <div class="buttons-step">
                    <a href="{{ route('estimation.appartement.step3') }}" id="precedent">
                        <img src="{{ asset('images/chevron.png') }}" alt="revenir étape précedente">
                        <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