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

{% block head %}
<style>
    .product-line { border: 1px solid #dee2e6; border-radius: 0.5rem; padding: 1rem; background: #f8f9fa; }
    .product-line:hover { border-color: #0d6efd33; background: #f0f4ff; }
    #lines-container .product-line + .product-line { margin-top: 0.75rem; }
    .remove-line-btn { opacity: 0.6; }
    .remove-line-btn:hover { opacity: 1; }
    .doc-preview { max-height: 80px; border-radius: 4px; object-fit: cover; }
    .drop-zone { border: 2px dashed #6c757d; border-radius: 0.5rem; padding: 2rem; text-align: center; cursor: pointer; transition: background .2s, border-color .2s; }
    .drop-zone.dragover, .drop-zone:hover { border-color: #0d6efd; background: #e8f0fe; }
    .file-list-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; background: #fff; border: 1px solid #dee2e6; border-radius: 0.4rem; margin-top: 0.4rem; }
    .search-dropdown { position: absolute; z-index: 1050; max-height: 220px; overflow-y: auto; width: 100%; }
    .serialized-item-check { cursor: pointer; }
    .serialized-item-check:hover { background: #e8f0fe; border-radius: 0.3rem; }
</style>
{% endblock %}

{% block content %}
<div class="container mt-3" style="max-width: 960px;">

    <!-- Breadcrumb / titre -->
    <div class="d-flex align-items-center justify-content-between mb-3">
        <h3 class="h3 d-flex align-items-center gap-2 mb-0">
            {% if movement_type == 'in' %}
                <i class="bi bi-box-arrow-in-down text-success"></i>
                <span class="badge bg-success fs-6">{% translate "Entrée" %}</span>
            {% elif movement_type == 'out' %}
                <i class="bi bi-box-arrow-up text-danger"></i>
                <span class="badge bg-danger fs-6">{% translate "Sortie" %}</span>
            {% else %}
                <i class="bi bi-arrow-left-right text-info"></i>
                <span class="badge bg-info fs-6">{% translate "Transfert" %}</span>
            {% endif %}
            {{ movement_type_label }}
        </h3>
        <a href="{% url cancel_url_name %}" class="btn btn-light btn-sm">
            <i class="bi bi-arrow-left"></i> {% translate "Retour" %}
        </a>
    </div>

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

        <!-- ── INFORMATIONS GÉNÉRALES ───────────────────────── -->
        <div class="card mb-4">
            <div class="card-header fw-semibold"><i class="bi bi-info-circle me-1"></i>{% translate "Informations générales" %}</div>
            <div class="card-body">
                <div class="row g-3">

                    {% if movement_type == 'in' %}
                    <!-- Entrée : Source = Personne/Entreprise | Destination = Emplacement -->
                    <div class="col-md-6">
                        <div class="card border-secondary h-100">
                            <div class="card-header bg-secondary text-white py-2 fw-semibold small">
                                <i class="bi bi-person-fill me-1"></i>{% translate "Source" %}
                            </div>
                            <div class="card-body">
                                <div class="row g-2">
                                    <div class="col-12">
                                        <label class="form-label fw-semibold"><i class="bi bi-person me-1"></i>{% translate "Personne interne" %}</label>
                                        <select name="person_id" id="person_id" class="form-select">
                                            <option value="">-- {% translate "Aucune" %} --</option>
                                            {% for m in company_members %}
                                            <option value="{{ m.id }}" data-companies="{{ m.company_ids_str }}">{{ m.name }} ({{ m.teams_display }})</option>
                                            {% endfor %}
                                        </select>
                                        <div class="form-text">{% translate "Optionnel" %}</div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label fw-semibold"><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" 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 class="form-text">{% translate "Optionnel" %}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-success h-100">
                            <div class="card-header bg-success text-white py-2 fw-semibold small">
                                <i class="bi bi-box-arrow-in-down-right me-1"></i>{% translate "Destination" %}
                            </div>
                            <div class="card-body">
                                <label class="form-label fw-semibold">{% translate "Emplacement" %} <span class="text-danger">*</span></label>
                                <select name="global_destination_location_id" id="global_dest_location_id" class="form-select" required>
                                    <option value="">-- {% translate "Emplacement destination" %} --</option>
                                    {% for loc in locations %}
                                    <option value="{{ loc.id }}" data-can-administer="{% if loc.can_administer %}true{% else %}false{% endif %}">{{ loc.warehouse.name }} — {{ loc.name }}</option>
                                    {% endfor %}
                                </select>
                                <div class="form-text text-danger">{% translate "Obligatoire" %}</div>
                            </div>
                        </div>
                    </div>
                    {% elif movement_type == 'out' %}
                    <!-- Sortie : Source = Emplacement | Destination = Personne/Entreprise -->
                    <div class="col-md-6">
                        <div class="card border-danger h-100">
                            <div class="card-header bg-danger text-white py-2 fw-semibold small">
                                <i class="bi bi-box-arrow-up-right me-1"></i>{% translate "Source" %}
                            </div>
                            <div class="card-body">
                                <label class="form-label fw-semibold">{% translate "Emplacement" %} <span class="text-danger">*</span></label>
                                <select name="global_source_location_id" id="global_source_location_id" class="form-select" required>
                                    <option value="">-- {% translate "Emplacement source" %} --</option>
                                    {% for loc in locations %}
                                    <option value="{{ loc.id }}" data-can-administer="{% if loc.can_administer %}true{% else %}false{% endif %}">{{ loc.warehouse.name }} — {{ loc.name }}</option>
                                    {% endfor %}
                                </select>
                                <div class="form-text text-danger">{% translate "Obligatoire" %}</div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="card border-secondary h-100">
                            <div class="card-header bg-secondary text-white py-2 fw-semibold small">
                                <i class="bi bi-person-fill me-1"></i>{% translate "Destination" %}
                            </div>
                            <div class="card-body">
                                <div class="row g-2">
                                    <div class="col-12">
                                        <label class="form-label fw-semibold"><i class="bi bi-person me-1"></i>{% translate "Personne interne" %}</label>
                                        <select name="person_id" id="person_id" class="form-select">
                                            <option value="">-- {% translate "Aucune" %} --</option>
                                            {% for m in company_members %}
                                            <option value="{{ m.id }}" data-companies="{{ m.company_ids_str }}">{{ m.name }} ({{ m.teams_display }})</option>
                                            {% endfor %}
                                        </select>
                                        <div class="form-text">{% translate "Optionnel" %}</div>
                                    </div>
                                    <div class="col-12">
                                        <label class="form-label fw-semibold"><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" 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 class="form-text">{% translate "Optionnel" %}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% else %}
                    <!-- Transfert : Source = Emplacement | Destination = Emplacement -->
                    <div class="col-md-6">
                        <label class="form-label fw-semibold"><i class="bi bi-box-arrow-up-right text-danger me-1"></i>{% translate "Source" %} <span class="text-danger">*</span></label>
                        <select name="global_source_location_id" id="global_source_location_id" class="form-select" required>
                            <option value="">-- {% translate "Emplacement source" %} --</option>
                            {% for loc in locations %}
                            <option value="{{ loc.id }}" data-can-administer="{% if loc.can_administer %}true{% else %}false{% endif %}">{{ loc.warehouse.name }} — {{ loc.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text text-danger">{% translate "Obligatoire" %}</div>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-semibold"><i class="bi bi-box-arrow-in-down-right text-success me-1"></i>{% translate "Destination" %} <span class="text-danger">*</span></label>
                        <select name="global_destination_location_id" id="global_dest_location_id" class="form-select" required>
                            <option value="">-- {% translate "Emplacement destination" %} --</option>
                            {% for loc in locations %}
                            <option value="{{ loc.id }}" data-can-administer="{% if loc.can_administer %}true{% else %}false{% endif %}">{{ loc.warehouse.name }} — {{ loc.name }}</option>
                            {% endfor %}
                        </select>
                        <div class="form-text text-danger">{% translate "Obligatoire" %}</div>
                    </div>
                    {% endif %}

                    {% if movement_type != 'transfer' %}
                    <!-- Sous-type -->
                    <div class="col-md-4">
                        <label class="form-label fw-semibold"><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" required>
                            <option value="">-- {% translate "Choisir un sous-type" %} --</option>
                            {% if movement_type == 'in' %}
                            <option value="purchase">{% translate "Achat" %}</option>
                            <option value="return">{% translate "Retour" %}</option>
                            <option value="confection">{% translate "Confection" %}</option>
                            <option value="correction" style="display: none;">{% 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" style="display: none;">{% translate "Correction (Administrateur uniquement)" %}</option>
                            {% endif %}
                        </select>
                        <div class="form-text text-danger">{% translate "Obligatoire" %}</div>
                    </div>
                    {% if movement_type == 'out' %}
                    <div class="col-md-4" id="estimated_return_date_wrapper" style="display: none;">
                        <label class="form-label fw-semibold" 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">
                        <div class="form-text text-danger">{% translate "Obligatoire" %}</div>
                    </div>
                    {% endif %}
                    {% endif %}

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

                    <!-- Demandeur -->
                    <div class="col-md-8">
                        <label class="form-label fw-semibold"><i class="bi bi-person-lines-fill me-1"></i>{% translate "Demandeur" %}</label>
                        <input type="text" name="requester" class="form-control" placeholder="{% translate 'Personne ou service à l\'origine de la demande (optionnel)' %}">
                        <div class="form-text">{% translate "Optionnel" %}</div>
                    </div>

                </div>
            </div>
        </div>

        {% if movement_type == 'in' %}
        <!-- ── BON DE PRÉPARATION (RETOUR) ─────────────────── -->
        <div class="card mb-4">
            <div class="card-header fw-semibold">
                <i class="bi bi-clipboard-check me-1"></i>{% translate "Bon de préparation lié (retour)" %}
            </div>
            <div class="card-body">
                <div class="row g-2 align-items-end">
                    <div class="col-md-6">
                        <label class="form-label fw-semibold">{% translate "Rechercher un bon de préparation" %}</label>
                        <div class="position-relative">
                            <input type="text" id="bp-search-input" class="form-control"
                                   placeholder="{% translate 'Tapez le 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:200px;overflow-y:auto;"></div>
                        </div>
                        <input type="hidden" id="bp-hidden-id" name="preparation_order_id">
                        <div class="form-text text-muted">{% translate "Optionnel. Liez cette entrée à un bon de préparation (ex : retour de matériel)." %}</div>
                    </div>
                    <div class="col-md-auto">
                        <button type="button" id="bp-load-btn" class="btn btn-outline-primary" disabled>
                            <i class="bi bi-box-arrow-in-down me-1"></i>{% translate "Charger les produits du bon" %}
                        </button>
                    </div>
                </div>
                <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-4">
            <div class="card-header d-flex align-items-center justify-content-between fw-semibold">
                <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">
                    <i class="bi bi-plus-lg"></i> {% translate "Ajouter une ligne" %}
                </button>
            </div>
            <div class="card-body">


                <div id="lines-container">
                    <!-- Les lignes seront ajoutées ici dynamiquement -->
                </div>

                <div id="no-lines-placeholder" class="text-center text-muted py-4">
                    <i class="bi bi-box-seam fs-3 opacity-50"></i>
                    <p class="mb-0 mt-2">{% translate "Aucun produit. Cliquez sur « Ajouter une ligne »." %}</p>
                </div>

            </div>
        </div>

        <!-- ── DOCUMENTS ────────────────────────────────────── -->
        <div class="card mb-4">
            <div class="card-header fw-semibold"><i class="bi bi-paperclip me-1"></i>{% translate "Documents joints" %}</div>
            <div class="card-body">
                <div id="drop-zone" class="drop-zone">
                    <i class="bi bi-cloud-upload fs-2 text-muted"></i>
                    <p class="mt-2 mb-1 fw-semibold">{% translate "Glissez-déposez vos fichiers ici" %}</p>
                    <p class="text-muted small">{% translate "ou" %}</p>
                    <label for="documents_input" class="btn btn-sm btn-outline-secondary">
                        <i class="bi bi-folder2-open me-1"></i>{% translate "Parcourir..." %}
                    </label>
                    <input type="file" id="documents_input" name="documents" multiple class="d-none"
                           accept="image/*,.pdf,.doc,.docx,.xls,.xlsx,.odt,.ods,.txt">
                </div>
                <div id="file-list" class="mt-2"></div>
                <div class="form-text">{% translate "Formats acceptés : images, PDF, Word, Excel, ODT, ODS, texte." %}</div>
            </div>
        </div>

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

    </form>
</div>

<!-- ── 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="fw-semibold text-muted small">{% translate "Ligne" %} <span class="line-num">1</span></span>
            <button type="button" class="btn btn-sm btn-outline-danger remove-line-btn">
                <i class="bi bi-trash3"></i>
            </button>
        </div>
        <div class="row g-2">

            <!-- Produit (autocomplete) -->
            <div class="col-md-8">
                <label class="form-label small fw-semibold">{% translate "Produit" %} <span class="text-danger">*</span></label>
                <div class="position-relative">
                    <input type="text"
                           class="form-control 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="col-md-2">
                <label class="form-label small fw-semibold">{% translate "Quantité" %} <span class="text-danger">*</span></label>
                <input type="number" name="quantity" class="form-control" min="1" value="1" required>
            </div>

            <input type="hidden" name="source_location_id" value="">
            <input type="hidden" name="destination_location_id" value="">

        </div>

        <!-- 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" style="max-width:400px;">
                    <input type="text" class="form-control 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> {% translate "Ajouter" %}
                    </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:200px;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 script %}
<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 }}';

// ── Autocomplete produit ─────────────────────────────────────
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) {
            // Product was selected but user is editing: reset location selects
            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-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>`;
                            item.innerHTML = `<strong>${escHtml(p.text)}</strong> <small class="text-muted">${escHtml(p.code || '')}</small>${stockBadge}`;
                            item.addEventListener('mousedown', (e) => {
                                e.preventDefault();
                                hiddenInput.value = p.id;
                                lineEl.dataset.authorizedLocations = JSON.stringify(p.authorized_location_ids || []);
                                searchInput.value  = p.text + (p.code ? ' (' + p.code + ')' : '');
                                resultsBox.style.display = 'none';
                                fetchLocationsForProduct(lineEl, p.id);
                                if (p.is_serialized) {
                                    fetchSerializedItems(lineEl, p.id);
                                } else {
                                    resetSerializedSection(lineEl);
                                }
                            });
                            resultsBox.appendChild(item);
                        });
                    }
                    resultsBox.style.display = 'block';
                })
                .catch(() => { resultsBox.style.display = 'none'; });
        }, 280);
    });

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

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

// ── Emplacements dynamiques par produit ──────────────────────
function fetchLocationsForProduct(lineEl, productId) {
    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');

    // Indicateur de chargement
    [sourceSelect, destSelect].forEach(sel => { if (sel) sel.disabled = true; });

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

            if (sourceSelect) {
                const prevVal = sourceSelect.value;
                sourceSelect.innerHTML = '<option value="">-- {% translate "Emplacement" %} --</option>';
                const withStock = locations.filter(loc => loc.quantity > 0);
                withStock.forEach(loc => {
                    const opt = document.createElement('option');
                    opt.value = loc.id;
                    opt.textContent = `${loc.warehouse_name} \u2014 ${loc.name} (qté\u00a0: ${loc.quantity})`;
                    if (String(loc.id) === prevVal) opt.selected = true;
                    sourceSelect.appendChild(opt);
                });
                // Auto-sélection si un seul emplacement disponible
                if (withStock.length === 1 && !prevVal) {
                    sourceSelect.value = withStock[0].id;
                }
                sourceSelect.disabled = false;
                if (sourceHint) {
                    const total = withStock.length;
                    sourceHint.textContent = total > 0
                        ? `{% translate "Emplacements avec stock disponible" %}\u00a0: ${total}`
                        : '{% translate "Aucun emplacement ne dispose de stock pour ce produit." %}';
                    sourceHint.style.display = '';
                    sourceHint.className = 'form-text source-stock-hint ' + (total > 0 ? 'text-muted' : 'text-danger');
                }
            }

            if (destSelect) {
                const prevVal = destSelect.value;
                destSelect.innerHTML = '<option value="">-- {% translate "Emplacement" %} --</option>';
                locations.forEach(loc => {
                    const opt = document.createElement('option');
                    opt.value = loc.id;
                    const qteLabel = loc.quantity > 0 ? ` (qté\u00a0: ${loc.quantity})` : ' ({% translate "vide" %})';
                    opt.textContent = `${loc.warehouse_name} \u2014 ${loc.name}${qteLabel}`;
                    if (String(loc.id) === prevVal) opt.selected = true;
                    destSelect.appendChild(opt);
                });
                // Auto-sélection si un seul emplacement disponible
                if (locations.length === 1 && !prevVal) {
                    destSelect.value = locations[0].id;
                }
                destSelect.disabled = false;
            }
        })
        .catch(() => {
            [sourceSelect, destSelect].forEach(sel => { if (sel) sel.disabled = false; });
        });
}

function resetLocationSelects(lineEl) {
    const tmpl       = document.getElementById('line-template');
    const tmplSource = tmpl.content.querySelector('.source-location-select');
    const tmplDest   = tmpl.content.querySelector('.destination-location-select');
    const lineSource = lineEl.querySelector('.source-location-select');
    const lineDest   = lineEl.querySelector('.destination-location-select');
    if (tmplSource && lineSource) { lineSource.innerHTML = tmplSource.innerHTML; lineSource.disabled = false; }
    if (tmplDest   && lineDest)   { lineDest.innerHTML   = tmplDest.innerHTML;   lineDest.disabled   = false; }
    const hint = lineEl.querySelector('.source-stock-hint');
    if (hint) hint.style.display = 'none';
}

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';
}

// ── Gestion de lignes ────────────────────────────────────────
let lineCount = 0;

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

function updateLineNumbers() {
    document.querySelectorAll('#lines-container .product-line').forEach((el, i) => {
        const numEl = el.querySelector('.line-num');
        if (numEl) numEl.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);

// ── Upload de documents ──────────────────────────────────────
const dropZone = document.getElementById('drop-zone');
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 = 'file-list-item';
        const isImg = file.type.startsWith('image/');
        let preview = '';
        if (isImg) {
            const url = URL.createObjectURL(file);
            preview = `<img src="${url}" class="doc-preview" alt="">`;
        } else {
            preview = `<i class="bi bi-file-earmark fs-5 text-secondary"></i>`;
        }
        item.innerHTML = `
            ${preview}
            <span class="flex-grow-1 small text-truncate" title="${file.name}">${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 idx = parseInt(this.dataset.idx);
            const dt = new DataTransfer();
            Array.from(selectedFiles.files).forEach((f, i) => { if (i !== idx) dt.items.add(f); });
            selectedFiles = dt;
            renderFileList();
        });
    });
}

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

dropZone.addEventListener('click', () => docInput.click());
dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('dragover'); });
dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
dropZone.addEventListener('drop', e => {
    e.preventDefault();
    dropZone.classList.remove('dragover');
    Array.from(e.dataTransfer.files).forEach(f => selectedFiles.items.add(f));
    renderFileList();
});

// ── Validation avant soumission ──────────────────────────────
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;
        }
    }
    if (MOVEMENT_TYPE === 'transfer' || MOVEMENT_TYPE === 'out') {
        const srcEl = document.getElementById('global_source_location_id');
        if (srcEl && !srcEl.value) {
            e.preventDefault();
            srcEl.classList.add('is-invalid');
            alert("{% translate 'Emplacement source obligatoire.' %}");
            return;
        }
    }
    if (MOVEMENT_TYPE === 'transfer' || MOVEMENT_TYPE === 'in') {
        const dstEl = document.getElementById('global_dest_location_id');
        if (dstEl && !dstEl.value) {
            e.preventDefault();
            dstEl.classList.add('is-invalid');
            alert("{% translate 'Emplacement destination obligatoire.' %}");
            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;
    lines.forEach((line) => {
        const pid = line.querySelector('.product-id-input').value;
        if (!pid) {
            line.querySelector('.product-search-input').classList.add('is-invalid');
            invalid = true;
        }
    });
    if (invalid) {
        e.preventDefault();
        alert("{% translate 'Veuillez sélectionner un produit dans la liste pour chaque ligne.' %}");
        return;
    }

    // Validation des emplacements autorisés par produit (frontend check)
    const globalSrcVal = document.getElementById('global_source_location_id') ? document.getElementById('global_source_location_id').value : null;
    const globalDstVal = document.getElementById('global_dest_location_id') ? document.getElementById('global_dest_location_id').value : null;
    
    let locationValidationError = false;
    lines.forEach((line, index) => {
        const authLocsStr = line.dataset.authorizedLocations;
        if (authLocsStr) {
            const authLocs = JSON.parse(authLocsStr);
            if (authLocs && authLocs.length > 0) {
                const prodName = line.querySelector('.product-search-input').value;
                if (MOVEMENT_TYPE === 'transfer') {
                    if (globalSrcVal && !authLocs.includes(parseInt(globalSrcVal))) {
                        alert(`{% translate "Ligne" %} ${index + 1} (${prodName}) : {% translate "L'emplacement source sélectionné n'est pas autorisé pour ce produit." %}`);
                        locationValidationError = true;
                    }
                    if (globalDstVal && !authLocs.includes(parseInt(globalDstVal))) {
                        alert(`{% translate "Ligne" %} ${index + 1} (${prodName}) : {% translate "L'emplacement de destination sélectionné n'est pas autorisé pour ce produit." %}`);
                        locationValidationError = true;
                    }
                } else if (MOVEMENT_TYPE === 'in') {
                    if (globalDstVal && !authLocs.includes(parseInt(globalDstVal))) {
                        alert(`{% translate "Ligne" %} ${index + 1} (${prodName}) : {% translate "L'emplacement de destination sélectionné n'est pas autorisé pour ce produit." %}`);
                        locationValidationError = true;
                    }
                } else if (MOVEMENT_TYPE === 'out') {
                    if (globalSrcVal && !authLocs.includes(parseInt(globalSrcVal))) {
                        alert(`{% translate "Ligne" %} ${index + 1} (${prodName}) : {% translate "L'emplacement source sélectionné n'est pas autorisé pour ce produit." %}`);
                        locationValidationError = true;
                    }
                }
            }
        }
    });

    if (locationValidationError) {
        e.preventDefault();
    }
});

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

// ── 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');
    const currentVal = personSelect.value;
    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 hidden
    const currentOpt = personSelect.options[personSelect.selectedIndex];
    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');

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-1 small';
                            item.innerHTML = `<strong>${escHtml(bp.text)}</strong> <span class="badge bg-secondary ms-1">${escHtml(bp.status)}</span>`;
                            item.addEventListener('mousedown', e => {
                                e.preventDefault();
                                bpHiddenId.value = bp.id;
                                bpSearchInput.value = bp.text;
                                bpResults.style.display = 'none';
                                if (bpLoadBtn) bpLoadBtn.disabled = false;
                            });
                            bpResults.appendChild(item);
                        });
                    }
                    bpResults.style.display = 'block';
                })
                .catch(() => { bpResults.style.display = 'none'; });
        }, 280);
    });
    bpSearchInput.addEventListener('blur', () => {
        setTimeout(() => { bpResults.style.display = 'none'; }, 150);
    });
}

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;
                }
                bpInfo.innerHTML = `{% translate "Chargement de" %} <strong>${data.items.length}</strong> {% translate "produit(s) depuis le bon" %} <strong>${escHtml(data.order_number)}</strong>`;
                bpInfo.className = 'alert alert-info mt-2 mb-0 py-2 small';
                bpInfo.style.display = '';
                // Effacer les lignes existantes
                document.getElementById('lines-container').innerHTML = '';
                updateNoLinesPlaceholder();
                // Ajouter une ligne par produit
                data.items.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;
                    // Charger les emplacements pour ce produit
                    fetchLocationsForProduct(lineEl, item.product_id);
                });
            })
            .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 %}

// --- Restriction du sous-type "Correction" et gestion de la date de retour des prêts ---
document.addEventListener('DOMContentLoaded', function() {
    const subtypeSelect = document.getElementById('movement_subtype');
    if (!subtypeSelect) return;

    // elements location existants
    const sourceLocSelect = document.getElementById('global_source_location_id');
    const destLocSelect = document.getElementById('global_dest_location_id');
    const activeLocSelect = sourceLocSelect || destLocSelect;

    function updateCorrectionVisibility() {
        if (!activeLocSelect) return;
        const selectedOption = activeLocSelect.options[activeLocSelect.selectedIndex];
        const canAdminister = selectedOption && selectedOption.getAttribute('data-can-administer') === 'true';
        const correctionOption = subtypeSelect.querySelector('option[value="correction"]');

        if (correctionOption) {
            if (canAdminister) {
                correctionOption.style.display = '';
                correctionOption.disabled = false;
            } else {
                correctionOption.style.display = 'none';
                correctionOption.disabled = true;
                if (subtypeSelect.value === 'correction') {
                    subtypeSelect.value = '';
                }
            }
        }
    }

    if (activeLocSelect) {
        activeLocSelect.addEventListener('change', updateCorrectionVisibility);
        updateCorrectionVisibility();
    }

    // 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 script %}