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

{% block head %}
<style>
    .search-dropdown .list-group-item {
        cursor: pointer;
        border-left: 3px solid transparent;
    }
    .search-dropdown .list-group-item:hover {
        background-color: #f8f9fa;
        border-left-color: #0d6efd;
    }
    .product-card {
        border: 1px solid #dee2e6;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 10px;
        background: #f8f9fa;
    }
</style>
{% endblock head %}

{% block content %}
<div class="container mt-3">
    <div class="row">
        <div class="col-lg-10 mx-auto">
            <!-- En-tête -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <h3>
                    <i class="bi bi-tools"></i>
                    {% if action == 'create' %}
                        {% translate "Nouveau bon de confection" %}
                    {% else %}
                        {% translate "Modifier le bon de confection" %} {{ order.code }}
                    {% endif %}
                </h3>
                <a href="{% url 'stock:stock_movements' %}?tab=production-orders" class="btn btn-secondary">
                    <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
                </a>
            </div>

            {% if other_item_context %}
            <div class="alert alert-info mb-3">
                <i class="bi bi-info-circle"></i>
                <strong>{% translate "Issu du bon de préparation" %} #{{ other_item_context.preparation_order.order_number }}</strong><br>
                {% translate "Produit demandé" %} : <strong>{{ other_item_context.description }}</strong>
                ({{ other_item_context.quantity }} {% translate "unité(s)" %})
            </div>
            {% endif %}

            <form method="post" enctype="multipart/form-data" id="production-form">
                {% csrf_token %}

                <!-- Informations générales -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0 text-white"><i class="bi bi-info-circle"></i> {% translate "Informations générales" %}</h5>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.warehouse.id_for_label }}" class="form-label">
                                    {% translate "Entrepôt" %} <span class="text-danger">*</span>
                                </label>
                                {{ form.warehouse }}
                                {% if form.warehouse.errors %}
                                    <div class="text-danger small mt-1">{{ form.warehouse.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="{{ form.quantity.id_for_label }}" class="form-label">
                                    {% translate "Quantité" %} <span class="text-danger">*</span>
                                </label>
                                {{ form.quantity }}
                                {% if form.quantity.errors %}
                                    <div class="text-danger small mt-1">{{ form.quantity.errors }}</div>
                                {% endif %}
                            </div>
                            <div class="col-md-3 mb-3">
                                <label for="{{ form.status.id_for_label }}" class="form-label">
                                    {% translate "Statut" %}
                                </label>
                                {{ form.status }}
                                {% if form.status.errors %}
                                    <div class="text-danger small mt-1">{{ form.status.errors }}</div>
                                {% endif %}
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label for="{{ form.destination.id_for_label }}" class="form-label">
                                    {% translate "Destination" %} <span class="text-danger">*</span>
                                </label>
                                {{ form.destination }}
                                {% if form.destination.errors %}
                                    <div class="text-danger small mt-1">{{ form.destination.errors }}</div>
                                {% endif %}
                                <div class="form-text">{% translate "Indiquer si la confection est destinée à l'usage interne ou externe." %}</div>
                            </div>
                        </div>

                        <!-- Conception liée (autocomplete sans Select2) -->
                        <!-- <div class="mb-3">
                            <label class="form-label">{% translate "Conception liée (optionnel)" %}</label>
                            <div class="position-relative">
                                <input type="text"
                                       id="design-search"
                                       class="form-control"
                                       placeholder="{% translate 'Rechercher une conception...' %}"
                                       autocomplete="off">
                                <div id="design-results"
                                     class="list-group search-dropdown position-absolute w-100"
                                     style="display:none; z-index:1050; max-height:280px; overflow-y:auto;"></div>
                            </div>
                            <input type="hidden" name="product_design" id="design-id" value="{{ form.product_design.value|default:'' }}">
                            {% if form.product_design.errors %}
                                <div class="text-danger small mt-1">{{ form.product_design.errors }}</div>
                            {% endif %}
                            <div class="form-text">{% translate "Optionnel. Si une conception est sélectionnée, vous pouvez importer ses composants ci-dessous." %}</div>
                        </div> -->
                    </div>
                </div>

                <!-- Composants requis -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                        <h5 class="mb-0 text-white"><i class="bi bi-boxes"></i> {% translate "Composants requis (articles du stock)" %}</h5>
                        <button type="button" class="btn btn-sm btn-light" id="import-design-btn" style="display:none;">
                            <i class="bi bi-download"></i> {% translate "Importer depuis la conception" %}
                        </button>
                    </div>
                    <div class="card-body">
                        <!-- Zone de recherche et ajout -->
                        <div class="row mb-4">
                            <div class="col-md-5">
                                <label for="component-search">{% translate "Rechercher un produit" %}</label>
                                <input type="text"
                                       id="component-search"
                                       class="form-control"
                                       placeholder="{% translate 'Tapez pour rechercher...' %}"
                                       autocomplete="off">
                                <div id="component-results"
                                     class="list-group search-dropdown position-absolute"
                                     style="display:none; z-index:1000; max-height:300px; overflow-y:auto; width: calc(100% - 30px);"></div>
                            </div>
                            <div class="col-md-2">
                                <label for="component-quantity">{% translate "Quantité" %}</label>
                                <input type="number"
                                       id="component-quantity"
                                       class="form-control"
                                       value="1" min="1">
                            </div>
                            <div class="col-md-3">
                                <label for="component-notes">{% translate "Notes" %}</label>
                                <input type="text"
                                       id="component-notes"
                                       class="form-control"
                                       placeholder="{% translate 'Optionnel...' %}">
                            </div>
                            <div class="col-md-2 d-flex align-items-end">
                                <button type="button" id="add-component-btn" class="btn btn-primary w-100">
                                    <i class="bi bi-plus-circle"></i> {% translate "Ajouter" %}
                                </button>
                            </div>
                        </div>

                        <!-- Liste des composants ajoutés -->
                        <div id="components-list">
                            <h6 class="mb-3">{% translate "Composants sélectionnés" %} :</h6>
                            <div id="components-container">
                                <p class="text-muted text-center" id="components-empty">
                                    <i class="bi bi-inbox"></i> {% translate "Aucun composant ajouté" %}
                                </p>
                            </div>
                        </div>

                        <!-- Formset caché pour la soumission -->
                        <div style="display:none;">
                            {{ formset.management_form }}
                            <div id="formset-container"></div>
                        </div>
                    </div>
                </div>

                <!-- Bon de préparation lié -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-clipboard"></i> {% translate "Bon de préparation" %}</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label for="{{ form.preparation_order.id_for_label }}" class="form-label">
                                {% translate "Bon de préparation lié" %}
                            </label>
                            {{ form.preparation_order }}
                            {% if form.preparation_order.errors %}
                                <div class="text-danger small mt-1">{{ form.preparation_order.errors }}</div>
                            {% endif %}
                            <div class="form-text">{% translate "Optionnel. Liez ce bon à un bon de préparation existant." %}</div>
                        </div>
                    </div>
                </div>

                <!-- Produit fini -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header bg-warning text-dark">
                        <h5 class="mb-0"><i class="bi bi-box-seam"></i> {% translate "Produit fini à ajouter au stock" %}</h5>
                    </div>
                    <div class="card-body">
                        <p class="text-muted small">{% translate "Quand ce bon de confection est terminé, le produit fini sera automatiquement ajouté au stock." %}</p>

                        <div class="mb-3">
                            <label class="form-label">{% translate "Produit existant à réapprovisionner" %}</label>
                            <div class="position-relative">
                                <input type="text"
                                       id="output-product-search"
                                       class="form-control"
                                       placeholder="{% translate 'Tapez pour rechercher un produit...' %}"
                                       autocomplete="off">
                                <div id="output-product-results"
                                     class="list-group search-dropdown position-absolute w-100"
                                     style="display:none; z-index:1050; max-height:280px; overflow-y:auto;"></div>
                            </div>
                            <input type="hidden"
                                   name="output_product"
                                   id="output_product_id"
                                   value="{{ form.output_product.value|default:'' }}">
                            {% if form.output_product.errors %}
                                <div class="text-danger small mt-1">{{ form.output_product.errors }}</div>
                            {% endif %}
                            <div class="form-text">{% translate "Si le produit existe déjà dans le stock, sélectionnez-le ici." %}</div>
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.output_product_name.id_for_label }}" class="form-label">
                                {% translate "Nom du nouveau produit (si non existant)" %}
                            </label>
                            {{ form.output_product_name }}
                            {% if form.output_product_name.errors %}
                                <div class="text-danger small mt-1">{{ form.output_product_name.errors }}</div>
                            {% endif %}
                            <div class="form-text">{% translate "Si le produit n'existe pas encore, entrez le nom ici. Un nouveau produit sera créé à la fin de la conception." %}</div>
                        </div>

                        <div class="mb-3">
                            <label for="{{ form.output_location.id_for_label }}" class="form-label">
                                {% translate "Emplacement de stockage du produit fini" %}
                            </label>
                            {{ form.output_location }}
                            {% if form.output_location.errors %}
                                <div class="text-danger small mt-1">{{ form.output_location.errors }}</div>
                            {% endif %}
                            <div class="form-text">{% translate "Laisser vide pour utiliser l'emplacement par défaut de la conception." %}</div>
                        </div>
                    </div>
                </div>

                <!-- Notes -->
                <div class="card shadow-sm mb-4">
                    <div class="card-body">
                        <div class="mb-0">
                            <label for="{{ form.notes.id_for_label }}" class="form-label">
                                <i class="bi bi-sticky"></i> {% translate "Notes" %}
                            </label>
                            {{ form.notes }}
                        </div>
                    </div>
                </div>

                <!-- Documents -->
                <div class="card shadow-sm mb-4">
                    <div class="card-header">
                        <h5 class="mb-0"><i class="bi bi-paperclip me-1"></i>{% translate "Documents" %}</h5>
                    </div>
                    <div class="card-body">
                        {% if action == 'edit' and order.documents.exists %}
                        <div class="mb-2">
                            {% load stock_custom_filters %}
                            {% for doc in order.documents.all %}
                            {% private_file_url doc 'file' as form_doc_url %}
                            <div class="d-flex align-items-center gap-2 border rounded p-1 mb-1">
                                <i class="bi {% if doc.is_image %}bi-file-earmark-image text-info{% else %}bi-file-earmark text-secondary{% endif %} fs-5"></i>
                                <a href="{{ form_doc_url }}" target="_blank" class="small flex-grow-1 text-truncate">{{ doc.filename }}</a>
                                <small class="text-muted">{{ doc.uploaded_at|date:"d/m/Y" }}</small>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                        <label for="prodFormDocInput" class="btn btn-outline-secondary mb-0">
                            <i class="bi bi-paperclip me-1"></i>{% translate "Ajouter des documents..." %}
                        </label>
                        <input type="file" id="prodFormDocInput" name="new_documents" multiple class="d-none"
                               accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.odt,.ods,.txt">
                        <div id="prodFormDocList" class="mt-2"></div>
                        <div class="form-text">{% translate "Les fichiers seront joints au bon de confection après la sauvegarde." %}</div>
                    </div>
                </div>

                <!-- Boutons -->
                <div class="d-flex justify-content-between">
                    <a href="{% url 'stock:stock_movements' %}?tab=production-orders" class="btn btn-secondary">
                        <i class="bi bi-x-lg"></i> {% translate "Annuler" %}
                    </a>
                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-check-lg"></i>
                        {% if action == 'create' %}
                            {% translate "Créer le bon de confection" %}
                        {% else %}
                            {% translate "Enregistrer les modifications" %}
                        {% endif %}
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock content %}

{% block script %}
<script>
document.addEventListener('DOMContentLoaded', function () {
    const AUTOCOMPLETE_URL = '{% url "stock:products_autocomplete_api" %}';
    // DESIGN_API_URL et DESIGNS_AC_URL supprimés (modèle ProductDesign désactivé)

    // ============================
    // Conception liée (autocomplete)
    // ============================
    const designSearch  = document.getElementById('design-search');
    const designResults = document.getElementById('design-results');
    const designId      = document.getElementById('design-id');
    const importBtn     = document.getElementById('import-design-btn');
    let designTimeout   = null;

    if (designSearch && designId) {
    // Charger le nom de la conception existante si on est en édition
    const existingDesignId = designId.value;
    if (existingDesignId) {
        fetch(`${DESIGNS_AC_URL}?q=`)
            .then(r => r.json())
            .then(data => {
                const found = data.results.find(d => String(d.id) === String(existingDesignId));
                if (found) {
                    designSearch.value = found.text;
                    importBtn.style.display = '';
                }
            })
            .catch(() => {});
    }

    designSearch.addEventListener('input', function () {
        clearTimeout(designTimeout);
        const q = this.value.trim();
        if (q.length < 1) {
            designResults.style.display = 'none';
            designId.value = '';
            importBtn.style.display = 'none';
            return;
        }
        designTimeout = setTimeout(() => {
            fetch(`${DESIGNS_AC_URL}?q=${encodeURIComponent(q)}`)
                .then(r => r.json())
                .then(data => {
                    designResults.innerHTML = '';
                    if (!data.results.length) {
                        designResults.innerHTML = '<div class="list-group-item text-muted small">{% translate "Aucune conception trouvée" %}</div>';
                    } else {
                        data.results.forEach(d => {
                            const item = document.createElement('div');
                            item.className = 'list-group-item list-group-item-action';
                            item.innerHTML = `<strong>${d.code}</strong> \u2014 ${d.name}${d.category ? ' <small class="text-muted">(' + d.category + ')</small>' : ''}`;
                            item.addEventListener('click', () => {
                                designId.value = d.id;
                                designSearch.value = d.text;
                                designResults.style.display = 'none';
                                importBtn.style.display = '';
                            });
                            designResults.appendChild(item);
                        });
                    }
                    designResults.style.display = 'block';
                });
        }, 300);
    });

    designSearch.addEventListener('change', function () {
        if (!this.value.trim()) {
            designId.value = '';
            importBtn.style.display = 'none';
        }
    });

    document.addEventListener('click', function (e) {
        if (!designSearch.contains(e.target) && !designResults.contains(e.target)) {
            designResults.style.display = 'none';
        }
    });
    } // end if (designSearch && designId)

    // ============================
    // Composants (même pattern que bon de préparation)
    // ============================
    const compSearch    = document.getElementById('component-search');
    const compResults   = document.getElementById('component-results');
    const compQuantity  = document.getElementById('component-quantity');
    const compNotes     = document.getElementById('component-notes');
    const addCompBtn    = document.getElementById('add-component-btn');
    const compContainer = document.getElementById('components-container');
    const compEmpty     = document.getElementById('components-empty');
    const formsetCont   = document.getElementById('formset-container');
    const mgmtForm     = formsetCont.parentElement;
    const totalFormsInput = mgmtForm.querySelector('[id$="-TOTAL_FORMS"]');
    const formPrefix = totalFormsInput
        ? totalFormsInput.id.replace('-TOTAL_FORMS', '').replace('id_', '')
        : 'components';

    let selectedComponent = null;
    let componentsAdded = [];
    let compSearchTimeout = null;

    // Charger les composants existants (en cas d'édition ou d'erreur de validation)
    function loadExistingComponents() {
        const compIds = [];
        const compData = {};

        {% for comp_form in formset %}
            {% if comp_form.product.value and comp_form.quantity.value %}
                compIds.push({{ comp_form.product.value }});
                compData[{{ comp_form.product.value }}] = {
                    quantity: {{ comp_form.quantity.value }},
                    notes: '{{ comp_form.notes.value|default:""|escapejs }}',
                    formId: '{{ comp_form.id.value|default:""|escapejs }}'
                };
            {% endif %}
        {% endfor %}

        if (compIds.length > 0) {
            fetch(`${AUTOCOMPLETE_URL}?ids=${compIds.join(',')}`)
                .then(r => r.json())
                .then(data => {
                    data.results.forEach(p => {
                        const cd = compData[p.id] || {};
                        componentsAdded.push({
                            id: p.id,
                            text: p.text,
                            code: p.code,
                            total_stock: p.total_stock,
                            locations: p.locations,
                            unit_display: p.unit_display || 'Pièce(s)',
                            quantity: cd.quantity || 1,
                            notes: cd.notes || '',
                            formId: cd.formId || ''
                        });
                    });
                    renderComponents();
                })
                .catch(err => console.error('Erreur chargement composants:', err));
        }
    }
    loadExistingComponents();

    // Recherche produit pour composants
    compSearch.addEventListener('input', function () {
        clearTimeout(compSearchTimeout);
        const q = this.value.trim();
        if (q.length < 2) {
            compResults.style.display = 'none';
            return;
        }
        compSearchTimeout = setTimeout(() => {
            fetch(`${AUTOCOMPLETE_URL}?q=${encodeURIComponent(q)}`)
                .then(r => r.json())
                .then(data => displayComponentResults(data.results));
        }, 300);
    });

    function displayComponentResults(results) {
        compResults.innerHTML = '';
        if (!results.length) {
            compResults.innerHTML = '<div class="list-group-item text-muted small">{% translate "Aucun produit trouvé" %}</div>';
            compResults.style.display = 'block';
            return;
        }
        results.forEach(p => {
            const item = document.createElement('div');
            item.className = 'list-group-item list-group-item-action';
            const stockBadge = p.total_stock > 0
                ? `<span class="badge bg-success ms-2">${p.total_stock} ${p.unit_display || 'en stock'}</span>`
                : `<span class="badge bg-secondary ms-2">Stock vide</span>`;
            item.innerHTML = `<strong>${p.text}</strong> <small class="text-muted">(${p.code})</small> ${stockBadge}`;
            item.addEventListener('click', () => {
                selectedComponent = p;
                compSearch.value = `${p.text} (${p.code})`;
                compResults.style.display = 'none';
                compQuantity.focus();
            });
            compResults.appendChild(item);
        });
        compResults.style.display = 'block';
    }

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

    // Ajouter un composant
    addCompBtn.addEventListener('click', function () {
        if (!selectedComponent) {
            alert('{% translate "Veuillez sélectionner un produit" %}');
            return;
        }
        const qty = parseInt(compQuantity.value);
        if (!qty || qty < 1) {
            alert('{% translate "Veuillez entrer une quantité valide" %}');
            return;
        }
        const notes = compNotes.value.trim();

        // Vérifier si le produit existe déjà
        const existing = componentsAdded.findIndex(c => c.id === selectedComponent.id);
        if (existing !== -1) {
            componentsAdded[existing].quantity += qty;
            if (notes) componentsAdded[existing].notes = notes;
        } else {
            componentsAdded.push({
                id: selectedComponent.id,
                text: selectedComponent.text,
                code: selectedComponent.code,
                total_stock: selectedComponent.total_stock,
                locations: selectedComponent.locations,
                unit_display: selectedComponent.unit_display || 'Pièce(s)',
                quantity: qty,
                notes: notes,
                formId: ''
            });
        }

        compSearch.value = '';
        compQuantity.value = '1';
        compNotes.value = '';
        selectedComponent = null;
        renderComponents();
    });

    compQuantity.addEventListener('keypress', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); addCompBtn.click(); }
    });

    // Afficher la liste des composants
    function renderComponents() {
        compContainer.innerHTML = '';
        if (componentsAdded.length === 0) {
            compEmpty.style.display = 'block';
            updateFormset();
            return;
        }
        compEmpty.style.display = 'none';

        componentsAdded.forEach((comp, index) => {
            let locHtml = '';
            if (comp.locations && comp.locations.length) {
                locHtml = '<div class="mt-1"><small class="text-muted"><i class="bi bi-geo-alt"></i> ';
                comp.locations.forEach(loc => {
                    const badge = loc.quantity > 0
                        ? `<span class="badge bg-success">${loc.quantity}</span>`
                        : `<span class="badge bg-secondary">0</span>`;
                    locHtml += `<span style="background:#e9ecef;padding:2px 8px;border-radius:4px;margin-right:5px;font-size:0.85rem;">${loc.warehouse} - ${loc.name} ${badge}</span>`;
                });
                locHtml += '</small></div>';
            }

            const card = document.createElement('div');
            card.className = 'product-card d-flex justify-content-between align-items-start';
            card.innerHTML = `
                <div class="flex-grow-1">
                    <h6 class="mb-1">${comp.text}</h6>
                    <div style="font-size:0.9rem;">
                        <span class="text-muted">Code: ${comp.code}</span><br>
                        <span class="${comp.total_stock > 0 ? 'text-success' : 'text-danger'}">
                            <i class="bi bi-box-seam"></i> Stock: ${comp.total_stock}
                        </span>
                        ${comp.notes ? ' | <span class="text-muted"><i class="bi bi-sticky"></i> ' + comp.notes + '</span>' : ''}
                    </div>
                    ${locHtml}
                </div>
                <div class="text-end ms-3">
                    <div class="mb-2">
                        <strong class="fs-5">${comp.quantity}</strong>
                        <small class="text-muted">${comp.unit_display}</small>
                    </div>
                    <button type="button" class="btn btn-danger btn-sm" onclick="removeComponent(${index})">
                        <i class="bi bi-trash"></i> {% translate "Retirer" %}
                    </button>
                </div>
            `;
            compContainer.appendChild(card);
        });
        updateFormset();
    }

    window.removeComponent = function (index) {
        componentsAdded.splice(index, 1);
        renderComponents();
    };

    // Mettre à jour le formset caché
    function updateFormset() {
        formsetCont.innerHTML = '';
        totalFormsInput.value = componentsAdded.length;

        componentsAdded.forEach((comp, i) => {
            const f = (name, val) => {
                const inp = document.createElement('input');
                inp.type = 'hidden';
                inp.name = `${formPrefix}-${i}-${name}`;
                inp.value = val !== null && val !== undefined ? val : '';
                formsetCont.appendChild(inp);
            };
            f('product', comp.id);
            f('quantity', comp.quantity);
            f('notes', comp.notes || '');
            f('id', comp.formId || '');
            f('DELETE', '');
        });
    }

    // Importer depuis la conception
    if (importBtn && designId) {
    importBtn.addEventListener('click', function () {
        const did = designId.value;
        if (!did) return;
        fetch(`${DESIGN_API_URL}?design_id=${did}`)
            .then(r => r.json())
            .then(data => {
                if (!data.components || !data.components.length) {
                    alert("{% translate 'Cette conception n\'a pas de composants.' %}");
                    return;
                }
                data.components.forEach(c => {
                    const existing = componentsAdded.findIndex(x => x.id === c.product_id);
                    if (existing !== -1) {
                        componentsAdded[existing].quantity += c.quantity;
                    } else {
                        componentsAdded.push({
                            id: c.product_id,
                            text: c.product_name,
                            code: c.product_code,
                            total_stock: c.total_stock,
                            locations: [],
                            unit_display: 'Pièce(s)',
                            quantity: c.quantity,
                            notes: '',
                            formId: ''
                        });
                    }
                });
                renderComponents();
            })
            .catch(() => {});
    });
    } // end if (importBtn && designId)

    // ============================
    // Produit fini (autocomplete)
    // ============================
    const outSearch  = document.getElementById('output-product-search');
    const outResults = document.getElementById('output-product-results');
    const outId      = document.getElementById('output_product_id');
    let outTimeout   = null;

    // Charger le nom du produit fini existant
    const existingOutId = outId.value;
    if (existingOutId) {
        fetch(`${AUTOCOMPLETE_URL}?ids=${existingOutId}`)
            .then(r => r.json())
            .then(data => {
                if (data.results && data.results.length) {
                    const p = data.results[0];
                    outSearch.value = p.text + (p.code ? ' (' + p.code + ')' : '');
                }
            })
            .catch(() => {});
    }

    outSearch.addEventListener('input', function () {
        clearTimeout(outTimeout);
        outId.value = '';
        const q = this.value.trim();
        if (q.length < 2) { outResults.style.display = 'none'; return; }
        outTimeout = setTimeout(() => {
            fetch(`${AUTOCOMPLETE_URL}?q=${encodeURIComponent(q)}`)
                .then(r => r.json())
                .then(data => {
                    outResults.innerHTML = '';
                    if (!data.results.length) {
                        outResults.innerHTML = '<div class="list-group-item text-muted small">{% translate "Aucun produit trouvé" %}</div>';
                    } else {
                        data.results.forEach(p => {
                            const a = document.createElement('a');
                            a.href = '#';
                            a.className = 'list-group-item list-group-item-action py-1';
                            const stockBadge = p.total_stock > 0
                                ? `<span class="badge bg-success ms-1">${p.total_stock}</span>`
                                : `<span class="badge bg-secondary ms-1">0</span>`;
                            a.innerHTML = `<strong>${p.text}</strong>${p.code ? ' <small class="text-muted">(' + p.code + ')</small>' : ''} ${stockBadge}`;
                            a.addEventListener('click', function (e) {
                                e.preventDefault();
                                outId.value = p.id;
                                outSearch.value = p.text + (p.code ? ' (' + p.code + ')' : '');
                                outResults.style.display = 'none';
                            });
                            outResults.appendChild(a);
                        });
                    }
                    outResults.style.display = 'block';
                });
        }, 250);
    });

    outSearch.addEventListener('change', function () {
        if (!this.value.trim()) outId.value = '';
    });

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

    // Preview des fichiers sélectionnés
    const docInput = document.getElementById('prodFormDocInput');
    const docList = document.getElementById('prodFormDocList');
    if (docInput && docList) {
        docInput.addEventListener('change', function () {
            docList.innerHTML = '';
            for (const f of docInput.files) {
                const item = document.createElement('div');
                item.className = 'd-flex align-items-center gap-2 border rounded p-1 mb-1';
                item.innerHTML = `<i class="bi bi-file-earmark text-secondary fs-5"></i><span class="small text-truncate flex-grow-1">${f.name}</span><small class="text-muted">${(f.size/1024).toFixed(0)} Ko</small>`;
                docList.appendChild(item);
            }
        });
    }
});
</script>
{% endblock script %}