<?php
/**
 * Fichier  : views/products.php
 * Version  : 2.3.1
 * Description : Vue — Page catalogue produits — filtres restructurés
 */
?>
<style>
#pgProducts .prod-filters-bar{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--border,#e2e8f0);border-radius:18px;background:linear-gradient(180deg,var(--bg-card,#fff),var(--bg-elevated,#f8fafc))}
#pgProducts .prod-search-row,#pgProducts .prod-dropdowns-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
#pgProducts .prod-dropdowns-row .form-select{min-height:44px}
#pgProducts .prod-actions-row{padding-top:2px}
#pgProducts #prodBulkBar{box-shadow:0 12px 30px rgba(15,23,42,.08)}
#pgProducts .products-grid{margin-top:14px}
@media (max-width: 1024px){
  #pgProducts .prod-search-row .search-box{max-width:none!important}
  #pgProducts .prod-dropdowns-row .form-select{min-width:calc(50% - 6px)!important;flex:1 1 calc(50% - 6px)!important}
  #pgProducts #prodBulkBar{flex-wrap:wrap!important}
  #pgProducts #prodBulkBar > div{flex-wrap:wrap!important}
  #pgProducts #prodBulkBar .form-select{min-width:calc(50% - 6px)!important;max-width:none!important;flex:1 1 calc(50% - 6px)!important}
}
@media (max-width: 640px){
  #pgProducts .prod-filters-bar{padding:12px}
  #pgProducts .prod-search-row,#pgProducts .prod-dropdowns-row,#pgProducts .prod-actions-row{flex-direction:column;align-items:stretch}
  #pgProducts .view-toggle{align-self:flex-end}
  #pgProducts .prod-dropdowns-row .form-select,
  #pgProducts #prodBulkBar .form-select{min-width:100%!important;flex:1 1 100%!important}
  #pgProducts .prod-actions-row .flex{width:100%;justify-content:stretch!important}
  #pgProducts .prod-actions-row .flex .btn{flex:1 1 100%}
  #pgProducts .pagination-bar{gap:10px;flex-direction:column;align-items:stretch}
  #pgProducts .pagination-controls{width:100%;justify-content:space-between}
}
</style>

<div class="products" id="pgProducts">

    <!-- Filters Bar — 2 lignes sur tablette, 1 ligne desktop -->
    <div class="filters-bar prod-filters-bar">
        <!-- Ligne 1 : Recherche + vue toggle -->
        <div class="filters-section prod-search-row">
            <div class="search-box" style="flex:1;min-width:200px;max-width:400px">
                <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="prodSearch" placeholder="Rechercher produit, SKU, code-barres...">
            </div>
            <div class="view-toggle" style="flex-shrink:0">
                <button class="view-toggle-btn active" id="viewGrid" title="Vue grille">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/>
                        <rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
                    </svg>
                </button>
                <button class="view-toggle-btn" id="viewList" title="Vue liste">
                    <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>
                </button>
            </div>
        </div>

        <div class="filters-divider prod-filters-divider"></div>

        <!-- Ligne 2 : Filtres dropdowns -->
        <div class="filters-section prod-dropdowns-row">
            <select id="prodWhFilter" class="form-select" style="min-width:150px;flex:1">
                <option value="">Tous les magasins</option>
            </select>
            <select id="prodCatFilter" class="form-select" style="min-width:150px;flex:1">
                <option value="">Toutes catégories</option>
            </select>
            <select id="prodBrandFilter" class="form-select" style="min-width:130px;flex:1">
                <option value="">Toutes marques</option>
            </select>
        </div>

        <div class="filters-divider prod-filters-divider"></div>

        <!-- Ligne 3 : Compteur + actions (ergonomie) -->
        <div class="filters-section prod-actions-row" style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
            <span class="results-count" id="prodCount">0 produit(s)</span>

            <?php if((currentUser()['role']??'')==='admin'): ?>
            <div class="flex gap-2 flex-wrap" style="justify-content:flex-end">
                <!-- Toggle sélection multiple (visible seulement en vue liste) -->
                <button class="btn btn-ghost btn-sm" id="btnToggleBulk" style="display:none" title="Activer/désactiver la sélection multiple">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                        <rect x="3" y="3" width="5" height="5" rx="1"/><rect x="3" y="10" width="5" height="5" rx="1"/><rect x="3" y="17" width="5" height="5" rx="1"/>
                        <line x1="12" y1="5.5" x2="21" y2="5.5"/><line x1="12" y1="12.5" x2="21" y2="12.5"/><line x1="12" y1="19.5" x2="21" y2="19.5"/>
                    </svg>
                    Sélection
                </button>
                <button class="btn btn-secondary" id="btnStockEntry">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                        <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>
                    Entrée de stock
                </button>
                <button class="btn btn-primary" id="btnNewProd">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
                        <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                    </svg>
                    Nouveau produit
                </button>
                <button class="btn btn-secondary" id="btnImportCSV" title="Importer des produits depuis un fichier CSV">
                    📂 Import CSV
                </button>
            </div>
            <?php endif; ?>
        </div>

        <!-- Barre d'édition de masse (affichée au clic sur "Sélection") -->
        <div id="prodBulkBar" style="display:none;margin-top:10px;background:var(--blue-pale,#eff6ff);border:1.5px solid var(--blue,#3b82f6);border-radius:var(--r-lg,10px);padding:12px 16px;align-items:center;gap:12px;flex-wrap:nowrap;overflow-x:auto">
            <span style="font-weight:700;color:var(--blue,#3b82f6)" id="prodBulkCount">0 sélectionné(s)</span>
            <div style="flex:1;display:flex;gap:8px;flex-wrap:nowrap;align-items:center">
                <!-- ① Magasin en premier — pilote catégorie et marque -->
                <select id="bulkWh" class="form-select" style="min-width:170px;max-width:230px" title="Choisir un magasin pour filtrer les catégories et marques">
                    <option value="">— Changer magasin —</option>
                </select>
                <!-- ①bis Emplacement (dépend du magasin) -->
                <select id="bulkLoc" class="form-select" style="min-width:170px;max-width:230px" title="Choisir un magasin d'abord pour lister les emplacements">
                    <option value="">— Changer emplacement —</option>
                </select>
                <!-- ② Catégorie filtrée selon le magasin -->
                <select id="bulkCat" class="form-select" style="min-width:170px;max-width:230px" title="Choisir un magasin d'abord pour filtrer les catégories">
                    <option value="">— Changer catégorie —</option>
                </select>
                <!-- ③ Marque filtrée selon le magasin + catégorie -->
                <select id="bulkBrand" class="form-select" style="min-width:170px;max-width:230px" title="Choisir une catégorie d'abord pour filtrer les marques">
                    <option value="">— Changer marque —</option>
                </select>
                <button class="btn btn-primary btn-sm" id="btnBulkApply">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
                        <path d="M20 6L9 17l-5-5"/>
                    </svg>
                    Appliquer
                </button>
                <button class="btn btn-ghost btn-sm" id="btnBulkCancel">Annuler</button>
            </div>
        </div>
    </div>

    <!-- Grille produits -->
    <div class="products-grid" id="prodGrid"></div>

    <!-- Vue liste (cachée par défaut) -->


    <!-- Toggle activation des cases -->
    <div class="flex items-center gap-2 mb-2" id="prodBulkToggleRow" style="display:none!important">
        <!-- géré par JS via btnToggleBulk -->
    </div>

    <div class="card" id="prodTableWrap" style="display:none">
        <div class="table-container">
            <table class="data-table" id="prodTable">
                <thead>
                    <tr>
                        <th id="thCheck" class="cell-check" style="width:36px;display:none">
                            <input type="checkbox" id="checkAll" title="Tout sélectionner">
                        </th>
                        <th data-sort="name">Produit</th>
                        <th data-sort="sku">SKU</th>
                        <th data-sort="__wh">Magasin</th>
                        <th data-sort="__loc">Emplacement</th>
                        <th data-sort="category">Catégorie</th>
                        <th data-sort="brand">Marque</th>
                        <th class="cell-number" data-sort="__stock">Stock</th>
                        <th class="cell-number" data-sort="__price">Prix</th>
                        <th>Statut</th>
                        <th class="cell-actions"></th>
                    </tr>
                </thead>
                <tbody id="prodTableBody"></tbody>
            </table>
        </div>
    </div>

    <!-- Pagination -->
    <div class="pagination-bar" id="prodPager">
        <div class="pagination-info" id="prodPageInfo">Page 1 / 1</div>
        <div class="pagination-controls">
            <button class="pagination-btn" id="prodPrev" disabled>
                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5">
                    <polyline points="15 18 9 12 15 6"/>
                </svg>
                Précédent
            </button>
            <button class="pagination-btn" id="prodNext">
                Suivant
                <svg viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.5">
                    <polyline points="9 18 15 12 9 6"/>
                </svg>
            </button>
            <select id="prodPageSize" class="form-select" style="width:auto">
                <option value="48">48 / page</option>
                <option value="96">96 / page</option>
                <option value="162">162 / page</option>
            </select>
        </div>
    </div>
</div>
