@extends('layout.layoutForm')

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

@section('content')

<section id="fondForm">
    <form action="{{ route('estimation.maison.step5') }}" method="POST" class="form-step4">
        @csrf
        <div class="container-form">
            <div class="progress-bar">
                <div class="progress" style="width: {{ ($currentStep / 8) * 100 }}%;"></div>
            </div>
            <h2>Elements supplementaires</h2>
            <div class="row checkbox-between">
                @foreach (['climatisation', 'piscine', 'garage', 'place de parking', 'cuisine d\'été', 'dépendance', 'autre'] as $element)
                    <div class="col-md-3 col-sm-6 col-12">
                        <input type="checkbox" 
                               name="elements_supp[]" 
                               class="checkbox_supplémentaires" 
                               value="{{ $element }}" 
                               id="{{ $element }}"
                               @if(in_array($element, session('formData.maison.elements_supp', []))) checked @endif 
                               @if($element == 'autre') onclick="toggleAutreInput()" @endif>
                        <label for="{{ $element }}" class="checkbox-label-supplémentaires">{{ ucfirst($element) }}</label>
                    </div>
                @endforeach
                <div class="col-md-3 col-sm-6 col-12"></div>
            </div>
            <hr>
            <!-- Div qui contient le champ pour "Autre", elle sera affichée si "Autre" est coché -->
            <div id="autre-input-container" style="display: {{ in_array('autre', session('formData.maison.elements_supp', [])) ? 'block' : 'none' }}">
                <label for="autre-input">Veuillez spécifier :</label>
                <input type="text" 
                       name="autreElement" 
                       id="autre-input" 
                       placeholder="Précisez l'élément supplémentaire" 
                       value="{{ session('formData.maison.autreElement') }}">
            </div>
            <div class="buttons-step">
                <a href="{{ route('estimation.maison.step4') }}" 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