<?php
/**
 * Fichier  : views/scanner.php
 * Auteur   : KREMER Régis
 * Version  : 2.6.96
 * Date     : 2026-07-20
 * Description : Vue Scanner unifiée — expérience camera-first mobile/tablette et poste desktop préservé.
 *
 * Changelog :
 *   v2.1.0 (2026-02-21) — Version initiale auditée et sécurisée
 *   v2.3.7 (2026-06-02) — UX terrain scanner et fiche produit scannée
 *   v2.3.8 (2026-06-02) — Mouvements terrain et boîte d’envoi hors ligne
 *   v2.6.4 (2026-07-08) — Parcours terrain mobile/tablette et emplacements
 *   v2.6.89 (2026-07-20) — SCANNER MOBILE EXPERIENCE2 : page camera-first, résultat en volet,
 *                           outils secondaires regroupés et historique organisé.
 *   v2.6.91 (2026-07-20) — SCANNER FULL FIELD RECETTE4 : commande caméra centrale,
 *                           résultat produit restructuré et recette cumulative du scanner unique.
 *   v2.6.92 (2026-07-20) — SCANNER UX POLISH OPTIONAL1 : barre premium avec Historique à droite,
 *                           fiche produit simplifiée et actions hiérarchisées.
 *   v2.6.93 (2026-07-20) — SCANNER UX POLISH FIX2 : Historique et Attente séparés autour de la caméra.
 *   v2.6.96 (2026-07-20) — SCANNER RESULT FLOW FIX4 : affichage fiable des produits successifs,
 *                           fiche compacte et icônes réduites.
 *   v2.6.94 (2026-07-20) — SCANNER UX FINAL FIELD VALIDATION2 : validation cumulative,
 *                           sons amorcés et scan en chaîne fiabilisé sur tous les contextes.
 */
?>
<link rel="stylesheet" href="<?= htmlspecialchars(assetUrl('css/scanner_terrain.css?v=' . filemtime(__DIR__ . '/../assets/css/scanner_terrain.css'))) ?>">

<div class="scanner scanner-page" id="pgScanner">
    <header class="scanner-page-header">
        <div class="scanner-page-heading">
            <p class="scanner-eyebrow">Outil terrain</p>
            <h1>Scanner un produit</h1>
            <p>Cadrez un code-barres ou un QR MageStock pour consulter le produit et agir immédiatement.</p>
        </div>
        <div class="scanner-page-header-actions" aria-label="Outils du scanner">
            <button class="btn btn-secondary scanner-touch-only" id="btnScannerOptions" type="button">
                <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.9l.1.1-2.8 2.8-.1-.1a1.7 1.7 0 0 0-1.9-.3 1.7 1.7 0 0 0-1 1.6v.2h-4V21a1.7 1.7 0 0 0-1-1.6 1.7 1.7 0 0 0-1.9.3l-.1.1L4.2 17l.1-.1a1.7 1.7 0 0 0 .3-1.9A1.7 1.7 0 0 0 3 14H2.8v-4H3a1.7 1.7 0 0 0 1.6-1 1.7 1.7 0 0 0-.3-1.9L4.2 7 7 4.2l.1.1A1.7 1.7 0 0 0 9 4.6a1.7 1.7 0 0 0 1-1.6v-.2h4V3a1.7 1.7 0 0 0 1 1.6 1.7 1.7 0 0 0 1.9-.3l.1-.1L19.8 7l-.1.1a1.7 1.7 0 0 0-.3 1.9 1.7 1.7 0 0 0 1.6 1h.2v4H21a1.7 1.7 0 0 0-1.6 1z"></path></svg>
                <span>Options</span>
            </button>
        </div>
    </header>

    <div class="scanner-workspace">
        <main class="scanner-camera-column">
            <section class="scanner-stage" aria-labelledby="scannerStageTitle">
                <h2 class="sr-only" id="scannerStageTitle">Caméra du scanner</h2>
                <div class="scanner-preview" id="scannerPreview">
                    <video id="scannerVideo" autoplay playsinline muted></video>
                    <div class="scanner-frame" aria-hidden="true">
                        <div class="scanner-line"></div>
                    </div>
                    <div class="scanner-placeholder" id="scannerPlaceholder">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
                        <strong>Caméra inactive</strong>
                        <span>Activez-la puis placez le code dans le cadre.</span>
                    </div>
                    <div class="scanner-camera-guidance" aria-hidden="true">
                        <span>Maintenez le code net et bien éclairé</span>
                    </div>
                </div>

                <div class="scanner-status scanner-status-idle" id="scannerStatus" role="status" aria-live="polite">Caméra inactive</div>

                <div class="scanner-primary-actions">
                    <button class="btn btn-primary scanner-camera-primary" id="btnStartScan" type="button">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
                        <span>Activer la caméra</span>
                    </button>
                    <button class="btn btn-danger scanner-camera-primary" id="btnStopScan" type="button" style="display:none">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="6" y="6" width="12" height="12"></rect></svg>
                        <span>Arrêter la caméra</span>
                    </button>
                </div>

                <div class="scanner-utility-actions scanner-desktop-tools" aria-label="Autres méthodes de scan">
                    <button class="btn btn-secondary" id="btnScanImage" type="button">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="m21 15-5-5L5 21"></path></svg>
                        Lire une image
                    </button>
                    <button class="btn btn-secondary" id="btnScanQR" type="button">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
                        QR dédié
                    </button>
                    <button class="btn btn-secondary" id="btnTerrainMode" type="button" title="Masquer le chrome de l’application">
                        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3"></path><path d="M16 3h3a2 2 0 0 1 2 2v3"></path><path d="M21 16v3a2 2 0 0 1-2 2h-3"></path><path d="M3 16v3a2 2 0 0 0 2 2h3"></path></svg>
                        Mode terrain
                    </button>
                </div>
                <input type="file" id="scanFileInput" accept="image/*" hidden>
            </section>

            <div id="scanResultMount">
                <section class="scanner-result-card" id="scanResultCard" style="display:none" aria-labelledby="scanResultTitle">
                    <div class="scan-result" id="scanResult">
                        <div class="scan-result-heading">
                            <span class="scan-result-icon" aria-hidden="true">
                                <svg viewBox="0 0 24 24"><path d="M22 11.1V12a10 10 0 1 1-5.9-9.1"></path><path d="m22 4-10 10-3-3"></path></svg>
                            </span>
                            <div>
                                <p class="scan-result-kicker">Résultat du scan</p>
                                <h2 class="scan-result-title" id="scanResultTitle">Produit trouvé</h2>
                            </div>
                        </div>
                        <div class="scan-result-text" id="scanResultText">-</div>
                    </div>
                    <div class="scan-result-actions" id="scanResultActions"></div>

                    <div class="terrain-panel" id="terrainPanel" style="display:none">
                        <div class="terrain-panel-heading">
                            <div>
                                <p class="scanner-eyebrow">Mouvement rapide</p>
                                <h3>Mettre à jour le stock</h3>
                            </div>
                            <span class="terrain-panel-note">La quantité reste vide pour éviter une validation accidentelle.</span>
                        </div>

                        <div class="terrain-row">
                            <div class="terrain-col">
                                <label class="lbl" for="tsWh">Magasin</label>
                                <select class="sel" id="tsWh"></select>
                            </div>
                            <div class="terrain-col">
                                <label class="lbl" for="tsLoc">Emplacement</label>
                                <select class="sel" id="tsLoc"></select>
                            </div>
                        </div>

                        <div class="terrain-row">
                            <div class="terrain-col">
                                <label class="lbl" for="tsUnit">Unité</label>
                                <select class="sel" id="tsUnit"></select>
                            </div>
                            <div class="terrain-col terrain-col-qty">
                                <label class="lbl" for="tsQty">Quantité</label>
                                <div class="terrain-qty">
                                    <button class="btn btn-secondary" id="tsMinus1" type="button" aria-label="Retirer une unité">−1</button>
                                    <input class="inp" id="tsQty" type="number" min="0" step="0.01" value="" placeholder="0" inputmode="decimal" autocomplete="off">
                                    <button class="btn btn-secondary" id="tsPlus1" type="button" aria-label="Ajouter une unité">+1</button>
                                    <button class="btn btn-secondary" id="tsPlus5" type="button" aria-label="Ajouter cinq unités">+5</button>
                                </div>
                            </div>
                        </div>

                        <div class="terrain-stock-info" id="tsStockInfo" role="status" aria-live="polite">Sélectionnez un magasin pour voir le stock et le rangement disponible.</div>

                        <div class="terrain-actions">
                            <button class="btn btn-success" id="tsDoAdd" type="button">＋ Ajouter</button>
                            <button class="btn btn-danger" id="tsDoRemove" type="button">− Sortir</button>
                            <button class="btn btn-secondary" id="tsQr" type="button">QR interne</button>
                            <button class="btn btn-secondary" id="tsSync" type="button" style="display:none">Synchroniser</button>
                            <button class="btn btn-secondary" id="tsOfflineBox" type="button" style="display:none">Voir attente</button>
                        </div>
                        <div class="terrain-hint" id="tsHint" style="display:none"></div>
                    </div>
                </section>
            </div>
        </main>

        <aside class="scanner-side-column scanner-desktop-tools" aria-label="Outils et historique du scanner">
            <section class="card scanner-manual-card">
                <div class="card-header"><h2 class="card-title">Saisie manuelle</h2></div>
                <div class="card-body">
                    <p class="scanner-secondary-copy">Utilisez un code-barres, un EAN, un SKU ou un QR interne.</p>
                    <div class="manual-scan-row">
                        <div class="manual-scan-input-wrap">
                            <input type="search" class="form-input" id="manualCode" placeholder="Code, SKU ou QR interne" autocomplete="off" enterkeyhint="search" aria-label="Code-barres, SKU ou QR interne">
                            <button class="manual-clear-btn" id="btnManualClear" type="button" aria-label="Effacer la saisie" style="display:none">×</button>
                        </div>
                        <button class="btn btn-primary" id="btnManualSearch" type="button">Rechercher</button>
                    </div>
                </div>
            </section>

            <section class="card scanner-recent-card">
                <div class="card-header scanner-recent-header">
                    <div>
                        <h2 class="card-title">Scans récents</h2>
                        <p class="scanner-secondary-copy">Accès rapide aux derniers produits identifiés.</p>
                    </div>
                    <button class="btn btn-secondary btn-sm" id="btnClearRecent" type="button" style="display:none">Vider</button>
                </div>
                <div class="card-body card-body-flush">
                    <div class="recent-scans" id="recentScans">
                        <div class="empty-state">
                            <div class="empty-title">Aucun scan récent</div>
                            <div class="empty-text">Les codes identifiés apparaîtront ici.</div>
                        </div>
                    </div>
                </div>
            </section>
        </aside>
    </div>

    <nav class="scanner-mobile-toolbar scanner-touch-only" aria-label="Outils rapides du scanner">
        <div class="scanner-mobile-toolbar-group scanner-mobile-toolbar-group--left">
            <button type="button" id="btnScannerManual">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 4h16v16H4z"></path><path d="M8 9h8M8 13h5"></path></svg>
                <span>Saisir</span>
            </button>
            <button type="button" id="btnScannerImage">
                <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"></rect><circle cx="8.5" cy="8.5" r="1.5"></circle><path d="m21 15-5-5L5 21"></path></svg>
                <span>Image</span>
            </button>
        </div>
        <button type="button" id="btnScannerCamera" class="scanner-camera-toggle" aria-pressed="false" aria-label="Activer la caméra">
            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
            <span>Caméra</span>
        </button>
        <div class="scanner-mobile-toolbar-group scanner-mobile-toolbar-group--right">
            <button type="button" id="btnScannerHistory" aria-label="Ouvrir l’historique des scans">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 12a9 9 0 1 0 3-6.7"></path><path d="M3 4v6h6"></path><path d="M12 7v5l3 2"></path></svg>
                <span>Historique</span>
                <strong id="scannerHistoryBadge" class="scanner-toolbar-badge scanner-toolbar-badge--history" hidden>0</strong>
            </button>
            <button type="button" id="btnScannerQueue" aria-label="Ouvrir les mouvements en attente">
                <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 6h16"></path><path d="M4 12h16"></path><path d="M4 18h10"></path><path d="m17 16 3 3-3 3"></path></svg>
                <span>Attente</span>
                <strong id="scannerQueueBadge" class="scanner-toolbar-badge scanner-toolbar-badge--queue" hidden>0</strong>
            </button>
        </div>
    </nav>
</div>
