{% extends "base.html" %}
{% load i18n static %}

{% block title %}{% translate "Créer un bon de commande depuis une offre PDF" %} — Loko{% endblock %}

{% block content %}
<div class="container-fluid py-3">
    <!-- Fil d'Ariane & Titre -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{% url 'stock:stock_purchases' %}">{% translate "Achats" %}</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{% translate "Import d'offre PDF" %}</li>
                </ol>
            </nav>
            <h1 class="h3 d-flex align-items-center mb-0">
                <i class="bi bi-file-earmark-pdf text-danger me-2"></i>
                {% translate "Créer un bon de commande depuis une offre PDF" %}
            </h1>
        </div>
        <div>
            <a href="{{ cancel_url }}" class="btn btn-outline-secondary">
                <i class="bi bi-arrow-left"></i> {% translate "Retour aux achats" %}
            </a>
        </div>
    </div>

    {% if step == 'upload' %}
    <!-- ÉTAPE 1 : TÉLÉVERSEMENT DU FICHIER PDF -->
    <div class="row justify-content-center mt-4">
        <div class="col-lg-8 col-xl-7">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-4 p-md-5">
                    <div class="text-center mb-4">
                        <div class="mb-3">
                            <span class="d-inline-flex align-items-center justify-content-center bg-primary bg-opacity-10 text-primary rounded-circle" style="width: 80px; height: 80px;">
                                <i class="bi bi-cloud-arrow-up fs-1"></i>
                            </span>
                        </div>
                        <h4 class="fw-bold">{% translate "Importer une offre ou un devis fournisseur" %}</h4>
                        <p class="text-muted">
                            {% translate "Déposez le fichier PDF reçu du fournisseur. Le système analyse automatiquement le document, extrait les articles, compare avec le stock existant et prépare le bon de commande." %}
                        </p>
                    </div>

                    <form method="post" enctype="multipart/form-data">
                        {% csrf_token %}
                        <input type="hidden" name="action" value="parse_pdf">

                        <!-- Sélection de l'entrepôt -->
                        <div class="mb-4">
                            <label for="id_warehouse" class="form-label fw-semibold">
                                <i class="bi bi-building me-1"></i> {% translate "Entrepôt de destination" %} <span class="text-danger">*</span>
                            </label>
                            <select name="warehouse" id="id_warehouse" class="form-select form-select-lg" required>
                                {% for w in warehouses %}
                                    <option value="{{ w.id }}" {% if forloop.first %}selected{% endif %}>{{ w.name }}</option>
                                {% endfor %}
                            </select>
                            <div class="form-text">
                                {% translate "Les articles de la commande seront associés par défaut aux emplacements de cet entrepôt." %}
                            </div>
                        </div>

                        <!-- Zone de dépôt PDF -->
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                <i class="bi bi-file-pdf me-1"></i> {% translate "Fichier PDF de l'offre" %} <span class="text-danger">*</span>
                            </label>
                            <div class="border border-2 border-dashed rounded-3 p-4 text-center bg-light" id="drop-zone" style="cursor: pointer;">
                                <i class="bi bi-file-earmark-arrow-up display-5 text-secondary d-block mb-2"></i>
                                <span class="fw-medium text-dark d-block mb-1">{% translate "Cliquez ou glissez-déposez le devis PDF ici" %}</span>
                                <span class="text-muted small">{% translate "Formats acceptés : PDF numérique ou scanné (OCR automatique)" %}</span>
                                <input type="file" name="pdf_file" id="id_pdf_file" class="d-none" accept=".pdf,application/pdf" required>
                                <div id="selected-file-name" class="mt-3 fw-bold text-primary d-none">
                                    <i class="bi bi-file-earmark-check me-1"></i> <span class="file-text"></span>
                                </div>
                            </div>
                        </div>

                        <!-- Encadré explicatif -->
                        <div class="alert alert-info border-0 d-flex align-items-start mb-4">
                            <i class="bi bi-info-circle-fill fs-5 me-2 mt-1 flex-shrink-0"></i>
                            <div class="small">
                                <strong>{% translate "Règle de gestion des articles :" %}</strong><br>
                                {% translate "Les articles trouvés dans le stock Loko seront directement rattachés. Pour tout article non répertorié, vous pourrez confirmer sa création en tant que nouveau produit avec un <strong>statut spécial 'En attente de validation superviseur'</strong>." %}
                            </div>
                        </div>

                        <!-- Bouton de soumission -->
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg" id="submit-parse-btn">
                                <i class="bi bi-cpu me-2"></i> {% translate "Analyser le document" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    {% elif step == 'review' %}
    <!-- ÉTAPE 2 : REVUE ET VALIDATION DU BON DE COMMANDE -->
    <form method="post" id="confirm-order-form">
        {% csrf_token %}
        <input type="hidden" name="action" value="confirm_order">
        <input type="hidden" name="warehouse_id" value="{{ selected_warehouse.id }}">
        <input type="hidden" name="temp_pdf_path" value="{{ temp_pdf_path }}">
        <input type="hidden" name="orig_pdf_name" value="{{ orig_pdf_name }}">
        <input type="hidden" name="item_count" value="{{ parse_result.items|length }}">

        <!-- Cartes d'en-tête (Fournisseur & Commande) -->
        <div class="row g-3 mb-4">
            <!-- CARTE FOURNISSEUR -->
            <div class="col-lg-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                        <span class="fw-bold text-dark"><i class="bi bi-building text-primary me-2"></i>{% translate "Fournisseur" %}</span>
                        {% if parse_result.matched_supplier %}
                            <span class="badge bg-success-subtle text-success border border-success-subtle">
                                <i class="bi bi-check-circle me-1"></i>{% translate "Fournisseur identifié" %}
                            </span>
                        {% else %}
                            <span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle">
                                <i class="bi bi-exclamation-circle me-1"></i>{% translate "Nouveau fournisseur détecté" %}
                            </span>
                        {% endif %}
                    </div>
                    <div class="card-body">
                        {% if parse_result.matched_supplier %}
                            <div class="mb-3">
                                <div class="form-check form-check-inline">
                                    <input class="form-check-input" type="radio" name="supplier_choice" id="sup_choice_existing" value="existing" checked>
                                    <label class="form-check-label fw-bold" for="sup_choice_existing">
                                        {{ parse_result.matched_supplier.name }}
                                    </label>
                                </div>
                                <div class="text-muted small ps-4">
                                    {% if parse_result.matched_supplier.enterprise_number %}
                                        <div><strong>{% translate "TVA / N° Entr." %} :</strong> {{ parse_result.matched_supplier.enterprise_number }}</div>
                                    {% endif %}
                                    {% if parse_result.matched_supplier.contact_email %}
                                        <div><strong>{% translate "Email" %} :</strong> {{ parse_result.matched_supplier.contact_email }}</div>
                                    {% endif %}
                                </div>
                                <input type="hidden" name="supplier_id" value="{{ parse_result.matched_supplier.id }}">
                            </div>
                            <div class="border-top pt-2">
                                <a class="small text-muted text-decoration-none" data-bs-toggle="collapse" href="#changeSupplierCollapse" role="button">
                                    <i class="bi bi-pencil me-1"></i>{% translate "Changer de fournisseur" %}
                                </a>
                                <div class="collapse mt-2" id="changeSupplierCollapse">
                                    <select class="form-select form-select-sm" onchange="document.querySelector('input[name=supplier_id]').value = this.value;">
                                        {% for s in suppliers %}
                                            <option value="{{ s.id }}" {% if s.id == parse_result.matched_supplier.id %}selected{% endif %}>{{ s.name }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        {% else %}
                            <!-- Fournisseur non répertorié : création proposée -->
                            <div class="mb-3">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="supplier_choice" id="sup_choice_new" value="new" checked>
                                    <label class="form-check-label fw-bold text-primary" for="sup_choice_new">
                                        {% translate "Créer ce fournisseur dans le catalogue" %}
                                    </label>
                                </div>
                                <div class="row g-2 ps-3">
                                    <div class="col-md-7">
                                        <label class="form-label small mb-1">{% translate "Nom du fournisseur" %}</label>
                                        <input type="text" name="new_supplier_name" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_name }}">
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label small mb-1">{% translate "N° Entreprise / TVA" %}</label>
                                        <input type="text" name="new_supplier_vat" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_vat }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small mb-1">{% translate "Email" %}</label>
                                        <input type="email" name="new_supplier_email" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_email }}">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small mb-1">{% translate "Téléphone" %}</label>
                                        <input type="text" name="new_supplier_phone" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_phone }}">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label small mb-1">{% translate "Adresse" %}</label>
                                        <input type="text" name="new_supplier_address" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_address }}">
                                    </div>
                                </div>
                            </div>
                            <div class="border-top pt-2">
                                <div class="form-check">
                                    <input class="form-check-input" type="radio" name="supplier_choice" id="sup_choice_pick" value="existing">
                                    <label class="form-check-label small" for="sup_choice_pick">
                                        {% translate "Associer à un fournisseur existant :" %}
                                    </label>
                                </div>
                                <select name="supplier_id" class="form-select form-select-sm mt-1" onfocus="document.getElementById('sup_choice_pick').checked = true;">
                                    <option value="">{% translate "— Sélectionner un fournisseur —" %}</option>
                                    {% for s in suppliers %}
                                        <option value="{{ s.id }}">{{ s.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        {% endif %}
                    </div>
                </div>
            </div>

            <!-- CARTE COMMANDE & DESTINATION -->
            <div class="col-lg-6">
                <div class="card h-100 border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom py-3">
                        <span class="fw-bold text-dark"><i class="bi bi-cart-check text-primary me-2"></i>{% translate "Informations du bon de commande" %}</span>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label small text-muted mb-1">{% translate "Entrepôt de livraison" %}</label>
                                <div class="fw-bold">{{ selected_warehouse.name }}</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small text-muted mb-1">{% translate "Statut initial" %}</label>
                                <select name="order_status" class="form-select form-select-sm">
                                    <option value="pending" selected>{% translate "En attente (Brouillon)" %}</option>
                                    <option value="ordered">{% translate "Envoyée (Commandée)" %}</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small text-muted mb-1">{% translate "N° Devis / Offre d'origine" %}</label>
                                <div class="fw-bold font-monospace">{{ parse_result.metadata.quote_number|default:"—" }}</div>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label small text-muted mb-1">{% translate "Date du devis" %}</label>
                                <div class="fw-bold">{{ parse_result.metadata.date|default:"—" }}</div>
                            </div>
                            <div class="col-12 border-top pt-2">
                                <div class="small text-muted d-flex align-items-center">
                                    <i class="bi bi-paperclip me-1 text-primary"></i>
                                    <span>{% translate "Pièce justificative attachée :" %} <strong>{{ orig_pdf_name }}</strong></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- TABLEAU DES ARTICLES EXTRAITS -->
        <div class="card border-0 shadow-sm mb-4">
            <div class="card-header bg-white border-bottom py-3 d-flex justify-content-between align-items-center">
                <div>
                    <span class="fw-bold text-dark fs-5">
                        <i class="bi bi-box-seam text-primary me-2"></i>
                        {% translate "Articles extraits du devis" %}
                    </span>
                    <span class="badge bg-primary ms-2">{{ parse_result.items|length }} {% translate "ligne(s)" %}</span>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleSelectAllItems(true)">
                        <i class="bi bi-check-all"></i> {% translate "Tout cocher" %}
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="toggleSelectAllItems(false)">
                        <i class="bi bi-x"></i> {% translate "Tout décocher" %}
                    </button>
                </div>
            </div>

            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0" id="items-review-table">
                    <thead class="table-light small">
                        <tr>
                            <th style="width: 40px;" class="text-center">
                                <input type="checkbox" id="master-select-checkbox" class="form-check-input" checked onchange="toggleSelectAllItems(this.checked)">
                            </th>
                            <th style="min-width: 250px;">{% translate "Référence & Désignation fournisseur" %}</th>
                            <th style="min-width: 300px;">{% translate "Correspondance Catalogue Loko" %}</th>
                            <th style="width: 100px;" class="text-end">{% translate "Quantité" %}</th>
                            <th style="width: 120px;" class="text-end">{% translate "Prix net HT" %}</th>
                            <th style="width: 90px;" class="text-end">{% translate "TVA" %}</th>
                            <th style="width: 120px;" class="text-end">{% translate "Total HT" %}</th>
                            <th style="min-width: 180px;">{% translate "Emplacement stock" %}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in parse_result.items %}
                            {% with idx=forloop.counter0 %}
                            <tr class="{% if item.is_new %}table-warning-subtle{% endif %}">
                                <!-- Checkbox inclusion -->
                                <td class="text-center">
                                    <input type="checkbox" name="item_{{ idx }}_include" class="form-check-input item-include-cb" value="1" checked onchange="updateTotals()">
                                    <input type="hidden" name="item_{{ idx }}_ref" value="{{ item.reference }}">
                                    <input type="hidden" name="item_{{ idx }}_name" value="{{ item.name }}">
                                    <input type="hidden" name="item_{{ idx }}_qty" value="{{ item.quantity }}">
                                    <input type="hidden" name="item_{{ idx }}_unit" value="{{ item.unit }}">
                                    <input type="hidden" name="item_{{ idx }}_price" value="{{ item.unit_price }}">
                                    <input type="hidden" name="item_{{ idx }}_vat" value="{{ item.vat_rate }}">
                                </td>

                                <!-- Désignation extraite -->
                                <td>
                                    {% if item.reference %}
                                        <span class="badge bg-light text-dark border font-monospace me-1">{{ item.reference }}</span>
                                    {% endif %}
                                    <div class="fw-semibold text-break">{{ item.name }}</div>
                                    {% if item.discount and item.discount != "0%" %}
                                        <small class="text-success"><i class="bi bi-tag-fill me-1"></i>Remise fournisseur : {{ item.discount }}</small>
                                    {% endif %}
                                </td>

                                <!-- Rapprochement Catalogue Produit -->
                                <td>
                                    {% if not item.is_new %}
                                        <!-- Produit existant reconnu -->
                                        <div class="d-flex align-items-center mb-1">
                                            <span class="badge bg-success text-white me-2">
                                                <i class="bi bi-check-circle"></i> {% translate "Produit trouvé" %}
                                            </span>
                                            <a href="{% url 'stock:product_detail' item.matched_product_id %}" target="_blank" class="fw-bold text-decoration-none">
                                                {{ item.matched_product_code }} — {{ item.matched_product_name }}
                                            </a>
                                        </div>
                                        <input type="hidden" name="item_{{ idx }}_product_action" value="existing">
                                        <input type="hidden" name="item_{{ idx }}_product_id" value="{{ item.matched_product_id }}">
                                    {% else %}
                                        <!-- Produit non trouvé : validation magasinier -->
                                        <div class="p-2 rounded border bg-white">
                                            <div class="d-flex align-items-center mb-2">
                                                <span class="badge bg-warning text-dark me-2">
                                                    <i class="bi bi-exclamation-triangle"></i> {% translate "Nouveau produit" %}
                                                </span>
                                                <span class="small text-muted">{% translate "Non répertorié dans le catalogue" %}</span>
                                            </div>

                                            <div class="form-check mb-2">
                                                <input class="form-check-input" type="radio" name="item_{{ idx }}_product_action" id="action_new_{{ idx }}" value="new" checked onchange="toggleProductRowAction({{ idx }})">
                                                <label class="form-check-label fw-bold text-primary small" for="action_new_{{ idx }}">
                                                    {% translate "Confirmer comme nouveau produit" %}
                                                    <span class="badge bg-warning-subtle text-warning-emphasis border ms-1" style="font-size: 0.72rem;">
                                                        <i class="bi bi-clock-history"></i> {% translate "À valider par superviseur" %}
                                                    </span>
                                                </label>
                                            </div>

                                            <div class="row g-2 mb-2 ps-3" id="new_prod_fields_{{ idx }}">
                                                <div class="col-12">
                                                    <select name="item_{{ idx }}_category" class="form-select form-select-sm">
                                                        <option value="">{% translate "— Catégorie (optionnelle) —" %}</option>
                                                        {% for cat in categories %}
                                                            <option value="{{ cat.id }}">{{ cat.name_fr }}</option>
                                                        {% endfor %}
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="form-check">
                                                <input class="form-check-input" type="radio" name="item_{{ idx }}_product_action" id="action_existing_{{ idx }}" value="existing" onchange="toggleProductRowAction({{ idx }})">
                                                <label class="form-check-label small" for="action_existing_{{ idx }}">
                                                    {% translate "Associer à un produit existant :" %}
                                                </label>
                                            </div>
                                            <div class="ps-3 mt-1 d-none" id="existing_prod_field_{{ idx }}">
                                                <select name="item_{{ idx }}_product_id" class="form-select form-select-sm">
                                                    <option value="">{% translate "— Choisir un produit existant —" %}</option>
                                                    {% for p in products %}
                                                        <option value="{{ p.id }}">{{ p.code }} — {{ p.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    {% endif %}
                                </td>

                                <!-- Quantité -->
                                <td class="text-end">
                                    <span class="fw-bold">{{ item.quantity }}</span>
                                    <span class="text-muted small d-block">{{ item.raw_unit }}</span>
                                </td>

                                <!-- Prix unitaire net HT -->
                                <td class="text-end">
                                    <span class="fw-semibold">{{ item.unit_price|floatformat:2 }} €</span>
                                </td>

                                <!-- Taux TVA -->
                                <td class="text-end text-muted small">
                                    {{ item.vat_rate|floatformat:0 }}%
                                </td>

                                <!-- Total HT -->
                                <td class="text-end fw-bold text-dark item-total-cell" data-total="{{ item.total_amount }}" data-vat="{{ item.vat_rate }}">
                                    {{ item.total_amount|floatformat:2 }} €
                                </td>

                                <!-- Emplacement de stock -->
                                <td>
                                    <select name="item_{{ idx }}_location" class="form-select form-select-sm">
                                        {% for loc in locations %}
                                            <option value="{{ loc.id }}" {% if loc.id == default_location.id %}selected{% endif %}>
                                                {{ loc.name }} {% if loc.is_default %}(par défaut){% endif %}
                                            </option>
                                        {% empty %}
                                            <option value="">{% translate "Aucun emplacement" %}</option>
                                        {% endfor %}
                                    </select>
                                </td>
                            </tr>
                            {% endwith %}
                        {% endfor %}
                    </tbody>
                </table>
            </div>

            <!-- Totaux récapitulatifs & Validation -->
            <div class="card-footer bg-light py-3">
                <div class="row align-items-center">
                    <div class="col-md-6 mb-3 mb-md-0">
                        <div class="d-flex align-items-center gap-3">
                            <div>
                                <span class="text-muted small d-block">{% translate "Total HTVA :" %}</span>
                                <span class="h5 mb-0 fw-bold" id="computed-total-ht">0.00 €</span>
                            </div>
                            <div class="border-start ps-3">
                                <span class="text-muted small d-block">{% translate "TVA calculée :" %}</span>
                                <span class="h6 mb-0 text-muted" id="computed-total-tva">0.00 €</span>
                            </div>
                            <div class="border-start ps-3">
                                <span class="text-muted small d-block">{% translate "Total TTC estimé :" %}</span>
                                <span class="h5 mb-0 fw-bold text-primary" id="computed-total-ttc">0.00 €</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 text-md-end d-flex justify-content-md-end gap-2">
                        <a href="{% url 'stock:purchase_order_from_pdf' %}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-repeat"></i> {% translate "Recommencer" %}
                        </a>
                        <button type="submit" class="btn btn-success btn-lg px-4" id="submit-confirm-btn">
                            <i class="bi bi-cart-check me-2"></i> {% translate "Créer le bon de commande" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Zone drag & drop
    const dropZone = document.getElementById('drop-zone');
    const fileInput = document.getElementById('id_pdf_file');
    const selectedFileDiv = document.getElementById('selected-file-name');

    if (dropZone && fileInput) {
        dropZone.addEventListener('click', () => fileInput.click());

        dropZone.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropZone.classList.add('border-primary', 'bg-white');
        });

        dropZone.addEventListener('dragleave', () => {
            dropZone.classList.remove('border-primary', 'bg-white');
        });

        dropZone.addEventListener('drop', (e) => {
            e.preventDefault();
            dropZone.classList.remove('border-primary', 'bg-white');
            if (e.dataTransfer.files.length > 0) {
                fileInput.files = e.dataTransfer.files;
                updateFileDisplay();
            }
        });

        fileInput.addEventListener('change', updateFileDisplay);

        function updateFileDisplay() {
            if (fileInput.files.length > 0) {
                const file = fileInput.files[0];
                selectedFileDiv.querySelector('.file-text').textContent = file.name + ' (' + (file.size / 1024).toFixed(1) + ' KB)';
                selectedFileDiv.classList.remove('d-none');
            }
        }
    }

    // Calcul initial des totaux
    updateTotals();
});

function toggleSelectAllItems(checked) {
    document.querySelectorAll('.item-include-cb').forEach(cb => {
        cb.checked = checked;
    });
    updateTotals();
}

function toggleProductRowAction(idx) {
    const isNew = document.getElementById('action_new_' + idx).checked;
    const newFields = document.getElementById('new_prod_fields_' + idx);
    const existingField = document.getElementById('existing_prod_field_' + idx);
    if (newFields && existingField) {
        if (isNew) {
            newFields.classList.remove('d-none');
            existingField.classList.add('d-none');
        } else {
            newFields.classList.add('d-none');
            existingField.classList.remove('d-none');
        }
    }
}

function updateTotals() {
    let totalHt = 0;
    let totalTva = 0;

    document.querySelectorAll('#items-review-table tbody tr').forEach(row => {
        const cb = row.querySelector('.item-include-cb');
        if (cb && cb.checked) {
            const totalCell = row.querySelector('.item-total-cell');
            if (totalCell) {
                const amount = parseFloat(totalCell.getAttribute('data-total')) || 0;
                const vatRate = parseFloat(totalCell.getAttribute('data-vat')) || 21;
                totalHt += amount;
                totalTva += amount * (vatRate / 100.0);
            }
        }
    });

    const htEl = document.getElementById('computed-total-ht');
    const tvaEl = document.getElementById('computed-total-tva');
    const ttcEl = document.getElementById('computed-total-ttc');

    if (htEl) htEl.textContent = totalHt.toFixed(2) + ' €';
    if (tvaEl) tvaEl.textContent = totalTva.toFixed(2) + ' €';
    if (ttcEl) ttcEl.textContent = (totalHt + totalTva).toFixed(2) + ' €';
}
</script>
{% endblock %}