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

{% block title %}{% translate "Inventaire" %} #{{ inventory.id }}{% endblock title %}

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

{% block extra_head %}
<style>
    .info-card {
        border-radius: 0.75rem;
        border: 1px solid #dee2e6;
        background: #fff;
        padding: 1rem;
        margin-bottom: 0.75rem;
        box-shadow: 0 2px 6px rgba(47,62,139,0.06);
    }
    .info-row {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0.35rem 0;
        border-bottom: 1px solid #f0f0f0;
        font-size: 0.9rem;
    }
    .info-row:last-child { border-bottom: none; }
    .info-label { color: #6c757d; font-size: 0.82rem; flex-shrink: 0; margin-right: 0.5rem; }
    .info-value { text-align: right; word-break: break-word; }
    .section-title {
        font-size: 0.78rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #6c757d;
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }
    /* Item cards */
    .item-card {
        border-radius: 0.6rem;
        border: 1px solid #dee2e6;
        background: #fff;
        padding: 0.75rem;
        margin-bottom: 0.5rem;
        box-shadow: 0 1px 4px rgba(47,62,139,0.05);
        cursor: pointer;
        transition: box-shadow 0.15s, transform 0.15s;
        position: relative;
    }
    .item-card:active { transform: scale(0.98); }
    .item-card.diff-positive { border-left: 4px solid #198754; }
    .item-card.diff-negative { border-left: 4px solid #dc3545; }
    .item-card.diff-zero     { border-left: 4px solid #6c757d; }
    .item-card.is-validated  { opacity: 0.7; }

    .item-product-name { font-weight: 600; font-size: 0.95rem; }
    .item-product-code { font-size: 0.78rem; color: #6c757d; }
    .item-qty-badge {
        font-size: 0.9rem;
        font-weight: 700;
        min-width: 2.5rem;
        text-align: center;
    }
    .diff-badge {
        font-size: 0.78rem;
        font-weight: 700;
        border-radius: 0.4rem;
        padding: 0.1rem 0.4rem;
    }
    .diff-badge.pos { background: #d1fae5; color: #065f46; }
    .diff-badge.neg { background: #fee2e2; color: #991b1b; }
    .diff-badge.zero { background: #e5e7eb; color: #374151; }
    .item-comment-preview { font-size: 0.78rem; color: #6c757d; font-style: italic; }
    .item-save-indicator {
        position: absolute;
        top: 0.4rem;
        right: 0.5rem;
        font-size: 0.78rem;
    }
    /* Progress bar */
    .progress-label { font-size: 0.82rem; color: #6c757d; margin-bottom: 0.2rem; }
    /* Large qty input in modal */
    .qty-input-group .btn { width: 3rem; font-size: 1.2rem; }
    .qty-input-group input { font-size: 1.4rem; font-weight: 700; text-align: center; }
    /* Filter pills */
    .filter-pill {
        border-radius: 2rem;
        padding: 0.3rem 0.9rem;
        font-size: 0.8rem;
        border: 1px solid #dee2e6;
        background: #fff;
        cursor: pointer;
        white-space: nowrap;
    }
    .filter-pill.active {
        background: #2f3e8b;
        color: #fff;
        border-color: #2f3e8b;
    }
</style>
{% endblock extra_head %}

{% block content %}

{# ── En-tête statut ───────────────────────────────────────────── #}
<div class="d-flex justify-content-between align-items-center mb-3">
    <div>
        <h5 class="mb-0 fw-bold">{% translate "Inventaire" %} #{{ inventory.id }}</h5>
        <small class="text-muted">
            <i class="bi bi-calendar3 me-1"></i>{{ inventory.created_at|date:"d/m/Y" }}
        </small>
    </div>
    {% if inventory.status == 'draft' %}
        <span class="badge bg-secondary fs-6">{% translate "Brouillon" %}</span>
    {% elif inventory.status == 'in_progress' %}
        <span class="badge bg-warning text-dark fs-6">{% translate "En cours" %}</span>
    {% elif inventory.status == 'done' %}
        <span class="badge bg-info text-dark fs-6">{% translate "Terminé" %}</span>
    {% elif inventory.status == 'validated' %}
        <span class="badge bg-success fs-6">{% translate "Validé" %}</span>
    {% else %}
        <span class="badge bg-light text-dark fs-6">{{ inventory.get_status_display }}</span>
    {% endif %}
</div>

{# ── Actions rapides en haut ──────────────────────────────────── #}
{% if can_validate and not inventory.is_validated %}
<div class="d-grid mb-2">
    <button type="button" class="btn btn-success w-100" data-bs-toggle="modal" data-bs-target="#confirmValidateMobileModal">
        <i class="bi bi-check-circle me-1"></i>{% translate "Valider l'inventaire complet" %}
    </button>
</div>
{% endif %}
{% if can_change_status and not inventory.is_validated and inventory.status != 'done' or can_change_status and not inventory.is_validated and can_validate %}
<div class="info-card mb-3 py-2">
    <div class="section-title mb-2"><i class="bi bi-arrow-repeat"></i>{% translate "Changer le statut" %}</div>
    <form method="post" action="{% url 'stock:inventory_change_status' inventory.pk %}">
        {% csrf_token %}
        <input type="hidden" name="next" value="{% url 'mobile:stock_inventory_detail_mobile' inventory.pk %}">
        <div class="d-flex gap-2 flex-wrap">
            {% if inventory.status != 'draft' %}
            <button type="submit" name="status" value="draft" class="btn btn-outline-secondary btn-sm flex-fill">
                <i class="bi bi-pencil me-1"></i>{% translate "Brouillon" %}
            </button>
            {% endif %}
            {% if inventory.status != 'in_progress' %}
            <button type="submit" name="status" value="in_progress" class="btn btn-outline-warning btn-sm flex-fill">
                <i class="bi bi-hourglass-split me-1"></i>{% translate "En cours" %}
            </button>
            {% endif %}
            {% if inventory.status != 'done' %}
            <button type="submit" name="status" value="done" class="btn btn-outline-info btn-sm flex-fill">
                <i class="bi bi-clipboard-check me-1"></i>{% translate "Terminé" %}
            </button>
            {% endif %}
        </div>
    </form>
</div>
{% endif %}

{# ── Informations générales ───────────────────────────────────── #}
<div class="info-card">
    <div class="section-title"><i class="bi bi-info-circle"></i>{% translate "Informations" %}</div>
    <div class="info-row">
        <span class="info-label"><i class="bi bi-geo-alt me-1"></i>{% translate "Emplacement" %}</span>
        <span class="info-value fw-semibold">{{ inventory.warehouse_location.name }}</span>
    </div>
    <div class="info-row">
        <span class="info-label"><i class="bi bi-building me-1"></i>{% translate "Entrepôt" %}</span>
        <span class="info-value">{{ inventory.warehouse_location.warehouse.name }}</span>
    </div>
    {% if inventory.performed_by %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-person me-1"></i>{% translate "Responsable" %}</span>
        <span class="info-value">{{ inventory.performed_by }}</span>
    </div>
    {% endif %}
    {% if inventory.validated_at %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-check-circle me-1"></i>{% translate "Validé le" %}</span>
        <span class="info-value">{{ inventory.validated_at|date:"d/m/Y H:i" }}</span>
    </div>
    {% endif %}
    {% if inventory.validator_comment %}
    <div class="info-row d-block">
        <div class="info-label mb-1">
            <i class="bi bi-chat-text me-1"></i>{% translate "Commentaire du validateur" %}
            {% if can_validate %}
                <button type="button" class="btn btn-sm btn-link py-0 ps-1" data-bs-toggle="modal" data-bs-target="#editValidatorCommentMobileModal" style="font-size:0.75rem; text-decoration:none;">
                    <i class="bi bi-pencil"></i> {% translate "Modifier" %}
                </button>
            {% endif %}
        </div>
        <div class="info-value text-start text-info fw-semibold" style="white-space:pre-wrap">{{ inventory.validator_comment }}</div>
    </div>
    {% elif can_validate %}
    <div class="info-row">
        <span class="info-label"><i class="bi bi-chat-text me-1"></i>{% translate "Commentaire du validateur" %}</span>
        <span class="info-value">
            <button type="button" class="btn btn-sm btn-outline-info py-0" data-bs-toggle="modal" data-bs-target="#editValidatorCommentMobileModal" style="font-size:0.75rem;">
                <i class="bi bi-plus-circle"></i> {% translate "Ajouter" %}
            </button>
        </span>
    </div>
    {% endif %}
</div>

{# ── Barre de progression ─────────────────────────────────────── #}
<div class="info-card py-2 px-3">
    <div class="d-flex justify-content-between align-items-center mb-1">
        <span class="progress-label">{% translate "Progression" %}</span>
        <span class="progress-label fw-semibold" id="progress-text">—</span>
    </div>
    <div class="progress" style="height: 8px;">
        <div class="progress-bar bg-success" id="progress-bar" role="progressbar" style="width:0%"></div>
    </div>
</div>

{# ── Boutons filtre ───────────────────────────────────────────── #}
<div class="d-flex gap-2 overflow-auto pb-2 mb-3" style="scrollbar-width:none;">
    <button class="filter-pill active" data-filter="all">{% translate "Tous" %}</button>
    <button class="filter-pill" data-filter="diff">{% translate "Écarts" %}</button>
    <button class="filter-pill" data-filter="neg">{% translate "Manquants" %}</button>
    <button class="filter-pill" data-filter="not-validated">{% translate "Non validés" %}</button>
</div>

{# ── Liste des articles ───────────────────────────────────────── #}
<div class="section-title mt-1">
    <i class="bi bi-box-seam"></i>{% translate "Articles" %}
    <span class="badge bg-secondary ms-1" style="font-size:0.7rem;" id="items-count-badge">{{ items|length }}</span>
</div>

{% if items %}
    {% for item in items %}
    <div class="item-card {% if item.difference > 0 %}diff-positive{% elif item.difference < 0 %}diff-negative{% else %}diff-zero{% endif %} {% if item.is_validated %}is-validated{% endif %}"
         data-item-id="{{ item.pk }}"
         data-diff="{{ item.difference }}"
         data-validated="{{ item.is_validated|yesno:'1,0' }}"
         onclick="openEditModal({{ item.pk }})">

        {# Indicateur sauvegarde – rempli dynamiquement #}
        <span class="item-save-indicator" id="save-indicator-{{ item.pk }}"></span>

        <div class="d-flex justify-content-between align-items-start">
            <div style="flex:1; min-width:0; padding-right:0.5rem;">
                <div class="item-product-name text-truncate">{{ item.product.name }}</div>
                <div class="item-product-code">{{ item.product.code }}</div>
                <div class="item-comment-preview mt-1 text-truncate" id="comment-preview-{{ item.pk }}" {% if not item.comment %}style="display:none;"{% endif %}>
                    <i class="bi bi-chat-text me-1"></i><strong>{% translate "Magasinier :" %}</strong> <span id="comment-text-{{ item.pk }}">{{ item.comment }}</span>
                </div>
                <div class="item-validator-comment-preview mt-1 text-truncate text-info" id="validator-comment-preview-{{ item.pk }}" {% if not item.validator_comment %}style="display:none;"{% endif %} style="font-size: 0.78rem; font-style: italic;">
                    <i class="bi bi-chat-text-fill me-1"></i><strong>{% translate "Validateur :" %}</strong> <span id="validator-comment-text-{{ item.pk }}">{{ item.validator_comment }}</span>
                </div>
            </div>
            <div class="text-end" style="flex-shrink:0;">
                <div class="d-flex align-items-center gap-2">
                    <div>
                        <div style="font-size:0.7rem; color:#6c757d;">{% translate "Attendu" %}</div>
                        <div class="item-qty-badge text-muted">{{ item.expected_quantity|default:"—" }}</div>
                    </div>
                    <div>
                        <div style="font-size:0.7rem; color:#6c757d;">{% translate "Compté" %}</div>
                        <div class="item-qty-badge text-dark" id="counted-display-{{ item.pk }}">{{ item.counted_quantity }}</div>
                    </div>
                </div>
                <div class="mt-1 text-end">
                    <span class="diff-badge {% if item.difference > 0 %}pos{% elif item.difference < 0 %}neg{% else %}zero{% endif %}"
                          id="diff-badge-{{ item.pk }}">
                        {% if item.difference > 0 %}+{% endif %}{{ item.difference }}
                    </span>
                </div>
                <div class="mt-1">
                    {% if item.is_validated %}
                        <span class="badge bg-success" id="validated-badge-{{ item.pk }}" style="font-size:0.72rem;">
                            <i class="bi bi-check-lg"></i> {% translate "Validé" %}
                        </span>
                    {% else %}
                        <span class="badge bg-warning text-dark" id="validated-badge-{{ item.pk }}" style="font-size:0.72rem;">
                            <i class="bi bi-hourglass-split"></i> {% translate "En attente" %}
                        </span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {% endfor %}
{% else %}
    <div class="text-center text-muted py-5">
        <i class="bi bi-clipboard2-data fs-2 d-block mb-2"></i>
        {% translate "Aucun article dans cet inventaire." %}
    </div>
{% endif %}


{# ── Modal d'édition d'un article ─────────────────────────────── #}
<div class="modal fade" id="editItemModal" tabindex="-1" aria-labelledby="editItemModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header" style="background:#2f3e8b; color:#fff;">
                <h5 class="modal-title" id="editItemModalLabel">
                    <i class="bi bi-pencil-square me-2"></i><span id="modal-product-name"></span>
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body pb-2">
                {# Info produit #}
                <div class="d-flex justify-content-between text-muted mb-3" style="font-size:0.85rem;">
                    <span><i class="bi bi-upc me-1"></i><span id="modal-product-code"></span></span>
                    <span>{% translate "Attendu" %} : <strong id="modal-expected-qty"></strong></span>
                </div>
                {# Quantité comptée #}
                <label class="form-label fw-semibold mb-1">{% translate "Quantité comptée" %}</label>
                <div class="input-group qty-input-group mb-3">
                    <button class="btn btn-outline-secondary" type="button" id="modal-qty-minus">
                        <i class="bi bi-dash"></i>
                    </button>
                    <input type="number"
                           id="modal-counted-qty"
                           class="form-control"
                           min="0"
                           inputmode="numeric"
                           placeholder="0">
                    <button class="btn btn-outline-secondary" type="button" id="modal-qty-plus">
                        <i class="bi bi-plus"></i>
                    </button>
                </div>
                {# Écart en temps réel #}
                <div class="text-center mb-3">
                    <span class="text-muted" style="font-size:0.85rem;">{% translate "Écart" %} : </span>
                    <span id="modal-diff-preview" class="fw-bold fs-5"></span>
                </div>
                {# Commentaire #}
                <label class="form-label fw-semibold mb-1">
                    <i class="bi bi-chat-text me-1"></i>{% translate "Commentaire magasinier" %} <span class="text-muted fw-normal">({% translate "optionnel" %})</span>
                </label>
                <textarea id="modal-comment"
                          class="form-control mb-3"
                          rows="2"
                          placeholder="{% translate 'Remarque, observation du magasinier…' %}"></textarea>

                {# Commentaire Validateur #}
                <div id="modal-validator-comment-group" class="mb-2">
                    <label class="form-label fw-semibold mb-1 text-info">
                        <i class="bi bi-chat-text-fill me-1"></i>{% translate "Commentaire validateur" %}
                    </label>
                    {% if can_validate %}
                        <textarea id="modal-validator-comment"
                                  class="form-control"
                                  rows="2"
                                  placeholder="{% translate 'Observation du validateur…' %}"></textarea>
                    {% else %}
                        <p id="modal-validator-comment-text" class="p-2 bg-light rounded text-muted mb-0" style="white-space:pre-wrap; font-size:0.9rem;"></p>
                    {% endif %}
                </div>
                {# Erreur #}
                <div id="modal-error" class="alert alert-danger mt-2 d-none" role="alert"></div>
            </div>
            <div class="modal-footer flex-column gap-2 pt-2">
                {# Validation item si can_validate #}
                {% if can_validate and not inventory.is_validated %}
                <button type="button" class="btn btn-outline-success w-100" id="modal-validate-btn">
                    <i class="bi bi-check-circle me-1"></i>{% translate "Valider cet article" %}
                </button>
                {% endif %}
                <div class="d-flex gap-2 w-100">
                    <button type="button" class="btn btn-secondary flex-fill" data-bs-dismiss="modal">
                        {% translate "Annuler" %}
                    </button>
                    <button type="button" class="btn btn-primary flex-fill" id="modal-save-btn">
                        <i class="bi bi-floppy me-1"></i>{% translate "Enregistrer" %}
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

{# ── Données JSON pour le JS ──────────────────────────────────── #}
<script>
const INVENTORY_EDITABLE = {{ inventory.is_editable|yesno:"true,false" }};
const CAN_VALIDATE = {{ can_validate|yesno:"true,false" }};
const INVENTORY_IS_VALIDATED = {{ inventory.is_validated|yesno:"true,false" }};
const CSRF_TOKEN = "{{ csrf_token }}";

const ITEMS_DATA = {
    {% for item in items %}
    "{{ item.pk }}": {
        "pk": {{ item.pk }},
        "product_name": "{{ item.product.name|escapejs }}",
        "product_code": "{{ item.product.code|escapejs }}",
        "expected_quantity": {{ item.expected_quantity|default:"null" }},
        "counted_quantity": {{ item.counted_quantity }},
        "difference": {{ item.difference }},
        "comment": "{{ item.comment|escapejs }}",
        "validator_comment": "{{ item.validator_comment|escapejs }}",
        "is_validated": {{ item.is_validated|yesno:"true,false" }},
        "update_url": "{% url 'stock:inventory_item_update_api' inventory.pk item.pk %}",
        "validate_url": "{% url 'stock:inventory_validate_item' inventory.pk item.pk %}"
    }{% if not forloop.last %},{% endif %}
    {% endfor %}
};
</script>

<script>
document.addEventListener('DOMContentLoaded', function () {
    'use strict';

    // ── Références DOM ────────────────────────────────────────────────────
    const allCards = Array.from(document.querySelectorAll('.item-card[data-item-id]'));
    const filterPills = document.querySelectorAll('.filter-pill');
    const progressBar = document.getElementById('progress-bar');
    const progressText = document.getElementById('progress-text');
    const itemsCountBadge = document.getElementById('items-count-badge');

    // Modal
    const editModal = new bootstrap.Modal(document.getElementById('editItemModal'));
    const modalProductName = document.getElementById('modal-product-name');
    const modalProductCode = document.getElementById('modal-product-code');
    const modalExpectedQty = document.getElementById('modal-expected-qty');
    const modalCountedQty = document.getElementById('modal-counted-qty');
    const modalDiffPreview = document.getElementById('modal-diff-preview');
    const modalComment = document.getElementById('modal-comment');
    const modalError = document.getElementById('modal-error');
    const modalSaveBtn = document.getElementById('modal-save-btn');
    const modalValidateBtn = document.getElementById('modal-validate-btn');
    const modalQtyMinus = document.getElementById('modal-qty-minus');
    const modalQtyPlus = document.getElementById('modal-qty-plus');

    let currentItemId = null;

    // ── Mise à jour de la progression ────────────────────────────────────
    function updateProgress() {
        const total = allCards.length;
        if (total === 0) return;
        // On considère "saisi" un article dont la quantité comptée est différente de null
        // (ici tous le sont dès la création, mais on peut aussi compter les non-validés)
        const done = allCards.filter(c => c.dataset.validated === '1').length;
        const pct = Math.round(done / total * 100);
        progressBar.style.width = pct + '%';
        progressText.textContent = done + ' / ' + total + ' {% translate "validé(s)" %}';
    }

    // ── Filtres ──────────────────────────────────────────────────────────
    function applyFilter(filter) {
        let shown = 0;
        allCards.forEach(card => {
            const diff = parseInt(card.dataset.diff, 10);
            const validated = card.dataset.validated === '1';
            let visible = true;

            if (filter === 'diff' && diff === 0) visible = false;
            if (filter === 'neg' && diff >= 0) visible = false;
            if (filter === 'not-validated' && validated) visible = false;

            card.style.display = visible ? '' : 'none';
            if (visible) shown++;
        });
        itemsCountBadge.textContent = shown;
    }

    filterPills.forEach(pill => {
        pill.addEventListener('click', function () {
            filterPills.forEach(p => p.classList.remove('active'));
            this.classList.add('active');
            applyFilter(this.dataset.filter);
        });
    });

    // ── Calcul diff en temps réel (modal) ────────────────────────────────
    function refreshDiffPreview() {
        const item = ITEMS_DATA[currentItemId];
        if (!item) return;
        const counted = parseInt(modalCountedQty.value, 10) || 0;
        const expected = item.expected_quantity !== null ? item.expected_quantity : 0;
        const diff = counted - expected;
        modalDiffPreview.textContent = (diff > 0 ? '+' : '') + diff;
        modalDiffPreview.className = 'fw-bold fs-5 ' +
            (diff > 0 ? 'text-success' : diff < 0 ? 'text-danger' : 'text-muted');
    }

    // ── Ouverture du modal ────────────────────────────────────────────────
    window.openEditModal = function (itemId) {
        if (!INVENTORY_EDITABLE && !CAN_VALIDATE) return;

        currentItemId = String(itemId);
        const item = ITEMS_DATA[currentItemId];
        if (!item) return;

        modalProductName.textContent = item.product_name;
        modalProductCode.textContent = item.product_code;
        modalExpectedQty.textContent = item.expected_quantity !== null ? item.expected_quantity : '—';
        modalCountedQty.value = item.counted_quantity;
        modalComment.value = item.comment;
        modalError.classList.add('d-none');

        const valComment = item.validator_comment || '';
        const modalValComment = document.getElementById('modal-validator-comment');
        if (modalValComment) {
            modalValComment.value = valComment;
        } else {
            const modalValCommentText = document.getElementById('modal-validator-comment-text');
            if (modalValCommentText) {
                modalValCommentText.textContent = valComment;
                document.getElementById('modal-validator-comment-group').style.display = valComment ? '' : 'none';
            }
        }

        // Désactiver la saisie si inventaire validé
        modalCountedQty.disabled = !INVENTORY_EDITABLE;
        modalComment.disabled = !INVENTORY_EDITABLE;
        if (modalQtyMinus) modalQtyMinus.disabled = !INVENTORY_EDITABLE;
        if (modalQtyPlus) modalQtyPlus.disabled = !INVENTORY_EDITABLE;
        if (modalSaveBtn) modalSaveBtn.disabled = !INVENTORY_EDITABLE;

        // Bouton validation
        if (modalValidateBtn) {
            if (item.is_validated) {
                modalValidateBtn.innerHTML = '<i class="bi bi-x-circle me-1"></i>{% translate "Annuler la validation" %}';
                modalValidateBtn.className = 'btn btn-outline-warning w-100';
            } else {
                modalValidateBtn.innerHTML = '<i class="bi bi-check-circle me-1"></i>{% translate "Valider cet article" %}';
                modalValidateBtn.className = 'btn btn-outline-success w-100';
            }
        }

        refreshDiffPreview();
        editModal.show();

        // Focus sur le champ quantité (après animation modal)
        setTimeout(() => {
            if (INVENTORY_EDITABLE) {
                modalCountedQty.select();
                modalCountedQty.focus();
            }
        }, 350);
    };

    // +/- buttons
    if (modalQtyMinus) {
        modalQtyMinus.addEventListener('click', function () {
            const v = parseInt(modalCountedQty.value, 10) || 0;
            if (v > 0) { modalCountedQty.value = v - 1; refreshDiffPreview(); }
        });
    }
    if (modalQtyPlus) {
        modalQtyPlus.addEventListener('click', function () {
            const v = parseInt(modalCountedQty.value, 10) || 0;
            modalCountedQty.value = v + 1;
            refreshDiffPreview();
        });
    }
    if (modalCountedQty) {
        modalCountedQty.addEventListener('input', refreshDiffPreview);
    }

    // ── Sauvegarde via AJAX ──────────────────────────────────────────────
    function saveItem(itemId, countedQty, comment, onSuccess) {
        const item = ITEMS_DATA[String(itemId)];
        const formData = new FormData();
        formData.append('counted_quantity', countedQty);
        formData.append('comment', comment);

        const modalValComment = document.getElementById('modal-validator-comment');
        if (modalValComment) {
            formData.append('validator_comment', modalValComment.value);
        }

        return fetch(item.update_url, {
            method: 'POST',
            headers: {
                'X-CSRFToken': CSRF_TOKEN,
                'X-Requested-With': 'XMLHttpRequest',
            },
            body: formData,
        })
        .then(r => r.json())
        .then(data => {
            if (!data.success) {
                throw new Error(data.error || '{% translate "Erreur lors de la sauvegarde." %}');
            }
            // Mettre à jour ITEMS_DATA
            item.counted_quantity = data.counted_quantity;
            item.difference = data.difference;
            item.comment = data.comment;
            item.validator_comment = data.validator_comment;

            // Mettre à jour la carte
            updateCard(String(itemId));
            if (onSuccess) onSuccess(data);
            return data;
        });
    }

    // ── Mise à jour visuelle d'une carte ─────────────────────────────────
    function updateCard(itemId) {
        const item = ITEMS_DATA[itemId];
        const card = document.querySelector(`.item-card[data-item-id="${itemId}"]`);
        if (!card || !item) return;

        // Quantité affichée
        const countedDisplay = document.getElementById('counted-display-' + itemId);
        if (countedDisplay) countedDisplay.textContent = item.counted_quantity;

        // Badge diff
        const diffBadge = document.getElementById('diff-badge-' + itemId);
        if (diffBadge) {
            diffBadge.textContent = (item.difference > 0 ? '+' : '') + item.difference;
            diffBadge.className = 'diff-badge ' + (item.difference > 0 ? 'pos' : item.difference < 0 ? 'neg' : 'zero');
        }

        // Couleur bordure gauche
        card.classList.remove('diff-positive', 'diff-negative', 'diff-zero');
        if (item.difference > 0) card.classList.add('diff-positive');
        else if (item.difference < 0) card.classList.add('diff-negative');
        else card.classList.add('diff-zero');

        // data-diff pour les filtres
        card.dataset.diff = item.difference;

        // Prévisualisation commentaire
        const commentPreview = document.getElementById('comment-preview-' + itemId);
        const commentText = document.getElementById('comment-text-' + itemId);
        if (commentPreview) {
            if (item.comment) {
                if (commentText) commentText.textContent = item.comment;
                commentPreview.style.display = '';
            } else {
                commentPreview.style.display = 'none';
            }
        }

        const valCommentPreview = document.getElementById('validator-comment-preview-' + itemId);
        const valCommentText = document.getElementById('validator-comment-text-' + itemId);
        if (valCommentPreview) {
            if (item.validator_comment) {
                if (valCommentText) valCommentText.textContent = item.validator_comment;
                valCommentPreview.style.display = '';
            } else {
                valCommentPreview.style.display = 'none';
            }
        }

        // Indicateur de sauvegarde
        showSaveIndicator(itemId, true);
        updateProgress();
    }

    function showSaveIndicator(itemId, success) {
        const el = document.getElementById('save-indicator-' + itemId);
        if (!el) return;
        if (success) {
            el.innerHTML = '<i class="bi bi-check-circle-fill text-success"></i>';
            setTimeout(() => { el.innerHTML = ''; }, 3000);
        } else {
            el.innerHTML = '<i class="bi bi-exclamation-circle-fill text-danger"></i>';
        }
    }

    // ── Bouton "Enregistrer" du modal ─────────────────────────────────────
    if (modalSaveBtn) {
        modalSaveBtn.addEventListener('click', function () {
            if (!currentItemId) return;
            const qty = parseInt(modalCountedQty.value, 10);
            if (isNaN(qty) || qty < 0) {
                modalError.textContent = '{% translate "Veuillez saisir une quantité valide (≥ 0)." %}';
                modalError.classList.remove('d-none');
                return;
            }
            modalError.classList.add('d-none');
            modalSaveBtn.disabled = true;
            modalSaveBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{% translate "Enregistrement…" %}';

            saveItem(currentItemId, qty, modalComment.value)
                .then(() => {
                    editModal.hide();
                })
                .catch(err => {
                    modalError.textContent = err.message || '{% translate "Erreur lors de la sauvegarde." %}';
                    modalError.classList.remove('d-none');
                    showSaveIndicator(currentItemId, false);
                })
                .finally(() => {
                    modalSaveBtn.disabled = false;
                    modalSaveBtn.innerHTML = '<i class="bi bi-floppy me-1"></i>{% translate "Enregistrer" %}';
                });
        });
    }

    // ── Bouton "Valider cet article" du modal ────────────────────────────
    if (modalValidateBtn) {
        modalValidateBtn.addEventListener('click', function () {
            if (!currentItemId) return;
            const item = ITEMS_DATA[currentItemId];
            const btn = this;

            btn.disabled = true;
            btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span>{% translate "Traitement…" %}';

            // D'abord sauvegarder les changements éventuels avant de valider
            const qty = parseInt(modalCountedQty.value, 10);
            const savePromise = (INVENTORY_EDITABLE && !isNaN(qty) && qty >= 0)
                ? saveItem(currentItemId, qty, modalComment.value)
                : Promise.resolve();

            savePromise.then(() => {
                const valFormData = new FormData();
                const modalValComment = document.getElementById('modal-validator-comment');
                if (modalValComment) {
                    valFormData.append('validator_comment', modalValComment.value);
                }
                return fetch(item.validate_url, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': CSRF_TOKEN,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: valFormData,
                });
            })
            .then(r => r.json())
            .then(data => {
                if (!data.success) throw new Error(data.error || '{% translate "Erreur." %}');

                item.is_validated = data.is_validated;
                item.validator_comment = data.validator_comment || '';

                // Mettre à jour le badge sur la carte
                const validatedBadge = document.getElementById('validated-badge-' + currentItemId);
                const card = document.querySelector(`.item-card[data-item-id="${currentItemId}"]`);
                if (validatedBadge) {
                    if (data.is_validated) {
                        validatedBadge.innerHTML = '<i class="bi bi-check-lg"></i> {% translate "Validé" %}';
                        validatedBadge.className = 'badge bg-success';
                        if (card) { card.classList.add('is-validated'); card.dataset.validated = '1'; }
                    } else {
                        validatedBadge.innerHTML = '<i class="bi bi-hourglass-split"></i> {% translate "En attente" %}';
                        validatedBadge.className = 'badge bg-warning text-dark';
                        if (card) { card.classList.remove('is-validated'); card.dataset.validated = '0'; }
                    }
                }

                // Mettre à jour la carte commentaire
                const valCommentPreview = document.getElementById('validator-comment-preview-' + currentItemId);
                const valCommentText = document.getElementById('validator-comment-text-' + currentItemId);
                if (valCommentPreview) {
                    if (item.validator_comment) {
                        if (valCommentText) valCommentText.textContent = item.validator_comment;
                        valCommentPreview.style.display = '';
                    } else {
                        valCommentPreview.style.display = 'none';
                    }
                }

                // Mettre à jour bouton modal
                if (data.is_validated) {
                    btn.innerHTML = '<i class="bi bi-x-circle me-1"></i>{% translate "Annuler la validation" %}';
                    btn.className = 'btn btn-outline-warning w-100';
                } else {
                    btn.innerHTML = '<i class="bi bi-check-circle me-1"></i>{% translate "Valider cet article" %}';
                    btn.className = 'btn btn-outline-success w-100';
                }

                updateProgress();
                editModal.hide();
            })
            .catch(err => {
                modalError.textContent = err.message || '{% translate "Erreur." %}';
                modalError.classList.remove('d-none');
            })
            .finally(() => {
                btn.disabled = false;
            });
        });
    }

    // ── Init progression ─────────────────────────────────────────────────
    updateProgress();
    applyFilter('all');

});
</script>

    {# ── Modal Validation Globale avec Commentaire (mobile) ────── #}
    {% if can_validate and not inventory.is_validated %}
    <div class="modal fade" id="confirmValidateMobileModal" tabindex="-1" aria-labelledby="confirmValidateMobileModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="post" action="{% url 'stock:inventory_validate' inventory.pk %}">
                    {% csrf_token %}
                    <div class="modal-header bg-success text-white">
                        <h5 class="modal-title" id="confirmValidateMobileModalLabel">
                            <i class="bi bi-check-circle me-2"></i>
                            {% translate "Valider l'inventaire" %}
                        </h5>
                        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                    </div>
                    <div class="modal-body text-start">
                        <p>{% translate "Voulez-vous vraiment valider cet inventaire ? Les stocks seront ajustés définitivement." %}</p>
                        <div class="mb-3">
                            <label class="form-label fw-semibold">{% translate "Commentaire du validateur (optionnel)" %}</label>
                            <textarea class="form-control" name="validator_comment" rows="3" placeholder="{% translate 'Remarques, observations...' %}">{{ inventory.validator_comment }}</textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Annuler" %}</button>
                        <button type="submit" class="btn btn-success">{% translate "Valider" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}

    {# ── Modal Commentaire Général Validateur (mobile) ─────────── #}
    {% if can_validate %}
    <div class="modal fade" id="editValidatorCommentMobileModal" tabindex="-1" aria-labelledby="editValidatorCommentMobileModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <form method="post" action="{% url 'stock:inventory_update_validator_comment' inventory.pk %}">
                    {% csrf_token %}
                    <div class="modal-header">
                        <h5 class="modal-title" id="editValidatorCommentMobileModalLabel">
                            <i class="bi bi-chat-text me-2"></i>
                            {% translate "Commentaire du validateur" %}
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Fermer' %}"></button>
                    </div>
                    <div class="modal-body text-start">
                        <textarea class="form-control" name="validator_comment" rows="4" placeholder="{% translate 'Saisir un commentaire pour cette validation...' %}">{{ inventory.validator_comment }}</textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{% translate "Fermer" %}</button>
                        <button type="submit" class="btn btn-primary">{% translate "Enregistrer" %}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    {% endif %}
{% endblock content %}