<?php
/**
 * Fichier  : views/inventory.php
 * Auteur   : KREMER Régis
 * Version  : 2.7.0
 * Date     : 2026-03-01
 * Description : Vue — Inventaires physiques : démarrer, saisir, historique, impression
 */
/* inventory.php v2.7.0 */ ?>
<style>
/* ── Sélecteur catégories : compact, scrollable, recherche ──── */
.inv-cat-zone{border:1px solid var(--border,#e2e8f0);border-radius:14px;background:var(--bg-card,#fff);overflow:hidden}

/* Header : chip Toutes + recherche + compteur */
.inv-cat-header{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border,#e2e8f0);background:var(--bg-elevated,#f8fafc);flex-wrap:wrap}
.inv-cat-btn-all{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:700;cursor:pointer;user-select:none;border:1.5px solid var(--blue,#3b82f6);background:var(--blue,#3b82f6);color:#fff;transition:all .15s;white-space:nowrap;flex-shrink:0}
.inv-cat-btn-all:hover{background:var(--blue-dim,#2563eb)}
.inv-cat-btn-all:active{transform:scale(.97)}
.inv-cat-btn-all.inactive{background:transparent;color:var(--blue,#3b82f6);border-color:var(--blue,#3b82f6)}
.inv-cat-btn-all.inactive:hover{background:var(--blue-pale,#eff6ff)}
.inv-cat-search{flex:1;min-width:120px;padding:6px 10px;border:1px solid var(--border,#e2e8f0);border-radius:8px;font-size:12.5px;background:var(--bg-input,#fff);color:var(--text-primary);outline:none;transition:border-color .15s}
.inv-cat-search:focus{border-color:var(--blue,#3b82f6)}
.inv-cat-search::placeholder{color:var(--text-muted)}
.inv-cat-counter{font-size:11.5px;color:var(--text-muted);white-space:nowrap;flex-shrink:0}
.inv-cat-counter strong{color:var(--blue,#3b82f6)}

/* Sélection active : tags compacts */
.inv-cat-selected{display:flex;flex-wrap:wrap;gap:5px;padding:8px 14px;border-bottom:1px solid var(--border,#e2e8f0);background:var(--blue-pale,#eff6ff);min-height:0}
.inv-cat-selected:empty{display:none}
.inv-cat-sel-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:11.5px;font-weight:600;background:var(--blue,#3b82f6);color:#fff;cursor:pointer;transition:background .12s;white-space:nowrap}
.inv-cat-sel-tag:hover{background:var(--red,#ef4444)}
.inv-cat-sel-tag svg{width:10px;height:10px;flex-shrink:0}

/* Zone scrollable des catégories */
.inv-cat-scroll-wrap{position:relative}
.inv-cat-scroll{max-height:150px;overflow-y:auto;padding:10px 14px;scrollbar-width:thin;scrollbar-color:var(--border,#cbd5e1) transparent}
.inv-cat-scroll::-webkit-scrollbar{width:5px}
.inv-cat-scroll::-webkit-scrollbar-track{background:transparent}
.inv-cat-scroll::-webkit-scrollbar-thumb{background:var(--border,#cbd5e1);border-radius:3px}
.inv-cat-scroll-fade{position:absolute;bottom:0;left:0;right:5px;height:28px;background:linear-gradient(transparent,var(--bg-card,#fff));pointer-events:none;border-radius:0 0 14px 14px;transition:opacity .2s}
.inv-cat-scroll-fade.hidden{opacity:0}

.inv-cat-chips{display:flex;flex-wrap:wrap;gap:6px}
.inv-cat-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:8px;font-size:12.5px;font-weight:500;cursor:pointer;user-select:none;border:1px solid var(--border,#e2e8f0);background:var(--bg-card,#fff);color:var(--text-secondary,#64748b);transition:all .12s ease;white-space:nowrap}
.inv-cat-chip:hover{border-color:var(--blue,#3b82f6);color:var(--blue,#3b82f6);background:var(--blue-pale,#eff6ff)}
.inv-cat-chip:active{transform:scale(.97)}
.inv-cat-chip.active{border-color:var(--blue,#3b82f6);background:var(--blue,#3b82f6);color:#fff}
.inv-cat-chip.active:hover{background:var(--blue-dim,#2563eb)}
.inv-cat-chip.filtered-out{display:none}
.inv-cat-empty{padding:8px 0;font-size:12.5px;color:var(--text-muted);font-style:italic}
.inv-cat-no-match{padding:10px 0;font-size:12.5px;color:var(--text-muted);text-align:center}

/* ── Layout "Nouvel inventaire" pleine largeur ──────────────── */
.inv-new-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
.inv-new-form{display:flex;flex-direction:column;gap:20px}
.inv-new-form .form-group{margin:0}
.inv-new-form .form-label{font-size:13px;font-weight:700;margin-bottom:6px;display:block;color:var(--text-primary)}
.inv-new-form .form-input,
.inv-new-form .form-select{min-height:46px;font-size:14.5px}
.inv-new-actions{display:flex;gap:12px;margin-top:8px}
.inv-new-actions .btn{min-height:48px;font-size:15px;font-weight:700}

.inv-new-aside{display:flex;flex-direction:column;gap:16px}
.inv-new-tip{padding:18px 20px;border-radius:14px;border:1px solid var(--border,#e2e8f0);background:linear-gradient(135deg,var(--bg-elevated,#f8fafc),var(--bg-card,#fff))}
.inv-new-tip-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--blue,#3b82f6);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.inv-new-tip-title svg{width:16px;height:16px;flex-shrink:0}
.inv-new-tip-text{font-size:13px;line-height:1.6;color:var(--text-secondary,#64748b)}
.inv-new-tip-text strong{color:var(--text-primary)}

@media(max-width:860px){
    .inv-new-layout{grid-template-columns:1fr;gap:16px}
    .inv-new-aside{order:-1}
    .inv-cat-chip{padding:5px 10px;font-size:12px}
    .inv-cat-header{padding:8px 10px}
    .inv-cat-scroll{max-height:130px;padding:8px 10px}
}
</style>
<div class="page-inventory" id="pgInventory">

    <!-- ══ VUE : ACCUEIL ═══════════════════════════════════════════ -->
    <div id="invViewHome">

        <!-- En-tête page -->
        <div class="flex items-center justify-between mb-4 flex-wrap gap-3">
            <div>
                <h2 class="page-title-inline">Inventaires</h2>
                <p class="text-muted" style="font-size:13px;margin-top:2px">Comptage physique du stock et historique des sessions</p>
            </div>
            <button class="btn btn-primary" id="btnNewInventory">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
                </svg>
                Nouvel inventaire
            </button>
        </div>

        <!-- Tableau historique -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Historique des inventaires</h3>
                <span class="badge badge-gray" id="invHistoryCount">—</span>
            </div>
            <div class="table-container">
                <table class="data-table" id="invHistoryTable">
                    <thead>
                        <tr>
                            <th>Titre</th>
                            <th data-sort="date">Date</th>
                            <th>Magasin</th>
                            <th>Catégorie(s)</th>
                            <th class="cell-number">Produits</th>
                            <th class="cell-number">Écarts</th>
                            <th>Opérateur</th>
                            <th>Résultat</th>
                            <th class="cell-actions"></th>
                        </tr>
                    </thead>
                    <tbody id="invHistoryBody">
                        <tr><td colspan="9" class="tbl-empty">Chargement…</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- ══ VUE : NOUVEAU (formulaire démarrage) ════════════════════ -->
    <div id="invViewNew" style="display:none">
        <div class="flex items-center gap-3 mb-4">
            <button class="btn btn-ghost btn-sm" id="btnBackToHome">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
                </svg>
                Retour
            </button>
            <h2 class="page-title-inline">Nouvel inventaire</h2>
        </div>

        <div class="inv-new-layout">
            <!-- ── Colonne gauche : Formulaire ── -->
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">
                        <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" style="margin-right:8px">
                            <path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/>
                        </svg>
                        Démarrer un inventaire
                    </h3>
                </div>
                <div class="card-body inv-new-form">
                    <div class="form-group">
                        <label class="form-label">Titre de l'inventaire <span style="color:var(--red)">*</span></label>
                        <input type="text" class="form-input" id="invTitle"
                            placeholder="ex : Inventaire annuel 2026 — Voirie Signalisation">
                    </div>
                    <div class="form-group">
                        <label class="form-label">Magasin <span style="color:var(--red)">*</span></label>
                        <select class="form-select" id="invWhSelect">
                            <option value="">Sélectionner un magasin</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Catégories <span class="text-muted">(optionnel)</span></label>
                        <div class="inv-cat-zone" id="invCatZone">
                            <!-- Header : bouton Toutes + recherche + compteur -->
                            <div class="inv-cat-header">
                                <button type="button" class="inv-cat-btn-all" id="invCatBtnAll">✓ Toutes</button>
                                <input type="text" class="inv-cat-search" id="invCatSearch" placeholder="Filtrer les catégories…">
                                <span class="inv-cat-counter" id="invCatCounter"></span>
                            </div>
                            <!-- Tags sélectionnés (cliquables pour retirer) -->
                            <div class="inv-cat-selected" id="invCatSelected"></div>
                            <!-- Zone scrollable des chips -->
                            <div class="inv-cat-scroll-wrap">
                                <div class="inv-cat-scroll" id="invCatScroll">
                                    <div class="inv-cat-chips" id="invCatChips"></div>
                                </div>
                                <div class="inv-cat-scroll-fade" id="invCatFade"></div>
                            </div>
                        </div>
                    </div>
                    <div class="inv-new-actions">
                        <button class="btn btn-primary flex-1" id="btnStartInv">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <polygon points="5 3 19 12 5 21 5 3"/>
                            </svg>
                            Démarrer l'inventaire
                        </button>
                        <button class="btn btn-secondary" id="btnCancelNew">Annuler</button>
                    </div>
                </div>
            </div>

            <!-- ── Colonne droite : Aide contextuelle ── -->
            <div class="inv-new-aside">
                <div class="inv-new-tip">
                    <div class="inv-new-tip-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                        Comment ça marche ?
                    </div>
                    <div class="inv-new-tip-text">
                        L'inventaire physique vous permet de <strong>comparer le stock réel</strong> avec le stock théorique enregistré dans StockMaster Pro.
                        Les écarts détectés seront automatiquement ajustés dans le stock lors de la validation.
                    </div>
                </div>
                <div class="inv-new-tip">
                    <div class="inv-new-tip-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg>
                        Étapes
                    </div>
                    <div class="inv-new-tip-text">
                        <strong>1.</strong> Choisissez un magasin et filtrez par catégories si nécessaire.<br>
                        <strong>2.</strong> Comptez physiquement chaque produit (saisie manuelle ou scanner).<br>
                        <strong>3.</strong> Validez pour appliquer les corrections au stock.<br>
                        <strong>4.</strong> Imprimez le rapport pour archivage.
                    </div>
                </div>
                <div class="inv-new-tip">
                    <div class="inv-new-tip-title">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="2" height="16"/><rect x="5" y="4" width="1" height="16"/><rect x="8" y="4" width="2" height="16"/><rect x="12" y="4" width="1" height="16"/><rect x="15" y="4" width="2" height="16"/><rect x="19" y="4" width="1" height="16"/></svg>
                        Astuce scanner
                    </div>
                    <div class="inv-new-tip-text">
                        Pendant l'inventaire, utilisez le bouton <strong>Scanner</strong> pour identifier rapidement un produit par son code-barres et naviguer directement à sa ligne de saisie.
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ══ VUE : EN COURS ══════════════════════════════════════════ -->
    <div id="invViewProgress" style="display:none">

        <!-- Header inventaire en cours -->
        <div class="inv-header-bar">
            <div class="inv-header-info">
                <h2 class="inv-header-title" id="invHeaderTitle">Inventaire en cours</h2>
                <span class="inv-header-meta" id="invHeaderMeta"></span>
            </div>
            <div class="flex gap-2 flex-wrap">
                <button class="btn btn-ghost btn-sm" id="btnInvPrint" title="Imprimer la feuille de comptage">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/>
                        <rect x="6" y="14" width="12" height="8"/>
                    </svg>
                    Imprimer
                </button>
                <button class="btn btn-ghost btn-sm" id="btnInvScan">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/>
                        <circle cx="12" cy="13" r="4"/>
                    </svg>
                    Scanner
                </button>
                <button class="btn btn-danger btn-sm" id="btnInvCancel">Abandonner</button>
                <button class="btn btn-success" id="btnInvValidate">
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="20 6 9 17 4 12"/>
                    </svg>
                    Valider l'inventaire
                </button>
            </div>
        </div>

        <!-- KPIs progression -->
        <div class="inv-kpi-row mb-4">
            <div class="inv-kpi-card">
                <div class="inv-kpi-val" id="invTotalCount">0</div>
                <div class="inv-kpi-lbl">Total produits</div>
            </div>
            <div class="inv-kpi-card green">
                <div class="inv-kpi-val" id="invCheckedCount">0</div>
                <div class="inv-kpi-lbl">✓ Validés</div>
            </div>
            <div class="inv-kpi-card orange">
                <div class="inv-kpi-val" id="invDiffCount">0</div>
                <div class="inv-kpi-lbl">⚠ Écarts</div>
            </div>
            <div class="inv-kpi-card muted">
                <div class="inv-kpi-val" id="invPendingCount">0</div>
                <div class="inv-kpi-lbl">En attente</div>
            </div>
        </div>

        <!-- Barre de progression -->
        <div class="inv-progress-wrap mb-4">
            <div class="inv-progress-bar">
                <div class="inv-progress-fill" id="invProgressBar" style="width:0%"></div>
            </div>
            <span class="inv-progress-pct" id="invProgressPct">0%</span>
        </div>

        <!-- Recherche / scan rapide -->
        <div class="card mb-4">
            <div class="card-body" style="padding:12px">
                <div class="flex gap-2">
                    <div class="search-box flex-1">
                        <svg class="search-box-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="3" width="18" height="18" rx="2"/><line x1="7" y1="8" x2="7" y2="16"/>
                            <line x1="11" y1="8" x2="11" y2="16"/><line x1="15" y1="8" x2="15" y2="16"/>
                        </svg>
                        <input type="text" id="invScanInput" placeholder="Scanner ou saisir code-barres / SKU / nom…" autocomplete="off">
                    </div>
                    <button class="btn btn-primary" id="btnInvManualAdd">Chercher</button>
                </div>
            </div>
        </div>

        <!-- Tableau produits -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Produits à inventorier</h3>
                <div class="flex gap-2">
                    <button class="btn btn-ghost btn-sm" id="btnInvValidateAll" title="Valider tous comme conforme">
                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                        Tout valider
                    </button>
                    <button class="btn btn-ghost btn-sm" id="btnInvResetAll" title="Effacer tous les comptages">
                        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
                        Réinitialiser
                    </button>
                </div>
            </div>
            <div class="table-container">
                <table class="data-table" id="invItemsTable">
                    <thead>
                        <tr>
                            <th>Produit</th>
                            <th>SKU</th>
                            <th>Catégorie</th>
                            <th class="cell-number">Théorique</th>
                            <th class="cell-number">Compté</th>
                            <th class="cell-number">Écart</th>
                            <th class="cell-actions"></th>
                        </tr>
                    </thead>
                    <tbody id="invItemsBody"></tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- ══ VUE : DÉTAIL INVENTAIRE HISTORIQUE ══════════════════════ -->
    <div id="invViewDetail" style="display:none">
        <div class="flex items-center gap-3 mb-4 flex-wrap">
            <button class="btn btn-ghost btn-sm" id="btnBackFromDetail">
                <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="19" y1="12" x2="5" y2="12"/><polyline points="12 19 5 12 12 5"/>
                </svg>
                Retour
            </button>
            <h2 class="page-title-inline" id="invDetailTitle">Détail inventaire</h2>
            <div class="ml-auto flex gap-2">
                <button class="btn btn-secondary btn-sm" id="btnDetailPrint">
                    <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 01-2-2v-5a2 2 0 012-2h16a2 2 0 012 2v5a2 2 0 01-2 2h-2"/>
                        <rect x="6" y="14" width="12" height="8"/>
                    </svg>
                    Imprimer
                </button>
            </div>
        </div>

        <!-- Fiche récap -->
        <div class="inv-detail-header card mb-4" id="invDetailMeta"></div>

        <!-- Tableau lignes -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Lignes inventoriées</h3>
                <div id="invDetailStats" class="flex gap-2"></div>
            </div>
            <div class="table-container">
                <table class="data-table" id="invDetailTable">
                    <thead>
                        <tr>
                            <th>Produit</th>
                            <th>SKU</th>
                            <th>Catégorie</th>
                            <th class="cell-number">Théorique</th>
                            <th class="cell-number">Compté</th>
                            <th class="cell-number">Écart</th>
                            <th>Résultat</th>
                        </tr>
                    </thead>
                    <tbody id="invDetailBody"></tbody>
                </table>
            </div>
        </div>
    </div>

</div>
