@extends('admin.layout')

@section('title', 'Calculatrice')



@section('content')
    <div class="pagetitle">
        <h1>@yield('title')</h1>
    </div>

    <section class="section contact">
        <div class="row gy-4">
            <div class="col-xl-12">
                <div class="card p-4">

                    @if (session('success'))
                        <div class="alert alert-success">{{ session('success') }}</div>
                    @endif

                    @if (session('error'))
                        <div class="alert alert-danger">{{ session('error') }}</div>
                    @endif
                    <div class="col-md-4">
                        <label class="form-label">Variation prix m²</label>
                        <input type="text" name="prix_alu[]" class="form-control prix-alu" readonly
                            value="{{ $prixalu }} €/m² ">
                    </div>
                    <hr>
                    <div class="accordion" id="calculatriceAccordion">

                        {{-- ================================================= --}}
                        {{-- COULISSANTS --}}
                        {{-- ================================================= --}}
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseCoulissants">
                                    Coulissants
                                </button>
                            </h2>

                            <div id="collapseCoulissants" class="accordion-collapse collapse show">
                                <div class="accordion-body">

                                    <div id="coulissants-container">

                                        <div class="modele-block coulissant-row pb-4 mb-4 border-bottom">

                                            <div class="row g-0">

                                                {{-- COL GAUCHE --}}
                                                <div class="col-md-4 pe-md-4 border-end">
                                                    <label class="form-label fw-semibold mb-2">Sélectionner un
                                                        coulissant</label>

                                                    <select class="form-select select-modele mb-3" name="coulissant_id[]"
                                                        onchange="handleModelChange(this)">
                                                        <option value="">Sélectionner</option>
                                                        @foreach ($coulissants as $coulissant)
                                                            <option value="{{ $coulissant->id }}"
                                                                data-prix="{{ $coulissant->prix }}"
                                                                data-marge="{{ $coulissant->marge }}"
                                                                data-image="{{ $coulissant->image ? asset('storage/' . $coulissant->image) : '' }}">
                                                                {{ $coulissant->nom }} / {{ $coulissant->ancien_nom }}
                                                            </option>
                                                        @endforeach
                                                    </select>

                                                    <div class="modele-image-wrapper d-none mb-3 text-center">
                                                        <img class="img-fluid rounded shadow modele-image"
                                                            style="max-height:260px; width:100%; object-fit:contain;">
                                                    </div>

                                                    <label class="form-label">Prix/m²</label>
                                                    <input type="text" class="form-control prix-modele mb-2" readonly>

                                                    <label class="form-label">Marge modèle</label>
                                                    <input type="text" class="form-control marge-modele" readonly>
                                                </div>

                                                {{-- COL DROITE --}}
                                                <div class="col-md-8 ps-md-4">
                                                    <div class="row g-3">
                                                        <div class="col-12">
                                                            <div class="d-flex flex-wrap gap-3 gap-md-4 align-items-center">

                                                                <label class="form-check d-flex align-items-center gap-2 py-2 mb-0">
                                                                    <input class="form-check-input canal-radio"
                                                                        type="radio" name="canal_vente" value="acportail"
                                                                        onchange="calculatePrice(this)" checked>
                                                                    <span class="form-check-label">ACPORTAIL</span>
                                                                </label>

                                                                <label class="form-check d-flex align-items-center gap-2 py-2 mb-0">
                                                                    <input class="form-check-input canal-radio"
                                                                        type="radio" name="canal_vente"
                                                                        value="negoceportail"
                                                                        onchange="calculatePrice(this)">
                                                                    <span class="form-check-label">NEGOCEPORTAIL</span>
                                                                </label>

                                                            </div>
                                                        </div>




                                                        <hr>

                                                        <div class="col-md-4">
                                                            <label class="form-label">Longueur (mm)</label>
                                                            <input type="number" name="longueur[]" class="form-control"
                                                                oninput="calculatePrice(this)">
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label class="form-label">Hauteur (mm)</label>
                                                            <input type="number" name="hauteur[]" class="form-control"
                                                                oninput="calculatePrice(this)">
                                                        </div>
                                                        <div class="col-md-4">
                                                            <label class="form-label">Autoporté</label>
                                                            <select name="autoporte[]" class="form-select"
                                                                onchange="calculatePrice(this)">
                                                                <option value="non" selected>Non</option>
                                                                <option value="oui">Oui</option>
                                                            </select>
                                                        </div>
                                                        <hr>
                                                        <div class="col-md-4">
                                                            <label class="form-label">Prix usine</label>
                                                            <input type="text" name="prix_usine[]"
                                                                class="form-control prix-usine" readonly>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label class="form-label">Prix de vente</label>
                                                            <input type="text" name="prix[]" class="form-control"
                                                                readonly>
                                                        </div>

                                                    </div>

                                                    <input type="hidden" name="prix_unitaire[]" class="prix-unitaire">
                                                    <input type="hidden" name="marge[]" class="marge-valeur">

                                                    <div class="mt-3 text-end">
                                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                            onclick="supprimerBloc(this)">
                                                            🗑 Supprimer ce modèle
                                                        </button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-sm btn-primary"
                                        onclick="ajouterElement('coulissant')">
                                        + Ajouter un coulissant
                                    </button>

                                </div>
                            </div>
                        </div>

                        {{-- ================================================= --}}
                        {{-- BATTANTS --}}
                        {{-- ================================================= --}}
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapseBattants">
                                    Battants
                                </button>
                            </h2>

                            <div id="collapseBattants" class="accordion-collapse collapse">
                                <div class="accordion-body">

                                    <div id="battants-container">

                                        <div class="modele-block battant-row pb-4 mb-4 border-bottom">

                                            <div class="row g-0">

                                                <div class="col-md-4 pe-md-4 border-end">
                                                    <label class="form-label fw-semibold mb-2">Sélectionner un
                                                        battant</label>

                                                    <select class="form-select select-modele mb-3" name="battant_id[]"
                                                        onchange="handleModelChange(this)">
                                                        <option value="">Sélectionner</option>
                                                        @foreach ($battants as $battant)
                                                            <option value="{{ $battant->id }}"
                                                                data-prix="{{ $battant->prix }}"
                                                                data-marge="{{ $battant->marge }}"
                                                                data-image="{{ $battant->image ? asset('storage/' . $battant->image) : '' }}">
                                                                {{ $battant->nom }} / {{ $battant->ancien_nom }}
                                                            </option>
                                                        @endforeach
                                                    </select>

                                                    <div class="modele-image-wrapper d-none mb-3 text-center">
                                                        <img class="img-fluid rounded shadow modele-image"
                                                            style="max-height:260px; width:100%; object-fit:contain;">
                                                    </div>

                                                    <label class="form-label">Prix/m²</label>
                                                    <input type="text" class="form-control prix-modele mb-2" readonly>

                                                    <label class="form-label">Marge modèle</label>
                                                    <input type="text" class="form-control marge-modele" readonly>
                                                </div>

                                                <div class="col-md-8 ps-md-4">
                                                    <div class="row g-3">
                                                        <div class="col-12">
                                                            <div class="d-flex flex-wrap gap-3 gap-md-4 align-items-center">

                                                                <label class="form-check d-flex align-items-center gap-2 py-2 mb-0">
                                                                    <input class="form-check-input canal-radio"
                                                                        type="radio" name="canal_vente"
                                                                        value="acportail" onchange="calculatePrice(this)"
                                                                        checked>
                                                                    <span class="form-check-label">ACPORTAIL</span>
                                                                </label>

                                                                <label class="form-check d-flex align-items-center gap-2 py-2 mb-0">
                                                                    <input class="form-check-input canal-radio"
                                                                        type="radio" name="canal_vente"
                                                                        value="negoceportail"
                                                                        onchange="calculatePrice(this)">
                                                                    <span class="form-check-label">NEGOCEPORTAIL</span>
                                                                </label>

                                                            </div>
                                                        </div>




                                                        <hr>
                                                        <div class="col-md-4">
                                                            <label class="form-label">Longueur (mm)</label>
                                                            <input type="number" name="longueur[]" class="form-control"
                                                                oninput="calculatePrice(this)">
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label class="form-label">Hauteur (mm)</label>
                                                            <input type="number" name="hauteur[]" class="form-control"
                                                                oninput="calculatePrice(this)">
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label class="form-label">Gonds</label>
                                                            <select class="form-select" name="gonds[]"
                                                                onchange="calculatePrice(this)">
                                                                <option value="Réglables" selected>Réglables</option>
                                                                <option value="Traditionnels">Traditionnels</option>
                                                            </select>
                                                        </div>
                                                        <hr>
                                                        <div class="col-md-4">
                                                            <label class="form-label">Prix usine</label>
                                                            <input type="text" name="prix_usine[]"
                                                                class="form-control prix-usine" readonly>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label class="form-label">Prix de vente</label>
                                                            <input type="text" name="prix[]" class="form-control"
                                                                readonly>
                                                        </div>
                                                    </div>

                                                    <input type="hidden" name="prix_unitaire[]" class="prix-unitaire">
                                                    <input type="hidden" name="marge[]" class="marge-valeur">

                                                    <div class="mt-3 text-end">
                                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                            onclick="supprimerBloc(this)">
                                                            🗑 Supprimer ce modèle
                                                        </button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-sm btn-primary"
                                        onclick="ajouterElement('battant')">
                                        + Ajouter un battant
                                    </button>

                                </div>
                            </div>
                        </div>

                        {{-- ================================================= --}}
                        {{-- PORTILLONS --}}
                        {{-- ================================================= --}}
                        <div class="accordion-item">
                            <h2 class="accordion-header">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                    data-bs-target="#collapsePortillons">
                                    Portillons
                                </button>
                            </h2>

                            <div id="collapsePortillons" class="accordion-collapse collapse">
                                <div class="accordion-body">

                                    <div id="portillons-container">

                                        <div class="modele-block portillon-row pb-4 mb-4 border-bottom">

                                            <div class="row g-0">

                                                <div class="col-md-4 pe-md-4 border-end">
                                                    <label class="form-label fw-semibold mb-2">Sélectionner un
                                                        portillon</label>

                                                    <select class="form-select select-modele mb-3" name="portillon_id[]"
                                                        onchange="handleModelChange(this)">
                                                        <option value="">Sélectionner</option>
                                                        @foreach ($portillons as $portillon)
                                                            <option value="{{ $portillon->id }}"
                                                                data-prix="{{ $portillon->prix }}"
                                                                data-marge="{{ $portillon->marge }}"
                                                                data-image="{{ $portillon->image ? asset('storage/' . $portillon->image) : '' }}">
                                                                {{ $portillon->nom }} / {{ $portillon->ancien_nom }}
                                                            </option>
                                                        @endforeach
                                                    </select>

                                                    <div class="modele-image-wrapper d-none mb-3 text-center">
                                                        <img class="img-fluid rounded shadow modele-image"
                                                            style="max-height:260px; width:100%; object-fit:contain;">
                                                    </div>

                                                    <label class="form-label">Prix/m²</label>
                                                    <input type="text" class="form-control prix-modele mb-2" readonly>

                                                    <label class="form-label">Marge modèle</label>
                                                    <input type="text" class="form-control marge-modele" readonly>
                                                </div>

                                                <div class="col-md-8 ps-md-4">
                                                    <div class="row g-3">
                                                        <div class="col-12">
                                                            <div class="d-flex flex-wrap gap-3 gap-md-4 align-items-center">

                                                                <label class="form-check d-flex align-items-center gap-2 py-2 mb-0">
                                                                    <input class="form-check-input canal-radio"
                                                                        type="radio" name="canal_vente"
                                                                        value="acportail" checked
                                                                        onchange="calculatePrice(this)">
                                                                    <span class="form-check-label">ACPORTAIL</span>
                                                                </label>

                                                                <label class="form-check d-flex align-items-center gap-2 py-2 mb-0">
                                                                    <input class="form-check-input canal-radio"
                                                                        type="radio" name="canal_vente"
                                                                        value="negoceportail"
                                                                        onchange="calculatePrice(this)">
                                                                    <span class="form-check-label">NEGOCEPORTAIL</span>
                                                                </label>

                                                            </div>
                                                        </div>




                                                        <hr>
                                                        <div class="col-md-4">
                                                            <label class="form-label">Longueur (mm)</label>
                                                            <input type="number" name="longueur[]" class="form-control"
                                                                oninput="calculatePrice(this)">
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label class="form-label">Hauteur (mm)</label>
                                                            <input type="number" name="hauteur[]" class="form-control"
                                                                oninput="calculatePrice(this)">
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label class="form-label">Gonds</label>
                                                            <select class="form-select" name="gonds[]"
                                                                onchange="calculatePrice(this)">
                                                                <option value="Réglables" selected>Réglables</option>
                                                                <option value="Traditionnels">Traditionnels</option>
                                                            </select>
                                                        </div>
                                                        <hr>
                                                        <div class="col-md-4">
                                                            <label class="form-label">Prix usine</label>
                                                            <input type="text" name="prix_usine[]"
                                                                class="form-control prix-usine" readonly>
                                                        </div>

                                                        <div class="col-md-4">
                                                            <label class="form-label">Prix de vente</label>
                                                            <input type="text" name="prix[]" class="form-control"
                                                                readonly>
                                                        </div>
                                                    </div>

                                                    <input type="hidden" name="prix_unitaire[]" class="prix-unitaire">
                                                    <input type="hidden" name="marge[]" class="marge-valeur">

                                                    <div class="mt-3 text-end">
                                                        <button type="button" class="btn btn-sm btn-outline-danger"
                                                            onclick="supprimerBloc(this)">
                                                            🗑 Supprimer ce modèle
                                                        </button>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>

                                    <button type="button" class="btn btn-sm btn-primary"
                                        onclick="ajouterElement('portillon')">
                                        + Ajouter un portillon
                                    </button>

                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        #coulissants-container .modele-block:last-child,
        #battants-container .modele-block:last-child,
        #portillons-container .modele-block:last-child {
            border-bottom: 0;
            margin-bottom: 0;
            padding-bottom: 0;
        }
    </style>

    <script>
        window.PRIX_ALU = {{ (float) $prixalu }};
    </script>


    <script src="{{ asset('js/calculatrice/calculatrice.js') }}"></script>
    <script src="{{ asset('js/calculatrice/entreeInput.js') }}"></script>

@endsection