<?php
/**
 * Fichier  : views/alerts.php
 * Auteur   : KREMER Régis
 * Version  : 2.3.15
 * Date     : 2026-03-01
 * Description : Vue — Alertes de stock — filtres Magasin + Catégorie + Statut
 *
 * Changelog :
 *   v2.3.15 (2026-03-01) — Ajout filtres Catégorie et Statut, ordre cohérent
 */
?>
<div class="alerts" id="pgAlerts">

    <!-- ═══════════════════════════════════════════════════════════
         BARRE DE FILTRES
         Ordre : Recherche → Magasin → Catégorie → Statut → Action
         ═══════════════════════════════════════════════════════════ -->
    <div class="filters-bar">

        <!-- Recherche texte -->
        <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="alertSearch" placeholder="Rechercher un produit, SKU…">
            </div>
        </div>

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

        <!-- ① Magasin — pilote la liste produits dans la modal -->
        <div class="filters-section">
            <select id="alertWhFilter" class="form-select" style="min-width:160px" title="Filtrer par magasin">
                <option value="">Tous les magasins</option>
            </select>
        </div>

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

        <!-- ② Catégorie -->
        <div class="filters-section">
            <select id="alertCatFilter" class="form-select" style="min-width:150px" title="Filtrer par catégorie">
                <option value="">Toutes catégories</option>
            </select>
        </div>

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

        <!-- Statut -->
        <div class="filters-section">
            <select id="alertStatusFilter" class="form-select" style="min-width:140px">
                <option value="">Tous les statuts</option>
                <option value="triggered">⚠ Alertes actives</option>
                <option value="ok">✓ OK</option>
            </select>
        </div>

        <!-- Bouton nouvelle alerte -->
        <div class="filters-section ml-auto">
            <button class="btn btn-primary" id="btnNewAlert">
                <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>
                Nouvelle alerte
            </button>
        </div>
    </div>

    <!-- KPI -->
    <div class="kpi-grid mb-6" id="alertSummary">
        <div class="kpi-card danger">
            <div class="kpi-header">
                <div class="kpi-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <circle cx="12" cy="12" r="10"/>
                        <line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
                    </svg>
                </div>
            </div>
            <div class="kpi-value" id="alertCriticalCount">0</div>
            <div class="kpi-label">Alertes critiques</div>
        </div>
        <div class="kpi-card warning">
            <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="alertWarningCount">0</div>
            <div class="kpi-label">Alertes actives</div>
        </div>
        <div class="kpi-card success">
            <div class="kpi-header">
                <div class="kpi-icon">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                        <path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/>
                    </svg>
                </div>
            </div>
            <div class="kpi-value" id="alertOkCount">0</div>
            <div class="kpi-label">Produits OK</div>
        </div>
    </div>

    <!-- Status actuel -->
    <div class="card mb-4">
        <div class="card-header">
            <h3 class="card-title">Statut actuel</h3>
        </div>
        <div class="card-body" id="alertStatusList">
            <!-- Rempli par JS -->
        </div>
    </div>

    <!-- Tableau des règles -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">Règles d'alerte</h3>
        </div>
        <div class="table-container">
            <table class="data-table" id="alertTable">
                <thead>
                    <tr>
                        <th data-sort="__warehouse">Magasin</th>
                        <th data-sort="__product">Produit</th>
                        <th data-sort="__sku">SKU</th>
                        <th class="cell-number" data-sort="__minThr">Seuil min ⬇</th>
                        <th class="cell-number" data-sort="__maxThr">Seuil max ⬆</th>
                        <th class="cell-number" data-sort="currentQty">Qté actuelle</th>
                        <th data-sort="__status">Statut</th>
                        <th class="cell-actions">Actions</th>
                    </tr>
                </thead>
                <tbody id="alertBody"></tbody>
            </table>
        </div>
    </div>
</div>
