<?php require_once __DIR__ . '/api/config.php'; ?>
<!DOCTYPE html>
<html class="light" lang="es">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>eTicket - Checkout Seguro</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@600&family=Inter:wght@400;500;600;700&family=Geist:wght@400;600&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script>
tailwind.config = {
  darkMode: "class",
  theme: { extend: {
    colors: {
      "surface-tint":"#004ced","primary-container":"#0052ff","outline-variant":"#c3c5d9",
      "surface":"#f9f9ff","background":"#f9f9ff","surface-bright":"#f9f9ff",
      "outline":"#737688","error":"#ba1a1a","on-primary":"#ffffff",
      "on-surface":"#141b2b","primary":"#003ec7","surface-dim":"#d3daef",
      "on-surface-variant":"#434656","surface-container-low":"#f1f3ff",
      "surface-container-lowest":"#ffffff","surface-container":"#e9edff",
      "surface-container-high":"#e1e8fd","on-primary-fixed-variant":"#0038b6",
      "secondary":"#585f6c","on-secondary":"#ffffff","on-secondary-container":"#5e6572",
      "secondary-container":"#dce2f3","tertiary":"#4b4e51","on-tertiary":"#ffffff",
      "inverse-surface":"#293040","inverse-on-surface":"#edf0ff"
    },
    fontFamily: { "headline":["Hanken Grotesk"],"body":["Inter"],"mono":["Geist"] },
    spacing: { "margin-desktop":"48px","margin-mobile":"20px" }
  }}
}
</script>
<style>
.glass-panel{background:rgba(255,255,255,0.7);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:0.5px solid rgba(233,236,239,0.5);box-shadow:0 4px 6px -1px rgba(0,0,0,0.05),0 2px 4px -1px rgba(0,0,0,0.03),0 20px 25px -5px rgba(0,0,0,0.02)}
.input-premium{background-color:transparent;border:1px solid #E9ECEF;transition:all 0.3s ease}
.input-premium:focus{border-color:#003ec7;box-shadow:0 0 0 4px rgba(0,62,199,0.1);outline:none}
.bg-gradient-subtle{background:radial-gradient(circle at top right,rgba(241,243,255,1) 0%,rgba(249,249,255,1) 50%,rgba(255,255,255,1) 100%)}
#paypal-button-container{min-height:150px}
.result-box{padding:1rem;border-radius:0.5rem;text-align:center;font-weight:600;margin-top:1rem;animation:fadeIn 0.5s ease}
.result-success{background:rgba(22,163,74,0.08);color:#16a34a;border:1px solid rgba(22,163,74,0.3)}
.result-error{background:rgba(186,26,26,0.08);color:#ba1a1a;border:1px solid rgba(186,26,26,0.3)}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{100%{transform:rotate(360deg)}}
.spinner{width:24px;height:24px;border:3px solid rgba(0,62,199,0.15);border-top-color:#003ec7;border-radius:50%;animation:spin 0.8s linear infinite;margin:2rem auto}
/* Steps */
.step-indicator{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600;background:#e9edff;color:#434656;transition:all .3s}
.step-active{background:#003ec7;color:#fff}
.step-done{background:#16a34a;color:#fff}
/* Localities */
.locality-option{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border:1.5px solid #e9ecef;border-radius:10px;cursor:pointer;transition:all .2s;margin-bottom:8px}
.locality-option:hover{border-color:#003ec7;background:#f1f3ff}
.locality-option.selected{border-color:#003ec7;background:#e9edff;box-shadow:0 0 0 2px rgba(0,62,199,0.12)}
/* Qty */
.qty-btn{width:36px;height:36px;border-radius:8px;border:1px solid #e9ecef;background:#fff;font-size:18px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#003ec7;transition:all .2s}
.qty-btn:hover{background:#e9edff;border-color:#003ec7}
</style>
</head>
<body class="bg-gradient-subtle min-h-screen flex items-center justify-center font-body text-on-surface antialiased p-margin-mobile md:p-margin-desktop">
<main class="w-full max-w-5xl mx-auto">

<!-- STEP INDICATORS -->
<div class="flex items-center justify-center gap-4 mb-6">
  <div id="step-indicator-1" class="step-indicator step-active"><span class="material-symbols-outlined text-sm">confirmation_number</span> Seleccionar Boletos</div>
  <span class="text-outline-variant">→</span>
  <div id="step-indicator-2" class="step-indicator"><span class="material-symbols-outlined text-sm">payment</span> Pago Seguro</div>
</div>

<div class="glass-panel rounded-xl overflow-hidden flex flex-col md:flex-row shadow-[0_20px_40px_-15px_rgba(0,0,0,0.05),_0_0_0_1px_rgba(233,236,239,0.5)] bg-surface-container-lowest">

<!-- ======================== LEFT SIDE ======================== -->
<div class="w-full md:w-3/5 p-6 md:p-10 border-b md:border-b-0 md:border-r border-outline-variant/30 flex flex-col">

<!-- STEP 1: SELECTOR -->
<div id="step-selector">
<header class="mb-6">
  <h1 class="font-headline text-[28px] font-semibold leading-tight tracking-tight text-on-surface mb-1" id="ev-name">Cargando...</h1>
  <p class="text-sm text-on-surface-variant" id="ev-date"></p>
  <div class="flex items-center gap-1 text-sm text-on-surface-variant mt-1">
    <span class="material-symbols-outlined text-primary text-base">location_on</span>
    <span id="ev-venue"></span> — <span id="ev-location"></span>
  </div>
</header>

<!-- MAP -->
<div class="mb-6 rounded-lg overflow-hidden border border-outline-variant/20 bg-white p-2">
  <img id="ev-map" src="" alt="Mapa del estadio" class="w-full object-contain" style="max-height:220px"/>
  <div id="map-svg-container" style="display:none; max-width:100%; height:220px;" class="flex items-center justify-center bg-slate-50">
      <!-- Clickable SVG Map of the Stadium / Arena -->
      <svg id="stadium-map" viewBox="0 0 800 450" class="w-full h-full" style="max-height: 220px;">
          <style>
              .map-sec { transition: all 0.3s ease; fill: #585f6c; stroke: #ffffff; stroke-width: 1.5; fill-opacity: 0.25; }
              .map-sec:hover { fill-opacity: 0.55 !important; stroke-width: 2.5 !important; }
              .map-sec.svg-active { fill: #003ec7 !important; fill-opacity: 0.7 !important; stroke: #003ec7 !important; stroke-width: 3.5 !important; }
              .map-label { font-family: 'Inter', sans-serif; font-size: 11px; fill: #141b2b; font-weight: 700; pointer-events: none; text-anchor: middle; dominant-baseline: middle; }
          </style>
          
          <!-- Stage -->
          <rect x="250" y="20" width="300" height="50" rx="5" fill="#141b2b" stroke="#ffffff" stroke-width="1.5"></rect>
          <text x="400" y="47" class="map-label" fill="#ffffff" style="font-size: 13px; fill: #ffffff;">ESCENARIO</text>
          
          <!-- Palcos Diamante -->
          <polygon points="300,90 500,90 515,130 285,130" class="map-sec" data-section="palcos_diamante" fill="#E5E4E2"></polygon>
          <text x="400" y="110" class="map-label" style="font-size: 10px;">PALCOS DIAMANTE</text>
          
          <!-- Palcos Oro -->
          <polygon points="280,140 285,170 515,170 520,140" class="map-sec" data-section="palcos_oro" fill="#D4AF37"></polygon>
          <text x="400" y="155" class="map-label" style="font-size: 10px;">PALCOS ORO</text>
          
          <!-- Platea A -->
          <polygon points="270,180 275,200 525,200 530,180" class="map-sec" data-section="platea_a" fill="#EF476F"></polygon>
          <text x="400" y="190" class="map-label">PLATEA A</text>

          <!-- Platea B -->
          <polygon points="260,210 265,230 535,230 540,210" class="map-sec" data-section="platea_b" fill="#FFD166"></polygon>
          <text x="400" y="220" class="map-label">PLATEA B</text>

          <!-- Platea C -->
          <polygon points="250,240 255,260 545,260 550,240" class="map-sec" data-section="platea_c" fill="#06D6A0"></polygon>
          <text x="400" y="250" class="map-label">PLATEA C</text>

          <!-- Platea D -->
          <polygon points="240,270 245,290 555,290 560,270" class="map-sec" data-section="platea_d" fill="#3A86C8"></polygon>
          <text x="400" y="280" class="map-label">PLATEA D</text>

          <!-- Platea E -->
          <polygon points="230,300 235,320 565,320 570,300" class="map-sec" data-section="platea_e" fill="#8338EC"></polygon>
          <text x="400" y="310" class="map-label">PLATEA E</text>

          <!-- Preferencial (Center Back) -->
          <polygon points="220,330 225,355 575,355 580,330" class="map-sec" data-section="preferencial" fill="#3A86C8"></polygon>
          <text x="400" y="342" class="map-label">PREFERENCIAL</text>
          
          <!-- Outer sections (Left & Right) -->
          <!-- 101, 103 & 105 -->
          <path d="M 210 90 A 250 250 0 0 0 170 330 L 195 320 A 220 220 0 0 1 230 110 Z" class="map-sec" data-section="101_103_105" fill="#FF007F"></path>
          <text x="180" y="200" class="map-label" style="font-size: 9px;">101, 103, 105</text>
          
          <!-- 102, 104 & 106 -->
          <path d="M 160 100 A 280 280 0 0 0 120 340 L 145 330 A 250 250 0 0 1 180 120 Z" class="map-sec" data-section="102_104_106" fill="#FF007F"></path>
          <text x="135" y="220" class="map-label" style="font-size: 9px;">102, 104, 106</text>
          
          <!-- 107 & 109 -->
          <path d="M 110 350 A 280 280 0 0 0 200 420 L 210 395 A 250 250 0 0 1 135 340 Z" class="map-sec" data-section="107_109" fill="#011627"></path>
          <text x="160" y="380" class="map-label" style="font-size: 9px;">107 &amp; 109</text>

          <!-- 108 & 110 -->
          <path d="M 90 360 A 310 310 0 0 0 190 440 L 200 415 A 280 280 0 0 1 115 350 Z" class="map-sec" data-section="108_110" fill="#011627"></path>
          <text x="135" y="410" class="map-label" style="font-size: 9px;">108 &amp; 110</text>
          
          <!-- 111, 113 & 115 -->
          <path d="M 590 90 A 250 250 0 0 1 630 330 L 605 320 A 220 220 0 0 0 570 110 Z" class="map-sec" data-section="111_113_115" fill="#E71D36"></path>
          <text x="620" y="200" class="map-label" style="font-size: 9px;">111, 113, 115</text>
          
          <!-- 112, 114 & 116 -->
          <path d="M 640 100 A 280 280 0 0 1 680 340 L 655 330 A 250 250 0 0 0 620 120 Z" class="map-sec" data-section="112_114_116" fill="#E71D36"></path>
          <text x="665" y="220" class="map-label" style="font-size: 9px;">112, 114, 116</text>
          
          <!-- 125 - 132 -->
          <path d="M 690 350 A 280 280 0 0 1 600 420 L 590 395 A 250 250 0 0 0 665 340 Z" class="map-sec" data-section="125_132" fill="#2EC4B6"></path>
          <text x="640" y="380" class="map-label" style="font-size: 9px;">125 - 132</text>

          <!-- 117 - 124 -->
          <path d="M 710 360 A 310 310 0 0 1 610 440 L 600 415 A 280 280 0 0 0 685 350 Z" class="map-sec" data-section="117_124" fill="#FF9F1C"></path>
          <text x="665" y="410" class="map-label" style="font-size: 9px;">117 - 124</text>
          
      </svg>
  </div>
</div>

<!-- LOCALITIES -->
<h2 class="font-mono text-xs font-semibold text-on-surface-variant mb-3 uppercase tracking-[0.05em]">Selecciona tu Localidad</h2>
<div id="localities-list" class="max-h-[280px] overflow-y-auto pr-1 mb-6"></div>

<!-- QTY -->
<div class="flex items-center justify-between mb-6">
  <span class="text-sm font-medium text-on-surface">Cantidad de boletos</span>
  <div class="flex items-center gap-3">
    <button type="button" class="qty-btn" onclick="changeQty(-1)">−</button>
    <span id="qty-display" class="font-mono text-lg font-semibold w-8 text-center">1</span>
    <button type="button" class="qty-btn" onclick="changeQty(1)">+</button>
  </div>
</div>

<!-- TOTAL + BUTTON -->
<div class="bg-surface-container-low rounded-lg p-4 border border-outline-variant/20 mb-4">
  <div class="flex justify-between items-center">
    <span class="text-on-surface-variant text-sm">Total a pagar</span>
    <div class="text-right">
      <div class="text-xl font-bold text-on-surface font-mono" id="sel-total-crc">¢156.400</div>
      <div class="text-xs text-on-surface-variant" id="sel-total-usd">$344.08 USD</div>
    </div>
  </div>
</div>
<button type="button" onclick="proceedToPayment()" class="w-full py-4 rounded-xl bg-primary text-on-primary font-semibold text-base hover:bg-on-primary-fixed-variant transition-all shadow-lg shadow-primary/20 flex items-center justify-center gap-2">
  <span class="material-symbols-outlined text-lg">shopping_cart_checkout</span> Continuar al Pago
</button>
</div>

<!-- STEP 2: PAYMENT (hidden initially) -->
<div id="step-payment" style="display:none">
<header class="mb-6">
  <button type="button" onclick="backToSelector()" class="text-sm text-primary flex items-center gap-1 mb-4 hover:underline"><span class="material-symbols-outlined text-base">arrow_back</span> Cambiar selección</button>
  <h1 class="font-headline text-[28px] font-semibold leading-tight tracking-tight text-on-surface mb-2">Pago Seguro</h1>
  <p class="text-sm text-on-surface-variant">Completa tu transacción con cifrado de extremo a extremo.</p>
</header>
<h2 class="font-mono text-xs font-semibold text-on-surface-variant mb-4 uppercase tracking-[0.05em]">Método de Pago</h2>
<div class="flex items-center gap-3 p-4 border border-primary rounded-lg bg-surface-container-low mb-6 shadow-[0_0_0_2px_rgba(0,62,199,0.1)]">
  <span class="material-symbols-outlined text-primary" style="font-variation-settings:'FILL' 1">credit_card</span>
  <span class="text-base font-medium text-on-surface">Tarjeta de Crédito</span>
  <span class="ml-auto"><span class="material-symbols-outlined text-primary text-lg">check_circle</span></span>
</div>
<div class="bg-surface-container-low rounded-lg p-6 border border-outline-variant/20">
  <div class="flex items-center gap-2 mb-4">
    <span class="material-symbols-outlined text-primary">verified_user</span>
    <span class="text-sm text-on-surface-variant">Pago seguro procesado por PayPal</span>
  </div>
  <div id="paypal-button-container"><div class="spinner"></div></div>
</div>
<div id="result-message"></div>
</div>

</div>

<!-- ======================== RIGHT SIDE: SUMMARY ======================== -->
<div class="w-full md:w-2/5 p-6 md:p-10 bg-surface-container-low flex flex-col justify-between">
<div>
  <h3 class="text-[18px] font-medium text-on-surface mb-5">Resumen del Pedido</h3>
  <div class="flex items-center gap-4 mb-6 p-4 bg-surface-container-lowest rounded-lg border border-outline-variant/20 shadow-sm">
    <img id="ev-poster" src="" alt="Poster" class="w-16 h-16 rounded object-cover bg-surface-container"/>
    <div>
      <h4 class="text-sm font-medium text-on-surface" id="display-evento">Cargando...</h4>
      <p class="text-xs text-on-surface-variant" id="sum-locality">—</p>
    </div>
  </div>
  <div class="space-y-3 mb-6 text-sm">
    <div class="flex justify-between text-on-surface-variant">
      <span>Subtotal</span><span class="font-mono text-on-surface" id="display-subtotal">$0.00</span>
    </div>
    <div class="flex justify-between text-on-surface-variant">
      <span>Comisión</span><span class="font-mono text-on-surface">$0.00</span>
    </div>
    <div class="flex justify-between text-on-surface-variant">
      <span>Impuestos</span><span class="font-mono text-on-surface">$0.00</span>
    </div>
    <div class="pt-3 border-t border-outline-variant/30 flex justify-between items-center">
      <span class="text-base font-medium text-on-surface">Total</span>
      <span class="text-xl font-bold text-on-surface font-mono" id="display-total">$0.00</span>
    </div>
  </div>
</div>
<div class="space-y-3 mt-auto">
  <div class="flex items-center gap-2 text-on-surface-variant text-xs">
    <span class="material-symbols-outlined text-green-600 text-base">verified_user</span>
    <span>Cifrado AES-256 de extremo a extremo</span>
  </div>
  <div class="flex items-center gap-2 text-on-surface-variant text-xs">
    <span class="material-symbols-outlined text-primary text-base">gpp_good</span>
    <span>Certificado PCI DSS y protección antifraude</span>
  </div>
  <div class="flex items-center gap-2 text-on-surface-variant text-xs">
    <span class="material-symbols-outlined text-on-surface-variant text-base">info</span>
    <span id="display-conversion-info">Precios en CRC convertidos a USD (1 CRC = 0.0022 USD)</span>
  </div>
</div>
</div>

</div>
<footer class="mt-6 text-center">
  <p class="font-mono text-xs text-outline tracking-[0.05em]">© 2025 eTicket — Checkout Seguro. Todos los derechos reservados.</p>
</footer>
</main>

<script>
var ORDER_DATA = { evento:"", subtotal:"0.00", comision:"0.00", impuesto:"0.00", total:"0.00" };
</script>
<script src="assets/js/events-data.js"></script>
<script src="assets/js/selector.js"></script>
<script src="https://www.paypal.com/sdk/js?client-id=<?php echo htmlspecialchars(PAYPAL_CLIENT_ID); ?>&currency=USD"></script>
<script src="assets/js/checkout.js"></script>
</body>
</html>
