@extends('layout')

@section('title', 'Demander un devis')

@section('content')

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

    <section class="section contact">
        <div class="card p-4">

            @if ($errors->any())
                <div class="alert alert-danger">
                    <ul>
                        @foreach ($errors->all() as $e)
                            <li>{{ $e }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

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

            @if (session('selection') && !$couleurs->isEmpty())

                <form action="{{ route('devis.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="row gy-4">

                        {{-- Référence client --}}
                        <div class="col-12">
                            <label>Raison sociale du client / Référence chantier</label>
                            <input type="text" name="reference_client" value="{{ old('reference_client') }}" required
                                class="form-control" oninput="this.value=this.value.toUpperCase();">
                        </div>

                        @php $indexesParCategorie = []; @endphp

                        @foreach ($selection as $item)
                            @php
                                // Catégorie de l'item
$categorie = $categories->firstWhere('id', $item->categorie_id);
$nomCategorie = $categorie?->nom ?? 'Autre';
// clé snake pour IDs/Classes calculatrice
$key = \Illuminate\Support\Str::snake($nomCategorie);



// Index par catégorie pour IDs uniques côté calculatrice
$indexesParCategorie[$key] = $indexesParCategorie[$key] ?? 0;
$index = $indexesParCategorie[$key];

// Classe calculatrice
$classCalc = 'calculatrice-' . $key;
                            @endphp

                            <div class="{{ $classCalc }} col-12 border-bottom pb-3 mb-3">

                                <h2 class="d-flex align-items-center">
                                    {{ $item->nom }} - {{ $nomCategorie }}
                                    <button type="button" class="btn btn-danger btn-sm ms-2 btn-supprimer"
                                        data-id="{{ $item->id }}" data-url="{{ route('supprimer.selection') }}">
                                        Ce modèle ne m'intéresse plus
                                    </button>
                                </h2>

                                {{-- Hidden utiles pour le store / export PDF / etc. --}}
                                <input type="hidden" name="modele_id[]" value="{{ $item->id }}">
                                <input type="hidden" name="modele_nom[]" value="{{ $item->nom }}">
                                <input type="hidden" name="modele_image[]" value="{{ $item->image }}">
                                <input type="hidden" name="categorie_nom[]" value="{{ $nomCategorie }}">

                                {{-- Image modèle --}}
                                <img src="{{ asset('storage/modeles/' . $item->image) }}" width="250"
                                    alt="{{ $item->nom }}">

                                {{-- (Optionnel) Info "Barre de 6,50 m" si $textes est fourni comme avant --}}
                                @foreach ($textes ?? [] as $texte)
                                    @if ($texte->id == $item->id)
                                        <div class="mt-2">
                                            <strong><u>Barre de 6,50 m</u></strong>
                                        </div>
                                    @endif
                                @endforeach

                                {{-- Champs marqueurs pour la calculatrice JS (unitaires + marge) --}}
                                <input type="hidden" id="prix_unitaire_{{ $key }}_{{ $index }}"
                                    value="{{ $item->prix }}">
                                <input type="hidden" id="marge_{{ $key }}_{{ $index }}"
                                    value="{{ $item->marge }}">

                                <div class="row mt-3 g-2">

                                    {{-- Longueur (libellé contextuel par catégorie) --}}
                                    @if (in_array($nomCategorie, ['Coulissants', 'Battants', 'Portillons']))
                                        <div class="col-md-6">
                                            <label>Longueur entre poteaux en mm</label>
                                            <input type="number" name="longueur[]" class="form-control text-right"
                                                required>
                                        </div>
                                    @elseif ($nomCategorie === 'Clôture Aluminium')
                                        <div class="col-md-6">
                                            <label>Longueur en mm</label>
                                            <input type="number" name="longueur[]" class="form-control text-right"
                                                required>
                                        </div>
                                    @elseif ($nomCategorie === 'Poteau Au Détail')
                                        <div class="col-md-6">
                                            <label>Longueur par poteau (en mm)</label>
                                            <input type="number" name="longueur[]" class="form-control text-right"
                                                required>
                                        </div>
                                    @else
                                        <input type="hidden" name="longueur[]" value="">
                                    @endif

                                    {{-- Hauteur --}}
                                    @if (in_array($nomCategorie, ['Coulissants', 'Battants', 'Portillons', 'Clôture Aluminium']))
                                        <div class="col-md-6">
                                            <label>Hauteur en mm</label>
                                            <input type="number" name="hauteur[]" class="form-control text-right" required>
                                        </div>
                                    @else
                                        <input type="hidden" name="hauteur[]" value="">
                                    @endif

                                    {{-- Quantité --}}
                                    <div class="col-md-6">
                                        <label>Quantité</label>
                                        <input type="number" name="quantite[]" value="1" class="form-control"
                                            required>
                                    </div>

                                    {{-- Couleur (avec default RAL 7016 si présent) --}}
                                    <div class="col-md-6">
                                        <label>Couleur</label>
                                        <select name="couleur_id[]" class="form-select" required>
                                            @foreach ($couleurs as $c)
                                                <option value="{{ $c->id }}"
                                                    {{ $c->nom === 'RAL 7016 GRIS ANTHRACITE' ? 'selected' : '' }}>
                                                    {{ $c->nom }}
                                                </option>
                                            @endforeach
                                        </select>
                                        {{-- snapshot des noms (id => nom) pour usage PDF / back --}}
                                        <input type="hidden" name="couleur_nom_all[]"
                                            value="{{ json_encode($couleurs->pluck('nom', 'id')) }}">
                                    </div>

                                    {{-- Finition (required + default Sablé) --}}
                                    <div class="col-md-6">
                                        <label>Finition</label>
                                        <select name="finition[]" class="form-select" required>
                                            <option value="Sablé" selected>Sablé</option>
                                            <option value="Brillant">Brillant</option>
                                            <option value="Mât">Mât</option>
                                        </select>
                                    </div>

                                    {{-- Sens d'ouverture (required, libellé clair) --}}
                                    @if (in_array($nomCategorie, ['Coulissants', 'Portillons']))
                                        <div class="col-md-6">
                                            <label>Sens d'ouverture vue de l'extérieur</label>
                                            <select name="sens_ouverture[]" class="form-select" required>
                                                <option value="Gauche">Gauche</option>
                                                <option value="Droite">Droite</option>
                                            </select>
                                        </div>
                                    @else
                                        <input type="hidden" name="sens_ouverture[]" value="">
                                    @endif

                                    {{-- Poignée (required + default Oui) --}}
                                    @if (in_array($nomCategorie, ['Coulissants', 'Battants', 'Portillons']))
                                        <div class="col-md-6">
                                            <label>Poignée serrure</label>
                                            <select name="poignee[]" class="form-select" required>
                                                <option value="Oui" selected>Oui</option>
                                                <option value="Non">Non</option>
                                            </select>
                                        </div>
                                    @else
                                        <input type="hidden" name="poignee[]" value="">
                                    @endif

                                    {{-- Gonds (required) --}}
                                    @if (in_array($nomCategorie, ['Battants', 'Portillons']))
                                        <div class="col-md-6">
                                            <label>Type de gonds</label>
                                            <select name="gonds[]" class="form-select" required>
                                                <option value="Réglables">Réglables</option>
                                                <option value="Traditionnels">Traditionnels</option>
                                            </select>
                                        </div>
                                    @else
                                        <input type="hidden" name="gonds[]" value="">
                                    @endif

                                    {{-- Gâche (required + default Non) --}}
                                    @if ($nomCategorie === 'Portillons')
                                        <div class="col-md-6">
                                            <label>Gâche électrique</label>
                                            <select name="gache[]" class="form-select" required>
                                                <option value="Oui">Oui</option>
                                                <option value="Non" selected>Non</option>
                                            </select>
                                        </div>
                                    @else
                                        <input type="hidden" name="gache[]" value="">
                                    @endif


                                    {{-- Prix (mêmes catégories que l'ancien : inclut Profils & Poteau au détail) --}}
                                    @if (in_array($nomCategorie, ['Coulissants', 'Battants', 'Portillons', 'Profils', 'Poteau Au Détail']))
                                        <div class="col-md-6">
                                            <label>Prix</label>
                                            <input type="text" name="prix[]" class="form-control"
                                                value="{{ number_format($item->prix, 2, '.', ' ') }}" readonly>
                                        </div>
                                    @else
                                        <input type="hidden" name="prix[]" value="">
                                    @endif

                                    {{-- INOX (avec sélection imagée + prix pivot) --}}
                                    @if (in_array($nomCategorie, ['Coulissants', 'Battants', 'Portillons']) && $item->inoxes->isNotEmpty())
                                        <div class="inox-section">
                                            <div class="col-md-6">
                                                <label>Souhaitez-vous un inox ?</label>
                                                <select class="form-select use-inox">
                                                    <option value="non" selected>Non</option>
                                                    <option value="oui">Oui</option>
                                                </select>
                                            </div>

                                            {{-- valeur envoyée au back --}}
                                            <input type="hidden" name="inox_id[]" class="selected-inox-id">

                                            <div class="col-md-12 inox-select-container" style="display: none;">
                                                <div class="row inox-options">
                                                    @foreach ($inoxes as $inox)
                                                        @foreach ($inox->modeles as $modele)
                                                            @if ($modele->id == $item->id)
                                                                <div class="col-6 col-md-4 col-lg-3 mb-4 text-center">
                                                                    <div class="selectable-image p-2 rounded"
                                                                        data-inox-id="{{ $inox->id }}"
                                                                        style="cursor: pointer;">
                                                                        <img src="{{ asset('storage/inox/400/' . $modele->pivot->image) }}"
                                                                            alt="{{ $inox->nom }} - {{ $modele->nom }}"
                                                                            class="img-fluid">
                                                                        <div class="card-body p-2">
                                                                            <h4 class="text-center h6">
                                                                                {{ $inox->nom }} - {{ $modele->nom }}
                                                                            </h4>
                                                                            {{-- prix pour la calculatrice --}}
                                                                            <input type="hidden" class="prix-inox"
                                                                                value="{{ $modele->pivot->prix }}">
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        @endforeach
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        {{-- garder la structure attendue par calculatrice.js --}}
                                        <input type="hidden" name="inox_id[]" value="">
                                        <input type="hidden" id="prix_inox" value="0">
                                    @endif

                                    {{-- DÉCOUPE (sélection imagée) --}}
                                    @if (in_array($nomCategorie, ['Coulissants', 'Battants', 'Portillons']) && $item->decoupes->isNotEmpty())
                                        <div class="decoupe-section">
                                            <div class="col-md-6">
                                                <label>Souhaitez-vous une découpe ?</label>
                                                <select class="form-select use-decoupe">
                                                    <option value="non" selected>Non</option>
                                                    <option value="oui">Oui</option>
                                                </select>
                                            </div>

                                            {{-- valeur envoyée au back --}}
                                            <input type="hidden" name="decoupe_id[]" class="selected-decoupe-id">

                                            <div class="col-md-12 decoupe-select-container" style="display: none;">
                                                <div class="row decoupe-options">
                                                    @foreach ($decoupes as $decoupe)
                                                        <div class="col-6 col-md-4 col-lg-3 mb-4 text-center">
                                                            <div class="selectable-image p-2 rounded"
                                                                data-decoupe-id="{{ $decoupe->id }}"
                                                                style="cursor: pointer;">
                                                                <img src="{{ asset('storage/decoupes/' . $decoupe->image) }}"
                                                                    alt="{{ $decoupe->nom }}" class="img-fluid">
                                                                <div class="card-body p-2">
                                                                    <h4 class="text-center h6">{{ $decoupe->nom }}</h4>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        {{-- garder la structure attendue par calculatrice.js --}}
                                        <input type="hidden" name="decoupe_id[]" value="">
                                        <input type="hidden" id="prix_decoupe" value="0">
                                    @endif

                                    {{-- Style carte sélection (commun inox/découpe) --}}
                                    <style>
                                        .selectable-image.selected {
                                            border: 3px solid #0d6efd;
                                            box-shadow: 0 0 10px rgba(13, 110, 253, 0.5);
                                        }
                                    </style>

                                    {{-- Commentaire --}}


                                    <div class="col-12">
                                        <label>Description ou commentaire pour ce modèle</label>
                                        <textarea name="description[]" class="form-control" rows="4">{{ old('description.*') }}</textarea>
                                    </div>

                                </div> {{-- /row g-2 --}}

                            </div> {{-- /bloc item --}}

                            @php $indexesParCategorie[$key]++; @endphp
                        @endforeach

                        <div class="col-12 text-center">
                            <button type="submit" class="btn btn-primary">Faire la demande</button>
                        </div>

                    </div> {{-- /row gy-4 --}}
                </form>
            @else
                <p>Veuillez sélectionner des modèles dans le catalogue.</p>
            @endif

        </div>
    </section>

    {{-- JS calcul / fichiers / suppression --}}
    <script src="{{ asset('js/calculatrice.js') }}"></script>
    <script src="{{ asset('js/input-file.js') }}"></script>
    <script src="{{ asset('js/suppression-panier.js') }}"></script>

@endsection