{% extends 'mobile/mobile_base.html' %}
{% load static %}
{% load i18n %}

{% block title %}
    {% if movement_type == 'in' %}{% translate "Nouvelle entrée" %}
    {% elif movement_type == 'out' %}{% translate "Nouvelle sortie" %}
    {% else %}{% translate "Nouveau transfert" %}
    {% endif %}
{% endblock title %}

{% block upleft %}
<a href="{% url cancel_url_name %}" class="nav-link" style="color: white;">
    <i class="bi bi-arrow-left fs-3"></i>
</a>
{% endblock upleft %}

{% block extra_head %}
<style>
    .product-line {
        border: 1px solid #dee2e6;
        border-radius: 0.6rem;
        padding: 0.85rem;
        background: #f8f9fa;
        margin-bottom: 0.75rem;
    }
    .search-dropdown {
        position: absolute;
        z-index: 1050;
        max-height: 220px;
        overflow-y: auto;
        width: 100%;
    }
    .remove-line-btn { opacity: 0.7; }
    .serialized-item-check { cursor: pointer; }
    .serialized-item-check:hover { background: #e8f0fe; border-radius: 0.3rem; }
</style>
{% endblock extra_head %}

{% block content %}
{% if messages %}
<div class="mb-3">
    {% for message in messages %}
    <div class="alert alert-{% if message.tags == 'error' %}danger{% elif message.tags %}{{ message.tags }}{% else %}info{% endif %} alert-dismissible fade show small" role="alert">
        {{ message }}
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    {% endfor %}
</div>
{% endif %}
<form method="post" enctype="multipart/form-data" id="batch-form">
    {% csrf_token %}

    <!-- Type badge -->
    <div class="mb-3 d-flex align-items-center gap-2">
        {% if movement_type == 'in' %}
            <span class="badge bg-success fs-6"><i class="bi bi-box-arrow-in-down me-1"></i>{% translate "Entrée" %}</span>
        {% elif movement_type == 'out' %}
            <span class="badge bg-danger fs-6"><i class="bi bi-box-arrow-up me-1"></i>{% translate "Sortie" %}</span>
        {% else %}
            <span class="badge bg-info text-dark fs-6"><i class="bi bi-arrow-left-right me-1"></i>{% translate "Transfert" %}</span>
        {% endif %}
    </div>

    <!-- ── Informations générales ── -->
    <div class="card mb-3">
        <div class="card-header fw-semibold small">
            <i class="bi bi-info-circle me-1"></i>{% translate "Informations générales" %}
        </div>
        <div class="card-body p-2">

            {% if movement_type == 'in' %}
            <!-- Entrée : Source = Personne/Entreprise -->
            <div class="border-start border-secondary border-3 ps-2 mb-2">
                <div class="small fw-semibold text-secondary mb-2"><i class="bi bi-person-fill me-1"></i>{% translate "Source" %}</div>
                <div class="mb-2">
                    <label class="form-label small fw-semibold mb-1"><i class="bi bi-person me-1"></i>{% translate "Personne" %}</label>
                    <select name="person_id" id="person_id" class="form-select form-select-sm">
                        <option value="">-- {% translate "Aucune" %} --</option>
                        {% for m in company_members %}
                        <option value="{{ m.id }}" data-companies="{{ m.company_ids_str }}">{{ m.name }}{% if m.teams.exists %} ({{ m.teams_display }}){% endif %}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-2">
                    <label class="form-label small fw-semibold mb-1"><i class="bi bi-building me-1"></i>{% translate "Entreprise / Organisation" %}</label>
                    <input type="text" name="company_name" id="company_name" list="companies-list" class="form-control form-control-sm" autocomplete="off" placeholder="{% translate 'Sélectionnez ou saisissez...' %}" onchange="onCompanyInputChange()" oninput="onCompanyInputChange()">
                    <datalist id="companies-list">
                        {% for c in companies %}
                        <option value="{{ c.name }}"></option>
                        {% endfor %}
                    </datalist>
                </div>
            </div>
            {% elif movement_type == 'out' %}
            <!-- Sortie : Destination = Personne/Entreprise -->
            <div class="border-start border-secondary border-3 ps-2 mb-2">
                <div class="small fw-semibold text-secondary mb-2"><i class="bi bi-person-fill me-1"></i>{% translate "Destination" %}</div>
                <div class="mb-2">
                    <label class="form-label small fw-semibold mb-1"><i class="bi bi-person me-1"></i>{% translate "Personne" %}</label>
                    <select name="person_id" id="person_id" class="form-select form-select-sm">
                        <option value="">-- {% translate "Aucune" %} --</option>
                        {% for m in company_members %}
                        <option value="{{ m.id }}" data-companies="{{ m.company_ids_str }}">{{ m.name }}{% if m.teams.exists %} ({{ m.teams_display }}){% endif %}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-2">
                    <label class="form-label small fw-semibold mb-1"><i class="bi bi-building me-1"></i>{% translate "Entreprise / Organisation" %}</label>
                    <input type="text" name="company_name" id="company_name" list="companies-list" class="form-control form-control-sm" autocomplete="off" placeholder="{% translate 'Sélectionnez ou saisissez...' %}" onchange="onCompanyInputChange()" oninput="onCompanyInputChange()">
                    <datalist id="companies-list">
                        {% for c in companies %}
                        <option value="{{ c.name }}"></option>
                        {% endfor %}
                    </datalist>
                </div>
            </div>
            {% endif %}

            {% comment %}<div class="mb-2">
                <label class="form-label small fw-semibold mb-1"><i class="bi bi-file-earmark-text me-1"></i>{% translate "Contrat" %}</label>
                <select name="contract_id" class="form-select form-select-sm">
                    <option value="">-- {% translate "Aucun" %} --</option>
                    {% for c in contracts %}
                    <option value="{{ c.id }}">{{ c.contract_number }}{% if c.company %} — {{ c.company.name }}{% endif %}</option>
                    {% endfor %}
                </select>
            </div>{% endcomment %}
            {% if movement_type != 'transfer' %}
            <div class="mb-2">
                <label class="form-label small fw-semibold mb-1"><i class="bi bi-tag me-1"></i>{% translate "Sous-type" %} <span class="text-danger">*</span></label>
                <select name="movement_subtype" id="movement_subtype" class="form-select form-select-sm" required>
                    <option value="">-- {% translate "Choisir un sous-type" %} --</option>
                    {% if movement_type == 'in' %}
                    <option value="purchase">{% translate "Achat" %}</option>
                    <option value="return" {% if preselected_po %}selected{% endif %}>{% translate "Retour" %}</option>
                    <option value="confection">{% translate "Confection" %}</option>
                    <option value="correction" {% if not can_administer_any %}style="display: none;" disabled{% endif %}>{% translate "Correction (Administrateur uniquement)" %}</option>
                    {% elif movement_type == 'out' %}
                    <option value="epi">{% translate "EPI" %}</option>
                    <option value="loan">{% translate "Emprunt" %}</option>
                    <option value="worksite">{% translate "Chantier" %}</option>
                    <option value="correction" {% if not can_administer_any %}style="display: none;" disabled{% endif %}>{% translate "Correction (Administrateur uniquement)" %}</option>
                    {% endif %}
                </select>
            </div>
            {% if movement_type == 'out' %}
            <div class="mb-2" id="estimated_return_date_wrapper" style="display: none;">
                <label class="form-label small fw-semibold mb-1" for="estimated_return_date"><i class="bi bi-calendar-event me-1"></i>{% translate "Date de retour attendue" %} <span class="text-danger">*</span></label>
                <input type="date" name="estimated_return_date" id="estimated_return_date" class="form-control form-control-sm">
            </div>
            {% endif %}
            {% endif %}
            <div class="mb-2">
                <label class="form-label small fw-semibold mb-1"><i class="bi bi-person-lines-fill me-1"></i>{% translate "Demandeur" %}</label>
                <input type="text" name="requester" class="form-control form-control-sm" placeholder="{% translate 'Personne ou service à l\'origine de la demande' %}">
            </div>

            <div class="mb-1">
                <label class="form-label small fw-semibold mb-1"><i class="bi bi-chat-text me-1"></i>{% translate "Raison / commentaire" %}</label>
                <textarea name="reason" class="form-control form-control-sm" rows="2" placeholder="{% translate 'Optionnel' %}"></textarea>
            </div>
        </div>
    </div>

    {% if movement_type == 'in' %}
    <!-- ── Bon de préparation (retour) ── -->
    <div class="card mb-3">
        <div class="card-header fw-semibold small">
            <i class="bi bi-clipboard-check me-1"></i>{% translate "Bon de préparation lié (retour)" %}
        </div>
        <div class="card-body p-2">
            <div class="mb-2">
                <label class="form-label small fw-semibold mb-1">{% translate "Rechercher un bon" %}</label>
                <div class="position-relative">
                    <input type="text" id="bp-search-input" class="form-control form-control-sm"
                           placeholder="{% translate 'Numéro du bon…' %}" autocomplete="off">
                    <div id="bp-results" class="list-group position-absolute w-100"
                         style="z-index:1050;display:none;max-height:180px;overflow-y:auto;"></div>
                </div>
                <input type="hidden" id="bp-hidden-id" name="preparation_order_id">
                <div class="form-text text-muted" style="font-size:0.75rem;">{% translate "Optionnel — liez à un bon de préparation pour un retour de matériel." %}</div>
            </div>
            <button type="button" id="bp-load-btn" class="btn btn-outline-primary btn-sm w-100" disabled>
                <i class="bi bi-box-arrow-in-down me-1"></i>{% translate "Charger les produits du bon" %}
            </button>
            <div id="bp-info" class="alert alert-info mt-2 mb-0 py-2 small" style="display:none;"></div>
        </div>
    </div>
    {% endif %}

    <!-- ── Lignes produits ── -->
    <div class="card mb-3">
        <div class="card-header d-flex align-items-center justify-content-between fw-semibold small">
            <span><i class="bi bi-box-seam me-1"></i>{% translate "Produits" %}</span>
            <button type="button" id="add-line-btn" class="btn btn-sm btn-outline-primary py-0">
                <i class="bi bi-plus-lg"></i> {% translate "Ajouter" %}
            </button>
        </div>
        <div class="card-body p-2">
            <div id="lines-container"></div>
            <div id="no-lines-placeholder" class="text-center text-muted py-3 small">
                <i class="bi bi-box-seam fs-3 opacity-50 d-block mb-1"></i>
                {% translate "Aucun produit. Appuyez sur « Ajouter »." %}
            </div>
        </div>
    </div>

    <!-- ── Documents ── -->
    <div class="card mb-4">
        <div class="card-header fw-semibold small">
            <i class="bi bi-paperclip me-1"></i>{% translate "Documents joints" %} <span class="text-muted fw-normal">({% translate "optionnel" %})</span>
        </div>
        <div class="card-body p-2">
            <label for="documents_input" class="btn btn-outline-secondary btn-sm w-100">
                <i class="bi bi-folder2-open me-1"></i>{% translate "Choisir des fichiers…" %}
            </label>
            <input type="file" id="documents_input" name="documents" multiple class="d-none"
                   accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.odt,.ods,.txt">
            <div id="file-list" class="mt-2"></div>
        </div>
    </div>

    <!-- ── Actions ── -->
    <div class="d-flex gap-2 mb-4">
        <a href="{% url cancel_url_name %}" class="btn btn-secondary flex-fill">{% translate "Annuler" %}</a>
        <button type="submit" id="submit-btn"
            class="btn flex-fill btn-{% if movement_type == 'in' %}success{% elif movement_type == 'out' %}danger{% else %}info{% endif %}">
            <i class="bi bi-check-circle me-1"></i> {% translate "Valider" %}
        </button>
    </div>
</form>

<!-- ── Template HTML pour une ligne produit ── -->
<template id="line-template">
    <div class="product-line" data-line-index="__IDX__">
        <div class="d-flex align-items-center justify-content-between mb-2">
            <span class="small fw-semibold text-muted">{% translate "Ligne" %} <span class="line-num">1</span></span>
            <button type="button" class="btn btn-sm btn-outline-danger remove-line-btn py-0 px-2">
                <i class="bi bi-trash3"></i>
            </button>
        </div>

        <!-- Produit (autocomplete) -->
        <div class="mb-2">
            <label class="form-label small fw-semibold mb-1">{% translate "Produit" %} <span class="text-danger">*</span></label>
            <div class="position-relative">
                <input type="text" class="form-control form-control-sm product-search-input"
                       placeholder="{% translate 'Tapez pour rechercher…' %}" autocomplete="off">
                <div class="list-group search-dropdown product-results" style="display:none;"></div>
            </div>
            <input type="hidden" name="product_id" class="product-id-input">
        </div>

        <!-- Quantité -->
        <div class="mb-2">
            <label class="form-label small fw-semibold mb-1">{% translate "Quantité" %} <span class="text-danger">*</span></label>
            <input type="number" name="quantity" class="form-control form-control-sm" min="1" value="1" required>
        </div>

        <!-- Emplacement(s) -->
        {% if movement_type == 'in' %}
        <div class="mb-2">
            <label class="form-label small fw-semibold mb-1">{% translate "Emplacement destination" %} <span class="text-danger">*</span></label>
            <select name="destination_location_id" class="form-select form-select-sm destination-location-select" required disabled>
                <option value="">-- {% translate "Sélectionnez d'abord un produit" %} --</option>
            </select>
            <div class="form-text destination-stock-hint text-muted small" style="display:none; font-size:0.75rem;"></div>
        </div>
        {% elif movement_type == 'out' %}
        <div class="mb-2">
            <label class="form-label small fw-semibold mb-1">{% translate "Emplacement source" %} <span class="text-danger">*</span></label>
            <select name="source_location_id" class="form-select form-select-sm source-location-select" required disabled>
                <option value="">-- {% translate "Sélectionnez d'abord un produit" %} --</option>
            </select>
            <div class="form-text source-stock-hint text-muted small" style="display:none; font-size:0.75rem;"></div>
        </div>
        {% elif movement_type == 'transfer' %}
        <div class="mb-2">
            <label class="form-label small fw-semibold mb-1">{% translate "Emplacement source" %} <span class="text-danger">*</span></label>
            <select name="source_location_id" class="form-select form-select-sm source-location-select" required disabled>
                <option value="">-- {% translate "Sélectionnez d'abord un produit" %} --</option>
            </select>
            <div class="form-text source-stock-hint text-muted small" style="display:none; font-size:0.75rem;"></div>
        </div>
        <div class="mb-2">
            <label class="form-label small fw-semibold mb-1">{% translate "Emplacement destination" %} <span class="text-danger">*</span></label>
            <select name="destination_location_id" class="form-select form-select-sm destination-location-select" required disabled>
                <option value="">-- {% translate "Sélectionnez d'abord un produit" %} --</option>
            </select>
            <div class="form-text destination-stock-hint text-muted small" style="display:none; font-size:0.75rem;"></div>
        </div>
        {% endif %}

        <!-- Articles tracés (produit sérialisé) -->
        <div class="serialized-items-section mt-2" style="display:none;">
            <hr class="my-2">
            <div class="small fw-semibold text-primary mb-2">
                <i class="bi bi-upc-scan me-1"></i>{% translate "Articles tracés (numéros de série)" %}
            </div>
            <!-- Nouveaux articles (entrée uniquement) -->
            <div class="new-serials-section mb-2" style="display:none;">
                <div class="form-text text-muted mb-1">{% translate "Nouveaux articles à enregistrer :" %}</div>
                <div class="input-group input-group-sm mb-1">
                    <input type="text" class="form-control form-control-sm new-serial-input font-monospace"
                           placeholder="{% translate 'N° de série…' %}" autocomplete="off">
                    <button type="button" class="btn btn-outline-primary add-serial-btn" tabindex="-1">
                        <i class="bi bi-plus-lg"></i>
                    </button>
                </div>
                <div class="new-serials-tags d-flex flex-wrap gap-1 mb-1"></div>
                <input type="hidden" name="serialized_new_serials" class="serialized-new-serials-input" value="">
            </div>
            <!-- Articles existants (retours / sélection) -->
            <div class="existing-serials-section">
                <div class="form-text text-muted mb-1 existing-serials-label" style="display:none;">{% translate "Articles existants (retour / sélection) :" %}</div>
                <div class="serialized-items-list border rounded p-2 bg-white"
                     style="max-height:180px;overflow-y:auto;min-height:2.5rem;"></div>
            </div>
            <div class="form-text serialized-count-hint text-primary fw-semibold mt-1"></div>
            <input type="hidden" name="serialized_item_ids" class="serialized-ids-input" value="">
        </div>

    </div>
</template>
{% endblock content %}

{% block extra_scripts %}
<script>
const PRODUCT_AUTOCOMPLETE_URL = '{% url "stock:products_autocomplete_api" %}';
const PRODUCT_LOCATIONS_API_BASE = '{% url "stock:product_locations_api" 0 %}'.replace('/0/', '/{id}/');
const SERIALIZED_ITEMS_API_BASE = '{% url "stock:serialized_items_for_product_api" 0 %}'.replace('/0/', '/{id}/');
const MOVEMENT_TYPE = '{{ movement_type }}';

function escHtml(str) {
    const d = document.createElement('div');
    d.textContent = str;
    return d.innerHTML;
}

// ── Emplacements dynamiques par produit ──────────────────────
function fetchLocationsForProduct(lineEl, productId, preferredLocationId = null) {
    const url = PRODUCT_LOCATIONS_API_BASE.replace('{id}', productId);
    const sourceSelect = lineEl.querySelector('.source-location-select');
    const destSelect   = lineEl.querySelector('.destination-location-select');
    const sourceHint   = lineEl.querySelector('.source-stock-hint');
    const destHint     = lineEl.querySelector('.destination-stock-hint');

    // Indicateur de chargement
    [sourceSelect, destSelect].forEach(sel => {
        if (sel) {
            sel.disabled = true;
            sel.innerHTML = '<option value="">-- {% translate "Chargement des emplacements…" %} --</option>';
        }
    });

    fetch(url)
        .then(r => r.json())
        .then(data => {
            const locations = data.locations || [];

            if (sourceSelect) {
                const prevVal = preferredLocationId || sourceSelect.dataset.selectedVal || '';
                sourceSelect.innerHTML = '';
                // Emplacements avec stock en priorité pour la source
                const withStock = locations.filter(loc => loc.quantity > 0);
                const candidates = withStock.length > 0 ? withStock : locations;

                if (!candidates.length) {
                    sourceSelect.innerHTML = '<option value="">-- {% translate "Aucun emplacement disponible" %} --</option>';
                    sourceSelect.disabled = true;
                } else {
                    candidates.forEach(loc => {
                        const opt = document.createElement('option');
                        opt.value = loc.id;
                        opt.textContent = `${loc.warehouse_name} \u2014 ${loc.name} (${loc.quantity} {% translate "en stock" %})`;
                        if (String(loc.id) === String(prevVal)) opt.selected = true;
                        sourceSelect.appendChild(opt);
                    });
                    // Si plusieurs emplacements sont possibles, le premier est choisi si aucun n'est déjà sélectionné
                    if (!sourceSelect.value && candidates.length > 0) {
                        sourceSelect.value = candidates[0].id;
                    }
                    sourceSelect.disabled = false;
                }

                if (sourceHint) {
                    if (withStock.length > 0) {
                        sourceHint.textContent = `${withStock.length} {% translate "emplacement(s) avec stock" %}`;
                        sourceHint.className = 'form-text source-stock-hint text-muted small';
                    } else {
                        sourceHint.textContent = '{% translate "Aucun stock dans les emplacements autorisés." %}';
                        sourceHint.className = 'form-text source-stock-hint text-danger small';
                    }
                    sourceHint.style.display = '';
                }
            }

            if (destSelect) {
                const prevVal = preferredLocationId || destSelect.dataset.selectedVal || '';
                destSelect.innerHTML = '';

                if (!locations.length) {
                    destSelect.innerHTML = '<option value="">-- {% translate "Aucun emplacement disponible" %} --</option>';
                    destSelect.disabled = true;
                } else {
                    locations.forEach(loc => {
                        const opt = document.createElement('option');
                        opt.value = loc.id;
                        const qteLabel = loc.quantity > 0 ? ` (${loc.quantity} {% translate "en stock" %})` : '';
                        opt.textContent = `${loc.warehouse_name} \u2014 ${loc.name}${qteLabel}`;
                        if (String(loc.id) === String(prevVal)) opt.selected = true;
                        destSelect.appendChild(opt);
                    });

                    // Si pas encore sélectionné :
                    if (!destSelect.value) {
                        if (MOVEMENT_TYPE === 'transfer' && sourceSelect && sourceSelect.value) {
                            // En transfert, choisir par défaut un emplacement différent de la source si possible
                            const diffLoc = locations.find(loc => String(loc.id) !== String(sourceSelect.value));
                            destSelect.value = diffLoc ? diffLoc.id : locations[0].id;
                        } else if (locations.length > 0) {
                            // Le premier est choisi
                            destSelect.value = locations[0].id;
                        }
                    }
                    destSelect.disabled = false;
                }

                if (destHint) {
                    destHint.textContent = `${locations.length} {% translate "emplacement(s) autorisé(s)" %}`;
                    destHint.className = 'form-text destination-stock-hint text-muted small';
                    destHint.style.display = '';
                }
            }

            // En transfert, si la source change et devient identique à la destination, réajuster
            if (sourceSelect && destSelect && MOVEMENT_TYPE === 'transfer') {
                sourceSelect.onchange = function () {
                    if (sourceSelect.value && destSelect.value && sourceSelect.value === destSelect.value) {
                        const diffLoc = locations.find(loc => String(loc.id) !== String(sourceSelect.value));
                        if (diffLoc) destSelect.value = diffLoc.id;
                    }
                };
            }
        })
        .catch(() => {
            [sourceSelect, destSelect].forEach(sel => {
                if (sel) {
                    sel.disabled = false;
                    sel.innerHTML = '<option value="">-- {% translate "Erreur de chargement" %} --</option>';
                }
            });
        });
}

function resetLocationSelects(lineEl) {
    const lineSource = lineEl.querySelector('.source-location-select');
    const lineDest   = lineEl.querySelector('.destination-location-select');
    if (lineSource) {
        lineSource.innerHTML = '<option value="">-- {% filter escapejs %}{% translate "Sélectionnez d\'abord un produit" %}{% endfilter %} --</option>';
        lineSource.disabled = true;
    }
    if (lineDest) {
        lineDest.innerHTML = '<option value="">-- {% filter escapejs %}{% translate "Sélectionnez d\'abord un produit" %}{% endfilter %} --</option>';
        lineDest.disabled = true;
    }
    const sHint = lineEl.querySelector('.source-stock-hint');
    if (sHint) sHint.style.display = 'none';
    const dHint = lineEl.querySelector('.destination-stock-hint');
    if (dHint) dHint.style.display = 'none';
}

function initProductAutocomplete(lineEl) {
    const searchInput = lineEl.querySelector('.product-search-input');
    const resultsBox  = lineEl.querySelector('.product-results');
    const hiddenInput = lineEl.querySelector('.product-id-input');
    let searchTimeout = null;

    searchInput.addEventListener('input', function () {
        clearTimeout(searchTimeout);
        const q = this.value.trim();
        if (hiddenInput.value) {
            hiddenInput.value = '';
            delete lineEl.dataset.authorizedLocations;
            resetLocationSelects(lineEl);
            resetSerializedSection(lineEl);
        }
        searchInput.classList.remove('is-invalid');
        if (q.length < 2) { resultsBox.style.display = 'none'; return; }
        searchTimeout = setTimeout(() => {
            fetch(`${PRODUCT_AUTOCOMPLETE_URL}?q=${encodeURIComponent(q)}`)
                .then(r => r.json())
                .then(data => {
                    resultsBox.innerHTML = '';
                    if (!data.results.length) {
                        resultsBox.innerHTML = '<div class="list-group-item text-muted small">{% translate "Aucun produit trouvé" %}</div>';
                    } else {
                        data.results.forEach(p => {
                            const item = document.createElement('div');
                            item.className = 'list-group-item list-group-item-action py-2';
                            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>`;
                            item.innerHTML = `<strong>${escHtml(p.text)}</strong> <small class="text-muted">${escHtml(p.code || '')}</small>${stockBadge}`;
                            const selectProduct = (e) => {
                                e.preventDefault();
                                hiddenInput.value = p.id;
                                lineEl.dataset.authorizedLocations = JSON.stringify(p.authorized_location_ids || []);
                                searchInput.value  = p.text + (p.code ? ' (' + p.code + ')' : '');
                                searchInput.classList.remove('is-invalid');
                                resultsBox.style.display = 'none';
                                fetchLocationsForProduct(lineEl, p.id);
                                if (p.is_serialized) {
                                    fetchSerializedItems(lineEl, p.id);
                                } else {
                                    resetSerializedSection(lineEl);
                                }
                            };
                            item.addEventListener('pointerdown', selectProduct);
                            item.addEventListener('mousedown', selectProduct);
                            resultsBox.appendChild(item);
                        });
                    }
                    resultsBox.style.display = 'block';
                })
                .catch(() => { resultsBox.style.display = 'none'; });
        }, 280);
    });

    searchInput.addEventListener('blur', () => {
        setTimeout(() => { resultsBox.style.display = 'none'; }, 250);
    });
}

let lineCount = 0;

function updateNoLinesPlaceholder() {
    const container = document.getElementById('lines-container');
    document.getElementById('no-lines-placeholder').style.display =
        container.children.length === 0 ? '' : 'none';
}

function updateLineNumbers() {
    document.querySelectorAll('#lines-container .product-line').forEach((el, i) => {
        const n = el.querySelector('.line-num');
        if (n) n.textContent = i + 1;
    });
}

function addLine() {
    const template = document.getElementById('line-template');
    const clone = template.content.cloneNode(true);
    const lineEl = clone.querySelector('.product-line');
    lineEl.dataset.lineIndex = lineCount++;

    lineEl.querySelector('.remove-line-btn').addEventListener('click', function () {
        lineEl.remove();
        updateLineNumbers();
        updateNoLinesPlaceholder();
    });

    document.getElementById('lines-container').appendChild(lineEl);
    updateLineNumbers();
    updateNoLinesPlaceholder();
    initProductAutocomplete(lineEl);
    lineEl.querySelector('.product-search-input').focus();
}

document.getElementById('add-line-btn').addEventListener('click', addLine);

// Documents
const docInput = document.getElementById('documents_input');
const fileList = document.getElementById('file-list');
let selectedFiles = new DataTransfer();

function renderFileList() {
    fileList.innerHTML = '';
    Array.from(selectedFiles.files).forEach((file, idx) => {
        const item = document.createElement('div');
        item.className = 'd-flex align-items-center gap-2 mt-1 small';
        item.innerHTML = `
            <i class="bi bi-file-earmark text-secondary"></i>
            <span class="flex-grow-1 text-truncate">${escHtml(file.name)}</span>
            <small class="text-muted">${(file.size/1024).toFixed(0)} KB</small>
            <button type="button" class="btn btn-sm btn-outline-danger py-0 px-1 remove-file-btn" data-idx="${idx}">
                <i class="bi bi-x"></i>
            </button>`;
        fileList.appendChild(item);
    });
    docInput.files = selectedFiles.files;
    fileList.querySelectorAll('.remove-file-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const i = parseInt(this.dataset.idx);
            const dt = new DataTransfer();
            Array.from(selectedFiles.files).forEach((f, j) => { if (j !== i) dt.items.add(f); });
            selectedFiles = dt;
            renderFileList();
        });
    });
}

docInput.addEventListener('change', function () {
    Array.from(this.files).forEach(f => selectedFiles.items.add(f));
    renderFileList();
});

// Validation
document.getElementById('batch-form').addEventListener('submit', function (e) {
    const subtypeEl = document.getElementById('movement_subtype');
    if (subtypeEl && !subtypeEl.value) {
        e.preventDefault();
        subtypeEl.classList.add('is-invalid');
        alert("{% translate 'Le sous-type est obligatoire.' %}");
        return;
    }
    if (subtypeEl && subtypeEl.value === 'loan') {
        const returnDateEl = document.getElementById('estimated_return_date');
        if (returnDateEl && !returnDateEl.value) {
            e.preventDefault();
            returnDateEl.classList.add('is-invalid');
            alert("{% translate 'La date de retour attendue est obligatoire pour un emprunt.' %}");
            return;
        }
    }
    const lines = document.querySelectorAll('#lines-container .product-line');
    if (lines.length === 0) {
        e.preventDefault();
        alert("{% translate 'Veuillez ajouter au moins une ligne produit.' %}");
        return;
    }
    let invalid = false;
    let missingLocation = false;
    let transferSameLoc = false;
    lines.forEach(line => {
        const pid = line.querySelector('.product-id-input').value;
        const searchInput = line.querySelector('.product-search-input');
        if (!pid) {
            searchInput.classList.add('is-invalid');
            invalid = true;
        }

        const srcSelect = line.querySelector('.source-location-select');
        const dstSelect = line.querySelector('.destination-location-select');

        if (MOVEMENT_TYPE === 'out' || MOVEMENT_TYPE === 'transfer') {
            if (srcSelect && !srcSelect.value) {
                srcSelect.classList.add('is-invalid');
                missingLocation = true;
            } else if (srcSelect) {
                srcSelect.classList.remove('is-invalid');
            }
        }
        if (MOVEMENT_TYPE === 'in' || MOVEMENT_TYPE === 'transfer') {
            if (dstSelect && !dstSelect.value) {
                dstSelect.classList.add('is-invalid');
                missingLocation = true;
            } else if (dstSelect) {
                dstSelect.classList.remove('is-invalid');
            }
        }
        if (MOVEMENT_TYPE === 'transfer' && srcSelect && dstSelect && srcSelect.value && dstSelect.value) {
            if (srcSelect.value === dstSelect.value) {
                srcSelect.classList.add('is-invalid');
                dstSelect.classList.add('is-invalid');
                transferSameLoc = true;
            }
        }
    });
    if (invalid) {
        e.preventDefault();
        alert("{% translate 'Veuillez sélectionner un produit dans la liste pour chaque ligne.' %}");
        return;
    }
    if (missingLocation) {
        e.preventDefault();
        alert("{% translate 'Veuillez indiquer un emplacement pour chaque produit.' %}");
        return;
    }
    if (transferSameLoc) {
        e.preventDefault();
        alert("{% translate 'Les emplacements source et destination doivent être différents pour chaque produit.' %}");
        return;
    }
});

// Une première ligne par défaut
addLine();

function resetSerializedSection(lineEl) {
    const section = lineEl.querySelector('.serialized-items-section');
    if (!section) return;
    section.style.display = 'none';
    const idsInput = section.querySelector('.serialized-ids-input');
    if (idsInput) idsInput.value = '';
    const newSerialsInput = section.querySelector('.serialized-new-serials-input');
    if (newSerialsInput) newSerialsInput.value = '';
    const tagsContainer = section.querySelector('.new-serials-tags');
    if (tagsContainer) tagsContainer.innerHTML = '';
    const newSerialsSection = section.querySelector('.new-serials-section');
    if (newSerialsSection) newSerialsSection.style.display = 'none';
    const qtyInput = lineEl.querySelector('input[name="quantity"]');
    if (qtyInput) { qtyInput.readOnly = false; qtyInput.value = 1; }
    const hint = section.querySelector('.serialized-count-hint');
    if (hint) hint.textContent = '';
    delete section.dataset.snInitialized;
}

function initNewSerialsSection(lineEl) {
    const section = lineEl.querySelector('.serialized-items-section');
    if (!section || section.dataset.snInitialized) return;
    section.dataset.snInitialized = '1';
    const newSerialsSection = section.querySelector('.new-serials-section');
    if (!newSerialsSection) return;
    const input = newSerialsSection.querySelector('.new-serial-input');
    const addBtn = newSerialsSection.querySelector('.add-serial-btn');
    function doAdd() {
        const sn = input.value.trim();
        input.value = '';
        if (!sn) return;
        addNewSerial(lineEl, sn);
        input.focus();
    }
    addBtn.addEventListener('click', doAdd);
    input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter') { e.preventDefault(); doAdd(); }
    });
}

function addNewSerial(lineEl, sn) {
    const section = lineEl.querySelector('.serialized-items-section');
    if (!section) return;
    const tagsContainer = section.querySelector('.new-serials-tags');
    const newSerialsInput = section.querySelector('.serialized-new-serials-input');
    if (!tagsContainer || !newSerialsInput) return;
    const current = newSerialsInput.value ? newSerialsInput.value.split(',') : [];
    if (current.includes(sn)) return;
    const tag = document.createElement('span');
    tag.className = 'badge bg-primary d-inline-flex align-items-center gap-1 font-monospace';
    tag.style.fontSize = '0.82rem';
    tag.dataset.sn = sn;
    tag.innerHTML = `${escHtml(sn)} <button type="button" class="btn-close btn-close-white" style="font-size:0.6rem;" aria-label="{% translate 'Supprimer' %}"></button>`;
    tag.querySelector('.btn-close').addEventListener('click', function () {
        tag.remove();
        updateNewSerials(lineEl);
    });
    tagsContainer.appendChild(tag);
    updateNewSerials(lineEl);
}

function updateNewSerials(lineEl) {
    const section = lineEl.querySelector('.serialized-items-section');
    if (!section) return;
    const tagsContainer = section.querySelector('.new-serials-tags');
    const newSerialsInput = section.querySelector('.serialized-new-serials-input');
    if (!tagsContainer || !newSerialsInput) return;
    const sns = Array.from(tagsContainer.querySelectorAll('[data-sn]')).map(t => t.dataset.sn);
    newSerialsInput.value = sns.join(',');
    updateSerializedSelection(lineEl);
}

function fetchSerializedItems(lineEl, productId) {
    const section = lineEl.querySelector('.serialized-items-section');
    if (!section) return;
    section.style.display = '';
    const listEl = section.querySelector('.serialized-items-list');
    listEl.innerHTML = '<div class="text-muted small p-1">{% translate "Chargement..." %}</div>';
    const idsInput = section.querySelector('.serialized-ids-input');
    if (idsInput) idsInput.value = '';
    // Afficher la saisie de nouveaux numéros de série pour les entrées
    const newSerialsSection = section.querySelector('.new-serials-section');
    if (MOVEMENT_TYPE === 'in' && newSerialsSection) {
        newSerialsSection.style.display = '';
        initNewSerialsSection(lineEl);
    }
    const url = SERIALIZED_ITEMS_API_BASE.replace('{id}', productId) + '?movement_type=' + MOVEMENT_TYPE;
    fetch(url)
        .then(r => r.json())
        .then(data => {
            listEl.innerHTML = '';
            const existingLabel = section.querySelector('.existing-serials-label');
            if (data.items.length === 0) {
                if (MOVEMENT_TYPE === 'in') {
                    listEl.innerHTML = '<div class="text-muted small fst-italic p-1">{% translate "Aucun article existant à retourner." %}</div>';
                } else {
                    listEl.innerHTML = '<div class="text-muted small fst-italic p-1">{% translate "Aucun article tracé disponible pour ce produit." %}</div>';
                }
                if (existingLabel) existingLabel.style.display = 'none';
            } else {
                if (existingLabel) existingLabel.style.display = '';
                const qtyInput = lineEl.querySelector('input[name="quantity"]');
                if (qtyInput) qtyInput.readOnly = true;
                data.items.forEach(item => {
                    const label = document.createElement('label');
                    label.className = 'form-check d-flex align-items-center gap-1 px-2 py-1 serialized-item-check w-100 mb-0';
                    label.innerHTML = `
                        <input type="checkbox" class="form-check-input serialized-checkbox flex-shrink-0" value="${item.id}">
                        <span class="font-monospace small fw-semibold">${escHtml(item.serial_number)}</span>
                        <span class="badge bg-${serializedStatusBadge(item.status)}">${escHtml(item.status_display)}</span>
                        ${item.holder ? `<small class="text-muted ms-auto"><i class="bi bi-person me-1"></i>${escHtml(item.holder)}</small>` : ''}
                        ${item.location ? `<small class="text-muted ms-1"><i class="bi bi-geo-alt me-1"></i>${escHtml(item.location)}</small>` : ''}
                    `;
                    label.querySelector('.serialized-checkbox').addEventListener('change', () => updateSerializedSelection(lineEl));
                    listEl.appendChild(label);
                });
            }
            updateSerializedSelection(lineEl);
        })
        .catch(() => {
            listEl.innerHTML = '<div class="text-danger small p-1">{% translate "Erreur lors du chargement des articles." %}</div>';
        });
}

function updateSerializedSelection(lineEl) {
    const checked = Array.from(lineEl.querySelectorAll('.serialized-checkbox:checked'));
    const ids = checked.map(cb => cb.value);
    const idsInput = lineEl.querySelector('.serialized-ids-input');
    if (idsInput) idsInput.value = ids.join(',');
    const newSerialsInput = lineEl.querySelector('.serialized-new-serials-input');
    const newSns = (newSerialsInput && newSerialsInput.value)
        ? newSerialsInput.value.split(',').filter(Boolean)
        : [];
    const total = ids.length + newSns.length;
    const qtyInput = lineEl.querySelector('input[name="quantity"]');
    if (total > 0) {
        if (qtyInput) { qtyInput.value = total; qtyInput.readOnly = true; }
    } else {
        if (qtyInput) qtyInput.readOnly = false;
    }
    const hint = lineEl.querySelector('.serialized-count-hint');
    if (hint) {
        const parts = [];
        if (newSns.length) parts.push(`${newSns.length} nouveau(x)`);
        if (ids.length) parts.push(`${ids.length} existant(s)`);
        hint.textContent = parts.length ? parts.join(' + ') + ' article(s)' : '';
    }
}

function serializedStatusBadge(status) {
    return {available: 'success', assigned: 'primary', lost: 'danger', retired: 'secondary'}[status] || 'secondary';
}

// ── Cartographie Nom Entreprise -> ID ────────────────────────
const companyNameToId = {
    {% for c in companies %}
    "{{ c.name|escapejs }}": "{{ c.id }}",
    {% endfor %}
};

function onCompanyInputChange() {
    const nameInput = document.getElementById('company_name');
    const name = nameInput ? nameInput.value.trim() : '';
    const companyId = companyNameToId[name] || '';
    filterPersonsByCompany(companyId);
}

// ── Filtrage des personnes par entreprise ────────────────────
function filterPersonsByCompany(companyId) {
    const personSelect = document.getElementById('person_id');
    if (!personSelect) return;
    const currentOpt = personSelect.selectedIndex >= 0 ? personSelect.options[personSelect.selectedIndex] : null;
    Array.from(personSelect.options).forEach(opt => {
        if (!opt.value) return; // keep the blank option always
        const allowedCompanies = (opt.dataset.companies || '').split(',');
        if (!companyId || allowedCompanies.includes(String(companyId))) {
            opt.hidden = false;
        } else {
            opt.hidden = true;
        }
    });
    // Reset selection if the current person is now hidden
    if (currentOpt && currentOpt.hidden) {
        personSelect.value = '';
    }
}

{% if movement_type == 'in' %}
// ── Autocomplete Bon de préparation (retour) ─────────────────
const BP_AUTOCOMPLETE_URL = '{% url "stock:preparation_orders_autocomplete_api" %}';
const BP_ITEMS_URL_BASE   = '{% url "stock:preparation_order_items_api" 0 %}'.replace('/0/', '/{id}/');

const bpSearchInput = document.getElementById('bp-search-input');
const bpHiddenId    = document.getElementById('bp-hidden-id');
const bpResults     = document.getElementById('bp-results');
const bpLoadBtn     = document.getElementById('bp-load-btn');
const bpInfo        = document.getElementById('bp-info');

{% if preselected_po %}
if (bpSearchInput && bpHiddenId && bpLoadBtn) {
    bpHiddenId.value = '{{ preselected_po.pk }}';
    bpSearchInput.value = '{{ preselected_po.order_number }}{% if preselected_po.intervention %} (Int. {{ preselected_po.intervention.code|default:preselected_po.intervention.id }}){% endif %}';
    bpLoadBtn.disabled = false;
    setTimeout(() => { bpLoadBtn.click(); }, 150);
}
{% endif %}

let bpTimeout = null;

if (bpSearchInput) {
    bpSearchInput.addEventListener('input', function () {
        clearTimeout(bpTimeout);
        const q = this.value.trim();
        bpHiddenId.value = '';
        if (bpLoadBtn) bpLoadBtn.disabled = true;
        if (q.length < 2) { bpResults.style.display = 'none'; return; }
        bpTimeout = setTimeout(() => {
            fetch(`${BP_AUTOCOMPLETE_URL}?q=${encodeURIComponent(q)}`)
                .then(r => r.json())
                .then(data => {
                    bpResults.innerHTML = '';
                    if (!data.results.length) {
                        bpResults.innerHTML = '<div class="list-group-item text-muted small">{% translate "Aucun bon trouvé" %}</div>';
                    } else {
                        data.results.forEach(bp => {
                            const item = document.createElement('div');
                            item.className = 'list-group-item list-group-item-action py-2 small';
                            item.innerHTML = `<strong>${escHtml(bp.text)}</strong> <span class="badge bg-secondary ms-1">${escHtml(bp.status)}</span>`;
                            const selectBp = (e) => {
                                e.preventDefault();
                                bpHiddenId.value = bp.id;
                                bpSearchInput.value = bp.text;
                                bpResults.style.display = 'none';
                                if (bpLoadBtn) bpLoadBtn.disabled = false;
                            };
                            item.addEventListener('pointerdown', selectBp);
                            item.addEventListener('mousedown', selectBp);
                            bpResults.appendChild(item);
                        });
                    }
                    bpResults.style.display = 'block';
                })
                .catch(() => { bpResults.style.display = 'none'; });
        }, 280);
    });
    bpSearchInput.addEventListener('blur', () => {
        setTimeout(() => { bpResults.style.display = 'none'; }, 250);
    });
}

if (bpLoadBtn) {
    bpLoadBtn.addEventListener('click', function () {
        const bpId = bpHiddenId.value;
        if (!bpId) return;
        const url = BP_ITEMS_URL_BASE.replace('{id}', bpId);
        fetch(url)
            .then(r => r.json())
            .then(data => {
                if (!data.items || !data.items.length) {
                    bpInfo.textContent = '{% translate "Ce bon ne contient pas de produits catalogués." %}';
                    bpInfo.className = 'alert alert-warning mt-2 mb-0 py-2 small';
                    bpInfo.style.display = '';
                    return;
                }

                // Séparer les articles à réintégrer (non utilisés, qty > 0) et les articles marqués comme utilisés
                const itemsToReturn = data.items.filter(item => item.quantity > 0);
                const usedItems = data.items.filter(item => data.has_intervention && item.is_used);

                // Effacer les lignes existantes
                document.getElementById('lines-container').innerHTML = '';
                updateNoLinesPlaceholder();

                // Ajouter une ligne par produit à réintégrer
                itemsToReturn.forEach(item => {
                    addLine();
                    const lineEls = document.querySelectorAll('#lines-container .product-line');
                    const lineEl = lineEls[lineEls.length - 1];
                    const searchInput = lineEl.querySelector('.product-search-input');
                    const hiddenInput = lineEl.querySelector('.product-id-input');
                    const qtyInput    = lineEl.querySelector('input[name="quantity"]');
                    if (searchInput) searchInput.value = item.product_name + (item.product_code ? ' (' + item.product_code + ')' : '');
                    if (hiddenInput) hiddenInput.value = item.product_id;
                    if (qtyInput)    qtyInput.value    = item.quantity;
                    if (typeof fetchLocationsForProduct === 'function') {
                        fetchLocationsForProduct(lineEl, item.product_id, data.default_location_id || null);
                    }
                });

                // Construction du message d'information bpInfo
                let infoHtml = '';
                if (data.has_intervention && usedItems.length > 0 && itemsToReturn.length > 0) {
                    bpInfo.className = 'alert alert-info mt-2 mb-0 py-2 small';
                    infoHtml = `<div>{% translate "Préremplissage de" %} <strong>${itemsToReturn.length}</strong> {% translate "produit(s) non utilisé(s) à réintégrer en stock depuis le bon" %} <strong>${escHtml(data.order_number)}</strong> (<strong>${usedItems.length}</strong> {% translate "marqué(s) comme utilisé(s) sur l'intervention" %}).</div>`;
                } else if (data.has_intervention && itemsToReturn.length === 0 && usedItems.length > 0) {
                    bpInfo.className = 'alert alert-warning mt-2 mb-0 py-2 small';
                    infoHtml = `<div><i class="bi bi-info-circle me-1"></i>{% translate "Tous les articles de ce bon ont été marqués comme utilisés lors de l'intervention" %} (<strong>${escHtml(data.order_number)}</strong>). {% translate "Aucun article à réintégrer automatiquement." %}</div>`;
                } else {
                    bpInfo.className = 'alert alert-info mt-2 mb-0 py-2 small';
                    infoHtml = `<div>{% translate "Chargement de" %} <strong>${itemsToReturn.length}</strong> {% translate "produit(s) depuis le bon" %} <strong>${escHtml(data.order_number)}</strong>.</div>`;
                }

                if (usedItems.length > 0) {
                    infoHtml += `<div class="mt-2 pt-2 border-top border-secondary-subtle">
                        <span class="text-muted d-block mb-1">{% translate "Matériel marqué comme utilisé sur l'intervention (cliquer pour ajouter au retour si surplus) :" %}</span>
                        <div class="d-flex flex-wrap gap-1">`;
                    usedItems.forEach(item => {
                        infoHtml += `<button type="button" class="btn btn-sm btn-outline-secondary py-0 px-2 btn-add-used-item"
                                             data-id="${item.product_id}"
                                             data-name="${escHtml(item.product_name)}"
                                             data-code="${escHtml(item.product_code || '')}"
                                             data-qty="${item.initial_quantity || 1}">
                                        <i class="bi bi-plus-circle me-1"></i>${escHtml(item.product_name)} (${item.initial_quantity})
                                     </button>`;
                    });
                    infoHtml += `</div></div>`;
                }

                bpInfo.innerHTML = infoHtml;
                bpInfo.style.display = '';

                // Gestionnaire d'ajout rapide pour le matériel utilisé
                bpInfo.querySelectorAll('.btn-add-used-item').forEach(btn => {
                    btn.addEventListener('click', function() {
                        const prodId = this.dataset.id;
                        const prodName = this.dataset.name;
                        const prodCode = this.dataset.code;
                        const prodQty = this.dataset.qty || 1;
                        addLine();
                        const lineEls = document.querySelectorAll('#lines-container .product-line');
                        const lineEl = lineEls[lineEls.length - 1];
                        const searchInput = lineEl.querySelector('.product-search-input');
                        const hiddenInput = lineEl.querySelector('.product-id-input');
                        const qtyInput    = lineEl.querySelector('input[name="quantity"]');
                        if (searchInput) searchInput.value = prodName + (prodCode ? ' (' + prodCode + ')' : '');
                        if (hiddenInput) hiddenInput.value = prodId;
                        if (qtyInput)    qtyInput.value    = prodQty;
                        if (typeof fetchLocationsForProduct === 'function') {
                            fetchLocationsForProduct(lineEl, prodId, data.default_location_id || null);
                        }
                        this.disabled = true;
                        this.classList.add('opacity-50');
                    });
                });
            })
            .catch(() => {
                bpInfo.textContent = '{% translate "Erreur lors du chargement du bon de préparation." %}';
                bpInfo.className = 'alert alert-danger mt-2 mb-0 py-2 small';
                bpInfo.style.display = '';
            });
    });
}
{% endif %}

// --- Gestion de la date de retour des prêts ---
document.addEventListener('DOMContentLoaded', function() {
    const subtypeSelect = document.getElementById('movement_subtype');
    if (!subtypeSelect) return;

    // Gestion de l'affichage de la date de retour attendue pour le sous-type Emprunt (loan)
    const returnDateWrapper = document.getElementById('estimated_return_date_wrapper');
    const returnDateInput = document.getElementById('estimated_return_date');

    function updateLoanVisibility() {
        if (subtypeSelect && subtypeSelect.value === 'loan') {
            if (returnDateWrapper) returnDateWrapper.style.display = '';
            if (returnDateInput) returnDateInput.required = true;
        } else {
            if (returnDateWrapper) returnDateWrapper.style.display = 'none';
            if (returnDateInput) {
                returnDateInput.required = false;
                returnDateInput.value = '';
            }
        }
    }

    if (subtypeSelect) {
        subtypeSelect.addEventListener('change', updateLoanVisibility);
        updateLoanVisibility();
    }
});
</script>
{% endblock extra_scripts %}