{% extends '@admin/base.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
    <style>
        .inv-layout { display:grid; grid-template-columns: minmax(0,1fr); gap: 14px; }
        .inv-filter { border: 1px solid #dee2e6; border-radius: 0.375rem; padding: 1rem; background-color: #fff; }
        #invFilterPanel {
            --bs-offcanvas-width: var(--aside-width, 268px);
            top: var(--inventory-offcanvas-top, 100px);
            height: calc(100vh - var(--inventory-offcanvas-top, 100px));
            z-index: 1030;
        }
        .inv-filter .form-label { font-size:.82rem; color:#64748b; margin-bottom:.25rem; }
        .inv-card { border:1px solid #e5e7eb; border-radius: 12px; background:#fff; }
        .inv-tree-table thead th { font-size:.78rem; text-transform: uppercase; color:#6b7280; }
        .inv-prod-row { background: #f9fafb; }
        .inv-toggle {
            width: 28px; height: 28px; border:1px solid #d1d5db; border-radius: 8px;
            background:#fff; font-weight:700; line-height:1;
        }
        .inv-child-cell { padding-left:44px !important; background:#fff; }
        .inv-badge { font-size:.72rem; padding:.15rem .45rem; border-radius:999px; border:1px solid #e2e8f0; background:#f8fafc; }
        .inv-history-list { max-height: 340px; overflow: auto; }
        .inv-history-group-title { font-size: .82rem; font-weight: 700; color: #111827; margin-bottom: .6rem; }
        .inv-history-item { padding: .7rem .8rem; border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; }
        .inv-history-meta { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
        .inv-history-type { font-size:.68rem; padding:.14rem .45rem; border-radius:999px; border:1px solid transparent; }
        .inv-history-type.create { background:#dbeafe; border-color:#93c5fd; color:#1d4ed8; }
        .inv-history-type.update { background:#fef3c7; border-color:#fcd34d; color:#92400e; }
        .inv-history-type.validate { background:#dcfce7; border-color:#86efac; color:#166534; }
        .inv-history-type.unvalidate { background:#fee2e2; border-color:#fca5a5; color:#b91c1c; }
        #invHistoryPanel {
            --bs-offcanvas-width: min(92vw, 420px);
        }
        .inv-name-cell { display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
        .inv-name-main { min-width:0; }
        .inv-name-main .small { overflow-wrap:anywhere; }
        .inv-thumb {
            width: 32px;
            height: 40px;
            aspect-ratio: 4 / 5; /* ratio 0.8 */
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            object-fit: cover;
            background: #fff;
        }
        .inv-line-corrected {
            background: #ecfdf3 !important;
            border-left: 3px solid #22c55e;
        }
        .inv-line-not-corrected {
            background: #fffaf0 !important;
            border-left: 3px solid #f59e0b;
        }
        .inv-corr-badge {
            font-size: .68rem;
            padding: .14rem .45rem;
            border-radius: 999px;
            border: 1px solid transparent;
        }
        .inv-corr-badge.ok { background: #dcfce7; border-color: #86efac; color: #166534; }
        .inv-corr-badge.no { background: #fef3c7; border-color: #fcd34d; color: #92400e; }
        .inv-mobile-filter-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .45rem;
            margin-bottom: 10px;
        }
        .inv-mobile-filter-btn i {
            margin-right: 0 !important;
            line-height: 1;
        }

        @media (max-width: 992px) {
            #invFilterPanel {
                --bs-offcanvas-width: min(78vw, 320px);
            }
        }
    </style>
{% endblock %}

{% block subheader %}
    <div class="badge-titre d-flex justify-content-between align-items-center flex-wrap w-100 mb-3" style="min-height:3.2rem;">
        <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center gap-2">
            <span class="crm-badge me-2"><i class="fa fa-clipboard-check"></i></span>
            <div>
                <h3 class="m-subheader__title m-0">Inventaire {{ inventory.code }}</h3>
                <small class="text-muted">Consultation detaillee des lignes d'inventaire</small>
            </div>
        </div>
        <div class="d-flex gap-2">
            <button type="button"
                    class="btn btn-light btn-sm border"
                    data-bs-toggle="offcanvas"
                    data-bs-target="#invHistoryPanel"
                    aria-controls="invHistoryPanel">
                <i class="fa fa-history me-1"></i> Historique
            </button>
            <a href="{{ path('inventory_index') }}" class="btn btn-secondary btn-sm">
                <i class="fa fa-list me-1"></i> Liste inventaires
            </a>
        </div>
    </div>

    <div class="offcanvas offcanvas-end"
         tabindex="-1"
         id="invHistoryPanel"
         aria-labelledby="invHistoryPanelLabel"
         data-bs-backdrop="false"
         data-bs-scroll="true">
        <div class="offcanvas-header border-bottom">
            <div>
                <h5 class="offcanvas-title mb-0" id="invHistoryPanelLabel">
                    <i class="fa fa-history me-2"></i>Historique des modifications
                </h5>
                <small class="text-muted">{{ inventoryHistories|length }} element{{ inventoryHistories|length > 1 ? 's' : '' }}</small>
            </div>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            {% if inventoryHistories is empty %}
                <div class="alert alert-light border text-center mb-0">Aucun historique pour le moment.</div>
            {% else %}
                <div class="inv-history-list">
                    {% set currentDay = '' %}
                    <div class="d-flex flex-column gap-2">
                        {% for history in inventoryHistories %}
                            {% set day = history.createdAt|date('d/m/Y') %}
                            {% if day != currentDay %}
                                {% set currentDay = day %}
                                <div class="inv-history-group-title mt-2">
                                    <i class="fa fa-calendar-alt me-2 text-muted"></i>{{ currentDay }}
                                </div>
                            {% endif %}
                            <div class="inv-history-item">
                                <div class="inv-history-meta">
                                    <span class="inv-history-type {{ history.type }}">{{ history.type|replace({'unvalidate':'annulation','validate':'validation','update':'modification','create':'creation'})|capitalize }}</span>
                                    <span class="text-muted small">{{ history.createdAt|date('H:i') }}</span>
                                    <span class="text-muted small">par {{ history.user ? (history.user.fullName ?: history.user.username ?: ('#' ~ history.user.id)) : 'Systeme' }}</span>
                                </div>
                                <div class="small text-dark mt-2" style="white-space: pre-wrap;">{{ history.message }}</div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block breadcrumb %}{% endblock %}

{% block bodycontent %}
    <div class="contentMargin">
        <button type="button"
                class="btn btn-primary btn-sm inv-mobile-filter-btn"
                data-bs-toggle="offcanvas"
                data-bs-target="#invFilterPanel"
                aria-controls="invFilterPanel">
            <i class="fa fa-filter me-1"></i> Filtres
        </button>

        <div class="inv-layout">
            <div class="offcanvas offcanvas-start"
                 tabindex="-1"
                 id="invFilterPanel"
                 aria-labelledby="invFilterPanelLabel"
                 data-bs-backdrop="false"
                 data-bs-scroll="true">
                <div class="offcanvas-header">
                    <h5 id="invFilterPanelLabel" class="offcanvas-title">
                        <i class="fa fa-filter me-2"></i> Filtres
                    </h5>
                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
                </div>
                <div class="offcanvas-body">
                    <div class="inv-filter">
                        <form id="inventoryShowFilterForm" onsubmit="return false;">
                            <div class="mb-2">
                                <label class="form-label">Reference</label>
                                <input type="text" id="filter_show_reference" class="form-control form-control-sm" placeholder="Reference">
                            </div>
                            <div class="mb-2">
                                <label class="form-label">Produit / declinaison</label>
                                <input type="text" id="filter_show_label" class="form-control form-control-sm" placeholder="Nom produit ou declinaison">
                            </div>
                            <div class="mb-2">
                                <label class="form-label">Entrepot</label>
                                <select id="filter_show_storehouse" class="form-select form-select-sm">
                                    <option value="">Tous</option>
                                    {% set _storehouses = [] %}
                                    {% for l in inventory.lines %}
                                        {% set _sh = l.storehouse ?: 'Principal' %}
                                        {% if _sh not in _storehouses %}
                                            {% set _storehouses = _storehouses|merge([_sh]) %}
                                            <option value="{{ _sh|lower }}">{{ _sh }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="mb-2">
                                <label class="form-label">Etat correction</label>
                                <select id="filter_show_state" class="form-select form-select-sm">
                                    <option value="all">Tous</option>
                                    <option value="corrected">Stock corrige</option>
                                    <option value="not_corrected">Non corrige</option>
                                </select>
                            </div>

                            <div class="d-grid gap-2 mt-3">
                                <button type="button" class="btn btn-dark btn-sm" id="applyShowFilters">Filtrer</button>
                                <button type="button" class="btn btn-light btn-sm border" id="resetShowFilters">Reinitialiser</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <section>
                {% set _rawStatus = (inventory.status ?: 'draft')|lower|trim %}
                {% set _isDraft = _rawStatus in ['', 'draft', 'brouillon', 'brouillan', 'broullion'] %}
                {% set _isValidated = _rawStatus in ['validated', 'valide', 'validé'] %}
                <div class="inv-card mb-3 p-3">
                    <div class="row g-2 align-items-center">
                        <div class="col-12 col-md-8 d-flex flex-wrap align-items-center gap-2">
                            <span class="inv-badge">
                                Statut:
                                <strong class="{{ _isValidated ? 'text-success' : 'text-warning' }}">
                                    {{ _isValidated ? 'Valide' : 'Brouillon' }}
                                </strong>
                            </span>
                            <span class="inv-badge">Cree le: <strong>{{ inventory.createdAt ? inventory.createdAt|date('d/m/Y H:i') : '' }}</strong></span>
                            <span class="inv-badge">Cree par: <strong>{{ createdByName|default('-') }}</strong></span>
                            {% if inventory.validatedAt %}
                                <span class="inv-badge">Valide le: <strong>{{ inventory.validatedAt|date('d/m/Y H:i') }}</strong></span>
                            {% endif %}
                            {% if inventory.validatedAt %}
                                <span class="inv-badge">Valide par: <strong>{{ validatedByName|default('-') }}</strong></span>
                            {% endif %}
                            <span class="inv-badge">Articles: <strong>{{ inventory.itemsCount }}</strong></span>
                            <span class="inv-badge">Ecart total: <strong>{{ inventory.totalGap > 0 ? '+' ~ inventory.totalGap : inventory.totalGap }}</strong></span>
                            {% if inventory.storehouse %}
                                <span class="inv-badge">Entrepot: <strong>{{ inventory.storehouse }}</strong></span>
                            {% endif %}
                        </div>
                        <div class="col-12 col-md-4 d-flex justify-content-md-end gap-2">
                            {% if _isDraft %}
                                <a href="{{ path('inventory_edit', {id: inventory.id}) }}" class="btn btn-secondary btn-sm">
                                    <i class="fa fa-edit me-1"></i> Modifier
                                </a>
                            {% endif %}
                            {% if _isDraft %}
                                <form method="post" action="{{ path('inventory_validate', {id: inventory.id}) }}" class="d-inline js-inventory-validate-form">
                                    <input type="hidden" name="_token" value="{{ csrf_token('inventory_validate_' ~ inventory.id) }}">
                                    <button type="submit" class="btn btn-success btn-sm">
                                        <i class="fa fa-check me-1"></i> Valider l'inventaire
                                    </button>
                                </form>
                            {% endif %}
                            {% if _isValidated and is_granted('ROLE_SUPER_ADMIN') %}
                                <form method="post"
                                      action="{{ path('inventory_unvalidate', {id: inventory.id}) }}"
                                      class="d-inline js-inventory-unvalidate-form">
                                    <input type="hidden" name="_token" value="{{ csrf_token('inventory_unvalidate_' ~ inventory.id) }}">
                                    <button type="submit" class="btn btn-outline-danger btn-sm">
                                        <i class="fa fa-rotate-left me-1"></i> Annuler la validation
                                    </button>
                                </form>
                            {% endif %}
                        </div>
                    </div>
                    {% if inventory.note %}
                        <hr class="my-2">
                        <div><strong>Note:</strong> {{ inventory.note }}</div>
                    {% endif %}
                </div>


                <section class="inv-card">
                    <div class="card-body p-0">
                        <table class="table table-sm align-middle mb-0 inv-tree-table" id="inventoryShowTable">
                            <thead>
                            <tr>
                                <th style="width:40px;" class="text-center">
                                    <input type="checkbox" id="inv_show_check_all">
                                </th>
                                <th style="width:52px;" class="text-center">Photo</th>
                                <th style="width:48px;"></th>
                                <th>Reference</th>
                                <th>Produit / Declinaison</th>
                                <th class="text-center">Entrepot</th>
                                <th class="text-center">Theorique</th>
                                <th class="text-center">Reserve</th>
                                <th class="text-center">Compte</th>
                                <th class="text-center">Ecart</th>
                            </tr>
                            </thead>
                            <tbody id="inventoryShowBody">
                            {% set seenProducts = [] %}
                            {% for l in inventory.lines %}
                                {% set pid = l.produitId ?: ('na-' ~ l.id) %}
                                {% set prodData = productsMap[l.produitId]|default(null) %}
                                {% if pid not in seenProducts %}
                                    {% set seenProducts = seenProducts|merge([pid]) %}
                                    {% set productLines = inventory.lines|filter(x => (x.produitId ?: ('na-' ~ x.id)) == pid) %}
                                    {% set pQtStock = 0 %}
                                    {% set pQtReserved = 0 %}
                                    {% set pQtCounted = 0 %}
                                    {% set hasCorrection = false %}
                                    {% for pl in productLines %}
                                        {% set pQtStock = pQtStock + (pl.qtTheoretical|default(0)) %}
                                        {% set pQtReserved = pQtReserved + (pl.qtReserved|default(0)) %}
                                        {% set pQtCounted = pQtCounted + (pl.qtCounted|default(0)) %}
                                        {% if (pl.qtGap|default(0)) != 0 %}
                                            {% set hasCorrection = true %}
                                        {% endif %}
                                    {% endfor %}
                                    {% set pQtAvailable = pQtStock - pQtReserved %}
                                    {% set pQtGap = pQtCounted - pQtStock %}
                                    {% set prodImgName = (prodData and prodData.image) ? prodData.image : 'no-image-50px.png' %}
                                    {% set prodImgFile = (prodImgName starts with 'http' or prodImgName starts with '/') ? prodImgName : (prodImgName|split('/')|last) %}
                                    {% set prodImgSrc = (prodImgFile starts with 'http' or prodImgFile starts with '/') ? prodImgFile : asset('images/' ~ prodImgFile) %}
                                    {% set prodImgUploadSrc = (prodImgFile starts with 'http' or prodImgFile starts with '/') ? prodImgFile : asset('uploads/images/' ~ prodImgFile) %}
                                    <tr class="inv-prod-row" data-product-id="{{ pid }}">
                                        <td class="text-center">
                                            <input type="checkbox" class="inv-show-line-check js-show-product-check" data-product-id="{{ pid }}">
                                        </td>
                                        <td class="text-center">
                                            <img class="inv-thumb"
                                                 src="{{ prodImgSrc }}"
                                                 onerror="if(!this.dataset.fallbackTried){this.dataset.fallbackTried='1';this.src='{{ prodImgUploadSrc }}';}else{this.onerror=null;this.src='{{ asset('images/no-image-50px.png') }}';}"
                                                 alt="">
                                        </td>
                                        <td class="text-center">
                                            <button type="button" class="inv-toggle js-show-toggle-product" data-product-id="{{ pid }}">+</button>
                                        </td>
                                        <td>
                                            <div class="fw-semibold">
                                                {% if l.produitId %}
                                                    <a href="{{ path('produit_show', {id: l.produitId}) }}" target="_blank" class="text-decoration-none">
                                                        {{ (prodData and prodData.reference) ? prodData.reference : l.reference }}
                                                    </a>
                                                {% else %}
                                                    {{ (prodData and prodData.reference) ? prodData.reference : l.reference }}
                                                {% endif %}
                                            </div>
                                        </td>
                                        <td>
                                            <div class="inv-name-cell">
                                                <div class="inv-name-main">
                                                    <div class="fw-semibold">{{ (prodData and prodData.name) ? prodData.name : ('Produit #' ~ (l.produitId ?: '-')) }}</div>
                                                    <div class="small text-muted">{{ productLines|length }} ligne(s) de stock</div>
                                                </div>
                                                <span class="inv-corr-badge {{ hasCorrection ? 'ok' : 'no' }}">{{ hasCorrection ? 'Corrige' : 'Non corrige' }}</span>
                                            </div>
                                        </td>
                                        <td class="text-center"><span class="inv-badge">{{ l.storehouse ?: 'Principal' }}</span></td>
                                        <td class="text-center" colspan="4">
                                            <div class="small d-inline-flex flex-wrap align-items-center justify-content-center" style="gap:.35rem;">
                                                <span class="inv-badge">Stock: {{ pQtStock }}</span>
                                                <span class="inv-badge">Reserve: {{ pQtReserved }}</span>
                                                <span class="inv-badge">Dispo: {{ pQtAvailable }}</span>
                                                <span class="inv-badge">Compte: {{ pQtCounted }}</span>
                                                <span class="badge {{ pQtGap == 0 ? 'bg-light text-dark border' : (pQtGap > 0 ? 'bg-success' : 'bg-danger') }}">
                                                    Ecart: {{ pQtGap > 0 ? '+' ~ pQtGap : pQtGap }}
                                                </span>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr class="js-show-children-wrap d-none" data-parent="{{ pid }}">
                                        <td colspan="10" class="inv-child-cell">
                                            <table class="table table-sm align-middle mb-0">
                                                <tbody>
                                                {% for pl in productLines %}
                                                    {% set plGap = pl.qtGap is not null ? pl.qtGap : ((pl.qtCounted|default(0)) - (pl.qtTheoretical|default(0))) %}
                                                    {% set isCorrected = plGap != 0 %}
                                                    {% set decliData = declinationsMap[pl.declinationProduitId]|default(null) %}
                                                    {% set decliImgName = (decliData and decliData.image) ? decliData.image : ((prodData and prodData.image) ? prodData.image : 'no-image-50px.png') %}
                                                    {% set decliImgFile = (decliImgName starts with 'http' or decliImgName starts with '/') ? decliImgName : (decliImgName|split('/')|last) %}
                                                    {% set decliImgSrc = (decliImgFile starts with 'http' or decliImgFile starts with '/') ? decliImgFile : asset('images/' ~ decliImgFile) %}
                                                    {% set decliImgUploadSrc = (decliImgFile starts with 'http' or decliImgFile starts with '/') ? decliImgFile : asset('uploads/images/' ~ decliImgFile) %}
                                                    <tr class="js-show-line-row {{ isCorrected ? 'inv-line-corrected' : 'inv-line-not-corrected' }}"
                                                        data-parent="{{ pid }}"
                                                        data-reference="{{ pl.reference|lower }}"
                                                        data-label="{{ pl.labelName|lower }}"
                                                        data-storehouse="{{ (pl.storehouse ?: 'principal')|lower }}"
                                                        data-corrected="{{ isCorrected ? '1' : '0' }}">
                                                        <td class="text-center"><input type="checkbox" class="inv-show-line-check"></td>
                                                        <td class="text-center">
                                                            <img class="inv-thumb"
                                                                 src="{{ decliImgSrc }}"
                                                                 onerror="if(!this.dataset.fallbackTried){this.dataset.fallbackTried='1';this.src='{{ decliImgUploadSrc }}';}else{this.onerror=null;this.src='{{ asset('images/no-image-50px.png') }}';}"
                                                                 alt="">
                                                        </td>
                                                        <td></td>
                                                        <td>
                                                            {% if pl.declinationProduitId %}
                                                                <a href="{{ path('produit_declination_value_show', {id: pl.declinationProduitId}) }}" target="_blank" class="text-decoration-none fw-semibold">
                                                                    {{ pl.reference }}
                                                                </a>
                                                            {% else %}
                                                                {{ pl.reference }}
                                                            {% endif %}
                                                        </td>
                                                        <td>
                                                            <div class="inv-name-cell">
                                                                <div class="inv-name-main">{{ pl.labelName }}</div>
                                                                <span class="inv-corr-badge {{ isCorrected ? 'ok' : 'no' }}">{{ isCorrected ? 'Corrige' : 'Non corrige' }}</span>
                                                            </div>
                                                        </td>
                                                        <td class="text-center">{{ pl.storehouse ?: 'Principal' }}</td>
                                                        <td class="text-center"><span class="inv-badge">Stock: {{ pl.qtTheoretical }}</span></td>
                                                        <td class="text-center"><span class="inv-badge">Reserve: {{ pl.qtReserved }}</span></td>
                                                        <td class="text-center"><span class="inv-badge">Compte: {{ pl.qtCounted }}</span></td>
                                                        <td class="text-center">
                                                            <span class="badge {{ plGap == 0 ? 'bg-light text-dark border' : (plGap > 0 ? 'bg-success' : 'bg-danger') }}">{{ plGap > 0 ? '+' ~ plGap : plGap }}</span>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </td>
                                    </tr>
                                {% endif %}
                            {% else %}
                                <tr>
                                    <td colspan="10" class="text-center text-muted py-4">Aucune ligne.</td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </section>
            </section>
        </div>
    </div>

    <div class="offcanvas offcanvas-end"
         tabindex="-1"
         id="invHistoryPanel"
         aria-labelledby="invHistoryPanelLabel"
         data-bs-backdrop="false"
         data-bs-scroll="true">
        <div class="offcanvas-header border-bottom">
            <div>
                <h5 class="offcanvas-title mb-0" id="invHistoryPanelLabel">
                    <i class="fa fa-history me-2"></i>Historique des modifications
                </h5>
                <small class="text-muted">{{ inventoryHistories|length }} element{{ inventoryHistories|length > 1 ? 's' : '' }}</small>
            </div>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            {% if inventoryHistories is empty %}
                <div class="alert alert-light border text-center mb-0">Aucun historique pour le moment.</div>
            {% else %}
                <div class="inv-history-list">
                    {% set currentDay = '' %}
                    <div class="d-flex flex-column gap-2">
                        {% for history in inventoryHistories %}
                            {% set day = history.createdAt|date('d/m/Y') %}
                            {% if day != currentDay %}
                                {% set currentDay = day %}
                                <div class="inv-history-group-title mt-2">
                                    <i class="fa fa-calendar-alt me-2 text-muted"></i>{{ currentDay }}
                                </div>
                            {% endif %}
                            <div class="inv-history-item">
                                <div class="inv-history-meta">
                                    <span class="inv-history-type {{ history.type }}">{{ history.type|replace({'unvalidate':'annulation','validate':'validation','update':'modification','create':'creation'})|capitalize }}</span>
                                    <span class="text-muted small">{{ history.createdAt|date('H:i') }}</span>
                                    <span class="text-muted small">par {{ history.user ? (history.user.fullName ?: history.user.username ?: ('#' ~ history.user.id)) : 'Systeme' }}</span>
                                </div>
                                <div class="small text-dark mt-2" style="white-space: pre-wrap;">{{ history.message }}</div>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block js %}
    {{ parent() }}
    <script>
      (function () {
        function applyShowFilters() {
          var ref = (document.getElementById('filter_show_reference').value || '').toLowerCase().trim();
          var lbl = (document.getElementById('filter_show_label').value || '').toLowerCase().trim();
          var sh = (document.getElementById('filter_show_storehouse').value || '').toLowerCase().trim();
          var state = (document.getElementById('filter_show_state').value || 'all');

          var parentRows = document.querySelectorAll('#inventoryShowBody .inv-prod-row');
          parentRows.forEach(function (pr) {
            var pid = pr.getAttribute('data-product-id');
            var wrap = document.querySelector('.js-show-children-wrap[data-parent="' + pid + '"]');
            var children = wrap ? wrap.querySelectorAll('.js-show-line-row') : [];
            var hasVisible = false;

            children.forEach(function (row) {
              var okRef = !ref || (row.getAttribute('data-reference') || '').indexOf(ref) !== -1;
              var okLbl = !lbl || (row.getAttribute('data-label') || '').indexOf(lbl) !== -1;
              var okSh = !sh || (row.getAttribute('data-storehouse') || '') === sh;
              var isCorrected = row.getAttribute('data-corrected') === '1';
              var okState = (state === 'all') || (state === 'corrected' && isCorrected) || (state === 'not_corrected' && !isCorrected);

              var show = okRef && okLbl && okSh && okState;
              row.classList.toggle('d-none', !show);
              if (show) hasVisible = true;
            });

            pr.classList.toggle('d-none', !hasVisible);
            if (wrap) {
              wrap.classList.toggle('d-none', !hasVisible);
            }
            var tgl = pr.querySelector('.js-show-toggle-product');
            if (tgl) tgl.textContent = hasVisible ? '-' : '+';
          });
        }

        function resetShowFilters() {
          document.getElementById('filter_show_reference').value = '';
          document.getElementById('filter_show_label').value = '';
          document.getElementById('filter_show_storehouse').value = '';
          document.getElementById('filter_show_state').value = 'all';
          document.querySelectorAll('#inventoryShowBody .inv-prod-row').forEach(function (r) {
            r.classList.remove('d-none');
          });
          document.querySelectorAll('#inventoryShowBody .js-show-line-row').forEach(function (r) {
            r.classList.remove('d-none');
          });
          document.querySelectorAll('#inventoryShowBody .js-show-children-wrap').forEach(function (r) {
            r.classList.add('d-none');
          });
          document.querySelectorAll('.js-show-toggle-product').forEach(function (b) { b.textContent = '+'; });
        }

        document.addEventListener('click', function (e) {
          var btn = e.target.closest('.js-show-toggle-product');
          if (!btn) return;
          e.preventDefault();

          var pid = btn.getAttribute('data-product-id');
          var wrap = document.querySelector('.js-show-children-wrap[data-parent="' + pid + '"]');
          if (!wrap) return;
          var isOpen = btn.textContent.trim() === '-';
          wrap.classList.toggle('d-none', isOpen);
          btn.textContent = isOpen ? '+' : '-';
        });

        var applyBtn = document.getElementById('applyShowFilters');
        var resetBtn = document.getElementById('resetShowFilters');
        if (applyBtn) applyBtn.addEventListener('click', applyShowFilters);
        if (resetBtn) resetBtn.addEventListener('click', resetShowFilters);

        var checkAll = document.getElementById('inv_show_check_all');
        if (checkAll) {
          checkAll.addEventListener('change', function () {
            document.querySelectorAll('#inventoryShowBody .inv-show-line-check').forEach(function (cb) {
              if (cb.offsetParent === null) return;
              cb.checked = checkAll.checked;
            });
          });
        }

        document.addEventListener('submit', function (e) {
          var validateForm = e.target.closest('.js-inventory-validate-form');
          if (validateForm) {
            e.preventDefault();

            var validateMessage = "Valider cet inventaire ? Le stock sera mis a jour selon les quantites comptees.";
            if (window.Swal && typeof window.Swal.fire === 'function') {
              window.Swal.fire({
                title: "Valider l'inventaire ?",
                text: validateMessage,
                icon: 'question',
                showCancelButton: true,
                confirmButtonText: 'Oui, valider',
                cancelButtonText: 'Fermer',
                reverseButtons: true
              }).then(function (result) {
                if (result.isConfirmed) {
                  validateForm.submit();
                }
              });
              return;
            }

            if (window.confirm(validateMessage)) {
              validateForm.submit();
            }
            return;
          }

          var form = e.target.closest('.js-inventory-unvalidate-form');
          if (!form) return;
          e.preventDefault();

          var message = "Annuler la validation de cet inventaire ? Le stock sera remis a son etat theorique initial.";
          if (window.Swal && typeof window.Swal.fire === 'function') {
            window.Swal.fire({
              title: 'Annuler la validation ?',
              text: message,
              icon: 'warning',
              showCancelButton: true,
              confirmButtonText: 'Oui, annuler',
              cancelButtonText: 'Fermer',
              reverseButtons: true
            }).then(function (result) {
              if (result.isConfirmed) {
                form.submit();
              }
            });
            return;
          }

          if (window.confirm(message)) {
            form.submit();
          }
        });

        function initFilterOffcanvasTopOffset() {
          var offcanvasEl = document.getElementById('invFilterPanel');
          if (!offcanvasEl) return;

          function applyOffset() {
            var topnav = document.querySelector('.topbar, .topnav, .app-topbar, #kt_header');
            var top = 100;
            if (topnav) {
              var rect = topnav.getBoundingClientRect();
              top = Math.max(56, Math.round(rect.height + rect.top));
            }
            offcanvasEl.style.setProperty('--inventory-offcanvas-top', top + 'px');
          }

          applyOffset();
          window.addEventListener('resize', applyOffset);
          offcanvasEl.addEventListener('show.bs.offcanvas', applyOffset);
        }
        initFilterOffcanvasTopOffset();
      })();
    </script>
{% endblock %}