<?php
/**
 * Fichier  : views/locations.php
 * Version  : 2.6.5
 * Description : Vue — Emplacements internes
 *               Module étiquettes = popup dédiée (pas inline)
 *   v2.6.5 (2026-07-08) — Harmonisation Lot 5 : header humain, lisibilité admin et responsive mobile/tablette.
 */
?>
<link rel="stylesheet" href="assets/css/locations.labels.css?v=3.1.0">

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

  <section class="admin-page-hero" aria-labelledby="locationsTitle">
    <div class="admin-page-hero__copy">
      <span class="admin-page-hero__kicker">Rangement terrain</span>
      <h1 class="admin-page-hero__title" id="locationsTitle">Emplacements</h1>
      <p class="admin-page-hero__text">Structurez les racks, zones, étagères et emplacements pour que le rangement saisi soit retrouvé facilement en création, modification, scan et inventaire.</p>
    </div>
    <div class="admin-page-hero__actions" aria-label="Actions emplacements">
      <span class="admin-page-hero__pill">Zones</span>
      <span class="admin-page-hero__pill">Étiquettes</span>
      <span class="admin-page-hero__pill">Import CSV</span>
    </div>
  </section>

  <!-- ═══════ HEADER + FILTRES ═══════ -->
  <div class="loc-topbar">
    <div class="loc-topbar-left">
      <select class="sel loc-sel" id="locWarehouse">
        <option value="">Tous les magasins</option>
      </select>
      <div class="loc-search-wrap">
        <svg class="loc-search-ico" 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="inp loc-search-inp" id="locSearch" placeholder="Rechercher code, zone, libellé…">
      </div>
    </div>
    <div class="loc-topbar-right">
      <button class="btn btn-secondary btn-sm" id="btnLocLabels">🏷️ Étiquettes</button>
      <button class="btn btn-secondary btn-sm" id="btnLocImport">📥 Import CSV</button>
      <button class="btn btn-primary" id="btnLocAdd">+ Ajouter</button>
    </div>
  </div>

  <!-- ═══════ VUE TOGGLE ═══════ -->
  <div class="loc-view-bar">
    <div class="loc-view-toggle">
      <button class="loc-vbtn active" data-view="zones" title="Vue zones">▦ Zones</button>
      <button class="loc-vbtn" data-view="table" title="Vue tableau">☰ Tableau</button>
    </div>
  </div>

  <!-- ═══════ ZONES VISUELLES ═══════ -->
  <div id="locZonesView" class="loc-zones"></div>

  <!-- ═══════ TABLE ═══════ -->
  <div class="card loc-card" id="locTableWrap" style="display:none">
    <div class="table-container">
      <table class="data-table" id="tblLocations">
        <thead>
          <tr>
            <th class="sortable" data-col="code" style="width:120px">Code</th>
            <th class="sortable" data-col="label">Libellé</th>
            <th class="sortable" data-col="type" style="width:130px">Type</th>
            <th class="sortable" data-col="zone" style="width:180px">Zone</th>
            <th class="sortable" data-col="warehouse" style="width:140px">Magasin</th>
            <th style="width:90px;text-align:center">Actif</th>
            <th style="width:140px;text-align:right">Actions</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <!-- Modal import CSV -->
  <template id="tplLocImport">
    <div>
      <p style="margin:0 0 10px;font-size:13px;color:var(--text-secondary)">
        Format : <code>code;zone;label;type</code> — Le magasin sélectionné sera utilisé.
      </p>
      <textarea id="locImportText" class="inp" rows="8" placeholder="A1;Réserve;Rack 1 Étage 2;rack&#10;Q1;Quarantaine;Zone tampon;zone"></textarea>
      <div id="locImportResult" style="margin-top:10px"></div>
    </div>
  </template>

</div>
