<?php
/**
 * TechShop Perú - Panel de Administración (Layout Aislado e Independiente)
 */
if (!defined('SECURE_ACCESS')) {
    die('Acceso directo no permitido');
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><?= e($page_title ?? 'Panel de Administración') ?> | TechShop Perú Admin</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css" rel="stylesheet">
  <?php $adminCssVersion = @filemtime(__DIR__ . '/../admin.css'); ?>
  <link href="<?= url('panel-admin-tech/admin.css') ?>?v=<?= $adminCssVersion ?: '1' ?>" rel="stylesheet">
  <script>
    // Dark mode: seguir la preferencia del sistema (persistente).
    // Solo marca el <html> (siempre disponible); el <body> aún no existe.
    (function(){
      var t = localStorage.getItem('ts-admin-theme');
      if (t === 'dark' || (!t && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.setAttribute('data-admin-dark', '1');
      }
    })();
  </script>
</head>
<body>
<script>if (document.documentElement.getAttribute('data-admin-dark') === '1') { document.body.classList.add('admin-dark'); }</script>
<a class="skip-link" href="#admin-main">Saltar al contenido principal</a>
<div class="container-fluid">
  <div class="row">
    <aside class="col-lg-2 admin-sidebar p-0">
      <div class="p-3 sidebar-brand text-white">
        <h5 class="mb-0 fw-bold"><i class="bi bi-shield-lock me-2" style="color:var(--admin-primary-light)"></i>TechAdmin</h5>
        <small class="text-white-50">Portal Aislado de Gestión</small>
      </div>
      <nav class="nav flex-column p-2 mt-2">
        <a class="nav-link <?= is_active('panel-admin-tech/index.php') ?>" href="<?= url('panel-admin-tech/index.php') ?>"><i class="bi bi-speedometer2 me-2"></i>Dashboard</a>
        <a class="nav-link <?= is_active('panel-admin-tech/pedidos.php') ?>" href="<?= url('panel-admin-tech/pedidos.php') ?>"><i class="bi bi-bag-check me-2"></i>Pedidos</a>
        <a class="nav-link <?= is_active('panel-admin-tech/productos.php') ?>" href="<?= url('panel-admin-tech/productos.php') ?>"><i class="bi bi-box-seam me-2"></i>Productos</a>
        <a class="nav-link <?= is_active('panel-admin-tech/stock.php') ?>" href="<?= url('panel-admin-tech/stock.php') ?>"><i class="bi bi-boxes me-2"></i>Control Stock</a>
        <a class="nav-link <?= is_active('panel-admin-tech/banners.php') ?>" href="<?= url('panel-admin-tech/banners.php') ?>"><i class="bi bi-images me-2"></i>Banners Slider</a>
        <a class="nav-link <?= is_active('panel-admin-tech/cupones.php') ?>" href="<?= url('panel-admin-tech/cupones.php') ?>"><i class="bi bi-ticket-perforated me-2"></i>Cupones</a>
        <a class="nav-link <?= is_active('panel-admin-tech/categorias.php') ?>" href="<?= url('panel-admin-tech/categorias.php') ?>"><i class="bi bi-tags me-2"></i>Categorías</a>
        <a class="nav-link <?= is_active('panel-admin-tech/marcas.php') ?>" href="<?= url('panel-admin-tech/marcas.php') ?>"><i class="bi bi-building me-2"></i>Marcas</a>
        <a class="nav-link <?= is_active('panel-admin-tech/usuarios.php') ?>" href="<?= url('panel-admin-tech/usuarios.php') ?>"><i class="bi bi-people me-2"></i>Usuarios</a>
        <a class="nav-link <?= is_active('panel-admin-tech/testimonios.php') ?>" href="<?= url('panel-admin-tech/testimonios.php') ?>"><i class="bi bi-star me-2"></i>Reseñas</a>
        <a class="nav-link <?= is_active('panel-admin-tech/tickets.php') ?>" href="<?= url('panel-admin-tech/tickets.php') ?>"><i class="bi bi-headset me-2"></i>Soporte/Tickets</a>
        <a class="nav-link <?= is_active('panel-admin-tech/configuracion.php') ?>" href="<?= url('panel-admin-tech/configuracion.php') ?>"><i class="bi bi-sliders me-2"></i>Configuración</a>
        <hr class="border-secondary my-2">
        <a class="nav-link text-danger" href="<?= url('pages/logout.php') ?>"><i class="bi bi-box-arrow-right me-2"></i>Cerrar Sesión</a>

      </nav>
    </aside>

    <main class="col-lg-10 p-4" id="admin-main" tabindex="-1">
      <div class="d-flex justify-content-between align-items-center mb-4 pb-3 border-bottom">
        <div>
          <h2 class="h4 fw-bold mb-0"><?= e($page_title ?? 'Panel') ?></h2>
          <small class="text-muted">Control seguro e independiente de la plataforma</small>
        </div>
        <div class="d-flex align-items-center gap-3">
          <button type="button" id="admin-theme-toggle" class="btn btn-outline-secondary btn-sm" title="Cambiar a modo oscuro/claro" aria-label="Cambiar a modo oscuro/claro">
            <i class="bi bi-moon-stars"></i>
          </button>
          <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2">
            <i class="bi bi-shield-check me-1"></i>Sesión Protegida: <?= e($_SESSION['usuario_nombre'] ?? 'Admin') ?>
          </span>
          <a href="<?= url('') ?>" target="_blank" class="btn btn-outline-primary btn-sm">
            <i class="bi bi-box-arrow-up-right me-1"></i>Ver Tienda
          </a>
        </div>
      </div>
      
      <?= flash_message() ?>

      <script>
      /* Toggle claro/oscuro del panel (listener delegado: funciona aunque el
         botón aún no exista en el DOM al ejecutarse este script) */
      document.addEventListener('click', function(e) {
        var btn = e.target.closest('#admin-theme-toggle');
        if (!btn) return;
        var dark = document.body.classList.toggle('admin-dark');
        localStorage.setItem('ts-admin-theme', dark ? 'dark' : 'light');
        var icon = btn.querySelector('i');
        if (icon) icon.className = dark ? 'bi bi-sun' : 'bi bi-moon-stars';
      });
      </script>
