<?php
/**
 * Fichier  : views/movements.php
 * Auteur   : KREMER Régis
 * Version  : 2.3.15
 * Date     : 2026-03-01
 * Description : Vue — Mouvements de stock — filtres cohérents Magasin → Produit
 *
 * Changelog :
 *   v2.3.15 (2026-03-01) — Refonte filtres : Magasin d'abord, puis Produit filtré,
 *                           filtres avancés branchés (opérateur, site, BL, fournisseur)
 */
?>
<div class="movements" id="pgMovements">

    <!-- ═══════════════════════════════════════════════════════════
         BARRE DE FILTRES PRINCIPALE
         Ordre logique : Magasin → Produit (filtré) → Type → Dates
         ═══════════════════════════════════════════════════════════ -->
    <div class="filters-bar">

        <!-- Recherche texte libre -->
        <div class="filters-section">
            <div class="search-box">
                <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="mvSearch" placeholder="Rechercher SKU, opérateur, note…">
            </div>
        </div>

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

        <!-- ① Magasin — en premier, pilote le filtre Produit -->
        <div class="filters-section">
            <select id="mvWhFilter" class="form-select" style="min-width:160px" title="Filtrer par magasin">
                <option value="">Tous les magasins</option>
            </select>
        </div>

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

        <!-- ② Produit — filtré selon le magasin sélectionné -->
        <div class="filters-section">
            <select id="mvProdFilter" class="form-select" style="min-width:200px" title="Filtrer par produit (choisir un magasin d'abord)">
                <option value="">Tous les produits</option>
            </select>
        </div>

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

        <!-- Type de mouvement -->
        <div class="filters-section">
            <select id="mvTypeFilter" class="form-select" style="min-width:140px">
                <option value="">Tous les types</option>
                <option value="entry">📥 Entrée</option>
                <option value="add">➕ Ajout</option>
                <option value="remove">➖ Sortie</option>
                <option value="transfer">↔️ Transfert</option>
                <option value="inventory">📋 Inventaire</option>
            </select>
        </div>

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

        <!-- Dates -->
        <div class="filters-section">
            <input type="date" id="mvDateFrom" class="form-input" style="width:145px" title="Date début">
            <span class="text-muted">→</span>
            <input type="date" id="mvDateTo" class="form-input" style="width:145px" title="Date fin">
        </div>

        <!-- Boutons droite -->
        <div class="filters-section ml-auto">
            <button class="btn btn-secondary btn-sm" id="btnMvAdvanced" title="Filtres supplémentaires">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/>
                    <line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/>
                    <line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/>
                    <line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>
                </svg>
                Filtres +
            </button>
            <button class="btn btn-ghost btn-icon btn-sm" id="btnMvReset" title="Réinitialiser tous les filtres">
                <svg viewBox="0 0 24 24" 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>
            </button>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         FILTRES AVANCÉS (masqués par défaut)
         ═══════════════════════════════════════════════════════════ -->
    <div class="card mb-4" id="mvAdvancedWrap" style="display:none">
        <div class="card-body">
            <div class="form-grid">
                <div class="form-group mb-0">
                    <label class="form-label">Opérateur</label>
                    <input type="text" class="form-input" id="mvOpFilter" placeholder="Nom de l'opérateur">
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">Chantier / Site</label>
                    <input type="text" class="form-input" id="mvSiteFilter" placeholder="Nom du site">
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">BL / Référence</label>
                    <input type="text" class="form-input" id="mvDeliveryFilter" placeholder="Numéro BL">
                </div>
                <div class="form-group mb-0">
                    <label class="form-label">Fournisseur</label>
                    <input type="text" class="form-input" id="mvSupplierFilter" placeholder="Nom fournisseur">
                </div>
            </div>
        </div>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         BARRE D'ACTIONS + COMPTEUR
         ═══════════════════════════════════════════════════════════ -->
    <div class="flex items-center justify-between gap-4 mb-4 flex-wrap">
        <span class="results-count" id="mvCount">0 mouvement(s)</span>

        <?php if((currentUser()['role']??'')==='admin'): ?>
        <div class="flex gap-2 flex-wrap">
            <button class="btn btn-success" id="btnMvAdd">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
                Ajout stock
            </button>
            <button class="btn btn-danger" id="btnMvRemove">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    <line x1="5" y1="12" x2="19" y2="12"/>
                </svg>
                Sortie stock
            </button>
            <button class="btn btn-secondary" id="btnMvTransfer">
                <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>
                Transfert
            </button>
            <button class="btn btn-primary" id="btnMvEntry">
                <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>
                Entrée
            </button>
        </div>
        <?php endif; ?>
    </div>

    <!-- ═══════════════════════════════════════════════════════════
         TABLEAU
         ═══════════════════════════════════════════════════════════ -->
    <div class="card">
        <div class="table-container">
            <table class="data-table" id="mvTable">
                <thead>
                    <tr>
                        <th data-sort="date">Date / Heure</th>
                        <th data-sort="type">Type</th>
                        <th data-sort="__product">Produit</th>
                        <th data-sort="__sku">SKU</th>
                        <th data-sort="__warehouse">Magasin</th>
                        <th class="cell-center" data-sort="quantity">Qté</th>
                        <th class="cell-center" data-sort="__stock">Stock</th>
                        <th data-sort="reason">Raison / Chantier</th>
                        <th data-sort="operator">Opérateur</th>
                        <th>Note</th>
                        <th>Document</th>
                        <th class="cell-center" title="BL = Bon de Livraison individuel | Site = BL groupé par chantier | BC = Bon de Commande">Pièce <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="2.5" style="vertical-align:-1px;opacity:.5"><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></th>
                    </tr>
                </thead>
                <tbody id="mvBody"></tbody>
            </table>
        </div>

        <!-- Pagination -->
        <div class="pagination-bar">
            <div class="pagination-info" id="mvPageInfo">Page 1 / 1</div>
            <div class="pagination-controls">
                <button class="pagination-btn" id="mvPrev" disabled>
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="15 18 9 12 15 6"/>
                    </svg>
                    Précédent
                </button>
                <button class="pagination-btn" id="mvNext">
                    Suivant
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2">
                        <polyline points="9 18 15 12 9 6"/>
                    </svg>
                </button>
                <select id="mvPageSize" class="form-select" style="width:auto">
                    <option value="20">20 / page</option>
                    <option value="50">50 / page</option>
                    <option value="100">100 / page</option>
                </select>
            </div>
        </div>
    </div>
</div>
