<?php /* views/reports.php — KREMER Régis v2.6.85 — REPORTS MOBILE CARDS9 : rendu tactile natif via module compagnon, desktop conservé */ ?>

<div class="page-body" id="pgReports">

    <section class="admin-page-hero" aria-labelledby="reportsTitle">
        <div class="admin-page-hero__copy">
            <span class="admin-page-hero__kicker">Pilotage & contrôle</span>
            <h1 class="admin-page-hero__title" id="reportsTitle">Rapports</h1>
            <p class="admin-page-hero__text">Stock, valorisation, mouvements, alertes, marques, écarts d’inventaire et historiques de prix dans une lecture cohérente PC, tablette et mobile.</p>
        </div>
        <div class="admin-page-hero__actions" aria-label="Exports disponibles">
            <span class="admin-page-hero__pill">Impression</span>
            <span class="admin-page-hero__pill">CSV</span>
            <span class="admin-page-hero__pill">Contrôle stock</span>
        </div>
    </section>

    <!-- ═══════════════════════════════════════════════════
         TABS NAVIGATION
         ═══════════════════════════════════════════════════ -->
    <div class="report-tabs" id="reportTabs">
        <button class="report-tab active" data-tab="stock">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15" style="vertical-align:-2px;margin-right:6px"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg>Stock
        </button>
        <button class="report-tab" data-tab="value">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15" style="vertical-align:-2px;margin-right:6px"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>Valorisation
        </button>
        <button class="report-tab" data-tab="movements">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15" style="vertical-align:-2px;margin-right:6px"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>Mouvements
        </button>
        <button class="report-tab" data-tab="alerts">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15" style="vertical-align:-2px;margin-right:6px"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>Alertes
        </button>
        <button class="report-tab" data-tab="brands">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15" style="vertical-align:-2px;margin-right:6px"><path d="M20.59 13.41l-7.17 7.17a2 2 0 01-2.83 0L2 12V2h10l8.59 8.59a2 2 0 010 2.82z"/><line x1="7" y1="7" x2="7.01" y2="7"/></svg>Marques
        </button>
        <button class="report-tab" data-tab="gap">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15" style="vertical-align:-2px;margin-right:6px"><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>Écarts inventaire
        </button>
        <button class="report-tab" data-tab="prices">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15" style="vertical-align:-2px;margin-right:6px"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 110 7H6"/></svg>Historique prix
        </button>
    </div>


    <!-- ═══════════════════════════════════════════════════
         TAB : STOCK
         ═══════════════════════════════════════════════════ -->
    <div id="tabStock" class="report-tab-content active">

        <!-- Toolbar -->
        <div class="sect-toolbar">
            <div class="sect-toolbar-left">
                <h2 class="page-title">Rapport de Stock</h2>
            </div>
            <div class="flex gap-2">
                <button class="btn btn-secondary btn-sm" id="btnStockPrint">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><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-primary btn-sm" id="btnStockCSV">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Exporter CSV
                </button>
            </div>
        </div>

        <!-- Filtres -->
        <div class="report-filter-bar" style="display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:nowrap">
            <div class="search-box" style="flex:2;min-width:0">
                <svg class="search-box-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
                <input type="text" id="stockSearch" placeholder="Rechercher produit, SKU, code-barres…">
            </div>
            <select class="form-select" id="stockWarehouse" style="flex:1;min-width:0">
                <option value="">Tous les magasins</option>
            </select>
            <select class="form-select" id="stockCategory" style="flex:1;min-width:0">
                <option value="">Toutes catégories</option>
            </select>
            <select class="form-select" id="stockBrand" style="flex:1;min-width:0">
                <option value="">Toutes marques</option>
            </select>
            <select class="form-select" id="stockThreshold" style="flex:1;min-width:0">
                <option value="">Tous seuils</option>
                <option value="low">⚠️ Stock bas</option>
                <option value="ok">✓ Normal</option>
            </select>
            <button class="btn btn-ghost btn-icon btn-sm" id="btnStockReset" title="Réinitialiser" style="flex-shrink:0">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
            </button>
        </div>

        <!-- KPI Cards -->
        <div class="kpi-grid mb-4">
            <div class="kpi-card blue">
                <div class="kpi-header">
                    <div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"/></svg></div>
                </div>
                <div class="kpi-value" id="stockTotalProducts">0</div>
                <div class="kpi-label">Produits</div>
            </div>
            <div class="kpi-card green">
                <div class="kpi-header">
                    <div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg></div>
                </div>
                <div class="kpi-value" id="stockTotalUnits">0</div>
                <div class="kpi-label">Unités totales</div>
            </div>
            <div class="kpi-card blue">
                <div class="kpi-header">
                    <div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 110 7H6"/></svg></div>
                </div>
                <div class="kpi-value" id="stockTotalValue">—</div>
                <div class="kpi-label">Valeur totale</div>
            </div>
            <div class="kpi-card red">
                <div class="kpi-header">
                    <div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div>
                </div>
                <div class="kpi-value" id="stockLowStock">0</div>
                <div class="kpi-label">Stock bas</div>
            </div>
        </div>

        <!-- Tableau -->
        <div class="card">
            <div class="table-container">
                <table class="data-table" id="stockTable">
                    <thead>
                        <tr>
                            <th>Produit</th>
                            <th>SKU</th>
                            <th>Magasin</th>
                            <th>Catégorie</th>
                            <th>Stock actuel</th>
                            <th>Seuil mini</th>
                            <th>Statut</th>
                            <th>Coût unitaire</th>
                            <th>Valeur totale</th>
                        </tr>
                    </thead>
                    <tbody id="stockTableBody"></tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- ═══════════════════════════════════════════════════
         TAB : VALORISATION
         ═══════════════════════════════════════════════════ -->
    <div id="tabValue" class="report-tab-content">

        <div class="sect-toolbar">
            <div class="sect-toolbar-left">
                <h2 class="page-title">Valorisation du Stock</h2>
            </div>
            <div class="flex gap-2">
                <button class="btn btn-secondary btn-sm" id="btnValuePrint">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><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-primary btn-sm" id="btnValueCSV">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Exporter CSV
                </button>
            </div>
        </div>

        <div class="kpi-grid mb-4">
            <div class="kpi-card blue">
                <div class="kpi-header"><div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 110 7H6"/></svg></div></div>
                <div class="kpi-value" id="valueTotalStock">—</div>
                <div class="kpi-label">Valeur totale stock</div>
            </div>
            <div class="kpi-card green">
                <div class="kpi-header"><div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg></div></div>
                <div class="kpi-value" id="valueWarehouseCount">0</div>
                <div class="kpi-label">Magasins</div>
            </div>
        </div>

        <div class="card">
            <div class="table-container">
                <table class="data-table" id="valueTable">
                    <thead>
                        <tr>
                            <th>Magasin</th>
                            <th>Produits</th>
                            <th>Unités</th>
                            <th>Valeur totale</th>
                            <th>Valeur moyenne / produit</th>
                        </tr>
                    </thead>
                    <tbody id="valueTableBody"></tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- ═══════════════════════════════════════════════════
         TAB : MOUVEMENTS
         ═══════════════════════════════════════════════════ -->
    <div id="tabMovements" class="report-tab-content">

        <div class="sect-toolbar">
            <div class="sect-toolbar-left">
                <h2 class="page-title">Rapport des Mouvements</h2>
            </div>
            <div class="flex gap-2">
                <button class="btn btn-secondary btn-sm" id="btnMovementsPrint">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><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-primary btn-sm" id="btnMovementsCSV">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Exporter CSV
                </button>
            </div>
        </div>

        <!-- Filtres -->
        <div class="report-filter-bar" style="display:flex;flex-direction:row;align-items:center;gap:8px;flex-wrap:nowrap">
            <input type="date" class="form-input" id="movementsDateFrom" title="Date début" style="width:145px;flex-shrink:0">
            <input type="date" class="form-input" id="movementsDateTo" title="Date fin" style="width:145px;flex-shrink:0">
            <select class="form-select" id="movementsWarehouse" style="flex:1;min-width:0">
                <option value="">Tous les magasins</option>
            </select>
            <select class="form-select" id="movementsType" style="flex:1;min-width:0">
                <option value="">Tous les types</option>
                <option value="entry">Entrées (BC)</option>
                <option value="add">Ajouts</option>
                <option value="remove">Sorties</option>
                <option value="transfer">Transferts</option>
                <option value="inventory">Inventaire</option>
            </select>
            <button class="btn btn-ghost btn-icon btn-sm" id="btnMovementsReset" title="Réinitialiser" style="flex-shrink:0">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
            </button>
        </div>

        <!-- KPI Cards -->
        <div class="kpi-grid mb-4">
            <div class="kpi-card green">
                <div class="kpi-header"><div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg></div></div>
                <div class="kpi-value" id="movementsEntries">0</div>
                <div class="kpi-label">Entrées / Ajouts</div>
            </div>
            <div class="kpi-card red">
                <div class="kpi-header"><div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg></div></div>
                <div class="kpi-value" id="movementsExits">0</div>
                <div class="kpi-label">Sorties</div>
            </div>
            <div class="kpi-card blue">
                <div class="kpi-header"><div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 014-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 01-4 4H3"/></svg></div></div>
                <div class="kpi-value" id="movementsTransfers">0</div>
                <div class="kpi-label">Transferts</div>
            </div>
        </div>

        <!-- Tableau -->
        <div class="card">
            <div class="table-container">
                <table class="data-table" id="movementsTable">
                    <thead>
                        <tr>
                            <th>Date / Heure</th>
                            <th>Type</th>
                            <th>Produit</th>
                            <th>Magasin</th>
                            <th>Quantité</th>
                            <th>Raison / Chantier</th>
                            <th>Opérateur</th>
                            <th>Note</th>
                            <th>Document</th>
                        </tr>
                    </thead>
                    <tbody id="movementsTableBody"></tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- ═══════════════════════════════════════════════════
         TAB : ALERTES
         ═══════════════════════════════════════════════════ -->
    <div id="tabAlerts" class="report-tab-content">

        <div class="sect-toolbar">
            <div class="sect-toolbar-left">
                <h2 class="page-title">Alertes Stock Bas</h2>
            </div>
            <div class="flex gap-2">
                <button class="btn btn-secondary btn-sm" id="btnAlertsPrint">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><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-primary btn-sm" id="btnAlertsCSV">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Exporter CSV
                </button>
            </div>
        </div>

        <div class="card">
            <div class="table-container">
                <table class="data-table" id="alertsTable">
                    <thead>
                        <tr>
                            <th>Priorité</th>
                            <th>Produit</th>
                            <th>SKU</th>
                            <th>Magasin</th>
                            <th>Stock actuel</th>
                            <th>Seuil mini</th>
                            <th>Déficit</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody id="alertsTableBody"></tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- ═══════════════════════════════════════════════════
         TAB : MARQUES
         ═══════════════════════════════════════════════════ -->
    <div id="tabBrands" class="report-tab-content">

        <div class="sect-toolbar">
            <div class="sect-toolbar-left">
                <h2 class="page-title">Rapport par Marques</h2>
            </div>
            <div class="flex gap-2">
                <button class="btn btn-secondary btn-sm" id="btnBrandsPrint">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><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-primary btn-sm" id="btnBrandsCSV">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Exporter CSV
                </button>
            </div>
        </div>

        <div class="card">
            <div class="table-container">
                <table class="data-table" id="brandsTable">
                    <thead>
                        <tr>
                            <th>Marque</th>
                            <th>Produits</th>
                            <th>Stock total</th>
                            <th>Valeur totale</th>
                            <th>Fournisseurs</th>
                        </tr>
                    </thead>
                    <tbody id="brandsTableBody"></tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- ═══════════════════════════════════════════════════
         TAB : ÉCARTS INVENTAIRE
         ═══════════════════════════════════════════════════ -->
    <div id="tabGap" class="report-tab-content">

        <div class="sect-toolbar">
            <div class="sect-toolbar-left">
                <h2 class="page-title">Écarts d'inventaire</h2>
            </div>
            <div class="flex gap-2">
                <button class="btn btn-secondary btn-sm" id="btnGapPrint">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><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-primary btn-sm" id="btnGapCSV">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Exporter CSV
                </button>
            </div>
        </div>

        <div class="kpi-grid mb-4">
            <div class="kpi-card blue">
                <div class="kpi-header"><div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg></div></div>
                <div class="kpi-value" id="gapTotalLines">—</div>
                <div class="kpi-label">Lignes comparées</div>
            </div>
            <div class="kpi-card orange">
                <div class="kpi-header"><div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg></div></div>
                <div class="kpi-value" id="gapLinesWithGap">—</div>
                <div class="kpi-label">Avec écart</div>
            </div>
            <div class="kpi-card red">
                <div class="kpi-header"><div class="kpi-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 100 7h5a3.5 3.5 0 110 7H6"/></svg></div></div>
                <div class="kpi-value" id="gapTotalValue">—</div>
                <div class="kpi-label">Valeur des écarts</div>
            </div>
        </div>

        <div class="card">
            <div class="table-container">
                <table class="data-table" id="gapTable">
                    <thead>
                        <tr>
                            <th>Produit</th>
                            <th>SKU</th>
                            <th>Magasin</th>
                            <th>Théorique</th>
                            <th>Compté</th>
                            <th>Écart qté</th>
                            <th>Écart valeur</th>
                            <th>Date inventaire</th>
                        </tr>
                    </thead>
                    <tbody id="gapTableBody">
                        <tr><td colspan="8" class="tbl-empty">Cliquez sur l'onglet pour charger</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>


    <!-- ═══════════════════════════════════════════════════
         TAB : HISTORIQUE PRIX
         ═══════════════════════════════════════════════════ -->
    <div id="tabPrices" class="report-tab-content">

        <div class="sect-toolbar">
            <div class="sect-toolbar-left">
                <h2 class="page-title">Historique des prix d'achat</h2>
            </div>
            <div class="flex gap-2">
                <button class="btn btn-secondary btn-sm" id="btnPricesPrint">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><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-primary btn-sm" id="btnPricesCSV">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                    Exporter CSV
                </button>
            </div>
        </div>

        <!-- Filtre produit -->
        <div class="filters-bar mb-4">
            <select class="form-select" id="pricesProductFilter" style="min-width:260px;flex:1">
                <option value="">Tous les produits</option>
            </select>
            <button class="btn btn-ghost btn-icon btn-sm" id="btnPricesReset" title="Réinitialiser">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 102.13-9.36L1 10"/></svg>
            </button>
        </div>

        <div class="card">
            <div class="table-container">
                <table class="data-table" id="pricesTable">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Produit</th>
                            <th>SKU</th>
                            <th>Quantité</th>
                            <th>Prix unitaire</th>
                            <th>Prix base</th>
                            <th>Fournisseur</th>
                        </tr>
                    </thead>
                    <tbody id="pricesTableBody">
                        <tr><td colspan="7" class="tbl-empty">Sélectionnez un produit</td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

</div>

<script>window.SM_PAGE = 'reports';</script>
