<?php
/**
 * Fichier  : views/scanner.php
 * Auteur   : KREMER Régis
 * Version  : 2.2.0
 * Date     : 2026-02-21
 * Description : Vue — Page scanner code-barres mobile
 *
 * Changelog :
 *   v2.1.0 (2026-02-21) — Version initiale auditée et sécurisée
 *   v2.1.1 (2026-02-21) — Corrections sécurité (CSRF, MIME, session, migrateSuppliers)
 *   v2.2.0 (2026-02-21) — Permissions magasins, bons de commande, rapport d'écart,
 *                      import CSV, historique prix, bon de livraison multi-lignes
 */
 /* scanner.php — Scanner codes-barres v4 */ ?>
<div class="scanner" id="pgScanner">
    <div class="scanner-container">
        <!-- Scanner Box -->
        <div class="card mb-4">
            <div class="card-body">
                <div class="scanner-preview" id="scannerPreview">
                    <video id="scannerVideo" autoplay playsinline></video>
                    <div class="scanner-frame">
                        <div class="scanner-line"></div>
                    </div>
                    <div class="scanner-placeholder" id="scannerPlaceholder">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/>
                            <circle cx="12" cy="13" r="4"/>
                        </svg>
                        <p>Caméra inactive</p>
                    </div>
                </div>
                
                <div class="flex gap-2 mt-4 flex-wrap justify-center">
                    <button class="btn btn-primary" id="btnStartScan">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"/>
                            <circle cx="12" cy="13" r="4"/>
                        </svg>
                        Activer caméra
                    </button>
                    <button class="btn btn-danger" id="btnStopScan" style="display: none;">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="6" y="6" width="12" height="12"/>
                        </svg>
                        Arrêter
                    </button>
                    <button class="btn btn-secondary" id="btnScanImage">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                            <circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
                        </svg>
                        Image
                    </button>
                    <button class="btn btn-secondary" id="btnScanQR">
                        <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>
                        QR Code
                    </button>

                    <!-- Lot 5 — Mode terrain (plein écran + actions rapides) -->
                    <button class="btn btn-secondary" id="btnTerrainMode" title="Mode terrain (plein écran)">
                        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <path d="M8 3H5a2 2 0 0 0-2 2v3"/><path d="M16 3h3a2 2 0 0 1 2 2v3"/>
                            <path d="M21 16v3a2 2 0 0 1-2 2h-3"/><path d="M3 16v3a2 2 0 0 0 2 2h3"/>
                        </svg>
                        Terrain
                    </button>
                </div>
                <input type="file" id="scanFileInput" accept="image/*" style="display: none;">
            </div>
        </div>

        <!-- Scan Result -->
        <div class="card mb-4" id="scanResultCard" style="display: none;">
            <div class="card-body">
                <div class="scan-result" id="scanResult">
                    <div class="scan-result-icon success">
                        <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 class="scan-result-content">
                        <div class="scan-result-title" id="scanResultTitle">Produit trouvé</div>
                        <div class="scan-result-text" id="scanResultText">-</div>
                    </div>
                </div>
                <div class="flex gap-2 mt-4 justify-center" id="scanResultActions"></div>

                <!-- Lot 5 — panneau terrain (injecté/activé par scanner.js) -->
                <div class="terrain-panel" id="terrainPanel" style="display:none">
                    <div class="terrain-row">
                        <div class="terrain-col">
                            <label class="lbl">Magasin</label>
                            <select class="sel" id="tsWh"></select>
                        </div>
                        <div class="terrain-col">
                            <label class="lbl">Emplacement</label>
                            <select class="sel" id="tsLoc"></select>
                        </div>
                    </div>

                    <div class="terrain-row">
                        <div class="terrain-col">
                            <label class="lbl">Unité</label>
                            <select class="sel" id="tsUnit"></select>
                        </div>
                        <div class="terrain-col">
                            <label class="lbl">Quantité</label>
                            <div class="terrain-qty">
                                <button class="btn btn-secondary" id="tsMinus1" type="button">-1</button>
                                <input class="inp" id="tsQty" type="number" min="0" step="0.01" value="1">
                                <button class="btn btn-secondary" id="tsPlus1" type="button">+1</button>
                                <button class="btn btn-secondary" id="tsPlus5" type="button">+5</button>
                            </div>
                        </div>
                    </div>

                    <div class="terrain-row 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>
                    </div>

                    <div class="terrain-hint" id="tsHint" style="display:none"></div>
                </div>
            </div>
        </div>

        <!-- Manual Entry -->
        <div class="card mb-4">
            <div class="card-header">
                <h3 class="card-title">Saisie manuelle</h3>
            </div>
            <div class="card-body">
                <div class="flex gap-2">
                    <input type="text" class="form-input flex-1" id="manualCode" placeholder="Entrer code-barres ou SKU...">
                    <button class="btn btn-primary" id="btnManualSearch">Rechercher</button>
                </div>
            </div>
        </div>

        <!-- Recent Scans -->
        <div class="card">
            <div class="card-header">
                <h3 class="card-title">Scans récents</h3>
            </div>
            <div class="card-body card-body-flush">
                <div class="recent-scans" id="recentScans">
                    <div class="empty-state">
                        <div class="empty-icon">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
                                <line x1="7" y1="8" x2="7" y2="16"/><line x1="11" y1="8" x2="11" y2="16"/>
                                <line x1="15" y1="8" x2="15" y2="16"/>
                            </svg>
                        </div>
                        <div class="empty-title">Aucun scan récent</div>
                        <div class="empty-text">Les codes scannés apparaîtront ici</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
