@extends('layout.layoutForm')

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


@section('content')
    <section id="fondForm">
    <form action="{{ route('estimation.maison.step3') }}" method="POST" class="form-step3">
            @csrf
            <div class="container-form">
                <div class="progress-bar">
                    <div class="progress" style="width: {{ ($currentStep / 8) * 100 }}%;"></div>
                </div>
                <h2>Caractéristiques du bien</h2>
                <div class="form-group row">
                    <div class="col-12">
                        <label for="typeMaison">Type de bien*</label>
                        <div class="select-wrapper">
                            <select name="typeMaison" id="typeMaison" class="select-form" onchange="toggleAutreInput()">
                                <option value="" disabled hidden {{ !session()->has('formData.maison.typeMaison') ? 'selected' : '' }}>Choisir une option</option>
                                <option value="Maison" {{ old('typeMaison', session('formData.maison.typeMaison')) == 'Maison' ? 'selected' : '' }}>Maison</option>
                                <option value="Mas" {{ old('typeMaison', session('formData.maison.typeMaison')) == 'Mas' ? 'selected' : '' }}>Mas</option>
                                <option value="Villa" {{ old('typeMaison', session('formData.maison.typeMaison')) == 'Villa' ? 'selected' : '' }}>Villa</option>
                                <option value="Maison individuelle" {{ old('typeMaison', session('formData.maison.typeMaison')) == 'Maison individuelle' ? 'selected' : '' }}>Maison individuelle</option>
                                <option value="Maison mitoyenne" {{ old('typeMaison', session('formData.maison.typeMaison')) == 'Maison mitoyenne' ? 'selected' : '' }}>Maison mitoyenne</option>
                                <option value="Maison en copropriété" {{ old('typeMaison', session('formData.maison.typeMaison')) == 'Maison en copropriété' ? 'selected' : '' }}>Maison en copropriété</option>
                                <option value="Maison de ville" {{ old('typeMaison', session('formData.maison.typeMaison')) == 'Maison de ville' ? 'selected' : '' }}>Maison de ville</option>
                                <option value="autre" id="autre" {{ old('typeMaison', session('formData.maison.typeMaison')) == 'autre' ? 'selected' : '' }}>Autre (à remplir)</option>
                            </select>
                        </div>

                        <!-- Champ de saisie pour "autre" -->
                        <div id="autre-input-container" style="{{ session('formData.maison.typeMaison') == 'autre' ? '' : 'display:none;' }}">
                            <label for="autre-input">Veuillez spécifier :</label>
                            <input type="text" name="autreType" id="autre-input" placeholder="Entrez votre type de bien" value="{{ session('formData.maison.autreTypeMaison') ?? '' }}" />
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <div class="col-md-4 col-sm-6 col-12 tiers-div">
                        <label for="" class="info">Surface Habitable*</label>
                        <div class="formM2">
                            <div class="inputM2">
                                <input type="number" name="surfaceCarrez" value="{{ session('formData.maison.surfaceCarrez') ?? '' }}">
                                <p>m²</p>
                            </div>
                            <div class="number-buttons">
                                <button class="number-button" data-action="add" type="button">
                                    <img src="{{ asset('images/add-white.png') }}" alt="bouton plus">
                                </button>
                                <button class="number-button" data-action="subtract" type="button">
                                    <img src="{{ asset('images/remove-white.png') }}" alt="bouton moins">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-12 tiers-div">
                        <label for="">Nb de pièces*</label>
                        <div class="formM2">
                            <div class="input-number">
                                <input type="number" name="nbPieces" value="{{ session('formData.maison.nbPieces') ?? '' }}">
                            </div>
                            <div class="number-buttons">
                                <button class="number-button" data-action="add" type="button">
                                    <img src="{{ asset('images/add-white.png') }}" alt="bouton plus">
                                </button>
                                <button class="number-button" data-action="subtract" type="button">
                                    <img src="{{ asset('images/remove-white.png') }}" alt="bouton moins">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-12 tiers-div">
                        <label for="">Nb de chambres*</label>
                        <div class="formM2">
                            <div class="input-number">
                                <input type="number" name="nbChambres" value="{{ session('formData.maison.nbChambres') ?? '' }}">
                            </div>
                            <div class="number-buttons">
                                <button class="number-button" data-action="add" type="button">
                                    <img src="{{ asset('images/add-white.png') }}" alt="bouton plus">
                                </button>
                                <button class="number-button" data-action="subtract" type="button">
                                    <img src="{{ asset('images/remove-white.png') }}" alt="bouton moins">
                                </button>
                            </div>
                        </div>
                    </div>
                    
                </div>
                <div class="form-group row">
                    
                    <div class="col-md-4 col-sm-6 col-12 tiers-div">
                        <label for="">Nb de Salles de bain*</label>
                        <div class="formM2">
                            <div class="input-number">
                                <input type="number" name="nbSdb" value="{{ session('formData.maison.nbSdb') ?? '' }}">
                            </div>
                            <div class="number-buttons">
                                <button class="number-button" data-action="add" type="button">
                                    <img src="{{ asset('images/add-white.png') }}" alt="bouton plus">
                                </button>
                                <button class="number-button" data-action="subtract" type="button">
                                    <img src="{{ asset('images/remove-white.png') }}" alt="bouton moins">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-12 tiers-div">
                        <label for="">Nb d'étages du bien*</label>
                        <div class="formM2">
                            <div class="input-number">
                                <input type="number" name="etageBien" value="{{ session('formData.maison.etageBien') ?? '' }}">
                            </div>
                            <div class="number-buttons">
                                <button class="number-button" data-action="add" type="button">
                                    <img src="{{ asset('images/add-white.png') }}" alt="bouton plus">
                                </button>
                                <button class="number-button" data-action="subtract" type="button">
                                    <img src="{{ asset('images/remove-white.png') }}" alt="bouton moins">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-6 col-12 tiers-div"></div>
                </div>
                
                <div class="buttons-step">
                    <a href="{{ route('estimation.step2') }}" id="precedent">
                        <img src="{{ asset('images/chevron.png') }}" alt="revenir étpae précédente">
                        <p>Précédent</p>
                    </a>
                    <button type="submit" id="suivant">
                        <p> Etape suivant</p>
                        <img src="{{ asset('images/chevron-right.png') }}" alt="étape suivante">
                    </button>
                </div>
            </div>
        </form>
    </section>
@endsection