<?php /* barcodes.php — KREMER Régis v2.2.0 */ ?>
<link rel="stylesheet" href="assets/css/barcodes.css?v=2.3.1">
<link rel="stylesheet" href="assets/css/barcodes.print.css?v=2.3.1" media="print">
<div class="page-body">

    <!-- ============================================================
         GÉNÉRATEUR D'ÉTIQUETTES (refonte)
         ============================================================ -->
    <section class="page-sect">
        <div class="sect-hdr" style="display:flex;align-items:center;justify-content:space-between;gap:12px">
            <div>
                <h3 style="margin-bottom:2px">Générateur d’étiquettes</h3>
                <div style="font-size:12px;color:var(--text-muted)">Sélectionnez des produits, choisissez un style + un format, prévisualisez et imprimez.</div>
            </div>
            <div class="lg-hdr-actions">
                <button class="btn btn-secondary" id="btnLgClear">Vider</button>
                <button class="btn btn-secondary" id="btnLgPdf">Exporter PDF</button>
                <button class="btn btn-primary" id="btnLgPrint"><span data-icon="report"></span> Imprimer</button>
            </div>
        </div>

        <div class="lg-shell">
            <!-- Controls -->
            <div class="lg-panel">
                <div class="lg-tabs" role="tablist" aria-label="Options étiquettes">
                    <button class="lg-tab active" data-tab="style" type="button">🎨 Style</button>
                    <button class="lg-tab" data-tab="format" type="button">📏 Format</button>
                    <button class="lg-tab" data-tab="options" type="button">🖼️ Options</button>
                </div>

                <!-- STYLE -->
                <div class="lg-tabpane active" id="lgTabStyle" role="tabpanel">
                    <div class="lg-choice-grid">
                        <label class="lg-choice">
                            <input type="radio" name="lgStyle" value="img_barcode" checked>
                            <div class="lg-choice-body">
                                <div class="lg-choice-title">🖼️ Image + Code-barres</div>
                                <div class="lg-choice-desc">Visuel produit + code-barres compact</div>
                            </div>
                        </label>
                        <label class="lg-choice">
                            <input type="radio" name="lgStyle" value="barcode">
                            <div class="lg-choice-body">
                                <div class="lg-choice-title">📊 Code-barres seul</div>
                                <div class="lg-choice-desc">Impression rapide et lisible</div>
                            </div>
                        </label>
                        <label class="lg-choice">
                            <input type="radio" name="lgStyle" value="qr">
                            <div class="lg-choice-body">
                                <div class="lg-choice-title">🏷️ QR Code</div>
                                <div class="lg-choice-desc">Encodage texte/URL ou payload produit</div>
                            </div>
                        </label>
                        <label class="lg-choice">
                            <input type="radio" name="lgStyle" value="full">
                            <div class="lg-choice-body">
                                <div class="lg-choice-title">📋 Étiquette complète</div>
                                <div class="lg-choice-desc">Image + infos + code-barres</div>
                            </div>
                        </label>
                    </div>

                    <div class="lg-fieldset" style="margin-top:14px">
                        <label class="lbl">Format de code-barres</label>
                        <select class="sel" id="lgBarcodeFmt">
                            <option value="CODE128">CODE128</option>
                            <option value="EAN13">EAN13</option>
                            <option value="UPC">UPC</option>
                        </select>

                        <label class="lbl" style="margin-top:10px">Code personnalisé (optionnel)</label>
                        <input type="text" class="inp" id="lgCustomCode" placeholder="Entrer un code… (sinon SKU / code-barres produit)">
                    </div>
                </div>

                <!-- FORMAT -->
                <div class="lg-tabpane" id="lgTabFormat" role="tabpanel">
                    <div class="lg-choice-grid">
                        <label class="lg-choice">
                            <input type="radio" name="lgFormat" value="A4_24" checked>
                            <div class="lg-choice-body">
                                <div class="lg-choice-title">📄 A4 — planche 24</div>
                                <div class="lg-choice-desc">3 colonnes × 8 lignes</div>
                            </div>
                        </label>
                        <label class="lg-choice">
                            <input type="radio" name="lgFormat" value="Avery_L7160">
                            <div class="lg-choice-body">
                                <div class="lg-choice-title">🏷️ Avery L7160</div>
                                <div class="lg-choice-desc">63,5×38,1mm (3×7)</div>
                            </div>
                        </label>
                        <label class="lg-choice">
                            <input type="radio" name="lgFormat" value="70x37">
                            <div class="lg-choice-body">
                                <div class="lg-choice-title">📦 70×37mm</div>
                                <div class="lg-choice-desc">3×8 (approx.)</div>
                            </div>
                        </label>
                        <label class="lg-choice">
                            <input type="radio" name="lgFormat" value="105x37">
                            <div class="lg-choice-body">
                                <div class="lg-choice-title">📦 105×37mm</div>
                                <div class="lg-choice-desc">2 colonnes (approx.)</div>
                            </div>
                        </label>
                        <label class="lg-choice">
                            <input type="radio" name="lgFormat" value="custom">
                            <div class="lg-choice-body">
                                <div class="lg-choice-title">🎯 Personnalisé</div>
                                <div class="lg-choice-desc">Largeur/hauteur + grille</div>
                            </div>
                        </label>
                    </div>

                    <div class="lg-fieldset" id="lgCustomFormat" style="display:none;margin-top:12px">
                        <div style="display:flex;gap:10px;flex-wrap:wrap">
                            <div style="flex:1;min-width:120px">
                                <label class="lbl">Largeur (mm)</label>
                                <input class="inp" id="lgCWidth" type="number" min="20" step="0.1" value="70">
                            </div>
                            <div style="flex:1;min-width:120px">
                                <label class="lbl">Hauteur (mm)</label>
                                <input class="inp" id="lgCHeight" type="number" min="15" step="0.1" value="37">
                            </div>
                            <div style="flex:1;min-width:120px">
                                <label class="lbl">Colonnes</label>
                                <input class="inp" id="lgCCols" type="number" min="1" step="1" value="3">
                            </div>
                            <div style="flex:1;min-width:120px">
                                <label class="lbl">Lignes</label>
                                <input class="inp" id="lgCRows" type="number" min="1" step="1" value="8">
                            </div>
                        </div>
                    </div>
                </div>

                <!-- OPTIONS -->
                <div class="lg-tabpane" id="lgTabOptions" role="tabpanel">
                    <div class="lg-fieldset">
                        <label class="lbl">Contenu</label>
                        <div class="lg-toggles">
                            <label class="tog"><input type="checkbox" id="lgShowName" checked> <span>Nom</span></label>
                            <label class="tog"><input type="checkbox" id="lgShowSku" checked> <span>SKU</span></label>
                            <label class="tog"><input type="checkbox" id="lgShowCode" checked> <span>Code</span></label>
                            <label class="tog"><input type="checkbox" id="lgShowImage" checked> <span>Image</span></label>
                        </div>

                        <label class="lbl" style="margin-top:12px">QR — texte personnalisé (optionnel)</label>
                        <input type="text" class="inp" id="lgCustomQr" placeholder="URL / texte… (sinon payload produit)">

                        <div style="display:flex;justify-content:flex-end;margin-top:10px">
                            <button class="btn btn-secondary" id="btnLgQrScan">📷 Scanner un QR</button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Preview -->
            <div class="lg-preview">
                <div class="lg-preview-hdr">
                    <div>
                        <div class="lg-preview-title">Prévisualisation</div>
                        <div class="lg-preview-sub" id="lgPreviewSub">Aucune sélection</div>
                    </div>
                    <div class="lg-preview-meta" id="lgPreviewMeta"></div>
                </div>

                <div class="lg-preview-card">
                    <div class="lg-sample" id="lgSample"></div>
                </div>
            </div>
        </div>
    </section>

    <!-- ============================================================
         SÉLECTION PRODUITS
         ============================================================ -->
    <section class="page-sect">
        <div class="sect-hdr" style="display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap">
            <h3>📦 Sélection produits</h3>
            <div class="lg-filters">
                <input type="text" class="inp inp-search" id="lgSearch" placeholder="🔍 Rechercher produit, SKU, code-barres…">
                <select class="sel" id="lgWh"><option value="">Tous magasins</option></select>
                <select class="sel" id="lgCat"><option value="">Toutes catégories</option></select>
            </div>
        </div>
        <div class="card-body" style="padding:0">
            <div id="lgProdGrid" class="lg-prod-grid"></div>
        </div>
    </section>

</div>

<!-- Print overlay (sheet preview) -->
<div id="lgPrintOverlay" class="print-overlay" style="display:none">
    <div class="print-hdr">
        <h2 id="lgPrintTitle">Impression</h2>
        <div class="print-hdr-btns">
            <button class="btn btn-secondary" id="lgBtnClosePrint">Fermer</button>
            <button class="btn btn-primary" id="lgBtnDoPrint"><span data-icon="report"></span> Lancer l'impression</button>
        </div>
    </div>
    <div id="lgPrintSheet" class="lg-print-sheet"></div>
</div>

<script>window.SM_PAGE = 'barcodes';</script>
