@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.appartement.step5') }}" 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>Lots supplémentaires</h2>
            <div class="form-group">
                <div class="checkbox-between lots">
                    <!-- Bouton "Places de parking" -->
                    <input type="checkbox" id="parking" value="parking" class="checkbox_option lot_supp_check" onchange="toggleNumberInput('parking')" 
                        {{ session('formData.appartement.parking_count') ? 'checked' : '' }}>
                    <label class="checkbox-label-option" for="parking">Places de parking</label>

                    <!-- Bouton "Boxes" -->
                    <input type="checkbox" id="boxes" value="boxes" class="checkbox_option lot_supp_check" onchange="toggleNumberInput('boxes')" 
                        {{ session('formData.appartement.boxes_sizes') ? 'checked' : '' }}>
                    <label class="checkbox-label-option" for="boxes">Boxes</label>

                    <!-- Bouton "Caves/Cellier" -->
                    <input type="checkbox" id="caves" value="caves" class="checkbox_option lot_supp_check" onchange="toggleNumberInput('caves')" 
                        {{ session('formData.appartement.caves_sizes') ? 'checked' : '' }}>
                    <label class="checkbox-label-option" for="caves">Caves/Cellier</label>
                </div>
            </div>
            <hr>
            <div style="display: flex; flex-direction: column; min-height: 300px; gap: 20px;">

                <!-- Champ pour les Places de parking -->
                <div class="form-group">
                    <div id="parking_number" class="lot-number" style="display: {{ session('formData.appartement.parking_count') ? 'flex' : 'none' }}; flex-direction: column">
                        <label for="parking_number">Nombre de pl. parking*</label>
                        <div class="formM2">
                            <div class="input-number">
                                <input type="number" id="parking_count" name="parking_count" min="1" max="10" 
                                    value="{{ session('formData.appartement.parking_count') ?? '' }}">
                            </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>

                <!-- Champ pour les Boxes avec tailles -->
                <div class="form-group-step5">
                    <div id="boxes_number" class="lot-number" style="display: {{ session('formData.appartement.boxes_sizes') ? 'flex' : 'none' }}; flex-direction: column">
                        <label for="boxes_count">Nombre de boxes*</label>
                        <div class="formM2">
                            <div class="input-number">
                                <input type="number" id="boxes_count" name="boxes_count" value="" min="1" max="3" 
                                    value="{{ count(session('formData.appartement.boxes_sizes') ?? []) }}">
                            </div>
                            <div class="number-buttons">
                                <button class="number-button2" data-action="add" type="button" onclick="stepAndToggleSizeInputs('boxes_count', 'boxes_sizes', 1)">
                                    <img src="{{ asset('images/add-white.png') }}" alt="bouton plus">
                                </button>
                                <button class="number-button2" data-action="subtract" type="button" onclick="stepAndToggleSizeInputs('boxes_count', 'boxes_sizes', -1)">
                                    <img src="{{ asset('images/remove-white.png') }}" alt="bouton moins">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="boxes_sizes" class="sizes">
                        @foreach (session('formData.appartement.boxes_sizes') ?? [] as $index => $size)
                        <div class="form-cont">
                            <label>Taille 1</label>
                            <div class="input-number">
                                <input type="number" name="boxes_sizes[]" value="{{ $size }}" min="1" placeholder="Taille box {{ $index + 1 }}" class="number-size">
                            </div>
                        </div>
                        @endforeach
                    </div> <!-- Champs de taille pour les boxes -->
                </div>

                <!-- Champ pour les Caves/Cellier avec tailles -->
                <div class="form-group-step5">
                    <div id="caves_number" class="lot-number" style="display: {{ session('formData.appartement.caves_sizes') ? 'flex' : 'none' }}; flex-direction: column">
                        <label for="caves_count">Nombre de Caves / Cellier*</label>
                        <div class="formM2">
                            <div class="input-number">
                                <input type="number" id="caves_count" name="caves_count" value="" min="1" max="3" 
                                    value="{{ count(session('formData.appartement.caves_sizes') ?? []) }}">
                            </div>
                            <div class="number-buttons">
                                <button class="number-button2" data-action="add" type="button" onclick="stepAndToggleSizeInputs('caves_count', 'caves_sizes', 1)">
                                    <img src="{{ asset('images/add-white.png') }}" alt="bouton plus">
                                </button>
                                <button class="number-button2" data-action="subtract" type="button" onclick="stepAndToggleSizeInputs('caves_count', 'caves_sizes', -1)">
                                    <img src="{{ asset('images/remove-white.png') }}" alt="bouton moins">
                                </button>
                            </div>
                        </div>
                    </div>
                    <div id="caves_sizes" class="sizes">
                        @foreach (session('formData.appartement.caves_sizes') ?? [] as $index => $size)
                            <div class="form-cont">
                                <label>Taille {{ $index + 1 }}</label>
                                <div class="input-number">
                                    <input type="number" name="caves_sizes[]" value="{{ $size }}" min="1" placeholder="Taille cave {{ $index + 1 }}" class="number-size">
                                </div>
                            </div>
                        @endforeach
                    </div> <!-- Champs de taille pour les caves/cellier -->
                </div>
            </div>

            <div class="buttons-step">
                <a href="{{ route('estimation.appartement.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> Etape suivant</p>
                    <img src="{{ asset('images/chevron-right.png') }}" alt="étape suivante">
                </button>
            </div>

        </div>
    </form>
</section>
@endsection

@push('scripts')
<script>
if (!checkbox.checked) {
    numberInput.querySelector('input[type="number"]').disabled = true;
} else {
    numberInput.querySelector('input[type="number"]').disabled = false;
}
// Affiche ou masque le champ pour chaque type de lot
    function toggleNumberInput(id) {
        const checkbox = document.getElementById(id);
        const numberInput = document.getElementById(id + '_number');
        if (numberInput) {
            numberInput.style.display = checkbox.checked ? 'flex' : 'none';
            if (!checkbox.checked) {
                numberInput.querySelector('input[type="number"]').value = '';
                document.getElementById(`${id}_sizes`).innerHTML = '';
            }
        }
    }

    // Incrémente ou décrémente la valeur et affiche les champs de taille
    function stepAndToggleSizeInputs(countId, sizeContainerId, step) {
        const countInput = document.getElementById(countId);
        let count = parseInt(countInput.value || 0) + step;

        // Limiter la valeur entre 0 et 3 (par exemple)
        count = Math.max(0, Math.min(3, count));

        countInput.value = count;
        generateSizeInputs(sizeContainerId, count);  // Met à jour les champs de taille
    }

    // Génère les champs de taille en fonction du nombre
    function generateSizeInputs(containerId, count) {
        const container = document.getElementById(containerId);
        container.innerHTML = '';  // Vide le conteneur avant de générer de nouveaux champs
        for (let i = 1; i <= count; i++) {
            const inputGroup = document.createElement('div');
            inputGroup.className = 'form-cont';

            const label = document.createElement('label');
            label.innerText = `Taille ${i}`;

            const inputContainer = document.createElement('div');
            inputContainer.className = 'input-number';

            const input = document.createElement('input');
            input.type = 'number';
            input.name = `${containerId}[]`;
            input.min = 1;
            input.placeholder = 'm²';
            input.className = 'number-size';

            inputContainer.appendChild(input);
            inputGroup.appendChild(label);
            inputGroup.appendChild(inputContainer);
            container.appendChild(inputGroup);
        }
    }

</script>
@endpush