@extends('admin.layout')

@section('title', 'Ajouter une fabrication')

@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 $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <form action="{{ route('fabrications.store') }}" method="post" class="">
                @csrf
                <div class="row gy-4">

                    {{-- -------------------- INFORMATIONS DEVIS AUTO -------------------- --}}
                    <div class="col-md-2">
                        <label for="numero_devis">ID devis</label>
                        <input type="number" name="devis_id" id="numero_devis" class="form-control" required
                            oninput="this.value = this.value.slice(0, 5)">
                    </div>
                    <div class="col-md-2">
                        <label for="numero_client">ID client</label>
                        <input type="number" name="client_id" id="numero_client" class="form-control" readonly>
                    </div>
                    <hr>

                    <div class="col-md-2">
                        <label>Raison sociale</label>
                        <input type="text" name="raison_sociale" id="raison_sociale" class="form-control" readonly>
                    </div>
                    <div class="col-md-2">
                        <label>Nature</label>
                        <input type="text" name="nature" id="nature" class="form-control" readonly>
                    </div>
                    <div class="col-md-2">
                        <label>Nom + Prénom</label>
                        <input type="text" name="nom_prenom" id="nom_prenom" class="form-control" readonly>
                    </div>
                    <div class="col-md-2">
                        <label>Adresse 1</label>
                        <input type="text" name="adresse_1" id="adresse_1" class="form-control" readonly>
                    </div>
                    <div class="col-md-2">
                        <label>Adresse 2</label>
                        <input type="text" name="adresse_2" id="adresse_2" class="form-control" readonly>
                    </div>
                    <div class="col-md-2">
                        <label>Code postal</label>
                        <input type="text" name="code_postal" id="code_postal" class="form-control" readonly>
                    </div>
                    <div class="col-md-2">
                        <label>Ville</label>
                        <input type="text" name="ville" id="ville" class="form-control" readonly>
                    </div>
                    <div class="col-md-4">
                        <label>V/REF</label>
                        <input type="text" name="v_ref" id="v_ref" class="form-control" readonly>
                    </div>
                    <div class="col-md-2">
                        <label>Responsable devis</label>
                        <input type="text" name="responsable" id="responsable_devis" class="form-control" readonly>
                    </div>

                    <hr>

                    {{-- -------------------- INFORMATIONS FABRICATION -------------------- --}}
                    <div class="col-md-2">
                        <label>Pour</label>
                        <select name="negoce" id="negoce" class="form-control" required>
                            <option value="0" selected>ACPORTAIL</option>
                            <option value="1">NEGOCE</option>
                        </select>
                    </div>

                    {{-- Dates --}}
                    <div class="col-md-2">
                        <label>Réception accueil</label>
                        <input type="date" name="date_accueil" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label>Réception bureau d'étude</label>
                        <input type="date" name="date_etude" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label>Vérif côtes</label>
                        <input type="date" name="date_cotes_oks" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label>Visuel validé</label>
                        <input type="date" name="visuel_valide" class="form-control">
                    </div>
                    <div class="col-md-2">
                        <label>Observation Date validé</label>
                        <textarea name="observation_date_valide" class="form-control" rows="2"></textarea>
                    </div>
                    <hr>

                    <!-- 📌 Conteneur des blocs duplicables -->
                    <div id="fabrication-container" class="row gy-4">

                        <div class="fabrication-item border rounded p-3 mb-3">

                            <div class="row gy-3">

                                <div class="col-md-2">
                                    <label for="type">Type</label>
                                    <select name="items[0][type_id]" class="form-control type-select" required>
                                        <option value="">-- Sélectionnez un type --</option>
                                        @foreach ($types as $type)
                                            <option value="{{ $type->id }}">{{ $type->nom }}</option>
                                        @endforeach
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label for="modele">Modèle</label>
                                    <select name="items[0][modele_id]" class="form-control modele-select" required>
                                        <option value="">-- Sélectionnez un modèle --</option>
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label for="variation">Variation</label>
                                    <select name="items[0][variation_id]" class="form-control variation-select">
                                        <option value="">-- Sélectionnez une variation --</option>
                                    </select>
                                </div>

                                <div class="col-md-2">
                                    <label>Couleur</label>
                                    <select name="items[0][couleur]" class="form-control">
                                        <option selected disabled>Choisir une couleur</option>

                                        @foreach ($colors as $color)
                                            <option value="{{ $color['id'] }}">
                                                {{ $color['value_display'] }}
                                                @if (!empty($color['name_fr']))
                                                    — {{ $color['name_fr'] }}
                                                @endif


                                            </option>
                                        @endforeach


                                    </select>
                                </div>


                                <div class="col-md-2">
                                    <label>Finition</label>
                                    <select name="items[0][finition]" class="form-control">
                                        <option>Sablé</option>
                                        <option>Mât</option>
                                        <option>Brillant</option>
                                    </select>
                                </div>
                                <div class="col-md-2"> <label>Découpe/Inox</label> <select name="items[0][decoupe_inox]"
                                        class="form-control">
                                        <option>Oui</option>
                                        <option selected>Non</option>
                                    </select>
                                </div>
                                {{-- Découpes inox --}}
                                <div class="col-md-12 decoupes-container d-none mt-3">
                                    <div class="row">
                                        @foreach ($decoupes as $type => $items)
                                            <div class="col-md-2">
                                                <strong class="d-block mb-2 text-uppercase">{{ $type }}</strong>

                                                @foreach ($items as $decoupe)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox"
                                                            name="items[0][decoupes][]" value="{{ $decoupe->id }}"
                                                            id="decoupe_0_{{ $decoupe->id }}">
                                                        <label class="form-check-label"
                                                            for="decoupe_0_{{ $decoupe->id }}">
                                                            {{ $decoupe->nom }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <label>Destination</label>
                                    <select name="items[0][destination]" class="form-control">
                                        <option>A poser</option>
                                        <option>A livrer</option>
                                        <option>A stocker</option>
                                        <option>A récupérer au dépôt</option>
                                    </select>
                                </div>

                                <div class="col-md-2"> <label>Priorité</label> <select name="items[0][priorite]"
                                        class="form-control">
                                        <option value="normal" selected>Normal</option>
                                        <option value="urgent">Urgent</option>
                                    </select> </div>
                                <div class="col-md-2"> <label>Maçonnerie</label> <select name="items[0][maconnerie]"
                                        class="form-control">
                                        <option>Oui</option>
                                        <option selected>Non</option>
                                    </select> </div>


                                <div class="col-md-2"> <label>Cintrage</label> <select name="items[0][cintrage]"
                                        class="form-control">
                                        <option>Oui</option>
                                        <option selected>Non</option>
                                    </select> </div>
                                <div class="col-md-2"> <label>Longueur</label> <input type="text"
                                        name="items[0][longueur]" class="form-control"> </div>
                                <div class="col-md-2"> <label>Hauteur</label> <input type="text"
                                        name="items[0][hauteur]" class="form-control"> </div>
                                <div class="col-md-2"> <label>Prix usine</label> <input type="text"
                                        name="items[0][prix_usine]" class="form-control"> </div>
                                <div class="col-md-12"> <label>Lien PDF</label> <input type="text"
                                        name="items[0][url]" class="form-control"> </div>
                                <div class="col-md-12"> <label>Observations</label>
                                    <textarea name="items[0][observations]" class="form-control" rows="2"></textarea>
                                </div>

                            </div>

                            <!-- Bouton supprimer -->
                            <button type="button" class="btn btn-danger mt-3 remove-item"
                                style="display:none;">Supprimer</button>

                        </div>
                    </div>

                    <button type="button" id="add-item" class="btn btn-secondary my-3">+ Ajouter une
                        fabrication</button>

                    <div class="col-md-12">
                        <button type="submit" class="btn btn-primary">Ajouter</button>
                    </div>
                </div>
            </form>
        </div>
    </section>

    <script>
        // Gestion du fetch Devis
        document.getElementById('numero_devis').addEventListener('input', function() {
            const numero = this.value;
            if (!numero) return;

            fetch(`/api/devis/${numero}`)
                .then(r => r.json())
                .then(data => {
                    if (data.error) return;

                    document.getElementById('numero_client').value = data.client_id ?? '';
                    document.getElementById('raison_sociale').value = data.raison_sociale ?? '';
                    document.getElementById('nature').value = data.nature ?? '';
                    document.getElementById('nom_prenom').value = data.nom_client ?? '';
                    document.getElementById('adresse_1').value = data.adresse1 ?? '';
                    document.getElementById('adresse_2').value = data.adresse2 ?? '';
                    document.getElementById('code_postal').value = data.cpostal ?? '';
                    document.getElementById('ville').value = data.ville ?? '';
                    document.getElementById('responsable_devis').value = data.responsable ?? '';
                    document.getElementById('v_ref').value = data.v_ref ?? '';
                })
                .catch(err => console.error('Erreur fetch devis:', err));
        });

        // Gestion Type -> Modèle -> Variation
        document.addEventListener('change', function(e) {
            const container = e.target.closest('.fabrication-item');
            if (!container) return;

            // Changement Type
            if (e.target.classList.contains('type-select')) {
                const typeSelect = e.target;
                const typeParam = typeSelect.value;
                const modeleSelect = container.querySelector('.modele-select');
                const variationSelect = container.querySelector('.variation-select');

                modeleSelect.innerHTML = '<option value="">Chargement...</option>';
                variationSelect.innerHTML = '<option value="">-- Sélectionnez une variation --</option>';

                if (!typeParam) {
                    modeleSelect.innerHTML = '<option value="">-- Sélectionnez un modèle --</option>';
                    return;
                }

                fetch(`/api/modeles/${encodeURIComponent(typeParam)}`)
                    .then(res => res.json())
                    .then(data => {
                        modeleSelect.innerHTML = '<option value="">-- Sélectionnez un modèle --</option>';
                        if (!data.modeles.length) {
                            modeleSelect.innerHTML = '<option value="">Aucun modèle disponible</option>';
                            variationSelect.innerHTML = '<option value="">Aucune variation</option>';
                            return;
                        }
                        data.modeles.forEach(modele => {
                            const option = document.createElement('option');
                            option.value = modele.id;
                            option.textContent = modele.nom;
                            option.dataset.variations = JSON.stringify(modele.variations || []);
                            modeleSelect.appendChild(option);
                        });
                    }).catch(err => {
                        console.error('Erreur chargement modèles:', err);
                        modeleSelect.innerHTML = '<option value="">-- Sélectionnez un modèle --</option>';
                    });
            }

            // Changement Modèle
            if (e.target.classList.contains('modele-select')) {
                const modeleSelect = e.target;
                const selectedOption = modeleSelect.selectedOptions[0];
                const variationSelect = container.querySelector('.variation-select');
                variationSelect.innerHTML = '<option value="">-- Sélectionnez une variation --</option>';

                if (!selectedOption || !selectedOption.dataset.variations) return;
                const variations = JSON.parse(selectedOption.dataset.variations);
                if (!variations.length) {
                    variationSelect.innerHTML = '<option value="">Aucune variation</option>';
                    return;
                }
                variations.forEach(v => {
                    const opt = document.createElement('option');
                    opt.value = v.id;
                    opt.textContent = v.nom;
                    variationSelect.appendChild(opt);
                });
            }
        });



        let index = 1; // index pour les noms des inputs

        document.getElementById('add-item').addEventListener('click', function() {
            const container = document.querySelector('.fabrication-item');
            const clone = container.cloneNode(true);

            clone.querySelectorAll('select, input, textarea').forEach(input => {
                if (!input.name) return;

                // 🔹 Mettre à jour le name avec le nouvel index
                input.name = input.name.replace(/\[\d+\]/, `[${index}]`);

                // 🔹 Réinitialiser seulement les champs dépendants
                if (input.classList.contains('modele-select') || input.classList.contains(
                        'variation-select')) {
                    input.innerHTML = '<option value="">-- Sélectionnez --</option>';
                } else if (input.type === 'checkbox') {
                    input.checked = false;
                    input.id = input.id.replace(/_\d+_/, `_${index}_`);
                } else if (input.tagName === 'TEXTAREA' || input.type === 'text' || input.type ===
                    'number' || input.type === 'date') {
                    input.value = '';
                }
                // Les selects type, couleur, finition, destination, priorité, etc. gardent leur valeur
            });

            // 🔹 Découpes : cacher par défaut
            const decoupesContainer = clone.querySelector('.decoupes-container');
            if (decoupesContainer) decoupesContainer.classList.add('d-none');

            // 🔹 Bouton supprimer : afficher et ajouter l'événement
            const btnRemove = clone.querySelector('.remove-item');
            btnRemove.style.display = 'inline-block';
            btnRemove.addEventListener('click', () => clone.remove());

            // 🔹 Ajouter le clone au conteneur
            document.getElementById('fabrication-container').appendChild(clone);

            index++;
        });
    </script>


    <script>
        document.addEventListener('change', function(e) {
            if (!e.target.matches('select[name*="[decoupe_inox]"]')) return;

            const container = e.target.closest('.fabrication-item');
            const decoupes = container.querySelector('.decoupes-container');

            if (e.target.value === 'Oui') {
                decoupes.classList.remove('d-none');
            } else {
                decoupes.classList.add('d-none');
                decoupes.querySelectorAll('input[type="checkbox"]').forEach(cb => cb.checked = false);
            }
        });
    </script>
    

@endsection