<?php
/**
 * Fichier  : views/locations.php
 * Version  : 2.3.3
 * Description : Vue — Emplacements internes — + module étiquettes (multi-sélection + impression)
 */
?>
<link rel="stylesheet" href="assets/css/locations.labels.css?v=2.3.3">
<link rel="stylesheet" href="assets/css/locations.labels.print.css?v=2.3.3" media="print">

<div class="page-body" id="pgLocations">

  <div class="filters-bar" style="margin-bottom:var(--sp-4)">
    <div class="filters-section">
      <select class="form-select" id="locWarehouse" style="min-width:180px">
        <option value="">Tous les magasins</option>
      </select>
    </div>
    <div class="filters-divider"></div>
    <div class="filters-section" style="flex:1">
      <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 class="form-input" id="locSearch" placeholder="Rechercher : A1, Rack, Quarantaine…" />
      </div>
    </div>
    <div class="filters-section ml-auto">
      <button class="btn btn-primary" id="btnLocAdd">+ Ajouter</button>
    </div>
  </div>

  <!-- TABLE EMPLACEMENTS -->
  <div class="card">
    <div class="table-container">
      <table class="data-table" id="tblLocations">
        <thead>
          <tr>
            <th style="width:120px">Code</th>
            <th>Libellé</th>
            <th style="width:200px">Zone</th>
            <th style="width:140px">Magasin</th>
            <th style="width:110px;text-align:center">Produits liés</th>
            <th style="width:90px;text-align:center">Actif</th>
            <th style="width:160px;text-align:right">Actions</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <!-- ESPACE VISUEL ENTRE TABLE ET MODULE -->
  <div style="height:var(--sp-5)"></div>

  <!-- MODULE ÉTIQUETTES (multi) -->
  <div class="card loc-label-card" aria-label="Étiquettes emplacements">
    <div class="card-header">
      <div>
        <h3 class="card-title">Étiquettes emplacements</h3>
        <div class="text-muted" style="font-size:12px">
          Cochez un ou plusieurs emplacements pour générer des étiquettes imprimables (logo + nom).
        </div>
      </div>
      <div style="display:flex;gap:8px;align-items:center">
        <button class="btn btn-secondary" id="btnLocLabelsPrint" disabled>Imprimer la sélection</button>
      </div>
    </div>

    <div class="card-body">
      <div class="loc-label-layout">
        <!-- LISTE -->
        <div class="loc-label-left">
          <div class="loc-label-tools">
            <div class="search-box" style="margin:0">
              <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 class="form-input" id="locLabelSearch" placeholder="Rechercher un emplacement…" />
            </div>

            <div class="loc-label-toolbar">
              <label class="check" style="display:flex;align-items:center;gap:10px;margin:0">
                <input type="checkbox" id="locLabelSelectAll">
                <span>Tout sélectionner</span>
              </label>
              <span class="text-muted" id="locLabelCount" style="font-size:12px">0 sélection</span>
            </div>
          </div>

          <div class="loc-label-list" id="locLabelList"></div>
        </div>

        <!-- APERÇU -->
        <div class="loc-label-right">
          <div class="loc-label-right-hdr">
            <div class="loc-label-right-title">Aperçu</div>
            <div class="text-muted" style="font-size:12px">Les étiquettes ci-dessous seront imprimées.</div>
          </div>

          <div class="loc-label-grid" id="locLabelGrid">
            <div class="loc-label-empty">Chargement…</div>
          </div>
        </div>
      </div>

      <!-- Zone d'impression (cachée écran, visible uniquement en print via CSS) -->
      <div class="loc-label-print-area" id="locLabelPrintArea"></div>
    </div>
  </div>

</div>
