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

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

// Procesar Pago Contra Entrega (POST desde JS)
$successContra = false;
$msgContra = '';
$factContra = null;
$errorContra = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['accion']) && $_POST['accion'] === 'contraentrega') {

    if (!$isLogged) {
        $errorContra = 'Debes iniciar sesión para registrar tu pedido.';
    } else {
        $itemsJson = $_POST['items'] ?? '';
        $total     = isset($_POST['total']) ? (float)$_POST['total'] : 0;
        $entrega   = $_POST['entrega'] ?? 'domicilio'; // domicilio | tienda

        $items = json_decode($itemsJson, true);

        if (!is_array($items) || empty($items) || $total <= 0) {
            $errorContra = 'El carrito está vacío o los datos no son válidos.';
        } else {
            $fecha_hoy  = date('Y-m-d');
            $hora_ahora = date('Y-m-d H:i:s');

            $sub_total  = $total;   // puedes ajustar si más adelante separas ITBIS
            $total_itbi = 0.00;
            $tipo_pago  = 'CT';   // Pago Contra Entrega
            $detalle    = 'Pago Contra Entrega - Entrega: ' . ($entrega === 'tienda' ? 'En tienda' : 'A domicilio');
			$status		= 0;

            // Insert fact_header_w (sin datos de tarjeta)
            $sqlH = "INSERT INTO fact_header_w
                (client_cod, fecha_emi, sub_total, total_itbi, tipo_pago, total_gral,
                 usuario_ua, fecha_ua, hora, Detalle, status)
                VALUES (?,?,?,?,?,?,?,?,?,?,?)";

            $stmtH = $mysqli->prepare($sqlH);
            if (!$stmtH) {
                $errorContra = 'Error al preparar encabezado: ' . $mysqli->error;
            } else {
                // Tipos: i,s,d,d,s,d,i,s,s,s
                $stmtH->bind_param(
                    'isddsdissss',
                    $idCliente,
                    $fecha_hoy,
                    $sub_total,
                    $total_itbi,
                    $tipo_pago,
                    $total,
                    $idCliente,
                    $fecha_hoy,
                    $hora_ahora,
                    $detalle, 
					$status
                );

                if ($stmtH->execute()) {
                    $num_fact = $stmtH->insert_id;

                    // Insert fact_detail_w
                    $sqlD = "INSERT INTO fact_detail_w
                        (num_fact, prod_cod, cantidad, total, precio, usuario_ua, fecha_ua)
                        VALUES (?,?,?,?,?,?,?)";
                    $stmtD = $mysqli->prepare($sqlD);

                    if (!$stmtD) {
                        $errorContra = 'Error al preparar detalle: ' . $mysqli->error;
                    } else {
                        $okDetalle = true;
                        foreach ($items as $it) {
                            $prod_cod = $it['id'];
                            $cantidad = (float)($it['qty'] ?? 1);
                            $precio   = (float)($it['precio'] ?? 0);
                            $total_r  = $precio * $cantidad;
                            $total_itbis_r = 0.00; // si luego manejas itbis real, ajusta

                            // Tipos: i,s,d,d,d,d,i,s
                            $stmtD->bind_param(
                                'isdddds',
                                $num_fact,
                                $prod_cod,
                                $cantidad,
                                $total_r,
                                $precio,
                                $idCliente,
                                $fecha_hoy
                            );

                            if (!$stmtD->execute()) {
                                $okDetalle = false;
                                $errorContra = 'Error al insertar detalle: ' . $stmtD->error;
                                break;
                            }
                        }

                        if ($okDetalle) {
                            $successContra = true;
                            $factContra = $num_fact;
                        }
                    }
                } else {
                    $errorContra = 'Error al guardar encabezado: ' . $stmtH->error;
                }
            }
        }
    }
}
?>
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Mi Carrito - 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{
      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);}
    .cart-mini-total{font-size:10px;font-weight:600;color:#111;}

    main{
      max-width:1100px;
      margin:0 auto;
      padding:calc(var(--header-h) + 26px) 16px 40px;
      min-height:calc(100vh - var(--header-h) - 180px);
    }
    .carrito-title{
      font-size:22px;
      font-weight:700;
      margin-bottom:6px;
    }
    .carrito-sub{
      font-size:13px;
      color:#6b7280;
      margin-bottom:16px;
    }
    .carrito-layout{
      display:grid;
      grid-template-columns:2.3fr 1.2fr;
      gap:18px;
      align-items:flex-start;
    }
    .carrito-box{
      background:#fff;
      border-radius:14px;
      border:1px solid var(--gris-borde);
      padding:14px;
      box-shadow:0 10px 24px rgba(15,23,42,.05);
    }

    table.carrito-table{
      width:100%;
      border-collapse:collapse;
      font-size:13px;
    }
    .carrito-table thead{
      background:#f3f4f6;
    }
    .carrito-table th,
    .carrito-table td{
      padding:8px;
      border-bottom:1px solid #e5e7eb;
      vertical-align:middle;
    }
    .carrito-table th{
      text-align:left;
      color:#6b7280;
      font-weight:600;
      font-size:12px;
    }
    .carrito-table td img{
      width:45px;
      height:45px;
      object-fit:contain;
      border-radius:6px;
      border:1px solid #e5e7eb;
      background:#fff;
    }
    .carrito-nombre{
      font-weight:600;
      color:#111827;
      font-size:13px;
    }
    .carrito-precio,
    .carrito-subtotal{
      white-space:nowrap;
      font-weight:600;
      color:#111827;
    }
    .qty-control{
      display:inline-flex;
      align-items:center;
      border:1px solid #e5e7eb;
      border-radius:8px;
      overflow:hidden;
    }
    .qty-control button{
      width:22px;
      height:22px;
      border:none;
      background:#f3f4f6;
      cursor:pointer;
      font-size:14px;
      line-height:1;
    }
    .qty-control span{
      padding:0 6px;
      font-size:12px;
    }
    .btn-remove{
      border:none;
      background:transparent;
      color:#ef4444;
      cursor:pointer;
      font-size:11px;
    }

    .resumen-title{
      font-weight:700;
      font-size:15px;
      margin-bottom:8px;
    }
    .resumen-line{
      display:flex;
      justify-content:space-between;
      font-size:13px;
      margin:3px 0;
      color:#4b5563;
    }
    .resumen-total{
      font-size:18px;
      font-weight:800;
      color:#111827;
      margin-top:6px;
      display:flex;
      justify-content:space-between;
      align-items:center;
    }
    .resumen-note{
      font-size:10px;
      color:#6b7280;
      margin-top:4px;
      line-height:1.4;
    }
    .btn-full{
      width:100%;
      margin-top:8px;
      padding:10px 14px;
      border-radius:12px;
      border:none;
      cursor:pointer;
      font-weight:700;
      font-size:14px;
    }
    .btn-seguir{
      background:#ffffff;
      border:1px solid #e5e7eb;
      color:#111827;
    }
    .btn-pagar{
      background:var(--mamey);
      color:#ffffff;
    }
    .btn-pagar:hover{
      background:var(--mamey-dark);
    }
	
	.metodos{
	  margin-top:12px;
	  display:flex;
	  flex-direction:column;
	  gap:12px;
	  font-size:12px;
	  color:#374151;
	}
	
	/* Grupo (título arriba + caja abajo) */
	.metodos-group{
	  display:flex;
	  flex-direction:column;
	  gap:4px;
	}
	
	/* Título encima de cada caja */
	.metodos-label{
	  font-weight:700;
	  font-size:11px;
	  color:#4b5563;
	  text-transform:uppercase;
	  letter-spacing:.06em;
	}
	
	/* Caja contenedora (lista de radios) */
	.metodos-box{
	  border:1px solid var(--gris-borde);
	  border-radius:10px;
	  padding:8px 10px 6px;
	  background:#f9fafb;
	}
	
	/* Opciones dentro de la caja */
	.metodos-box label{
	  display:flex;
	  align-items:center;
	  gap:6px;
	  margin:2px 0;
	  cursor:pointer;
	  font-size:12px;
	  color:#374151;
	}
	.metodos-box input[type="radio"]{
	  accent-color:var(--mamey);
	}

    .ok-msg{
      padding:8px;
      margin-bottom:10px;
      background:#ecfdf5;
      color:#166534;
      font-size:12px;
      border-radius:8px;
    }
    .err-msg{
      padding:8px;
      margin-bottom:10px;
      background:#fef2f2;
      color:#b91c1c;
      font-size:12px;
      border-radius:8px;
    }

    @media(max-width:900px){
      .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;
      }
      main{
        padding:calc(var(--header-h) + 26px) 10px 30px;
      }
      .carrito-layout{
        grid-template-columns:1fr;
      }
      .foot-wrap{grid-template-columns:1fr 1fr;}
    }
    footer{
      background:#0f172a;color:#e2e8f0;
    }
    .foot-wrap{
      max-width:1300px;margin:0 auto;
      padding:32px 16px 26px;
      display:grid;gap:24px;
      grid-template-columns:2fr 1fr 1.3fr 1.5fr;
      font-size:14px;
    }
    .foot-title{font-weight:800;margin-bottom:10px;}
    .foot-links a{
      display:block;color:#e2e8f0;
      text-decoration:none;padding:4px 0;
      font-size:13px;
    }
    .foot-links a:hover{text-decoration:underline;}
    .boletin input{
      width:100%;height:38px;border-radius:10px;
      border:1px solid #334155;background:#0b1220;
      color:#e2e8f0;padding:0 10px;
      margin-bottom:6px;font-size:13px;
    }
    .btn-sub{
      width:100%;height:38px;border-radius:10px;
      border:none;background:var(--mamey);
      color:#fff;font-weight:700;
      cursor:pointer;font-size:13px;
    }
    .foot-copy{
      border-top:1px solid #1f2937;
      text-align:center;padding:10px;
      font-size:12px;color:#94a3b8;
    }
    @media(max-width:560px){
      .foot-wrap{grid-template-columns:1fr;}
    }
  </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">
      <input type="search" placeholder="Buscar" 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">
        <img src="images/logo_dragon1.png" alt="Supermercado Dragón de Oro">
      </a>
    </div>
    <nav class="main-menu">
      <a href="index">Inicio</a>
      <a href="#">Nosotros</a>
      <a href="#">Ofertas</a>
      <a href="#">Contactos</a>

      <?php if (!$isLogged): ?>
      <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">Ingresar</a>
          <div class="divider"></div>
          <a href="registro">Registrarme</a>
        </div>
      </div>
      <?php else: ?>
      <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">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">Carrito</div>
          <div class="cart-mini-count" id="cartMiniCount">0</div>
          <div class="cart-mini-total" id="cartMiniTotal">RD$ 0.00</div>
        </div>
      </div>
    </nav>
  </div>
</header>

<main>
  <div class="carrito-title">Mi carrito de compras</div>
  <div class="carrito-sub">Revisa tus productos, selecciona el método de pago y entrega.</div>

	<?php if ($errorContra): ?>
      <div class="err-msg"><?= htmlspecialchars($errorContra) ?></div>
    <?php endif; ?>

  <div class="carrito-layout">
    <div class="carrito-box">
      <table class="carrito-table">
        <thead>
          <tr>
            <th>Producto</th>
            <th>Precio</th>
            <th>Cant.</th>
            <th>Subtotal</th>
            <th></th>
          </tr>
        </thead>
        <tbody id="carritoBody"></tbody>
      </table>
      <div id="carritoVacio" style="display:none;padding:10px;font-size:13px;color:#6b7280;">
        Tu carrito está vacío. Agrega productos desde la tienda.
      </div>
    </div>

    <div class="carrito-box">
      <div class="resumen-title">Resumen de compra</div>
      <div class="resumen-line">
        <span>Artículos:</span>
        <span id="resCant">0</span>
      </div>
      <div class="resumen-line">
        <span>Subtotal:</span>
        <span id="resSub">RD$ 0.00</span>
      </div>
      <div class="resumen-total">
        <span>Total a pagar:</span>
        <span id="resTotal">RD$ 0.00</span>
      </div>

        <div class="metodos">
          <!-- Grupo: Método de pago -->
          <div class="metodos-group">
            <div class="metodos-label">MÉTODO DE PAGO</div>
            <div class="metodos-box">
              <label>
                <input type="radio" name="metodo_pago" value="tarjeta" checked>
                Tarjeta de crédito / débito
              </label>
              <br/>
              <label>
                <input type="radio" name="metodo_pago" value="contraentrega">
                Pago Contra Entrega
              </label>
            </div>
          </div>
        
          <!-- Grupo: Método de entrega -->
          <br/>
          <div class="metodos-group">
            <div class="metodos-label">MÉTODO DE ENTREGA</div>
            <div class="metodos-box">
              <label>
                <input type="radio" name="metodo_entrega" value="domicilio" checked>
                A domicilio
              </label>
              <br/>
              <label>
                <input type="radio" name="metodo_entrega" value="tienda">
                Recoger en tienda
              </label>
            </div>
          </div>
        </div>

      <button class="btn-full btn-seguir" id="btnSeguir">← Seguir comprando</button>
      <button class="btn-full btn-pagar" id="btnPagar">Confirmar pedido</button>

      <div class="resumen-note">
        Si eliges "Tarjeta de crédito", serás dirigido a la pasarela de pago.<br>
        Si eliges "Pago Contra Entrega", tu pedido se registrará y pagarás al recibir o al retirar.
      </div>
    </div>
  </div>
</main>

<footer>
  <div class="foot-wrap">
    <div>
      <div class="foot-title">Dragón de Oro</div>
      <div style="line-height:1.6;color:#cbd5e1;">
        Desde 1989 trabajamos para brindar excelencia y atención a nuestros clientes.
      </div>
    </div>
    <div class="foot-links">
      <div class="foot-title">Enlaces directos</div>
      <a href="index">Inicio</a>
      <a href="#">Nosotros</a>
      <a href="#">Ofertas</a>
      <a href="#">Contactos</a>
    </div>
    <div class="boletin">
      <div class="foot-title">Suscribirme al boletín</div>
      <input type="text" placeholder="Nombre completo">
      <input type="email" placeholder="Correo electrónico">
      <button class="btn-sub">Suscribirme</button>
    </div>
    <div>
      <div class="foot-title">Contactos</div>
      <div style="font-size:13px;color:#cbd5e1;line-height:1.7;">
        Av. Rómulo Betancourt 1351, Santo Domingo<br>
        (809) 533-9616<br>
        info@supermercadodragondeoro.com
      </div>
      <div class="foot-title" style="margin-top:12px;">Redes Sociales</div>
      <div>Facebook · Instagram</div>
    </div>
  </div>
  <div class="foot-copy">© 2025 Supermercado Dragón de Oro. Todos los derechos reservados.</div>
</footer>

<script>
  const IS_LOGGED = <?= $isLogged ? 'true' : 'false'; ?>;
  const SUCCESS_CONTRA = <?= $successContra ? 'true' : 'false'; ?>;
  const FACT_CONTRA = <?= $successContra ? (int)$factContra : 'null'; ?>;

  const CART_ITEMS_KEY = 'cart_items_super';
  const CART_COUNT_KEY = 'cart_count_super';
  const CART_TOTAL_KEY = 'cart_total_super';

  const cartMiniCountEl = document.getElementById('cartMiniCount');
  const cartMiniTotalEl = document.getElementById('cartMiniTotal');

  // Si no está logueado => vacía y redirige
  if (!IS_LOGGED && !SUCCESS_CONTRA) {
    localStorage.setItem(CART_ITEMS_KEY,'[]');
    localStorage.setItem(CART_COUNT_KEY,'0');
    localStorage.setItem(CART_TOTAL_KEY,'0');
    Swal.fire({
      icon:'warning',
      title:'Debes iniciar sesión',
      text:'Inicia sesión para ver y gestionar tu carrito.',
      confirmButtonColor:'#e1552f',
      confirmButtonText:'Ir a Ingresar'
    }).then(()=>{ window.location.href='login'; });
  }

  	// Si el pedido contra entrega fue exitoso => limpiar carrito en navegador
	// Si el pedido contra entrega fue exitoso => limpiar carrito y mostrar modal
	if (SUCCESS_CONTRA) {
	  localStorage.setItem(CART_ITEMS_KEY,'[]');
	  localStorage.setItem(CART_COUNT_KEY,'0');
	  localStorage.setItem(CART_TOTAL_KEY,'0');
	
	  // Actualizar mini carrito visual
	  if (cartMiniCountEl) cartMiniCountEl.textContent = '0';
	  if (cartMiniTotalEl) cartMiniTotalEl.textContent = 'RD$ 0.00';
	
	  if (typeof Swal !== 'undefined') {
		Swal.fire({
		  icon: 'success',
		  title: 'Pedido registrado',
		  html: 'Tu pedido ha sido registrado con éxito (Pago Contra Entrega).<br><br>' +
				'<b>Número de pedido: ' + (FACT_CONTRA ?? '') + '</b>',
		  confirmButtonColor: '#e1552f',
		  confirmButtonText: 'Aceptar'
		}).then(() => {
		  window.location.href = 'index.php';
		});
	  } else {
		alert('Tu pedido ha sido registrado con éxito. Número de pedido: ' + (FACT_CONTRA ?? ''));
		window.location.href = 'index.php';
	  }
	}


  const parseJSON = (v, def) => { try { return JSON.parse(v); } catch(e){ return def; } };
  const getItems = () => parseJSON(localStorage.getItem(CART_ITEMS_KEY) || '[]', []);
  const saveItems = (items) => localStorage.setItem(CART_ITEMS_KEY, JSON.stringify(items || []));

  const formatMoney = (n) =>
    'RD$ ' + Number(n).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,');

  const tbody   = document.getElementById('carritoBody');
  const vacioEl = document.getElementById('carritoVacio');
  const resCant = document.getElementById('resCant');
  const resSub  = document.getElementById('resSub');
  const resTotal= document.getElementById('resTotal');

function syncFromItems(){
  const items = getItems();
  let totalCant = 0;
  let total = 0;
  items.forEach(it => {
    const q = Number(it.qty) || 0;
    const p = Number(it.precio) || 0;
    totalCant += q;
    total += q * p;
  });

  localStorage.setItem(CART_COUNT_KEY, String(totalCant));
  localStorage.setItem(CART_TOTAL_KEY, String(total.toFixed(2)));

  if (cartMiniCountEl) cartMiniCountEl.textContent = totalCant;
  if (cartMiniTotalEl) cartMiniTotalEl.textContent = formatMoney(total);

  if (resCant)  resCant.textContent  = totalCant;
  if (resSub)   resSub.textContent   = formatMoney(total);
  if (resTotal) resTotal.textContent = formatMoney(total);

  if (!items.length){
    tbody.innerHTML = '';
    vacioEl.style.display = 'block';
  } else {
    vacioEl.style.display = 'none';
  }

  // 👇 Aquí controlamos el botón Confirmar pedido
  if (btnPagar) {
    btnPagar.style.display = total > 0 ? 'block' : 'none';
  }
}

  function renderCart(){
    const items = getItems();
    tbody.innerHTML = '';

    if (!items.length){
      vacioEl.style.display = 'block';
      syncFromItems();
      return;
    }
    vacioEl.style.display = 'none';

    items.forEach((it, index) => {
      const tr = document.createElement('tr');

      const tdProd = document.createElement('td');
      tdProd.innerHTML = `
        <div style="display:flex;align-items:center;gap:8px;">
          <img src="${it.imagen || 'images/logo_dragon1.png'}" alt="">
          <div class="carrito-nombre">${it.titulo || ''}</div>
        </div>`;

      const tdPrecio = document.createElement('td');
      tdPrecio.className = 'carrito-precio';
      tdPrecio.textContent = formatMoney(Number(it.precio) || 0);

      const tdQty = document.createElement('td');
      const qtyWrap = document.createElement('div');
      qtyWrap.className = 'qty-control';
      const btnMenos = document.createElement('button'); btnMenos.textContent = '−';
      const spanQty = document.createElement('span'); spanQty.textContent = it.qty || 1;
      const btnMas = document.createElement('button'); btnMas.textContent = '+';
      qtyWrap.append(btnMenos, spanQty, btnMas);
      tdQty.appendChild(qtyWrap);

      const tdSub = document.createElement('td');
      tdSub.className = 'carrito-subtotal';
      const subtotal = (Number(it.precio) || 0) * (Number(it.qty) || 1);
      tdSub.textContent = formatMoney(subtotal);

      const tdAcc = document.createElement('td');
      const btnDel = document.createElement('button');
      btnDel.className = 'btn-remove';
      btnDel.textContent = 'Eliminar';
      tdAcc.appendChild(btnDel);

      btnMas.onclick = () => {
        const arr = getItems();
        arr[index].qty = (Number(arr[index].qty) || 1) + 1;
        saveItems(arr);
        renderCart();
        syncFromItems();
      };
      btnMenos.onclick = () => {
        const arr = getItems();
        const current = Number(arr[index].qty) || 1;
        if (current > 1) {
          arr[index].qty = current - 1;
        } else {
          arr.splice(index,1);
        }
        saveItems(arr);
        renderCart();
        syncFromItems();
      };
      btnDel.onclick = () => {
        const arr = getItems();
        arr.splice(index,1);
        saveItems(arr);
        renderCart();
        syncFromItems();
      };

      tr.append(tdProd, tdPrecio, tdQty, tdSub, tdAcc);
      tbody.appendChild(tr);
    });

    syncFromItems();
  }

  // Botones
  const btnSeguir = document.getElementById('btnSeguir');
  const btnPagar  = document.getElementById('btnPagar');

  if (btnSeguir){
    btnSeguir.onclick = () => window.location.href = 'index';
  }

  if (btnPagar){
    btnPagar.onclick = () => {
      const items = getItems();
      if (!items.length){
        Swal.fire({
          icon:'info',
          title:'Carrito vacío',
          text:'Agrega productos antes de continuar.',
          confirmButtonColor:'#e1552f'
        });
        return;
      }

      const total = parseFloat(localStorage.getItem(CART_TOTAL_KEY) || '0') || 0;
      const mp = document.querySelector('input[name="metodo_pago"]:checked')?.value || 'tarjeta';
      const entrega = document.querySelector('input[name="metodo_entrega"]:checked')?.value || 'domicilio';

      if (mp === 'tarjeta') {
        // Enviar a pago_tarjeta.php
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = 'pago_tarjeta';

        const inputItems = document.createElement('input');
        inputItems.type = 'hidden';
        inputItems.name = 'items';
        inputItems.value = JSON.stringify(items);

        const inputTotal = document.createElement('input');
        inputTotal.type = 'hidden';
        inputTotal.name = 'total';
        inputTotal.value = total.toFixed(2);

        form.appendChild(inputItems);
        form.appendChild(inputTotal);
        document.body.appendChild(form);
        form.submit();
      } else {
        // Pago Contra Entrega -> enviar a este mismo archivo
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = 'carrito';

        const inputAcc = document.createElement('input');
        inputAcc.type = 'hidden';
        inputAcc.name = 'accion';
        inputAcc.value = 'contraentrega';

        const inputItems = document.createElement('input');
        inputItems.type = 'hidden';
        inputItems.name = 'items';
        inputItems.value = JSON.stringify(items);

        const inputTotal = document.createElement('input');
        inputTotal.type = 'hidden';
        inputTotal.name = 'total';
        inputTotal.value = total.toFixed(2);

        const inputEnt = document.createElement('input');
        inputEnt.type = 'hidden';
        inputEnt.name = 'entrega';
        inputEnt.value = entrega;

        form.appendChild(inputAcc);
        form.appendChild(inputItems);
        form.appendChild(inputTotal);
        form.appendChild(inputEnt);
        document.body.appendChild(form);
        form.submit();
      }
    };
  }

  // 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');
      }
    });
  }

  // Inicializar carrito visual (si no es POST success)
  if (!SUCCESS_CONTRA) {
    renderCart();
  } else {
    // Ya se limpió arriba
    if (cartMiniCountEl) cartMiniCountEl.textContent = '0';
    if (cartMiniTotalEl) cartMiniTotalEl.textContent = 'RD$ 0.00';
  }
</script>
</body>
</html>
