<?php
/**
 * Fichier  : views/barcodes.php
 * Auteur   : KREMER Régis
 * Version  : 2.6.83
 * Date     : 2026-07-20
 * Description : Génération des étiquettes — assistant tactile mobile/tablette et espace desktop historique.
 *
 * Changelog :
 *   v3.4.0  — Filtres stock réel et export fidèle à la prévisualisation.
 *   v2.6.83 — BARCODES WIZARD7 : parcours tactile Sélection → Style → Format/options → Vérification.
 */
?>
<link rel="stylesheet" href="assets/css/barcodes.css?v=2.6.83">

<div class="page-body bc-page" id="pgBarcodes">

<!-- ═══════════════════════════════════════════════════════
     ASSISTANT MOBILE / TABLETTE
     Le comportement est initialisé par barcodes-mobile.js.
     ═══════════════════════════════════════════════════════ -->
<section class="bc-mobile-wizard" id="bcMobileWizard" aria-labelledby="bcMobileTitle">
    <header class="bc-mobile-wizard__header">
        <div>
            <span class="bc-mobile-wizard__eyebrow">Création guidée</span>
            <h2 id="bcMobileTitle">Étiquettes et codes-barres</h2>
            <p>Préparez une planche lisible en quatre étapes.</p>
        </div>
        <button type="button" class="btn btn-secondary bc-mobile-wizard__clear" id="bcMobClear" aria-label="Vider la préparation">Vider</button>
    </header>

    <div class="bc-mobile-progress" data-ms-flow-progress></div>
    <nav class="bc-mobile-steps" aria-label="Progression de la préparation">
        <button type="button" data-ms-flow-indicator="1" data-ms-flow-go="1" data-ms-flow-validate="false">
            <span>1</span><strong>Produits</strong>
        </button>
        <button type="button" data-ms-flow-indicator="2" data-ms-flow-go="2" data-ms-flow-validate="false">
            <span>2</span><strong>Style</strong>
        </button>
        <button type="button" data-ms-flow-indicator="3" data-ms-flow-go="3" data-ms-flow-validate="false">
            <span>3</span><strong>Format</strong>
        </button>
        <button type="button" data-ms-flow-indicator="4" data-ms-flow-go="4" data-ms-flow-validate="false">
            <span>4</span><strong>Vérifier</strong>
        </button>
    </nav>

    <!-- Étape 1 : sélection -->
    <section class="bc-mobile-step" data-ms-flow-step="1">
        <div class="bc-mobile-step__intro">
            <div>
                <span class="bc-mobile-step__count">Étape 1 sur 4</span>
                <h3 data-ms-flow-title>Sélection des produits</h3>
                <p>Recherchez les produits et définissez le nombre d’étiquettes à imprimer.</p>
            </div>
            <output class="bc-mobile-selection-count" id="bcMobSelectionCount">0 étiquette</output>
        </div>

        <div class="bc-mobile-searchbar">
            <label class="sr-only" for="bcMobSearch">Rechercher un produit</label>
            <input type="search" class="inp" id="bcMobSearch" name="bcMobSearch" placeholder="Produit, SKU, code-barres ou EAN" autocomplete="off" enterkeyhint="search">
            <button type="button" class="btn btn-secondary bc-mobile-filter-button" id="bcMobOpenFilters" aria-haspopup="dialog">
                Filtres <span class="bc-mobile-filter-count" id="bcMobFilterCount" hidden>0</span>
            </button>
        </div>

        <div class="bc-mobile-active-filters" id="bcMobActiveFilters" aria-live="polite"></div>

        <div class="bc-mobile-list-tools">
            <span id="bcMobResultsCount">0 produit</span>
            <div>
                <button type="button" class="btn btn-ghost btn-sm" id="bcMobSelectVisible">Tout sélectionner</button>
                <button type="button" class="btn btn-ghost btn-sm" id="bcMobClearSelection" hidden>Désélectionner</button>
            </div>
        </div>

        <div class="bc-mobile-product-list" id="bcMobProductList" aria-live="polite"></div>
        <div class="bc-mobile-load-more" id="bcMobLoadMore"></div>

        <footer class="bc-mobile-actions" data-ms-sticky-actions data-ms-keyboard-behavior="hide">
            <span class="bc-mobile-actions__summary" id="bcMobStep1Summary">Sélectionnez au moins un produit</span>
            <button type="button" class="btn btn-primary" data-ms-flow-next id="bcMobStep1Next" disabled>Suivant</button>
        </footer>
    </section>

    <!-- Étape 2 : style -->
    <section class="bc-mobile-step" data-ms-flow-step="2">
        <div class="bc-mobile-step__intro">
            <div>
                <span class="bc-mobile-step__count">Étape 2 sur 4</span>
                <h3 data-ms-flow-title>Style de l’étiquette</h3>
                <p>Choisissez la présentation et le type de code à générer.</p>
            </div>
        </div>

        <div class="bc-mobile-config-layout">
            <div class="bc-mobile-choice-grid" role="radiogroup" aria-label="Style de l’étiquette">
                <label class="bc-mobile-choice">
                    <input type="radio" name="bcMobStyle" value="img_barcode" checked>
                    <span aria-hidden="true">▣</span>
                    <strong>Image + code-barres</strong>
                    <small>Repérage visuel rapide</small>
                </label>
                <label class="bc-mobile-choice">
                    <input type="radio" name="bcMobStyle" value="barcode">
                    <span aria-hidden="true">▥</span>
                    <strong>Code-barres seul</strong>
                    <small>Impression simple et dense</small>
                </label>
                <label class="bc-mobile-choice">
                    <input type="radio" name="bcMobStyle" value="qr">
                    <span aria-hidden="true">▦</span>
                    <strong>QR Code</strong>
                    <small>Texte, URL ou fiche produit</small>
                </label>
                <label class="bc-mobile-choice">
                    <input type="radio" name="bcMobStyle" value="full">
                    <span aria-hidden="true">▤</span>
                    <strong>Étiquette complète</strong>
                    <small>Image, informations et code</small>
                </label>
            </div>

            <div class="bc-mobile-form-card">
                <label for="bcMobBarcodeFmt">Format du code-barres</label>
                <select class="sel" id="bcMobBarcodeFmt" name="bcMobBarcodeFmt">
                    <option value="CODE128">CODE128 — universel</option>
                    <option value="EAN13">EAN13 — 12 ou 13 chiffres</option>
                    <option value="UPC">UPC — 11 ou 12 chiffres</option>
                </select>

                <div id="bcMobBarcodeFields">
                    <label for="bcMobCustomCode">Code personnalisé <span>facultatif</span></label>
                    <input type="text" class="inp" id="bcMobCustomCode" name="bcMobCustomCode" placeholder="Sinon le code du produit est utilisé" autocomplete="off">
                </div>

                <div id="bcMobQrFields" hidden>
                    <label for="bcMobCustomQr">Texte ou URL du QR <span>facultatif</span></label>
                    <input type="text" class="inp" id="bcMobCustomQr" name="bcMobCustomQr" placeholder="Sinon la fiche produit est encodée" autocomplete="off">
                </div>

                <p class="bc-mobile-validation" id="bcMobCodeValidation" role="alert" hidden></p>
            </div>

            <aside class="bc-mobile-live-preview" aria-labelledby="bcMobStylePreviewTitle">
                <div class="bc-mobile-preview-heading">
                    <div>
                        <span>Aperçu tactile</span>
                        <h4 id="bcMobStylePreviewTitle">Première étiquette</h4>
                    </div>
                    <small id="bcMobStylePreviewMeta"></small>
                </div>
                <div class="bc-mobile-preview-surface" id="bcMobStylePreview"></div>
            </aside>
        </div>

        <footer class="bc-mobile-actions" data-ms-sticky-actions data-ms-keyboard-behavior="hide">
            <button type="button" class="btn btn-secondary" data-ms-flow-back>Retour</button>
            <button type="button" class="btn btn-primary" data-ms-flow-next>Suivant</button>
        </footer>
    </section>

    <!-- Étape 3 : format et options -->
    <section class="bc-mobile-step" data-ms-flow-step="3">
        <div class="bc-mobile-step__intro">
            <div>
                <span class="bc-mobile-step__count">Étape 3 sur 4</span>
                <h3 data-ms-flow-title>Format et options</h3>
                <p>Définissez la planche et les informations visibles sur chaque étiquette.</p>
            </div>
        </div>

        <div class="bc-mobile-format-grid" role="radiogroup" aria-label="Format de la planche">
            <label class="bc-mobile-format">
                <input type="radio" name="bcMobFormat" value="A4_21" checked>
                <strong>A4 — 21 étiquettes</strong><small>70 × 37 mm · 3 × 7</small>
            </label>
            <label class="bc-mobile-format">
                <input type="radio" name="bcMobFormat" value="Avery_L7160">
                <strong>Avery L7160</strong><small>63,5 × 38,1 mm · 3 × 7</small>
            </label>
            <label class="bc-mobile-format">
                <input type="radio" name="bcMobFormat" value="70x37">
                <strong>70 × 37 mm</strong><small>21 étiquettes par page</small>
            </label>
            <label class="bc-mobile-format">
                <input type="radio" name="bcMobFormat" value="105x37">
                <strong>105 × 37 mm</strong><small>14 étiquettes par page</small>
            </label>
            <label class="bc-mobile-format bc-mobile-format--wide">
                <input type="radio" name="bcMobFormat" value="custom">
                <strong>Format personnalisé</strong><small>Dimensions, colonnes et lignes libres</small>
            </label>
        </div>

        <div class="bc-mobile-custom-format" id="bcMobCustomFormat" hidden>
            <div>
                <label for="bcMobCWidth">Largeur (mm)</label>
                <input class="inp" id="bcMobCWidth" name="bcMobCWidth" type="number" min="20" max="190" step="0.1" value="60" inputmode="decimal">
            </div>
            <div>
                <label for="bcMobCHeight">Hauteur (mm)</label>
                <input class="inp" id="bcMobCHeight" name="bcMobCHeight" type="number" min="15" max="270" step="0.1" value="37" inputmode="decimal">
            </div>
            <div>
                <label for="bcMobCCols">Colonnes</label>
                <input class="inp" id="bcMobCCols" name="bcMobCCols" type="number" min="1" max="8" step="1" value="3" inputmode="numeric">
            </div>
            <div>
                <label for="bcMobCRows">Lignes</label>
                <input class="inp" id="bcMobCRows" name="bcMobCRows" type="number" min="1" max="20" step="1" value="7" inputmode="numeric">
            </div>
        </div>

        <fieldset class="bc-mobile-options">
            <legend>Contenu affiché</legend>
            <label><input type="checkbox" id="bcMobShowName" name="bcMobShowName" checked><span>Nom du produit</span></label>
            <label><input type="checkbox" id="bcMobShowSku" name="bcMobShowSku" checked><span>SKU</span></label>
            <label><input type="checkbox" id="bcMobShowCode" name="bcMobShowCode" checked><span>Code personnalisé</span></label>
            <label><input type="checkbox" id="bcMobShowImage" name="bcMobShowImage" checked><span>Image produit</span></label>
            <label><input type="checkbox" id="bcMobShowSize" name="bcMobShowSize"><span>Taille ou variante</span></label>
        </fieldset>

        <div class="bc-mobile-format-summary" id="bcMobFormatSummary"></div>
        <p class="bc-mobile-validation" id="bcMobFormatValidation" role="alert" hidden></p>

        <footer class="bc-mobile-actions" data-ms-sticky-actions data-ms-keyboard-behavior="hide">
            <button type="button" class="btn btn-secondary" data-ms-flow-back>Retour</button>
            <button type="button" class="btn btn-primary" data-ms-flow-next>Vérifier</button>
        </footer>
    </section>

    <!-- Étape 4 : revue -->
    <section class="bc-mobile-step" data-ms-flow-step="4">
        <div class="bc-mobile-step__intro">
            <div>
                <span class="bc-mobile-step__count">Étape 4 sur 4</span>
                <h3 data-ms-flow-title>Vérification et impression</h3>
                <p>Contrôlez le contenu de la planche avant de lancer l’impression ou le PDF.</p>
            </div>
        </div>

        <div class="bc-mobile-review-grid">
            <article class="bc-mobile-review-card">
                <header><h4>Préparation</h4><button type="button" class="btn btn-ghost btn-sm" data-ms-flow-go="1" data-ms-flow-validate="false">Modifier</button></header>
                <dl id="bcMobReviewSelection"></dl>
            </article>
            <article class="bc-mobile-review-card">
                <header>
                    <h4>Rendu</h4>
                    <div class="bc-mobile-review-card__actions">
                        <button type="button" class="btn btn-ghost btn-sm" data-ms-flow-go="2" data-ms-flow-validate="false">Style</button>
                        <button type="button" class="btn btn-ghost btn-sm" data-ms-flow-go="3" data-ms-flow-validate="false">Format</button>
                    </div>
                </header>
                <dl id="bcMobReviewRendering"></dl>
            </article>
        </div>

        <section class="bc-mobile-sheet-preview" aria-labelledby="bcMobReviewPreviewTitle">
            <header>
                <div>
                    <span>Aperçu de la planche</span>
                    <h4 id="bcMobReviewPreviewTitle">Page 1</h4>
                </div>
                <div class="bc-mobile-preview-pagination">
                    <button type="button" class="btn btn-secondary btn-sm" id="bcMobPreviewPrev" aria-label="Page précédente">Précédent</button>
                    <output id="bcMobPreviewPage">1 / 1</output>
                    <button type="button" class="btn btn-secondary btn-sm" id="bcMobPreviewNext" aria-label="Page suivante">Suivant</button>
                </div>
            </header>
            <div class="bc-mobile-preview-surface bc-mobile-preview-surface--sheet" id="bcMobReviewPreview"></div>
            <p class="bc-mobile-preview-note" id="bcMobPreviewNote"></p>
        </section>

        <p class="bc-mobile-validation" id="bcMobOutputValidation" role="alert" hidden></p>

        <footer class="bc-mobile-actions bc-mobile-actions--output" data-ms-sticky-actions>
            <button type="button" class="btn btn-secondary" data-ms-flow-back>Retour</button>
            <button type="button" class="btn btn-secondary" id="bcMobPdf">Exporter PDF</button>
            <button type="button" class="btn btn-primary" id="bcMobPrint">Imprimer</button>
        </footer>
    </section>
</section>

<!-- ═══════════════════════════════════════════════════════
     ESPACE DESKTOP HISTORIQUE — comportement conservé
     ═══════════════════════════════════════════════════════ -->
<div class="bc-desktop-experience" id="bcDesktopExperience">
<section class="bc-section">
    <div class="bc-section-hdr">
        <div>
            <h2 class="bc-title">Générateur d'étiquettes</h2>
            <p class="bc-subtitle">Sélectionnez des produits, définissez la quantité, choisissez un style et imprimez.</p>
        </div>
        <div class="bc-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="bc-generator">
        <div class="bc-controls">
            <div class="lg-tabs" role="tablist">
                <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>

            <div class="lg-tabpane active" id="lgTabStyle">
                <div class="bc-choices">
                    <label class="bc-choice"><input type="radio" name="lgStyle" value="img_barcode" checked><div><strong>🖼️ Image + Code-barres</strong><small>Visuel produit + code-barres compact</small></div></label>
                    <label class="bc-choice"><input type="radio" name="lgStyle" value="barcode"><div><strong>📊 Code-barres seul</strong><small>Impression rapide et lisible</small></div></label>
                    <label class="bc-choice"><input type="radio" name="lgStyle" value="qr"><div><strong>🏷️ QR Code</strong><small>Encodage texte/URL ou payload</small></div></label>
                    <label class="bc-choice"><input type="radio" name="lgStyle" value="full"><div><strong>📋 Étiquette complète</strong><small>Image + infos + code-barres</small></div></label>
                </div>
                <div class="bc-field-group">
                    <label class="bc-lbl">Format de code-barres</label>
                    <select class="sel" id="lgBarcodeFmt">
                        <option value="CODE128">CODE128 (universel)</option>
                        <option value="EAN13">EAN13 (13 chiffres)</option>
                        <option value="UPC">UPC (12 chiffres)</option>
                    </select>
                    <div id="lgBarcodeHint" class="bc-hint-warn" style="display:none"></div>
                    <div class="bc-hint-info">Pour un code manuel très long, privilégiez le QR code ou un format 105×37 / personnalisé.</div>
                    <label class="bc-lbl">Code personnalisé (optionnel)</label>
                    <input type="text" class="inp" id="lgCustomCode" placeholder="Sinon SKU / code-barres produit">
                </div>
            </div>

            <div class="lg-tabpane" id="lgTabFormat">
                <div class="bc-choices">
                    <label class="bc-choice"><input type="radio" name="lgFormat" value="A4_21" checked><div><strong>📄 A4 — 21 étiquettes</strong><small>70×37mm · 3 col × 7 lig</small></div></label>
                    <label class="bc-choice"><input type="radio" name="lgFormat" value="Avery_L7160"><div><strong>🏷️ Avery L7160</strong><small>63,5×38,1mm · 3×7</small></div></label>
                    <label class="bc-choice"><input type="radio" name="lgFormat" value="70x37"><div><strong>📦 70×37mm</strong><small>3 col × 7 lig</small></div></label>
                    <label class="bc-choice"><input type="radio" name="lgFormat" value="105x37"><div><strong>📦 105×37mm</strong><small>2 col × 8 lig</small></div></label>
                    <label class="bc-choice bc-choice--full"><input type="radio" name="lgFormat" value="custom"><div><strong>🎯 Personnalisé</strong><small>Dimensions libres</small></div></label>
                </div>
                <div id="lgCustomFormat" style="display:none" class="bc-custom-fmt">
                    <div class="bc-fmt-grid">
                        <div><label class="bc-lbl">Largeur (mm)</label><input class="inp" id="lgCWidth" type="number" min="20" step="0.1" value="70"></div>
                        <div><label class="bc-lbl">Hauteur (mm)</label><input class="inp" id="lgCHeight" type="number" min="15" step="0.1" value="37"></div>
                        <div><label class="bc-lbl">Colonnes</label><input class="inp" id="lgCCols" type="number" min="1" step="1" value="3"></div>
                        <div><label class="bc-lbl">Lignes</label><input class="inp" id="lgCRows" type="number" min="1" step="1" value="8"></div>
                    </div>
                </div>
            </div>

            <div class="lg-tabpane" id="lgTabOptions">
                <div class="bc-field-group">
                    <label class="bc-lbl">Contenu affiché sur l'étiquette</label>
                    <div class="bc-toggles">
                        <label class="bc-tog"><input type="checkbox" id="lgShowName" checked><span>Nom</span></label>
                        <label class="bc-tog"><input type="checkbox" id="lgShowSku" checked><span>SKU</span></label>
                        <label class="bc-tog"><input type="checkbox" id="lgShowCode" checked><span>Code</span></label>
                        <label class="bc-tog"><input type="checkbox" id="lgShowImage" checked><span>Image</span></label>
                        <label class="bc-tog"><input type="checkbox" id="lgShowSize"><span>Taille</span></label>
                    </div>
                    <label class="bc-lbl" style="margin-top:14px">QR — texte personnalisé</label>
                    <input type="text" class="inp" id="lgCustomQr" placeholder="URL / texte… (sinon payload produit)">
                </div>
            </div>
        </div>

        <div class="bc-preview">
            <div class="bc-preview-hdr">
                <div>
                    <h3 class="bc-preview-title">Prévisualisation</h3>
                    <span class="bc-preview-sub" id="lgPreviewSub">Aucune sélection</span>
                </div>
                <span class="bc-preview-meta" id="lgPreviewMeta"></span>
            </div>
            <div class="bc-preview-body">
                <div class="lg-sample" id="lgSample"></div>
            </div>
        </div>
    </div>
</section>

<section class="bc-section">
    <div class="bc-section-hdr">
        <div style="display:flex;align-items:center;gap:12px">
            <h2 class="bc-title">📦 Sélection produits</h2>
            <span class="bc-badge" id="lgSelBadge" style="display:none">0</span>
        </div>
    </div>
    <div class="bc-filters">
        <input type="text" class="inp bc-search" id="lgSearch" placeholder="🔍 Rechercher produit, SKU, code-barres, EAN…">
        <select class="sel bc-filter-sel" id="lgWh"><option value="">Tous magasins</option></select>
        <select class="sel bc-filter-sel" id="lgCat"><option value="">Toutes catégories</option></select>
        <div class="bc-filter-btns">
            <button class="btn btn-sm btn-secondary" id="btnLgSelAll">☑ Tout sélectionner</button>
            <button class="btn btn-sm btn-ghost" id="btnLgDeselAll" style="display:none">☐ Désélectionner</button>
        </div>
    </div>
    <div id="lgProdGrid" class="bc-prod-grid"></div>
</section>
</div>

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