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

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

{% block head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'common/select2.min.css' %}">
    <link rel="stylesheet" href="{% static 'common/select2-bootstrap-5-theme.min.css' %}">
    <style>
        .select2-container--bootstrap-5 .select2-selection--single {
            font-size: 0.875rem;
            padding: 0.25rem 0.5rem;
            min-height: calc(1.5em + 0.5rem + 2px);
        }
        .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
            font-size: 0.875rem;
            line-height: 1.5;
            color: #212529;
            padding-left: 0;
        }
        .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
            font-size: 0.85rem;
            padding: 0.35rem 0.6rem;
        }
        .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field {
            font-size: 0.85rem;
            padding: 0.3rem 0.5rem;
        }
        .table td .input-group {
            flex-wrap: nowrap !important;
        }
        .table td .input-group .select2-container--bootstrap-5 {
            flex: 1 1 auto;
            width: 1% !important;
        }
        .product-select-warning + .select2-container--bootstrap-5 .select2-selection {
            border-color: #ffc107 !important;
            background-color: #fffdf5;
        }
        .product-select-invalid + .select2-container--bootstrap-5 .select2-selection {
            border-color: #dc3545 !important;
            background-color: #fff8f8;
        }
        #items-review-table th.col-correspondence, 
        #items-review-table td.col-correspondence {
            min-width: 340px;
        }
        .btn-search-product {
            border-color: #ced4da;
            background-color: #f8f9fa;
            color: #495057;
            transition: all 0.15s ease-in-out;
        }
        .btn-search-product:hover {
            background-color: #0d6efd;
            border-color: #0d6efd;
            color: #fff;
        }
        .product-search-result-item {
            cursor: pointer;
            transition: background-color 0.15s ease-in-out;
        }
        .product-search-result-item:hover {
            background-color: #f1f7ff;
        }
        .keyword-chip {
            cursor: pointer;
            font-size: 0.75rem;
            padding: 0.2rem 0.55rem;
            border-radius: 50rem;
            transition: all 0.15s ease-in-out;
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            color: #495057;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
        }
        .keyword-chip:hover {
            background-color: #0d6efd;
            border-color: #0d6efd;
            color: #fff;
        }
    </style>
{% 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" %}</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>
                <i class="bi bi-camera text-primary me-2"></i>
                {% translate "Créer un bon de commande depuis une offre (PDF, Scan, Photo)" %}
            </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, SCAN OU PHOTO) -->
    <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 un devis au format PDF, un scan ou des photos prises avec un smartphone (sélectionnez toutes les pages en une fois). Le système combine et analyse automatiquement les pages, extrait les articles 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 Document (PDF ou Image(s)) -->
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                <i class="bi bi-file-earmark-text me-1"></i> {% translate "Fichier(s) de l'offre (PDF, scan ou photos des pages)" %} <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;">
                                <div class="mb-2">
                                    <i class="bi bi-file-earmark-pdf text-danger fs-2 me-2"></i>
                                    <i class="bi bi-camera text-primary fs-2"></i>
                                </div>
                                <span class="fw-medium text-dark d-block mb-1">{% translate "Cliquez ou glissez-déposez vos documents ou photos ici" %}</span>
                                <span class="text-muted small d-block mb-2">{% translate "Formats acceptés : PDF, photos & scans (JPG, PNG, WEBP, TIFF) — Sélection multiple de photos autorisée pour plusieurs pages" %}</span>
                                <input type="file" name="pdf_file" id="id_pdf_file" class="d-none" accept=".pdf,image/*,.png,.jpg,.jpeg,.webp,.bmp,.tiff,.tif" multiple 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 & du fournisseur :" %}</strong><br>
                                {% translate "Les articles du devis sont rapprochés avec les produits existants de votre catalogue Loko. Si le fournisseur n'est pas encore enregistré, vous pourrez confirmer sa création directement lors de la revue." %}
                            </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" onsubmit="return validateOrderForm()">
        {% 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="temp_files_json" value="{{ temp_files_json }}">
        <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 "Fournisseur non trouvé" %}
                            </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 }}{% if s.enterprise_number %} ({{ s.enterprise_number }}){% endif %}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        {% else %}
                            <!-- Fournisseur non répertorié : Proposition claire de création ou sélection -->
                            <div class="alert alert-warning border-0 d-flex align-items-center mb-3 py-2 px-3">
                                <i class="bi bi-building-exclamation fs-4 me-2 text-warning flex-shrink-0"></i>
                                <div class="small">
                                    <strong>{% translate "Fournisseur non trouvé dans le répertoire Loko" %}</strong><br>
                                    {% translate "Le fournisseur détecté n'a pas été retrouvé. Souhaitez-vous le créer dans Loko ou rattacher un fournisseur existant ?" %}
                                </div>
                            </div>

                            <!-- Option 1 : Créer le fournisseur (pré-rempli) -->
                            <div class="p-3 border rounded-3 border-primary bg-white shadow-sm mb-3" id="container_create_supplier">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="supplier_choice" id="sup_choice_new" value="new" checked onchange="toggleSupplierChoice()">
                                    <label class="form-check-label fw-bold text-primary" for="sup_choice_new">
                                        <i class="bi bi-plus-circle-fill me-1"></i> {% translate "Créer ce nouveau fournisseur dans le répertoire (pré-rempli)" %}
                                    </label>
                                </div>
                                <div class="row g-2 ps-3 mt-1">
                                    <div class="col-md-7">
                                        <label class="form-label small fw-semibold mb-1">
                                            {% translate "Nom de l'entreprise" %} <span class="text-danger">*</span>
                                        </label>
                                        <input type="text" name="new_supplier_name" id="id_new_supplier_name" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_name }}" placeholder="{% translate 'ex: Mon Fournisseur SRL' %}">
                                    </div>
                                    <div class="col-md-5">
                                        <label class="form-label small fw-semibold mb-1">{% translate "N° TVA / Entreprise" %}</label>
                                        <input type="text" name="new_supplier_vat" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_vat }}" placeholder="BE 0123.456.789">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small fw-semibold mb-1">{% translate "Email de contact" %}</label>
                                        <input type="email" name="new_supplier_email" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_email }}" placeholder="contact@fournisseur.com">
                                    </div>
                                    <div class="col-md-6">
                                        <label class="form-label small fw-semibold 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 }}" placeholder="+32 ...">
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label small fw-semibold mb-1">{% translate "Adresse" %}</label>
                                        <input type="text" name="new_supplier_address" class="form-control form-control-sm" value="{{ parse_result.metadata.supplier_address }}" placeholder="{% translate 'Rue, code postal, ville' %}">
                                    </div>
                                </div>
                                <div class="text-muted small ps-3 mt-2">
                                    <i class="bi bi-info-circle me-1"></i>
                                    {% translate "Le fournisseur sera automatiquement enregistré dans Loko et rattaché à ce bon de commande." %}
                                </div>
                            </div>

                            <!-- Option 2 : Rattacher à un fournisseur existant -->
                            <div class="p-3 border rounded-3 bg-light-subtle" id="container_existing_supplier">
                                <div class="form-check mb-2">
                                    <input class="form-check-input" type="radio" name="supplier_choice" id="sup_choice_pick" value="existing" onchange="toggleSupplierChoice()">
                                    <label class="form-check-label fw-bold text-secondary" for="sup_choice_pick">
                                        <i class="bi bi-search me-1"></i> {% translate "Ou rattacher à un fournisseur déjà existant dans Loko :" %}
                                    </label>
                                </div>
                                <div class="ps-3">
                                    <select name="supplier_id" id="id_supplier_id" class="form-select form-select-sm" onfocus="document.getElementById('sup_choice_pick').checked = true; toggleSupplierChoice();">
                                        <option value="">{% translate "— Sélectionner un fournisseur dans la liste —" %}</option>
                                        {% for s in suppliers %}
                                            <option value="{{ s.id }}">{{ s.name }}{% if s.enterprise_number %} ({{ s.enterprise_number }}){% endif %}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </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 flex-wrap gap-2">
                                    <div>
                                        <i class="bi bi-paperclip me-1 text-primary"></i>
                                        {% if parse_result.is_multi_image %}
                                            <span>{% translate "Pièces justificatives attachées :" %} <strong>{{ parse_result.image_count }} {% translate "photos / pages" %}</strong></span>
                                        {% else %}
                                            <span>{% translate "Pièce justificative attachée :" %} <strong>{{ orig_pdf_name }}</strong></span>
                                        {% endif %}
                                    </div>
                                    {% if parse_result.is_multi_image %}
                                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                                            <i class="bi bi-images me-1"></i>{% blocktranslate with count=parse_result.image_count %}{{ count }} photos combinées{% endblocktranslate %}
                                        </span>
                                    {% elif parse_result.is_image %}
                                        <span class="badge bg-info-subtle text-info-emphasis border border-info-subtle">
                                            <i class="bi bi-camera me-1"></i>{% translate "Photo / Scan" %}
                                        </span>
                                    {% elif parse_result.is_ocr %}
                                        <span class="badge bg-secondary-subtle text-secondary border">
                                            <i class="bi bi-file-earmark-text me-1"></i>{% translate "PDF scanné" %}
                                        </span>
                                    {% else %}
                                        <span class="badge bg-primary-subtle text-primary border border-primary-subtle">
                                            <i class="bi bi-file-earmark-pdf me-1"></i>{% translate "PDF numérique" %}
                                        </span>
                                    {% endif %}
                                </div>
                                {% if saved_temp_files and saved_temp_files|length > 1 %}
                                    <div class="mt-2 d-flex flex-wrap gap-1">
                                        {% for f in saved_temp_files %}
                                            <span class="badge bg-light text-dark border">
                                                <i class="bi bi-file-earmark-image text-primary me-1"></i>{{ f.name }}
                                            </span>
                                        {% endfor %}
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- RÈGLE COMMANDE CATALOGUE -->
        <div class="alert alert-info border-0 shadow-sm d-flex align-items-center mb-3 py-2 px-3">
            <i class="bi bi-info-circle-fill text-primary fs-5 me-3"></i>
            <div>
                <strong>{% translate "Règle de commande :" %}</strong>
                {% translate "Les lignes de commande doivent obligatoirement correspondre à un produit existant dans le catalogue. Si un produit n'est pas reconnu automatiquement, sélectionnez-le dans la liste ou décochez la ligne pour l'exclure." %}
            </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 class="col-correspondence" style="min-width: 340px;">{% translate "Correspondance Produit Stock" %}</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 id="item-row-{{ idx }}" class="{% if not item.matched_product_id %}table-warning-subtle{% endif %}">
                                <!-- Checkbox inclusion -->
                                <td class="text-center">
                                    <input type="checkbox" 
                                           name="item_{{ idx }}_include" 
                                           id="item_{{ idx }}_include" 
                                           class="form-check-input item-include-cb" 
                                           data-idx="{{ idx }}" 
                                           value="1" 
                                           {% if item.matched_product_id %}checked{% endif %} 
                                           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 (Exclusif aux produits existants) -->
                                <td class="col-correspondence">
                                    <div class="mb-1 d-flex align-items-center gap-1" id="item_{{ idx }}_badge_container">
                                        {% if item.matched_product_id %}
                                            {% if item.match_type == 'exact_supplier_ref' %}
                                                <span class="badge bg-success text-white">
                                                    <i class="bi bi-check-circle me-1"></i>{% translate "Réf. fournisseur exacte" %}
                                                </span>
                                            {% elif item.match_type == 'exact_sku_or_code' %}
                                                <span class="badge bg-success text-white">
                                                    <i class="bi bi-check-circle me-1"></i>{% translate "Code/SKU exact" %}
                                                </span>
                                            {% elif item.match_type == 'exact_name' %}
                                                <span class="badge bg-success text-white">
                                                    <i class="bi bi-check-circle me-1"></i>{% translate "Nom identique" %}
                                                </span>
                                            {% else %}
                                                <span class="badge bg-info text-dark">
                                                    <i class="bi bi-stars me-1"></i>{% translate "Similarité trouvée" %} ({{ item.match_score|floatformat:0 }}%)
                                                </span>
                                            {% endif %}
                                            <a href="{% url 'stock:product_detail' item.matched_product_id %}" target="_blank" class="small text-muted text-decoration-none ms-1 product-detail-link" title="{% translate 'Voir la fiche produit' %}">
                                                <i class="bi bi-box-arrow-up-right"></i>
                                            </a>
                                        {% else %}
                                            <span class="badge bg-warning text-dark">
                                                <i class="bi bi-exclamation-triangle me-1"></i>{% translate "Non associé" %}
                                            </span>
                                        {% endif %}
                                    </div>

                                    <!-- Sélecteur de produit existant avec bouton de recherche modal -->
                                    <div class="input-group input-group-sm">
                                        <select name="item_{{ idx }}_product_id" 
                                                id="item_{{ idx }}_product_id" 
                                                class="form-select form-select-sm product-select-input {% if not item.matched_product_id %}product-select-warning{% endif %}" 
                                                data-idx="{{ idx }}"
                                                data-item-ref="{{ item.reference|default:'' }}"
                                                data-item-name="{{ item.name|default:'' }}"
                                                onchange="handleProductSelection({{ idx }})">
                                            {% if not item.matched_product_id %}
                                                <option value="" selected>— {% translate "Sélectionner un produit existant..." %} —</option>
                                            {% else %}
                                                <option value="{{ item.matched_product_id }}" selected>
                                                    {{ item.matched_product_code }} — {{ item.matched_product_name }}
                                                </option>
                                                <option value="">— {% translate "Ne pas associer (exclure)" %} —</option>
                                            {% endif %}

                                            {% if item.top_matches %}
                                                <optgroup label="{% translate 'Suggestions pertinentes' %}">
                                                    {% for s in item.top_matches %}
                                                        {% if s.id != item.matched_product_id %}
                                                            <option value="{{ s.id }}">
                                                                {{ s.code }} — {{ s.name }} ({{ s.score|floatformat:0 }}%)
                                                            </option>
                                                        {% endif %}
                                                    {% endfor %}
                                                </optgroup>
                                            {% endif %}

                                            <optgroup label="{% translate 'Tous les produits du catalogue' %}">
                                                {% for p in products %}
                                                    {% if p.id != item.matched_product_id %}
                                                        <option value="{{ p.id }}">{{ p.code }} — {{ p.name }}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </optgroup>
                                        </select>
                                        <button type="button" 
                                                class="btn btn-outline-secondary btn-search-product" 
                                                title="{% translate 'Rechercher un produit (code ou libellé)' %}"
                                                onclick="openProductSearchModal({{ idx }})">
                                            <i class="bi bi-search"></i>
                                        </button>
                                    </div>
                                    <div class="form-text small text-danger mt-1 {% if item.matched_product_id %}d-none{% endif %}" id="item_{{ idx }}_help">
                                        <i class="bi bi-exclamation-circle me-1"></i>{% translate "Produit requis pour commander cette ligne." %}
                                    </div>
                                </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" id="item_{{ idx }}_location" class="form-select form-select-sm">
                                        {% for loc in locations %}
                                            <option value="{{ loc.id }}" {% if loc.id == item.suggested_location_id or not item.suggested_location_id and 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 %}

    <!-- Modal Recherche de Produit Catalogue -->
    <div class="modal fade" id="productSearchModal" tabindex="-1" aria-labelledby="productSearchModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content shadow border-0">
                <div class="modal-header bg-light py-2 px-3 border-bottom">
                    <div>
                        <h5 class="modal-title fw-bold fs-6 mb-0 text-dark" id="productSearchModalLabel">
                            <i class="bi bi-search text-primary me-2"></i>{% translate "Rechercher un produit dans le catalogue" %}
                        </h5>
                        <div class="text-muted small mt-1" id="modal-target-item-info"></div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                </div>
                <div class="modal-body p-3">
                    <!-- Champ de recherche live -->
                    <div class="input-group mb-2">
                        <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-muted"></i></span>
                        <input type="text" 
                               id="modalProductSearchInput" 
                               class="form-control border-start-0 border-end-0 ps-0" 
                               placeholder="{% translate 'Rechercher par code (ex: PROD_114...), libellé, réf. fournisseur ou SKU...' %}" 
                               autocomplete="off">
                        <button class="btn btn-outline-secondary border-start-0" type="button" id="modalProductSearchClear" title="{% translate 'Effacer' %}">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>

                    <!-- Suggestions rapides de mots-clés -->
                    <div class="d-flex align-items-center flex-wrap gap-1 mb-3" id="modalQuickKeywordsContainer">
                        <span class="small text-muted me-1"><i class="bi bi-lightbulb text-warning me-1"></i>{% translate "Suggestions :" %}</span>
                        <div id="modalQuickKeywordsList" class="d-inline-flex flex-wrap gap-1"></div>
                    </div>

                    <!-- Zone statut / chargement / vide -->
                    <div id="modalSearchLoading" class="text-center py-4 d-none">
                        <div class="spinner-border text-primary spinner-border-sm me-2" role="status"></div>
                        <span class="text-muted small">{% translate "Recherche en cours dans le catalogue..." %}</span>
                    </div>
                    <div id="modalSearchEmpty" class="text-center py-4 text-muted d-none">
                        <i class="bi bi-inbox fs-2 d-block mb-1 text-secondary opacity-50"></i>
                        {% translate "Aucun produit correspondant trouvé dans le catalogue." %}
                    </div>

                    <!-- Liste des résultats -->
                    <div id="modalSearchResults" class="list-group list-group-flush border rounded-3 overflow-auto" style="max-height: 380px;">
                    </div>
                </div>
                <div class="modal-footer py-2 px-3 bg-light d-flex justify-content-between">
                    <span class="small text-muted" id="modalResultsCount"></span>
                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">{% translate "Fermer" %}</button>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock content %}

{% block script %}
<script src="{% static 'common/select2.min.js' %}"></script>
<script>
const PRODUCT_LOCATIONS_MAP = {{ product_locations_json|default:'{}'|safe }};
const PRODUCT_DETAIL_URL_TEMPLATE = "{% url 'stock:product_detail' 99999999 %}";
const PRODUCTS_AUTOCOMPLETE_URL = "{% url 'stock:products_autocomplete_api' %}";

let currentModalTargetIdx = null;
let searchDebounceTimer = null;

// Normalisation pour recherche sans accent
function normalizeSearchText(str) {
    if (!str) return '';
    return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
}

// Matcher personnalisé pour Select2 (multi-mots, insensible accents et ordre)
function matchProduct(params, data) {
    if ($.trim(params.term) === '') {
        return data;
    }
    if (typeof data.text === 'undefined') {
        return null;
    }

    const term = normalizeSearchText(params.term);
    const text = normalizeSearchText(data.text);
    const tokens = term.split(/\s+/).filter(Boolean);

    const matchesAll = tokens.every(token => text.includes(token));
    if (matchesAll) {
        return data;
    }

    if (data.children && data.children.length > 0) {
        const matchChildren = [];
        for (let i = 0; i < data.children.length; i++) {
            const childMatch = matchProduct(params, data.children[i]);
            if (childMatch) {
                matchChildren.push(childMatch);
            }
        }
        if (matchChildren.length > 0) {
            const modifiedData = $.extend({}, data, true);
            modifiedData.children = matchChildren;
            return modifiedData;
        }
    }

    return null;
}

function escapeHtml(str) {
    if (!str) return '';
    return String(str)
        .replace(/&/g, '&amp;')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#39;');
}

function initSelect2OnInputs() {
    $('.product-select-input').each(function() {
        const $el = $(this);
        if ($el.hasClass('select2-hidden-accessible')) {
            return;
        }
        $el.select2({
            theme: 'bootstrap-5',
            placeholder: '— ' + "{% translate 'Sélectionner un produit existant...' %}" + ' —',
            allowClear: false,
            width: '100%',
            matcher: matchProduct
        }).on('select2:select', function() {
            const idx = $(this).data('idx');
            handleProductSelection(idx);
        }).on('select2:unselect', function() {
            const idx = $(this).data('idx');
            handleProductSelection(idx);
        });
    });

    $(document).on('select2:open', () => {
        const searchInput = document.querySelector('.select2-search__field');
        if (searchInput) {
            searchInput.focus();
        }
    });
}

function openProductSearchModal(idx) {
    currentModalTargetIdx = idx;
    const select = document.getElementById('item_' + idx + '_product_id');
    const itemRef = select ? (select.getAttribute('data-item-ref') || '') : '';
    const itemName = select ? (select.getAttribute('data-item-name') || '') : '';

    // Afficher les infos de la ligne cible dans le modal
    const infoEl = document.getElementById('modal-target-item-info');
    if (infoEl) {
        let html = '<span class="badge bg-secondary me-1">#' + (idx + 1) + '</span>';
        if (itemRef) {
            html += '<span class="badge bg-light text-dark border font-monospace me-1">' + escapeHtml(itemRef) + '</span> ';
        }
        html += '<span class="fw-semibold text-dark">' + escapeHtml(itemName) + '</span>';
        infoEl.innerHTML = html;
    }

    // Générer les chips de mots-clés rapides
    const quickList = document.getElementById('modalQuickKeywordsList');
    if (quickList) {
        quickList.innerHTML = '';
        const keywords = [];
        if (itemRef && itemRef.trim().length > 1) {
            keywords.push(itemRef.trim());
        }

        const stopWords = new Set(['pour', 'avec', 'sans', 'dans', 'type', 'prix', 'par', 'les', 'des', 'une', 'sur']);
        const words = itemName.split(/[\s,;\/\-—\(\)\+]+/).filter(w => {
            const clean = w.trim().toLowerCase();
            return clean.length >= 3 && !stopWords.has(clean);
        });

        words.forEach(w => {
            if (keywords.length < 5 && !keywords.some(k => k.toLowerCase() === w.toLowerCase())) {
                keywords.push(w);
            }
        });

        keywords.forEach(kw => {
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.className = 'keyword-chip';
            btn.textContent = kw;
            btn.onclick = function() {
                const searchInput = document.getElementById('modalProductSearchInput');
                if (searchInput) {
                    searchInput.value = kw;
                    runModalSearch(kw);
                }
            };
            quickList.appendChild(btn);
        });
    }

    // Préremplir le champ de recherche
    const searchInput = document.getElementById('modalProductSearchInput');
    let initialQuery = '';
    if (itemRef && itemRef.trim().length > 1) {
        initialQuery = itemRef.trim();
    } else {
        const parts = itemName.split(/[\s,;\/\-—\(\)\+]+/).filter(w => w.trim().length >= 3);
        if (parts.length > 0) {
            initialQuery = parts.slice(0, 2).join(' ');
        }
    }
    if (searchInput) {
        searchInput.value = initialQuery;
    }

    const modalEl = document.getElementById('productSearchModal');
    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
    modal.show();

    runModalSearch(initialQuery);
}

function runModalSearch(query) {
    const loading = document.getElementById('modalSearchLoading');
    const empty = document.getElementById('modalSearchEmpty');
    const resultsContainer = document.getElementById('modalSearchResults');
    const countEl = document.getElementById('modalResultsCount');

    if (loading) loading.classList.remove('d-none');
    if (empty) empty.classList.add('d-none');
    if (resultsContainer) resultsContainer.innerHTML = '';
    if (countEl) countEl.textContent = '';

    const url = PRODUCTS_AUTOCOMPLETE_URL + '?q=' + encodeURIComponent(query ? query.trim() : '');

    fetch(url)
        .then(response => {
            if (!response.ok) throw new Error('Erreur réseau');
            return response.json();
        })
        .then(data => {
            if (loading) loading.classList.add('d-none');
            const items = data.results || [];

            if (items.length === 0) {
                if (empty) empty.classList.remove('d-none');
                if (countEl) countEl.textContent = '0 ' + "{% translate 'résultat' %}";
                return;
            }

            if (countEl) {
                countEl.textContent = items.length + ' ' + (items.length > 1 ? "{% translate 'résultats' %}" : "{% translate 'résultat' %}");
            }

            items.forEach(p => {
                const itemDiv = document.createElement('div');
                itemDiv.className = 'list-group-item list-group-item-action d-flex justify-content-between align-items-center p-2 product-search-result-item';
                
                const stockBadgeClass = (p.total_stock > 0) ? 'bg-success-subtle text-success border border-success-subtle' : 'bg-secondary-subtle text-muted border';
                
                itemDiv.innerHTML = `
                    <div class="me-3 text-truncate">
                        <div class="d-flex align-items-center gap-1 mb-1 flex-wrap">
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle font-monospace fw-bold">${escapeHtml(p.code)}</span>
                            ${p.supplier_reference ? `<span class="badge bg-light text-dark border font-monospace small"><i class="bi bi-tag me-1"></i>${escapeHtml(p.supplier_reference)}</span>` : ''}
                            ${p.sku && p.sku !== p.code ? `<span class="badge bg-light text-secondary border font-monospace small">SKU: ${escapeHtml(p.sku)}</span>` : ''}
                            ${p.category ? `<span class="badge bg-secondary-subtle text-secondary small">${escapeHtml(p.category)}</span>` : ''}
                            <span class="badge ${stockBadgeClass} small">
                                <i class="bi bi-box-seam me-1"></i>${p.total_stock} ${escapeHtml(p.unit_display || '')}
                            </span>
                        </div>
                        <div class="fw-semibold text-dark text-truncate">${escapeHtml(p.text)}</div>
                    </div>
                    <div>
                        <button type="button" class="btn btn-sm btn-success px-3 text-nowrap">
                            <i class="bi bi-check-lg me-1"></i>{% translate "Associer" %}
                        </button>
                    </div>
                `;

                itemDiv.onclick = function() {
                    applyProductAssociation(p.id, p.code, p.text);
                };

                resultsContainer.appendChild(itemDiv);
            });
        })
        .catch(() => {
            if (loading) loading.classList.add('d-none');
            if (resultsContainer) {
                resultsContainer.innerHTML = '<div class="p-3 text-center text-danger small"><i class="bi bi-exclamation-triangle me-1"></i>' + "{% translate 'Erreur lors de la recherche.' %}" + '</div>';
            }
        });
}

function applyProductAssociation(productId, productCode, productName) {
    if (currentModalTargetIdx === null) return;
    const idx = currentModalTargetIdx;
    const select = document.getElementById('item_' + idx + '_product_id');
    if (!select) return;

    let existingOpt = select.querySelector('option[value="' + productId + '"]');
    if (!existingOpt) {
        const optText = productCode + ' — ' + productName;
        const newOpt = new Option(optText, productId, true, true);
        select.appendChild(newOpt);
    }

    select.value = productId;

    if ($(select).hasClass('select2-hidden-accessible')) {
        $(select).val(productId).trigger('change');
    } else {
        handleProductSelection(idx);
    }

    const modalEl = document.getElementById('productSearchModal');
    const modal = bootstrap.Modal.getInstance(modalEl);
    if (modal) {
        modal.hide();
    }
}

function handleProductSelection(idx) {
    const select = document.getElementById('item_' + idx + '_product_id');
    const cb = document.getElementById('item_' + idx + '_include');
    const row = document.getElementById('item-row-' + idx);
    const help = document.getElementById('item_' + idx + '_help');
    const badgeContainer = document.getElementById('item_' + idx + '_badge_container');

    if (select && select.value && select.value.trim() !== '') {
        if (cb) cb.checked = true;
        select.classList.remove('is-invalid', 'border-warning', 'product-select-warning', 'product-select-invalid');
        if (row) row.classList.remove('table-warning-subtle');
        if (help) help.classList.add('d-none');

        const pid = parseInt(select.value, 10);

        if (badgeContainer) {
            const detailUrl = PRODUCT_DETAIL_URL_TEMPLATE.replace('99999999', pid);
            badgeContainer.innerHTML = `
                <span class="badge bg-success text-white">
                    <i class="bi bi-check-circle me-1"></i>{% translate "Produit associé" %}
                </span>
                <a href="${detailUrl}" target="_blank" class="small text-muted text-decoration-none ms-1 product-detail-link" title="{% translate 'Voir la fiche produit' %}">
                    <i class="bi bi-box-arrow-up-right"></i>
                </a>
            `;
        }

        const targetLocId = PRODUCT_LOCATIONS_MAP[pid];
        const locSelect = document.getElementById('item_' + idx + '_location');
        if (locSelect && targetLocId) {
            locSelect.value = targetLocId;
        }
    } else {
        if (cb) cb.checked = false;
        select.classList.add('border-warning', 'product-select-warning');
        if (row) row.classList.add('table-warning-subtle');
        if (help) help.classList.remove('d-none');

        if (badgeContainer) {
            badgeContainer.innerHTML = `
                <span class="badge bg-warning text-dark">
                    <i class="bi bi-exclamation-triangle me-1"></i>{% translate "Non associé" %}
                </span>
            `;
        }
    }
    updateTotals();
}

function toggleSupplierChoice() {
    const isNew = document.getElementById('sup_choice_new') && document.getElementById('sup_choice_new').checked;
    const cardNew = document.getElementById('container_create_supplier');
    const cardExisting = document.getElementById('container_existing_supplier');
    if (cardNew && cardExisting) {
        if (isNew) {
            cardNew.classList.remove('opacity-75', 'bg-light-subtle');
            cardNew.classList.add('border-primary', 'shadow-sm', 'bg-white');
            cardExisting.classList.remove('border-primary', 'shadow-sm', 'bg-white');
            cardExisting.classList.add('opacity-75', 'bg-light-subtle');
        } else {
            cardExisting.classList.remove('opacity-75', 'bg-light-subtle');
            cardExisting.classList.add('border-primary', 'shadow-sm', 'bg-white');
            cardNew.classList.remove('border-primary', 'shadow-sm', 'bg-white');
            cardNew.classList.add('opacity-75', 'bg-light-subtle');
        }
    }
}

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

function validateOrderForm() {
    // 1. Validation du fournisseur
    const supChoiceNew = document.getElementById('sup_choice_new');
    const supChoicePick = document.getElementById('sup_choice_pick');
    if (supChoiceNew && supChoiceNew.checked) {
        const nameInput = document.getElementById('id_new_supplier_name') || document.querySelector('input[name="new_supplier_name"]');
        if (!nameInput || !nameInput.value.trim()) {
            {% translate "Veuillez saisir le nom du nouveau fournisseur à créer." as msg_sup_name %}
            alert("{{ msg_sup_name|escapejs }}");
            if (nameInput) nameInput.focus();
            return false;
        }
    } else if (supChoicePick && supChoicePick.checked) {
        const supSelect = document.getElementById('id_supplier_id') || document.querySelector('select[name="supplier_id"]');
        if (!supSelect || !supSelect.value.trim()) {
            {% translate "Veuillez sélectionner un fournisseur existant dans la liste déroulante." as msg_sup_pick %}
            alert("{{ msg_sup_pick|escapejs }}");
            if (supSelect) supSelect.focus();
            return false;
        }
    }

    // 2. Validation des articles
    const includeCbs = document.querySelectorAll('.item-include-cb:checked');
    if (includeCbs.length === 0) {
        {% translate "Veuillez cocher au moins une ligne d'article à inclure dans le bon de commande." as msg_no_item %}
        alert("{{ msg_no_item|escapejs }}");
        return false;
    }

    let unassociatedCount = 0;
    let firstInvalid = null;

    includeCbs.forEach(cb => {
        const idx = cb.dataset.idx;
        const select = document.getElementById('item_' + idx + '_product_id');
        if (select && (!select.value || select.value.trim() === '')) {
            unassociatedCount++;
            select.classList.add('is-invalid', 'product-select-invalid');
            if (!firstInvalid) firstInvalid = select;
        }
    });

    if (unassociatedCount > 0) {
        {% translate "Certaines lignes cochées ne sont associées à aucun produit existant. Veuillez sélectionner un produit dans la liste pour chaque ligne cochée, ou décocher les lignes non associées." as msg_unassoc %}
        alert("{{ msg_unassoc|escapejs }}");
        if (firstInvalid) {
            if ($(firstInvalid).hasClass('select2-hidden-accessible')) {
                $(firstInvalid).select2('open');
            } else {
                firstInvalid.focus();
            }
        }
        return false;
    }

    return true;
}

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) + ' €';
}

$(document).ready(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 count = fileInput.files.length;
                let totalBytes = 0;
                const fileNames = [];
                let hasImg = false;

                for (let i = 0; i < count; i++) {
                    const file = fileInput.files[i];
                    totalBytes += file.size;
                    fileNames.push(file.name);
                    if (file.type.startsWith('image/') || /\.(png|jpe?g|webp|bmp|tiff?)$/i.test(file.name)) {
                        hasImg = true;
                    }
                }

                const icon = selectedFileDiv.querySelector('i');
                if (icon) {
                    if (count > 1) {
                        icon.className = 'bi bi-images me-1 text-primary';
                    } else {
                        icon.className = hasImg ? 'bi bi-camera me-1 text-primary' : 'bi bi-file-earmark-pdf me-1 text-danger';
                    }
                }

                const totalSizeStr = (totalBytes / 1024 > 1024)
                    ? (totalBytes / (1024 * 1024)).toFixed(2) + ' MB'
                    : (totalBytes / 1024).toFixed(1) + ' KB';

                if (count === 1) {
                    selectedFileDiv.querySelector('.file-text').textContent = fileNames[0] + ' (' + totalSizeStr + ')';
                } else {
                    selectedFileDiv.querySelector('.file-text').textContent =
                        count + ' {% translate "fichiers / photos sélectionnés" %} (' + totalSizeStr + ') : ' + fileNames.slice(0, 3).join(', ') + (count > 3 ? '...' : '');
                }
                selectedFileDiv.classList.remove('d-none');
            }
        }
    }

    // Modal search input events
    const modalInput = document.getElementById('modalProductSearchInput');
    const modalClear = document.getElementById('modalProductSearchClear');
    if (modalInput) {
        modalInput.addEventListener('input', function() {
            clearTimeout(searchDebounceTimer);
            searchDebounceTimer = setTimeout(() => {
                runModalSearch(modalInput.value);
            }, 250);
        });

        modalInput.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                clearTimeout(searchDebounceTimer);
                runModalSearch(modalInput.value);
            }
        });
    }

    if (modalClear && modalInput) {
        modalClear.addEventListener('click', function() {
            modalInput.value = '';
            modalInput.focus();
            runModalSearch('');
        });
    }

    const modalEl = document.getElementById('productSearchModal');
    if (modalEl) {
        modalEl.addEventListener('shown.bs.modal', function() {
            if (modalInput) {
                modalInput.focus();
                modalInput.select();
            }
        });
    }

    // Initialiser Select2
    initSelect2OnInputs();

    // Fournisseur
    toggleSupplierChoice();

    // Totaux
    updateTotals();
});
</script>
{% endblock script %}