{# templates/app/commandes/form.html.twig #}
{% extends 'app/base.html.twig' %}

{% set is_edit = commande and commande.id is defined %}

{% block title %}{{ is_edit ? 'Modifier la commande' : 'Nouvelle commande' }} — GestRestoSco{% endblock %}

{% block body %}

<div class="d-flex align-items-center justify-content-between mb-4">
    <h1 class="h4 fw-bold mb-0 page-title">
        <i class="fas fa-shopping-cart me-2"></i>
        {{ is_edit ? 'Commande #' ~ commande.id : 'Nouvelle commande fournisseur' }}
    </h1>
    <a href="{{ path('tenant_commandes_index') }}" class="btn btn-outline-secondary">
        <i class="fas fa-arrow-left me-1"></i>Retour
    </a>
</div>

<form method="post" action="{{ action }}" id="commandeForm" novalidate>
<input type="hidden" name="_token" value="{{ csrf_token(token) }}">

<div class="card border-0 shadow-sm rounded-3 mb-4">
    <div class="card-header bg-transparent fw-semibold py-3">
        <i class="fas fa-info-circle me-2 text-primary"></i>Informations générales
    </div>
    <div class="card-body p-4">

            <div class="row g-3">

                <div class="col-sm-6">
                    <label for="fournisseur" class="form-label fw-semibold">
                        Fournisseur <span class="text-danger">*</span>
                    </label>
                    <div class="position-relative">
                        <input type="text" id="fournisseur" name="fournisseur" class="form-control"
                               value="{{ commande.fournisseur ?? '' }}" required autofocus
                               placeholder="Nom du fournisseur" autocomplete="off">
                        <div id="fournisseurDropdown" class="list-group shadow" style="display:none;position:fixed;z-index:9999;overflow-y:auto;max-height:220px;"></div>
                    </div>
                </div>

                <div class="col-12" id="fournisseurInfoWrap" style="display:none">
                    <div class="d-flex align-items-start gap-3 p-3 rounded-3 border border-primary-subtle bg-primary-subtle">
                        <div class="text-primary fs-4 mt-1"><i class="fas fa-truck"></i></div>
                        <div class="small lh-sm">
                            <div class="fw-semibold text-primary mb-1" id="fInfoNom"></div>
                            <div id="fInfoAdresse" class="text-muted"></div>
                            <div id="fInfoContact" class="mt-1"></div>
                        </div>
                    </div>
                </div>

                <div class="col-sm-6">
                    <label for="date_livraison_souhaitee" class="form-label fw-semibold">Livraison souhaitée</label>
                    <input type="date" id="date_livraison_souhaitee" name="date_livraison_souhaitee" class="form-control"
                           value="{{ (commande and commande.date_livraison_souhaitee) ? commande.date_livraison_souhaitee|date('Y-m-d') : '' }}">
                </div>

                {% if is_edit %}
                <div class="col-sm-4">
                    <label for="statut" class="form-label fw-semibold">Statut</label>
                    <select id="statut" name="statut" class="form-select">
                        <option value="brouillon" {{ commande.statut == 'brouillon' ? 'selected' }}>Brouillon</option>
                        <option value="envoyee"   {{ commande.statut == 'envoyee'   ? 'selected' }}>Envoyée</option>
                        <option value="recue"     {{ commande.statut == 'recue'     ? 'selected' }}>Reçue</option>
                        <option value="annulee"   {{ commande.statut == 'annulee'   ? 'selected' }}>Annulée</option>
                    </select>
                </div>
                {% endif %}

                <div class="col-12">
                    <label for="notes" class="form-label fw-semibold">Notes</label>
                    <textarea id="notes" name="notes" class="form-control" rows="2"
                              placeholder="Instructions de livraison, remarques…">{{ commande.notes ?? '' }}</textarea>
                </div>

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

{# Lignes de commande #}
<div class="card border-0 shadow-sm rounded-3 mb-4">
    <div class="card-header bg-transparent fw-semibold py-3 d-flex justify-content-between align-items-center">
        <span><i class="fas fa-list me-2 text-primary"></i>Lignes de commande</span>
        <button type="button" class="btn btn-sm btn-outline-primary" id="ajouterLigne">
            <i class="fas fa-plus me-1"></i>Ajouter une ligne
        </button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm mb-0" id="lignesTable">
                <thead class="table-light">
                    <tr>
                        <th>Produit</th>
                        <th style="width:90px">Réf.</th>
                        <th style="width:75px">Qté</th>
                        <th style="width:105px">Unité</th>
                        <th style="width:95px">Prix unit.</th>
                        <th style="width:83px">TVA</th>
                        <th style="width:80px">HT/TTC</th>
                        <th style="width:100px">Origine</th>
                        <th style="width:110px">Label</th>
                        <th class="text-end" style="width:85px">Total HT</th>
                        <th class="text-end" style="width:88px">Total TTC</th>
                        <th style="width:38px"></th>
                    </tr>
                </thead>
                <tbody id="lignesBody">
                    {% for ligne in lignes %}
                    {% set u = ligne.unite ?? '' %}
                    {% set tva = ligne.taux_tva ?? 5.5 %}
                    {% set ttc = ligne.is_ttc ?? 1 %}
                    <tr class="ligne-row">
                        <td class="position-relative">
                            <input type="text" name="produit[]" class="form-control form-control-sm produit-input" value="{{ ligne.produit }}" required autocomplete="off">
                            <input type="hidden" name="label[]" class="label-hidden" value="{{ ligne.label ?? '' }}">
                            <input type="hidden" name="origine[]" class="origine-hidden" value="{{ ligne.origine ?? '' }}">
                            <div class="produit-dropdown list-group shadow" style="display:none;position:fixed;z-index:9999;overflow-y:auto;max-height:200px;"></div>
                        </td>
                        <td><input type="text" name="reference_fournisseur[]" class="form-control form-control-sm reference-input" value="{{ ligne.reference_fournisseur ?? '' }}" placeholder="Réf." style="font-size:0.75rem"></td>
                        <td><input type="number" name="quantite[]" class="form-control form-control-sm qte-input" value="{{ ligne.quantite }}" min="0" step="0.001"></td>
                        <td>
                            <select name="unite[]" class="form-select form-select-sm unite-select">
                                <option value="kg" {{ u == 'kg' ? 'selected' }}>kg</option>
                                <option value="L" {{ u == 'L' ? 'selected' }}>L</option>
                                <option value="pc" {{ u == 'pc' ? 'selected' }}>Pièce</option>
                                <option value="bt" {{ u == 'bt' ? 'selected' }}>Bouteille</option>
                                <option value="pt" {{ u == 'pt' ? 'selected' }}>Pot</option>
                                <option value="pqt" {{ u == 'pqt' ? 'selected' }}>Paquet</option>
                                <option value="lot" {{ u == 'lot' ? 'selected' }}>Lot</option>
                                <option value="filet" {{ u == 'filet' ? 'selected' }}>Filet</option>
                                <option value="sh" {{ u == 'sh' ? 'selected' }}>Sachet</option>
                                <option value="bte" {{ u == 'bte' ? 'selected' }}>Boîte</option>
                                <option value="ct" {{ u == 'ct' ? 'selected' }}>Carton</option>
                                <option value="sac" {{ u == 'sac' ? 'selected' }}>Sac</option>
                                <option value="bd" {{ u == 'bd' ? 'selected' }}>Bidon</option>
                                <option value="bq" {{ u == 'bq' ? 'selected' }}>Barquette</option>
                            </select>
                        </td>
                        <td><input type="number" name="prix_unitaire[]" class="form-control form-control-sm prix-input" value="{{ ligne.prix_unitaire ?? '' }}" min="0" step="0.001" placeholder="0.000"></td>
                        <td>
                            <select name="taux_tva[]" class="form-select form-select-sm tva-select">
                                <option value="5.5" {{ tva == 5.5 ? 'selected' }}>5.5%</option>
                                <option value="10" {{ tva == 10 ? 'selected' }}>10%</option>
                                <option value="20" {{ tva == 20 ? 'selected' }}>20%</option>
                            </select>
                        </td>
                        <td>
                            <select name="is_ttc[]" class="form-select form-select-sm ttc-select" style="padding:0.25rem;appearance:none;-webkit-appearance:none;text-align:center">
                                <option value="1" {{ ttc ? 'selected' }}>TTC</option>
                                <option value="0" {{ not ttc ? 'selected' }}>HT</option>
                            </select>
                        </td>
                        <td><small class="text-muted origine-text" style="font-size:0.7rem">{{ ligne.origine ?? '' }}</small></td>
                        <td><span class="badge bg-info text-white label-badge" style="font-size:0.7rem;white-space:nowrap;{{ ligne.label ? '' : 'display:none' }}">{{ ligne.label ?? '' }}</span></td>
                        <td class="text-end"><span class="total-ht text-muted text-nowrap" style="font-size:0.82rem">—</span></td>
                        <td class="text-end"><span class="total-ligne fw-semibold text-nowrap">—</span></td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-outline-danger supprimerLigne">
                                <i class="fas fa-trash"></i>
                            </button>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot class="table-light">
                    <tr class="align-middle">
                        <td colspan="8" class="py-2"></td>
                        <td class="text-end py-2" colspan="2"><span class="fw-semibold d-block">Total HT :</span> <span class="fw-bold text-muted" id="totalGeneralHT">—</span></td>
                        <td class="text-end py-2" colspan="2"><span class="fw-semibold d-block">Total TTC :</span> <span class="fw-bold" id="totalGeneral">—</span></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<div class="d-flex gap-2 justify-content-end">
    <a href="{{ path('tenant_commandes_index') }}" class="btn btn-outline-secondary">Annuler</a>
    <button type="submit" class="btn btn-primary">
        <i class="fas fa-save me-1"></i>{{ is_edit ? 'Enregistrer les modifications' : 'Créer la commande' }}
    </button>
</div>
</form>

{##{% if is_edit and commande.statut == 'brouillon' %}
<div class="d-flex justify-content-end mt-3">
    <form method="post" action="{{ path('tenant_commandes_statut', {id: commande.id}) }}" onsubmit="return confirm('Envoyer cette commande au fournisseur par email ?')">
        <input type="hidden" name="_token" value="{{ csrf_token('commande_statut_' ~ commande.id) }}">
        <input type="hidden" name="statut" value="envoyee">
        <button class="btn btn-success">
            <i class="fas fa-paper-plane me-2"></i>Envoyer au fournisseur
        </button>
    </form>
</div>
{% endif %}

{% if is_edit %}
<div class="d-flex justify-content-end mt-2">
    <a href="{{ path('tenant_commandes_pdf', {id: commande.id}) }}" class="btn btn-outline-primary">
        <i class="fas fa-file-pdf me-2"></i>Télécharger le bon de commande (PDF)
    </a>
</div>
{% endif %}##}

<script>
(function () {
    const UNITES_HTML = `
        <option value="kg">kg</option>
        <option value="L">L</option>
        <option value="pc">Pièce</option>
        <option value="bt">Bouteille</option>
        <option value="pt">Pot</option>
        <option value="pqt">Paquet</option>
        <option value="lot">Lot</option>
        <option value="filet">Filet</option>
        <option value="sh">Sachet</option>
        <option value="bte">Boîte</option>
        <option value="ct">Carton</option>
        <option value="sac">Sac</option>
        <option value="bd">Bidon</option>
        <option value="bq">Barquette</option>`;

    const tbody = document.getElementById('lignesBody');

    function buildRowHtml() {
        return `<tr class="ligne-row">
            <td class="position-relative">
                <input type="text" name="produit[]" class="form-control form-control-sm produit-input" required autocomplete="off" placeholder="Nom du produit">
                <input type="hidden" name="label[]" class="label-hidden" value="">
                <input type="hidden" name="origine[]" class="origine-hidden" value="">
                <div class="produit-dropdown list-group shadow" style="display:none;position:fixed;z-index:9999;overflow-y:auto;max-height:200px;"></div>
            </td>
            <td><input type="text" name="reference_fournisseur[]" class="form-control form-control-sm reference-input" placeholder="Réf." style="font-size:0.75rem"></td>
            <td><input type="number" name="quantite[]" class="form-control form-control-sm qte-input" value="1" min="0" step="0.001"></td>
            <td><select name="unite[]" class="form-select form-select-sm unite-select">${UNITES_HTML}</select></td>
            <td><input type="number" name="prix_unitaire[]" class="form-control form-control-sm prix-input" min="0" step="0.001" placeholder="0.000"></td>
            <td><select name="taux_tva[]" class="form-select form-select-sm tva-select">
                <option value="5.5" selected>5.5%</option>
                <option value="10">10%</option>
                <option value="20">20%</option>
            </select></td>
            <td><select name="is_ttc[]" class="form-select form-select-sm ttc-select" style="padding:0.25rem;appearance:none;-webkit-appearance:none;text-align:center">
                <option value="1" selected>TTC</option>
                <option value="0">HT</option>
            </select></td>
            <td><small class="text-muted origine-text" style="font-size:0.7rem"></small></td>
            <td><span class="badge bg-info text-white label-badge" style="display:none;font-size:0.7rem;white-space:nowrap"></span></td>
            <td class="text-end"><span class="total-ht text-muted text-nowrap" style="font-size:0.82rem">—</span></td>
            <td class="text-end"><span class="total-ligne fw-semibold text-nowrap">—</span></td>
            <td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger supprimerLigne"><i class="fas fa-trash"></i></button></td>
        </tr>`;
    }

    // --- Ajouter / supprimer lignes ---
    document.getElementById('ajouterLigne').addEventListener('click', function () {
        tbody.insertAdjacentHTML('beforeend', buildRowHtml());
        const newRow = tbody.lastElementChild;
        attachProduitAutocomplete(newRow.querySelector('.produit-input'));
    });

    tbody.addEventListener('click', function (e) {
        const btn = e.target.closest('.supprimerLigne');
        if (btn) { btn.closest('tr').remove(); calculerTotalGeneral(); }
    });

    // --- Calcul des totaux ---
    function calculerPrix(row) {
        const prix  = parseFloat(row.querySelector('.prix-input').value) || 0;
        const tva   = parseFloat(row.querySelector('.tva-select').value) || 0;
        const isTtc = parseInt(row.querySelector('.ttc-select').value);
        const qte   = parseFloat(row.querySelector('.qte-input').value) || 0;
        const prixHT  = isTtc ? prix / (1 + tva / 100) : prix;
        const prixTTC = isTtc ? prix : prix * (1 + tva / 100);
        const totalHT  = qte * prixHT;
        const totalTTC = qte * prixTTC;
        row.querySelector('.total-ht').textContent   = totalHT  > 0 ? totalHT.toFixed(2)  + ' €' : '—';
        row.querySelector('.total-ligne').textContent = totalTTC > 0 ? totalTTC.toFixed(2) + ' €' : '—';
        calculerTotalGeneral();
    }

    function calculerTotalGeneral() {
        let totalHT = 0, totalTTC = 0;
        document.querySelectorAll('.total-ht').forEach(el => {
            const val = parseFloat(el.textContent); if (!isNaN(val)) totalHT += val;
        });
        document.querySelectorAll('.total-ligne').forEach(el => {
            const val = parseFloat(el.textContent); if (!isNaN(val)) totalTTC += val;
        });
        const footerHT  = document.getElementById('totalGeneralHT');
        const footerTTC = document.getElementById('totalGeneral');
        if (footerHT)  footerHT.textContent  = totalHT  > 0 ? totalHT.toFixed(2)  + ' €' : '—';
        if (footerTTC) footerTTC.textContent = totalTTC > 0 ? totalTTC.toFixed(2) + ' €' : '—';
    }

    tbody.addEventListener('input', function (e) {
        const row = e.target.closest('.ligne-row');
        if (row && (e.target.classList.contains('prix-input') || e.target.classList.contains('qte-input'))) calculerPrix(row);
    });
    tbody.addEventListener('change', function (e) {
        const row = e.target.closest('.ligne-row');
        if (row && (e.target.classList.contains('tva-select') || e.target.classList.contains('ttc-select'))) calculerPrix(row);
    });

    // Calcul initial des lignes existantes
    tbody.querySelectorAll('.ligne-row').forEach(calculerPrix);

    // --- Autocomplete produit (mercuriale) ---
    const searchUrl = '{{ path('tenant_commandes_mercuriale_search') }}';

    function attachProduitAutocomplete(input) {
        const dropdown = input.closest('td').querySelector('.produit-dropdown');
        let timer = null;

        function positionDrop() {
            const rect       = input.getBoundingClientRect();
            const spaceBelow = window.innerHeight - rect.bottom;
            const spaceAbove = rect.top;
            const showAbove  = spaceBelow < 120 && spaceAbove > spaceBelow;
            dropdown.style.width = rect.width + 'px';
            dropdown.style.left  = rect.left + 'px';
            if (showAbove) { dropdown.style.top = ''; dropdown.style.bottom = (window.innerHeight - rect.top) + 'px'; }
            else           { dropdown.style.bottom = ''; dropdown.style.top = rect.bottom + 'px'; }
        }

        input.addEventListener('input', function () {
            clearTimeout(timer);
            const q = this.value.trim();
            if (q.length < 2) { dropdown.style.display = 'none'; return; }
            timer = setTimeout(() => {
                const fournisseur = document.getElementById('fournisseur').value;
                const url = searchUrl + '?q=' + encodeURIComponent(q)
                    + (fournisseur ? '&fournisseur=' + encodeURIComponent(fournisseur) : '');
                fetch(url).then(r => r.json()).then(items => {
                    if (!items.length) { dropdown.style.display = 'none'; return; }
                    dropdown.innerHTML = items.map(p =>
                        `<button type="button" class="list-group-item list-group-item-action py-1 px-2 small"
                            data-nom="${p.nom}" data-unite="${p.unite ?? ''}" data-prix="${p.prix ?? ''}" data-ref="${p.ref ?? ''}" data-label="${p.label ?? ''}" data-origine="${p.origine ?? ''}"
                        >${p.nom}${p.ref ? ' <span class="text-muted">('+p.ref+')</span>' : ''}<span class="float-end text-muted">${p.unite ?? ''}</span></button>`
                    ).join('');
                    positionDrop();
                    dropdown.style.display = 'block';
                });
            }, 280);
        });

        dropdown.addEventListener('mousedown', function (e) {
            const btn = e.target.closest('.list-group-item');
            if (!btn) return;
            e.preventDefault();
            const row = input.closest('tr');
            input.value = btn.dataset.nom;
            const refInput    = row.querySelector('.reference-input');
            const uniteSelect = row.querySelector('.unite-select');
            const prixInput   = row.querySelector('.prix-input');
            const labelHidden = row.querySelector('.label-hidden');
            const origineHidden = row.querySelector('.origine-hidden');
            const labelBadge  = row.querySelector('.label-badge');
            const origineText = row.querySelector('.origine-text');
            if (refInput && btn.dataset.ref) refInput.value = btn.dataset.ref;
            if (uniteSelect && btn.dataset.unite) {
                const opt = [...uniteSelect.options].find(o => o.value === btn.dataset.unite);
                if (opt) uniteSelect.value = btn.dataset.unite;
            }
            if (prixInput && btn.dataset.prix) prixInput.value = parseFloat(btn.dataset.prix).toFixed(3);
            if (labelHidden) labelHidden.value = btn.dataset.label || '';
            if (origineHidden) origineHidden.value = btn.dataset.origine || '';
            if (labelBadge) {
                labelBadge.textContent = btn.dataset.label || '';
                labelBadge.style.display = btn.dataset.label ? '' : 'none';
            }
            if (origineText) origineText.textContent = btn.dataset.origine || '';
            calculerPrix(row);
            dropdown.style.display = 'none';
        });

        document.addEventListener('click', function (e) {
            if (!input.contains(e.target) && !dropdown.contains(e.target)) dropdown.style.display = 'none';
        });
    }

    tbody.querySelectorAll('.produit-input').forEach(attachProduitAutocomplete);

    // --- Autocomplete fournisseur ---
    const fournisseurs = {{ fournisseurs|json_encode|raw }};
    const fInput    = document.getElementById('fournisseur');
    const fDropdown = document.getElementById('fournisseurDropdown');
    const infoWrap  = document.getElementById('fournisseurInfoWrap');

    function positionFDropdown() {
        const rect       = fInput.getBoundingClientRect();
        const spaceBelow = window.innerHeight - rect.bottom;
        const spaceAbove = rect.top;
        const showAbove  = spaceBelow < 150 && spaceAbove > spaceBelow;
        fDropdown.style.width = rect.width + 'px';
        fDropdown.style.left  = rect.left + 'px';
        if (showAbove) { fDropdown.style.top = ''; fDropdown.style.bottom = (window.innerHeight - rect.top) + 'px'; }
        else           { fDropdown.style.bottom = ''; fDropdown.style.top = rect.bottom + 'px'; }
    }

    function showFournisseurInfo(f) {
        if (!f) { infoWrap.style.display = 'none'; return; }
        document.getElementById('fInfoNom').textContent = f.nom;
        const parts = [f.adresse, [f.code_postal, f.ville].filter(Boolean).join(' ')].filter(Boolean);
        document.getElementById('fInfoAdresse').textContent = parts.join(' — ');
        const contacts = [];
        if (f.telephone) contacts.push('<i class="fas fa-phone fa-xs me-1 text-secondary"></i>' + f.telephone);
        if (f.email)     contacts.push('<i class="fas fa-envelope fa-xs me-1 text-secondary"></i>' + f.email);
        document.getElementById('fInfoContact').innerHTML = contacts.join('&nbsp;&nbsp;');
        infoWrap.style.display = 'block';
    }

    function findFournisseur(nom) {
        return fournisseurs.find(f => f.nom.toLowerCase() === nom.trim().toLowerCase()) || null;
    }

    function showSuggestions(val) {
        const q       = val.trim().toLowerCase();
        const matches = q.length === 0 ? fournisseurs : fournisseurs.filter(f => f.nom.toLowerCase().includes(q));
        if (!matches.length) { fDropdown.style.display = 'none'; return; }
        fDropdown.innerHTML = matches.map(f =>
            `<button type="button" class="list-group-item list-group-item-action py-2" data-nom="${f.nom}">${f.nom}</button>`
        ).join('');
        positionFDropdown();
        fDropdown.style.display = 'block';
    }

    fInput.addEventListener('focus', () => showSuggestions(fInput.value));
    fInput.addEventListener('input', function () { showSuggestions(this.value); showFournisseurInfo(findFournisseur(this.value)); });

    fDropdown.addEventListener('mousedown', function (e) {
        const btn = e.target.closest('.list-group-item');
        if (btn) { e.preventDefault(); fInput.value = btn.dataset.nom; fDropdown.style.display = 'none'; showFournisseurInfo(findFournisseur(btn.dataset.nom)); }
    });

    document.addEventListener('click', function (e) {
        if (!fInput.contains(e.target) && !fDropdown.contains(e.target)) fDropdown.style.display = 'none';
    });

    window.addEventListener('scroll', function () {
        if (fDropdown.style.display !== 'none') positionFDropdown();
    }, true);

    if (fInput.value) showFournisseurInfo(findFournisseur(fInput.value));
})();
</script>

{% endblock body %}