<!DOCTYPE html>
<html lang="es">
<head>
  <script>/*pos_theme_early*/(function(){var t=localStorage.getItem("pos_theme")||"industrial";document.documentElement.setAttribute("data-theme",t);})()</script>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Taller — Nexus Autoparts POS</title>
  <link rel="stylesheet" href="/pos/static/css/chat.css" />
  <link rel="stylesheet" href="/pos/static/css/tokens.css" />
  <link rel="stylesheet" href="/pos/static/css/common.css" />
  <link rel="stylesheet" href="/pos/static/css/pos-ui.css?v=33" />
  <link rel="stylesheet" href="/pos/static/css/sidebar.css" />
  <link rel="stylesheet" href="/pos/static/css/pos-glass.css" />
  <link rel="manifest" href="/pos/static/pwa/manifest.json" />
  <meta name="theme-color" content="#F5A623" />
  <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />

  <link rel="stylesheet" href="/pos/static/css/workshop.css?v=33">
</head>
<body>

<div class="app-shell">
  <!-- Sidebar injected by sidebar.js -->
  <aside id="sidebar"></aside>

  <main class="main" role="main">
    <div id="offlineBanner"></div>

    <div class="page-header">
      <div class="page-header__title-group">
        <span class="page-header__eyebrow">Operaci&oacute;n &middot; Taller</span>
        <h1 class="page-header__title">Taller</h1>
      </div>
      <div class="page-header__actions">
        <button class="btn btn--ghost" id="btnCatalog" onclick="Workshop.openCatalogModal()">
          <svg viewBox="0 0 24 24"><path d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
          Cat&aacute;logo de servicios
        </button>
        <button class="btn btn--primary" id="btnNewOrder" onclick="Workshop.openNewOrderModal()">
          <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
          Nueva orden
        </button>
      </div>
    </div>

    <!-- Summary cards -->
    <div class="summary-strip" id="statsRow">
      <div class="summary-card">
        <div class="summary-card__icon">
          <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z"/><polyline points="3 8 12 13 21 8"/></svg>
        </div>
        <div class="summary-card__body">
          <div class="summary-card__label">Recibidos</div>
          <div class="summary-card__value" id="statReceived">--</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="summary-card__icon">
          <svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
        </div>
        <div class="summary-card__body">
          <div class="summary-card__label">En reparaci&oacute;n</div>
          <div class="summary-card__value" id="statRepair">--</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="summary-card__icon summary-card__icon--ok">
          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9 12 12 15 16 10"/></svg>
        </div>
        <div class="summary-card__body">
          <div class="summary-card__label">Listos</div>
          <div class="summary-card__value" id="statReady">--</div>
        </div>
      </div>
      <div class="summary-card">
        <div class="summary-card__icon summary-card__icon--alert">
          <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
        </div>
        <div class="summary-card__body">
          <div class="summary-card__label">Vencidos</div>
          <div class="summary-card__value summary-card__value--danger" id="statOverdue">--</div>
        </div>
      </div>
    </div>

    <!-- Toolbar: filters + view switch -->
    <div class="workshop-toolbar">
      <div class="workshop-filters">
        <select class="form-input" id="filterBranch">
          <option value="">Todas las sucursales</option>
        </select>
        <select class="form-input" id="filterStatus">
          <option value="">Todos los estatus</option>
          <option value="received">Recibido</option>
          <option value="diagnosis">Diagn&oacute;stico</option>
          <option value="waiting_parts">Espera refacciones</option>
          <option value="repair">En reparaci&oacute;n</option>
          <option value="quality_check">Control calidad</option>
          <option value="ready">Listo</option>
          <option value="delivered">Entregado</option>
          <option value="cancelled">Cancelado</option>
        </select>
        <select class="form-input" id="filterDelivery">
          <option value="">Todas las v&iacute;as de entrega</option>
          <option value="pickup">Pasa cliente</option>
          <option value="delivery">Env&iacute;o a domicilio</option>
          <option value="courier">Motociclista</option>
        </select>
        <label class="toolbar-toggle">
          <input type="checkbox" id="filterDirect" />
          <span>Orden directa</span>
        </label>
        <input class="form-input" id="filterSearch" placeholder="Buscar orden, cliente o placas" />
      </div>
      <div class="view-switch" id="viewSwitch">
        <button class="view-switch__btn is-active" data-view="list" onclick="Workshop.setView('list')">
          <svg viewBox="0 0 24 24"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
          Lista
        </button>
        <button class="view-switch__btn" data-view="kanban" onclick="Workshop.setView('kanban')">
          <svg viewBox="0 0 24 24"><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>
          Kanban
        </button>
      </div>
    </div>

    <!-- List view -->
    <div class="workshop-list" id="listView">
      <div class="table-wrapper">
        <table class="data-table workshop-table">
          <thead>
            <tr>
              <th>Sucursal</th>
              <th>Orden</th>
              <th>Cliente</th>
              <th>Veh&iacute;culo</th>
              <th>Estatus</th>
              <th class="price-col">Total</th>
              <th>Acciones</th>
            </tr>
          </thead>
          <tbody id="listBody">
            <tr><td colspan="7" style="text-align:center;padding:var(--space-4);">Cargando...</td></tr>
          </tbody>
        </table>
      </div>
      <div class="list-pagination" id="listPagination"></div>
    </div>

    <!-- Kanban board -->
    <div class="kanban-board" id="kanbanBoard" style="display:none;">
      <!-- Columns injected by JS -->
    </div>
  </main>
</div>

<!-- Detail modal -->
<div class="modal-overlay" id="detailModal">
  <div class="modal modal--lg">
    <div class="modal__header">
      <h2 class="modal__title" id="detailTitle">Orden #0000</h2>
      <button class="modal__close" onclick="Workshop.closeDetailModal()">&times;</button>
    </div>
    <div class="modal__body" id="detailBody">
      <!-- Injected by JS -->
    </div>
    <div class="modal__footer" id="detailFooter">
      <button class="btn btn--ghost" onclick="Workshop.closeDetailModal()">Cerrar</button>
    </div>
  </div>
</div>

<!-- New order modal -->
<div class="modal-overlay" id="newOrderModal">
  <div class="modal">
    <div class="modal__header">
      <h2 class="modal__title">Nueva orden de servicio</h2>
      <button class="modal__close" onclick="Workshop.closeNewOrderModal()">&times;</button>
    </div>
    <div class="modal__body">
      <form id="newOrderForm" class="form-grid">
        <div class="form-field">
          <label class="form-label" for="noCustomer">Cliente</label>
          <select class="form-input" id="noCustomer" required></select>
        </div>
        <div class="form-field">
          <label class="form-label" for="noVehicle">Veh&iacute;culo</label>
          <select class="form-input" id="noVehicle"></select>
        </div>
        <div class="form-field">
          <label class="form-label" for="noMechanic">Mec&aacute;nico asignado</label>
          <select class="form-input" id="noMechanic"></select>
        </div>
        <div class="form-field">
          <label class="form-label" for="noPriority">Prioridad</label>
          <select class="form-input" id="noPriority">
            <option value="normal">Normal</option>
            <option value="high">Alta</option>
            <option value="urgent">Urgente</option>
          </select>
        </div>
        <div class="form-field">
          <label class="form-label" for="noDelivery">V&iacute;a de entrega</label>
          <select class="form-input" id="noDelivery">
            <option value="">—</option>
            <option value="pickup">Pasa cliente</option>
            <option value="delivery">Env&iacute;o a domicilio</option>
            <option value="courier">Motociclista</option>
          </select>
        </div>
        <div class="form-field" id="courierField" style="display:none;">
          <label class="form-label" for="noCourier">Motociclista</label>
          <select class="form-input" id="noCourier"></select>
        </div>
        <div class="form-field">
          <label class="form-label" for="noEstimatedCompletion">Entrega estimada</label>
          <input class="form-input" type="datetime-local" id="noEstimatedCompletion" />
        </div>
        <div class="form-field">
          <label class="form-label" for="noMileage">Kilometraje</label>
          <input class="form-input" type="number" id="noMileage" placeholder="Ej. 45200" />
        </div>
        <div class="form-field form-field--span2">
          <label class="toolbar-toggle">
            <input type="checkbox" id="noDirect" />
            <span>Orden directa (sin inventario)</span>
          </label>
        </div>
        <div class="form-field form-field--span2">
          <label class="form-label" for="noNotes">Notas de recepci&oacute;n</label>
          <textarea class="form-input" id="noNotes" rows="3" placeholder="Falla reportada, observaciones..."></textarea>
        </div>
      </form>
    </div>
    <div class="modal__footer">
      <button class="btn btn--ghost" onclick="Workshop.closeNewOrderModal()">Cancelar</button>
      <button class="btn btn--primary" onclick="Workshop.submitNewOrder()">Crear orden</button>
    </div>
  </div>
</div>

<!-- Catalog modal -->
<div class="modal-overlay" id="catalogModal">
  <div class="modal modal--lg">
    <div class="modal__header">
      <h2 class="modal__title">Cat&aacute;logo de servicios</h2>
      <button class="modal__close" onclick="Workshop.closeCatalogModal()">&times;</button>
    </div>
    <div class="modal__body">
      <div class="form-grid" id="catalogForm">
        <div class="form-field form-field--span2">
          <input class="form-input" id="catName" placeholder="Nombre del servicio" />
        </div>
        <div class="form-field">
          <input class="form-input" id="catHours" type="number" step="0.1" placeholder="Horas" />
        </div>
        <div class="form-field price-col">
          <input class="form-input" id="catRate" type="number" step="0.01" placeholder="Precio/hora" />
        </div>
        <div class="form-field form-field--span3">
          <input class="form-input" id="catDesc" placeholder="Descripci&oacute;n" />
        </div>
        <div class="form-field">
          <button class="btn btn--primary" onclick="Workshop.addCatalogItem()">Agregar</button>
        </div>
      </div>
      <div class="table-wrapper" style="margin-top:var(--space-4);">
        <div class="vs-container" style="max-height:40vh;overflow-y:auto;">
          <table class="data-table">
            <thead>
              <tr>
                <th>Servicio</th>
                <th>Horas</th>
                <th class="price-col">Precio/hora</th>
                <th class="price-col">Total sugerido</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="catalogBody">
              <tr><td colspan="5" style="text-align:center;padding:var(--space-4);">Cargando...</td></tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="modal__footer">
      <button class="btn btn--ghost" onclick="Workshop.closeCatalogModal()">Cerrar</button>
    </div>
  </div>
</div>

<script src="/pos/static/js/i18n.js" defer></script>
<script src="/pos/static/js/app-init.js" defer></script>
<script src="/pos/static/js/splash-loader.js?v=33" defer></script>
<script src="/pos/static/js/pos-utils.js?v=33" defer></script>
<script src="/pos/static/js/sidebar.js?v=33" defer></script>
<script src="/pos/static/js/offline-banner.js" defer></script>
<script src="/pos/static/js/workshop.js?v=33" defer></script>
<script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
<script src="/pos/static/js/pwa-install.js" defer></script>
<script src="/pos/static/js/chat.js" defer></script>
</body>
</html>
