<?php
session_start();
require_once __DIR__ . '/Connections/conexionabm.php';

// Estado de login similar a index.php
$isLogged = isset($_SESSION['id_cliente']);
if ($isLogged) {
    if (!empty($_SESSION['nombre_cliente'])) {
        $nombreCliente = $_SESSION['nombre_cliente'];
    } elseif (!empty($_SESSION['usuario_cliente'])) {
        $nombreCliente = $_SESSION['usuario_cliente'];
    } else {
        $nombreCliente = 'Cliente';
    }
} else {
    $nombreCliente = null;
}

// Obtener código de producto
$prod_cod = isset($_GET['id']) ? trim($_GET['id']) : '';

if ($prod_cod === '') {
    http_response_code(404);
    die('Producto no especificado.');
}

$sql = "
    SELECT 
        p.prod_cod,
        p.descripcio,
        p.precio,
        p.precio_esp,
        p.fotopath,
        p.categoria,
        p.division,
        p.marca,
        p.esp_si_no,
        p.si_no_itbis,
        p.total_itbis,
        p.gana_bru
    FROM productos p
    WHERE p.prod_cod = ?
      AND (p.borrado = 0 OR p.borrado IS NULL)
    LIMIT 1
";
$stmt = $mysqli->prepare($sql);
if (!$stmt) {
    http_response_code(500);
    die('Error en prepare: '.$mysqli->error);
}
$stmt->bind_param("s", $prod_cod);
$stmt->execute();
$res = $stmt->get_result();
$prod = $res->fetch_assoc();

if (!$prod) {
    http_response_code(404);
    die('Producto no encontrado.');
}

// precio final
$precio = (float)$prod['precio_esp'];
if ($precio <= 0) {
    $precio = (float)$prod['precio'];
}

// imagen (si no tiene, usamos logo)
$img = trim((string)$prod['fotopath']);
if ($img === '') {
    $img = 'images/logo_dragon1.png';
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= htmlspecialchars($prod['descripcio']) ?> - Supermercado Dragón de Oro</title>
  <style>
    :root{
      --rojo:#ff0000;
      --mamey:#e1552f;
      --mamey-dark:#c14425;
      --gris:#f3f4f6;
      --gris-borde:#e5e7eb;
      --texto:#111827;
      --blanco:#ffffff;
      --header-h:118px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    body{
      font-family:Arial,sans-serif;
      color:var(--texto);
      background:#F9FBFB;
    }

    /* HEADER IGUAL QUE INDEX */
    header{
      position:fixed;
      top:0;left:0;right:0;
      z-index:1000;
      background:var(--blanco);
      box-shadow:0 1px 6px rgba(0,0,0,.08);
    }
    .topbar{
      background:var(--rojo);color:#fff;
      display:grid;
      grid-template-columns:minmax(0,1.4fr) minmax(0,1.6fr) auto;
      align-items:center;gap:16px;
      padding:6px 24px;font-size:13px;
    }
    .top-left{display:flex;align-items:center;gap:20px;white-space:nowrap;}
    .top-left span{display:flex;align-items:center;gap:6px;}
    .top-search{display:flex;justify-content:center;}
    .top-search input{
      width:100%;max-width:420px;height:30px;
      border-radius:999px;border:none;
      padding:0 14px;font-size:13px;outline:none;color:#111;
    }
    .top-right{display:flex;justify-content:flex-end;gap:14px;font-size:16px;}
    .top-right a{color:#fff;text-decoration:none;}

    .nav-white{
      background:#fff;
      display:flex;align-items:center;justify-content:space-between;
      padding:12px 40px 10px;
    }
    .logo-wrap{display:flex;align-items:center;gap:10px;}
    .logo-wrap img{height:55px;width:auto;display:block;}

    .main-menu{
      display:flex;align-items:center;gap:26px;
      font-size:14px;font-weight:500;
      text-transform:uppercase;letter-spacing:.4px;
    }
    .main-menu a{
      color:#111;text-decoration:none;
      padding-bottom:4px;border-bottom:2px solid transparent;
    }
    .main-menu a:hover,
    .main-menu a.activo{
      color:var(--mamey);border-bottom-color:var(--mamey);
    }

    .cuenta-wrap{position:relative;display:inline-flex;align-items:center;}
    .btn-cuenta{
      background:transparent;border:none;cursor:pointer;
      font:inherit;color:#111;text-transform:uppercase;
      display:flex;align-items:center;gap:4px;
      padding-bottom:4px;border-bottom:2px solid transparent;
    }
    .btn-cuenta:hover{
      color:var(--mamey);border-bottom-color:var(--mamey);
    }
    .dropdown{
      position:absolute;right:0;top:120%;
      width:210px;background:#fff;
      border:1px solid var(--gris-borde);
      border-radius:12px;
      box-shadow:0 16px 35px rgba(0,0,0,.14);
      display:none;overflow:hidden;z-index:1200;
    }
    .dropdown a{
      display:block;padding:10px 14px;
      text-decoration:none;color:#111;
      font-weight:600;font-size:13px;
    }
    .dropdown a:hover{background:#f9fafb;}
    .dropdown .divider{height:1px;background:#e5e7eb;}

    .cart-mini-wrap{
      display:flex;
      align-items:center;
      gap:6px;
      cursor:pointer;
    }
    .cart-mini-wrap img{
      height:22px;
      width:auto;
      display:block;
    }
    .cart-mini-label{
      font-size:11px;
      color:#111;
    }
    .cart-mini-count{
      font-size:12px;
      font-weight:700;
      color:var(--mamey);
    }

    /* CONTENIDO PRODUCTO */
    main{
      max-width:1100px;
      margin:0 auto;
      padding:calc(var(--header-h) + 30px) 16px 40px;
    }
    .breadcrumb{
      font-size:12px;
      color:#6b7280;
      margin-bottom:10px;
    }
    .breadcrumb a{
      color:#6b7280;
      text-decoration:none;
    }
    .breadcrumb a:hover{
      text-decoration:underline;
    }
    .wrap{
      display:grid;
      grid-template-columns:1fr 1.4fr;
      gap:24px;
      align-items:flex-start;
    }
    .box{
      background:#fff;
      border-radius:14px;
      border:1px solid var(--gris-borde);
      padding:16px;
      box-shadow:0 10px 24px rgba(15,23,42,.06);
    }
    .box img{
      max-width:100%;
      max-height:360px;
      object-fit:contain;
      display:block;
      margin:0 auto;
    }
    h1{
      font-size:22px;
      margin-bottom:6px;
      color:#111827;
    }
    .categoria{
      font-size:13px;
      color:#6b7280;
      margin-bottom:12px;
    }
    .precio{
      font-size:26px;
      font-weight:800;
      color:#0b7a28;
      margin:8px 0 16px;
    }
    .btn-primary{
      background:var(--mamey);
      color:#fff;
      border:none;
      border-radius:12px;
      padding:10px 18px;
      font-weight:700;
      font-size:14px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
    }
    .btn-primary:hover{background:var(--mamey-dark);}
    .btn-sec{
      background:#fff;
      color:#111;
      border:1px solid var(--gris-borde);
      border-radius:12px;
      padding:10px 16px;
      font-size:13px;
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      margin-left:8px;
    }
    .muted{
      color:#6b7280;
      font-size:12px;
      margin-top:10px;
      line-height:1.6;
    }
    @media(max-width:900px){
      .wrap{
        grid-template-columns:1fr;
      }
      main{
        padding:calc(var(--header-h) + 20px) 10px 30px;
      }
      .nav-white{
        flex-direction:column;
        align-items:flex-start;
        padding:8px 16px 10px;
      }
      .main-menu{
        flex-wrap:wrap;
        gap:14px;
        margin-top:4px;
        font-size:12px;
      }
    }
  </style>

  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</head>
<body>
<header>
  <div class="topbar">
    <div class="top-left">
      <span>📞 (809) 533-9616</span>
      <span>✉️ info@supermercadodragondeoro.com</span>
    </div>
    <div class="top-search">
      <!-- si quieres, aquí podrías hacer que busque y redirija a index con q= -->
      <input type="search" placeholder="Buscar productos" disabled style="opacity:.3;cursor:not-allowed">
    </div>
    <div class="top-right">
      <a href="#" aria-label="Facebook">f</a>
      <a href="#" aria-label="Instagram">◎</a>
    </div>
  </div>
  <div class="nav-white">
    <div class="logo-wrap">
      <a href="index.php">
        <img src="images/logo_dragon1.png" alt="Supermercado Dragón de Oro">
      </a>
    </div>
    <nav class="main-menu">
      <a href="index.php">Inicio</a>
      <a href="#">Nosotros</a>
      <a href="#">Ofertas</a>
      <a href="#">Contactos</a>

      <?php if (!$isLogged): ?>
      <!-- No logueado -->
      <div class="cuenta-wrap">
        <button class="btn-cuenta" id="btnCuenta" aria-haspopup="true" aria-expanded="false">
          Mi Cuenta ▾
        </button>
        <div class="dropdown" id="menuCuenta">
          <a href="login.php">Ingresar</a>
          <div class="divider"></div>
          <a href="registro.php">Registrarme</a>
        </div>
      </div>
      <?php else: ?>
      <!-- Logueado -->
      <div class="cuenta-wrap">
        <button class="btn-cuenta" id="btnCuenta" aria-haspopup="true" aria-expanded="false">
          <?= htmlspecialchars('Hola, ' . $nombreCliente) ?> ▾
        </button>
        <div class="dropdown" id="menuCuenta">
          <a href="logout.php">Cerrar sesión</a>
        </div>
      </div>
      <?php endif; ?>

      <div class="cart-mini-wrap" onclick="window.location.href='carrito'">
        <img src="images/carrito_compra4.png" alt="Carrito de compras">
        <div>
          <div class="cart-mini-label"></div>
          <div class="cart-mini-count" id="cartMiniCount">0</div>
        </div>
      </div>
    </nav>
  </div>
</header>

<main>
  <div class="breadcrumb">
    <a href="index.php">Inicio</a> ›
    <span><?= htmlspecialchars($prod['categoria'] ?: 'Producto') ?></span>
  </div>

  <div class="wrap">
    <div class="box">
      <img src="<?= htmlspecialchars($img) ?>" alt="<?= htmlspecialchars($prod['descripcio']) ?>">
    </div>
    <div class="box">
      <h1><?= htmlspecialchars($prod['descripcio']) ?></h1>
      <div class="categoria">
        <?= htmlspecialchars($prod['categoria']) ?>
        <?php if (!empty($prod['marca'])): ?>
          · Marca: <?= htmlspecialchars($prod['marca']) ?>
        <?php endif; ?>
        <?php if (!empty($prod['division'])): ?>
          · División: <?= htmlspecialchars($prod['division']) ?>
        <?php endif; ?>
      </div>

      <div class="precio">$<?= number_format($precio, 2, '.', ',') ?></div>

      <button class="btn-primary" id="btnAdd">
        Agregar al carrito
      </button>
      <button class="btn-sec" onclick="window.location.href='index.php'">
        Seguir comprando
      </button>

      <div class="muted">
        Código: <?= htmlspecialchars($prod['prod_cod']) ?><br>
        <?= ($prod['si_no_itbis'] === 'S') ? 'Incluye ITBIS' : 'Sin ITBIS incluido'; ?>
      </div>
    </div>
  </div>
</main>

<script>
  // Estado de login desde PHP
  const IS_LOGGED = <?= $isLogged ? 'true' : 'false'; ?>;

  // Mini carrito (mismo comportamiento que index.php)
  const CART_KEY = 'cart_count_super';
  const cartMiniCountEl = document.getElementById('cartMiniCount');
  const getCart = () => parseInt(localStorage.getItem(CART_KEY) || '0', 10);
  const setCart = n => {
    localStorage.setItem(CART_KEY, String(n));
    if (cartMiniCountEl) cartMiniCountEl.textContent = n;
  };
  setCart(getCart());

  // Dropdown Mi Cuenta
  const btnCuenta = document.getElementById('btnCuenta');
  const menuCuenta = document.getElementById('menuCuenta');
  if (btnCuenta && menuCuenta) {
    btnCuenta.addEventListener('click', () => {
      const show = menuCuenta.style.display !== 'block';
      menuCuenta.style.display = show ? 'block' : 'none';
      btnCuenta.setAttribute('aria-expanded', show ? 'true' : 'false');
    });
    document.addEventListener('click', e => {
      if (!menuCuenta.contains(e.target) && !btnCuenta.contains(e.target)) {
        menuCuenta.style.display = 'none';
        btnCuenta.setAttribute('aria-expanded', 'false');
      }
    });
  }

  // Agregar al carrito con misma lógica que index.php
  const btnAdd = document.getElementById('btnAdd');
  if (btnAdd) {
    btnAdd.addEventListener('click', () => {
      if (!IS_LOGGED) {
        Swal.fire({
          icon: 'warning',
          title: 'Inicia sesión para continuar',
          text: 'Para agregar productos al carrito debes iniciar sesión.',
          confirmButtonText: 'Ir a Ingresar',
          confirmButtonColor: '#e1552f',
          showCancelButton: true,
          cancelButtonText: 'Cancelar'
        }).then((result) => {
          if (result.isConfirmed) {
            window.location.href = 'login.php';
          }
        });
        return;
      }

      // Si está logueado
      setCart(getCart() + 1);
      Swal.fire({
        icon: 'success',
        title: 'Producto agregado',
        showConfirmButton: false,
        timer: 900
      });
    });
  }
</script>
</body>
</html>
