<!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>Reportes — 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/reports.css"></head>

<body>

  <!-- =========================================================================
       THEME SWITCHER BAR
       ========================================================================= -->
  <div class="theme-bar">
    <div class="theme-bar__left">
      <span class="theme-bar__brand">Nexus Autoparts</span>
      <div class="theme-bar__sep"></div>
      <span class="theme-bar__page">Sucursal Norte — Mzo 2026</span>
    </div>
    <div class="theme-bar__right">
      <span class="theme-bar__label" style="font-family:var(--font-mono)" id="live-clock">00:00:00</span>
      <div class="theme-bar__sep"></div>
      <span class="theme-bar__label">Tema</span>
      <div class="theme-switcher">
        <button class="theme-btn is-active" id="btn-industrial" onclick="setTheme('industrial')">
          <svg viewBox="0 0 14 14" width="10" height="10" fill="currentColor"><rect x="1" y="1" width="12" height="12" rx="1"/></svg>
          Industrial
        </button>
        <button class="theme-btn" id="btn-modern" onclick="setTheme('modern')">
          <svg viewBox="0 0 14 14" width="10" height="10" fill="currentColor"><circle cx="7" cy="7" r="5"/></svg>
          Modern
        </button>
      </div>
    </div>
  </div>

  <!-- =========================================================================
       APP SHELL
       ========================================================================= -->
  <div class="app-shell">

    <!-- =======================================================================
         SIDEBAR
         ======================================================================= -->
    <aside class="sidebar">
      <div class="sidebar__brand">
        <div class="brand-logo">NA</div>
        <div class="brand-name">
          <div class="brand-name__primary">Nexus / Autoparts POS</div>
        </div>
      </div>

      <nav class="sidebar__nav">
        <div class="nav-section-label">Principal</div>

        <a href="/pos/dashboard" class="nav-item">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="1" y="1" width="7" height="7" rx="1"/><rect x="10" y="1" width="7" height="7" rx="1"/>
            <rect x="1" y="10" width="7" height="7" rx="1"/><rect x="10" y="10" width="7" height="7" rx="1"/>
          </svg>
          <span>Dashboard</span>
        </a>

        <a href="/pos/sale" class="nav-item">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="1" y="3" width="16" height="12" rx="1"/><line x1="1" y1="7" x2="17" y2="7"/>
            <line x1="6" y1="7" x2="6" y2="15"/>
          </svg>
          <span>POS</span>
        </a>

        <a href="/pos/catalog" class="nav-item">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="2" y="2" width="14" height="14" rx="1"/><line x1="6" y1="6" x2="12" y2="6"/>
            <line x1="6" y1="9" x2="12" y2="9"/><line x1="6" y1="12" x2="10" y2="12"/>
          </svg>
          <span>Catálogo</span>
        </a>

        <a href="/pos/inventory" class="nav-item">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="1" y="5" width="16" height="11" rx="1"/><path d="M5 5V4a4 4 0 018 0v1"/>
            <line x1="9" y1="9" x2="9" y2="12"/>
          </svg>
          <span>Inventario</span>
        </a>

        <div class="nav-section-label">Gestión</div>

        <a href="/pos/customers" class="nav-item">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <circle cx="9" cy="6" r="3"/><path d="M3 15c0-3.314 2.686-6 6-6s6 2.686 6 6"/>
          </svg>
          <span>Clientes</span>
        </a>
        <a href="/pos/workshop" class="nav-item">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M11 4.7a.8.8 0 0 0 0 1.1l1.2 1.2a.8.8 0 0 0 1.1 0l2.8-2.8a4.5 4.5 0 0 1-6 6l-5.2 5.2a1.6 1.6 0 0 1-2.2-2.2l5.2-5.2a4.5 4.5 0 0 1 6-6L11 4.7z"/>
          </svg>
          <span>Taller</span>
        </a>

        <a href="/pos/invoicing" class="nav-item">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="3" y="1" width="12" height="16" rx="1"/><line x1="6" y1="6" x2="12" y2="6"/>
            <line x1="6" y1="9" x2="12" y2="9"/><line x1="6" y1="12" x2="9" y2="12"/>
          </svg>
          <span>Facturación</span>
        </a>

        <a href="/pos/accounting" class="nav-item">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <path d="M9 2v14M2 9h14"/><circle cx="9" cy="9" r="7"/>
          </svg>
          <span>Contabilidad</span>
        </a>

        <a href="/pos/reports" class="nav-item is-active">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="1" y="1" width="16" height="16" rx="1"/>
            <line x1="5" y1="13" x2="5" y2="9"/><line x1="9" y1="13" x2="9" y2="6"/>
            <line x1="13" y1="13" x2="13" y2="4"/>
          </svg>
          <span>Reportes</span>
        </a>

        <a href="/pos/historical-sales" class="nav-item">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <rect x="1" y="4" width="16" height="12" rx="1"/>
            <line x1="1" y1="8" x2="17" y2="8"/>
            <line x1="5" y1="2" x2="5" y2="4"/>
            <line x1="13" y1="2" x2="13" y2="4"/>
          </svg>
          <span>Ventas Históricas</span>
        </a>

        <div class="nav-section-label">Sistema</div>

        <a href="/pos/config" class="nav-item">
          <svg class="nav-item__icon" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-width="1.5">
            <circle cx="9" cy="9" r="2.5"/>
            <path d="M9 1v2M9 15v2M1 9h2M15 9h2M3.22 3.22l1.42 1.42M13.36 13.36l1.42 1.42M3.22 14.78l1.42-1.42M13.36 4.64l1.42-1.42"/>
          </svg>
          <span>Configuración</span>
        </a>
      </nav>

      <div class="sidebar__profile">
        <div class="profile-avatar">HG</div>
        <div class="profile-info">
          <div class="profile-info__name">Hugo García</div>
          <div class="profile-info__role">Administrador</div>
        </div>
      </div>
    </aside>

    <!-- =======================================================================
         MAIN CONTENT
         ======================================================================= -->
    <main class="main-content">

      <!-- Header -->
      <div class="content-header">
        <div class="content-header__title-block">
          <span class="content-header__eyebrow">Gestión</span>
          <h1 class="content-header__title">Reportes</h1>
        </div>
        <div class="content-header__actions">
          <button class="btn btn-ghost" onclick="exportReportCSV()">
            <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14">
              <rect x="1" y="1" width="12" height="12" rx="1"/><line x1="4" y1="5" x2="10" y2="5"/><line x1="4" y1="8" x2="8" y2="8"/>
            </svg>
            Exportar Excel (CSV)
          </button>
          <button class="btn btn-primary" onclick="window.print()">
            <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" width="14" height="14">
              <rect x="2" y="1" width="10" height="12" rx="1"/><line x1="5" y1="5" x2="9" y2="5"/><line x1="5" y1="7" x2="9" y2="7"/><line x1="5" y1="9" x2="7" y2="9"/>
            </svg>
            Exportar PDF (Imprimir)
          </button>
        </div>
      </div>

      <!-- Content Body -->
      <div class="content-body">

        <!-- TAB NAVIGATION -->
        <div class="tab-nav">
          <button class="tab-btn is-active" onclick="switchTab('ventas', this)">
            <svg viewBox="0 0 15 15" fill="none" stroke="currentColor" stroke-width="1.4">
              <path d="M1 13l3-4 3 2 3-5 4 3"/><path d="M1 1v12h13"/>
            </svg>
            Ventas
          </button>
          <button class="tab-btn" onclick="switchTab('inventario', this)">
            <svg viewBox="0 0 15 15" fill="none" stroke="currentColor" stroke-width="1.4">
              <rect x="1" y="4" width="13" height="10" rx="1"/><path d="M4 4V3a3 3 0 016 0v1"/>
            </svg>
            Inventario
          </button>
          <button class="tab-btn" onclick="switchTab('clientes', this)">
            <svg viewBox="0 0 15 15" fill="none" stroke="currentColor" stroke-width="1.4">
              <circle cx="7.5" cy="5" r="2.5"/><path d="M2 13c0-3 2.5-5 5.5-5s5.5 2 5.5 5"/>
            </svg>
            Clientes
          </button>
          <button class="tab-btn" onclick="switchTab('financieros', this)">
            <svg viewBox="0 0 15 15" fill="none" stroke="currentColor" stroke-width="1.4">
              <circle cx="7.5" cy="7.5" r="6.5"/><path d="M7.5 1.5v13M4 5h5a2 2 0 010 4H5a2 2 0 000 4h6"/>
            </svg>
            Financieros
          </button>
          <button class="tab-btn" onclick="switchTab('historico', this)">
            <svg viewBox="0 0 15 15" fill="none" stroke="currentColor" stroke-width="1.4">
              <rect x="1" y="4" width="13" height="10" rx="1"/>
              <path d="M1 7h13"/>
              <path d="M4 2v2M10 2v2"/>
            </svg>
            Histórico
          </button>
        </div>

        <!-- ==================================================================
             TAB 1: VENTAS
             ================================================================== -->
        <div class="tab-panel is-active" id="panel-ventas">

          <!-- Filter Bar -->
          <div class="filter-bar">
            <span class="filter-bar__label">Desde</span>
            <input type="date" class="filter-input" id="ventas-date-from" />
            <span class="filter-bar__label">Hasta</span>
            <input type="date" class="filter-input" id="ventas-date-to" />
            <div class="filter-bar__spacer"></div>
            <button class="btn btn-primary btn-sm" id="btn-generar-ventas" onclick="Reports.loadVentas()">Generar</button>
          </div>

          <!-- KPI Cards (dynamic) -->
          <div class="kpi-grid" id="ventas-kpis"></div>

          <!-- Bar Chart: Ventas por día (dynamic) -->
          <div class="bar-chart-card" id="ventas-bar-chart"></div>

          <!-- Tables row -->
          <div class="two-col">
            <!-- Ventas por Vendedor -->
            <div class="table-card" id="ventas-por-vendedor"></div>

            <!-- Ventas por Método de Pago -->
            <div class="table-card" id="ventas-por-metodo"></div>
          </div>

          <!-- Sales detail table -->
          <div class="table-card mb-5" id="ventas-detalle"></div>

        </div>

        <!-- ==================================================================
             TAB 2: INVENTARIO
             ================================================================== -->
        <div class="tab-panel" id="panel-inventario">

          <!-- KPI Cards (dynamic) -->
          <div class="kpi-grid" id="inventario-kpis"></div>

          <!-- Valorizado -->
          <div class="table-card mb-5" id="inventario-valorizacion"></div>

          <!-- ABC -->
          <div class="table-card mb-5" id="inventario-abc"></div>

          <!-- Bajo stock -->
          <div class="table-card mb-5" id="inventario-low-stock"></div>

          <!-- Sin Movimiento -->
          <div class="table-card mb-5" id="inventario-no-movement"></div>

        </div>

        <!-- ==================================================================
             TAB 3: CLIENTES
             ================================================================== -->
        <div class="tab-panel" id="panel-clientes">

          <!-- KPI Cards (dynamic) -->
          <div class="kpi-grid" id="clientes-kpis"></div>

          <!-- Aging report -->
          <div class="table-card mb-5" id="clientes-aging"></div>

        </div>

        <!-- ==================================================================
             TAB 4: FINANCIEROS
             ================================================================== -->
        <div class="tab-panel" id="panel-financieros">

          <!-- Period selector for financial reports -->
          <div class="filter-bar">
            <span class="filter-bar__label">Mes</span>
            <select class="filter-select" id="fin-month"></select>
            <span class="filter-bar__label">Anio</span>
            <select class="filter-select" id="fin-year"></select>
            <div class="filter-bar__spacer"></div>
            <button class="btn btn-primary btn-sm" onclick="Reports.loadFinancieros()">Generar</button>
          </div>

          <!-- KPI Cards (dynamic) -->
          <div class="kpi-grid" id="financieros-kpis"></div>

          <!-- Income statement -->
          <div class="table-card mb-5" id="financieros-income"></div>

          <!-- Balance sheet -->
          <div class="table-card mb-5" id="financieros-balance"></div>

          <!-- Trial balance -->
          <div class="table-card mb-5" id="financieros-trial"></div>

          <!-- Cortes de caja -->
          <div class="table-card mb-5" id="financieros-cortes"></div>

        </div>
        <!-- ==================================================================
             TAB 5: HISTÓRICO
             ================================================================== -->
        <div class="tab-panel" id="panel-historico">

          <!-- Filter Bar -->
          <div class="filter-bar">
            <span class="filter-bar__label">Desde</span>
            <input type="date" class="filter-input" id="historico-date-from" />
            <span class="filter-bar__label">Hasta</span>
            <input type="date" class="filter-input" id="historico-date-to" />
            <span class="filter-bar__label">Cliente</span>
            <input type="text" class="filter-input" id="historico-customer" placeholder="Nombre..." />
            <div class="filter-bar__spacer"></div>
            <button class="btn btn-primary btn-sm" onclick="Reports.loadHistorico()">Generar</button>
          </div>

          <!-- KPI Cards (dynamic) -->
          <div class="kpi-grid" id="historico-kpis"></div>

          <!-- Sales detail table -->
          <div class="table-card mb-5" id="historico-detalle"></div>

        </div>
        <!-- End panels -->

      </div>
      <!-- End content-body -->

    </main>
  </div>
  <!-- End app-shell -->

  <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" defer></script>
  <script src="/pos/static/js/reports.js?v=33" defer></script>
  <script src="/pos/static/js/sync-engine.js" 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>
