{% extends 'base.html.twig' %}
{% block title %}{{ 'نقطة البيع'|trans }}{% endblock %}

{% block body %}
<h2 class="mb-4"><i class="bi bi-cart-check"></i> {{ vente ? 'Modifier la facture' : 'نقطة البيع (POS)'|trans }}</h2>

<div class="row g-3">
    <div class="col-md-7">
        <div class="card border-0 shadow-sm p-3 mb-3">
            <label class="form-label">{{ 'بحث عن منتج (بالاسم أو الباركود)'|trans }}</label>
            <input type="text" id="rechercheProduit" class="form-control form-control-lg" placeholder="{{ 'اكتب اسم المنتج أو امسح الباركود...'|trans }}">
            <div id="resultatsRecherche" class="list-group mt-2"></div>
        </div>
    </div>

    <div class="col-md-5">
        <div class="card border-0 shadow-sm p-3">
            <h5 class="mb-3"><i class="bi bi-basket"></i> {{ 'السلة'|trans }}</h5>
            <table class="table table-sm" id="tablePanier">
                <thead><tr><th>{{ 'المنتج'|trans }}</th><th>{{ 'الكمية'|trans }}</th><th>{{ 'المجموع'|trans }}</th><th></th></tr></thead>
                <tbody id="panierBody">
                    <tr id="panierVide"><td colspan="4" class="text-muted text-center">{{ 'السلة فارغة'|trans }}</td></tr>
                </tbody>
            </table>
            <div class="d-flex justify-content-between fs-5 fw-bold border-top pt-2 mb-3">
                <span>{{ 'المجموع'|trans }}</span>
                <span id="totalPanier">0.000 {{ 'د.ت'|trans }}</span>
            </div>

            <form method="post" action="{{ vente ? path('vente_edit', {id: vente.id}) : path('vente_create') }}" id="formVente">
                <div class="mb-2">
                    <label class="form-label">{{ 'الزبون (اختياري)'|trans }}</label>
                    <select name="clientId" class="form-select">
                        <option value="">{{ 'زبون عابر'|trans }}</option>
                        {% for client in clients %}
                            <option value="{{ client.id }}" {{ vente and vente.client and vente.client.id == client.id ? 'selected' }}>{{ client.nom }} - {{ client.telephone }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">{{ 'طريقة الدفع'|trans }}</label>
                    <select name="modePaiement" class="form-select">
                        <option value="especes" {{ vente and vente.modePaiement == 'especes' ? 'selected' }}>{{ 'نقدًا'|trans }}</option>
                        <option value="carte" {{ vente and vente.modePaiement == 'carte' ? 'selected' }}>{{ 'بطاقة بنكية'|trans }}</option>
                        <option value="virement" {{ vente and vente.modePaiement == 'virement' ? 'selected' }}>{{ 'تحويل بنكي'|trans }}</option>
                        <option value="credit" {{ vente and vente.modePaiement == 'credit' ? 'selected' }}>{{ 'دفع جزئي / دين'|trans }}</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">{{ 'المبلغ المدفوع'|trans }}</label>
                    <input type="number" name="montantPaye" class="form-control" min="0" step="0.01" value="{{ vente ? vente.montantPaye : '' }}" placeholder="{{ 'اتركه فارغًا للدفع الكامل'|trans }}">
                </div>
                <input type="hidden" name="panier" id="panierInput" value="[]">
                <button type="submit" class="btn btn-success w-100" id="btnValider" disabled>
                    <i class="bi bi-check-circle"></i> {{ vente ? 'Enregistrer les modifications' : 'إتمام عملية البيع'|trans }}
                </button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
    const produits = {{ produitsJson|raw }};
    const rechercheInput = document.getElementById('rechercheProduit');
    const resultatsDiv = document.getElementById('resultatsRecherche');
    const panierBody = document.getElementById('panierBody');
    const totalPanierEl = document.getElementById('totalPanier');
    const panierInput = document.getElementById('panierInput');
    const btnValider = document.getElementById('btnValider');
    const textePanierVide = {{ 'السلة فارغة'|trans|json_encode|raw }};
    const devise = {{ 'د.ت'|trans|json_encode|raw }};

    let panier = {{ initialPanierJson|default('[]')|raw }};
    panier = panier.map(ligne => {
        const produit = produits.find(p => p.id === ligne.id);
        return { ...ligne, nom: produit ? produit.nom : '', prixVente: produit ? parseFloat(produit.prixVente) : 0 };
    }).filter(ligne => ligne.nom);

    rechercheInput.addEventListener('input', () => {
        const terme = rechercheInput.value.trim().toLowerCase();
        resultatsDiv.innerHTML = '';
        if (!terme) return;

        const trouves = produits.filter(p =>
            p.nom.toLowerCase().includes(terme) ||
            (p.codeBarre && p.codeBarre.toLowerCase().includes(terme))
        ).slice(0, 8);

        trouves.forEach(p => {
            const item = document.createElement('button');
            item.type = 'button';
            item.className = 'list-group-item list-group-item-action d-flex justify-content-between';
            item.innerHTML = `<span>${p.nom}</span><span class="text-muted">${p.prixVente} د.ت — مخزون: ${p.stock}</span>`;
            item.addEventListener('click', () => {
                ajouterAuPanier(p);
                rechercheInput.value = '';
                resultatsDiv.innerHTML = '';
                rechercheInput.focus();
            });
            resultatsDiv.appendChild(item);
        });
    });

    function ajouterAuPanier(produit) {
        const existant = panier.find(l => l.id === produit.id);
        if (existant) {
            existant.quantite += 1;
        } else {
            panier.push({ id: produit.id, nom: produit.nom, prixVente: parseFloat(produit.prixVente), quantite: 1 });
        }
        rafraichirPanier();
    }

    function changerQuantite(id, delta) {
        const ligne = panier.find(l => l.id === id);
        if (!ligne) return;
        ligne.quantite += delta;
        if (ligne.quantite <= 0) {
            panier = panier.filter(l => l.id !== id);
        }
        rafraichirPanier();
    }

    function rafraichirPanier() {
        panierBody.innerHTML = '';
        if (panier.length === 0) {
            panierBody.innerHTML = `<tr id="panierVide"><td colspan="4" class="text-muted text-center">${textePanierVide}</td></tr>`;
        } else {
            panier.forEach(l => {
                const tr = document.createElement('tr');
                tr.innerHTML = `
                    <td>${l.nom}</td>
                    <td>
                        <div class="input-group input-group-sm" style="width: 110px;">
                            <button type="button" class="btn btn-outline-secondary" onclick="changerQuantite(${l.id}, -1)">-</button>
                            <span class="input-group-text">${l.quantite}</span>
                            <button type="button" class="btn btn-outline-secondary" onclick="changerQuantite(${l.id}, 1)">+</button>
                        </div>
                    </td>
                    <td>${(l.prixVente * l.quantite).toFixed(3)} د.ت</td>
                    <td><button type="button" class="btn btn-sm btn-outline-danger" onclick="changerQuantite(${l.id}, -${l.quantite})"><i class="bi bi-x"></i></button></td>
                `;
                panierBody.appendChild(tr);
            });
        }

        const total = panier.reduce((s, l) => s + l.prixVente * l.quantite, 0);
        totalPanierEl.textContent = total.toFixed(3) + ' ' + devise;
        panierInput.value = JSON.stringify(panier.map(l => ({ id: l.id, quantite: l.quantite })));
        btnValider.disabled = panier.length === 0;
    }

    // rend les fonctions accessibles depuis les attributs onclick generes dynamiquement
    window.changerQuantite = changerQuantite;
</script>
{% endblock %}