Tul xxx Tul

Viewing: index.php

<?php
include 'components/connect.php';

function normaliza_categoria($nombre) {
  $nombre = trim((string)$nombre);
  if ($nombre === '') {
    return 'sin-categoria';
  }
  $nombre = iconv('UTF-8', 'ASCII//TRANSLIT', $nombre);
  $nombre = strtolower((string)$nombre);
  $nombre = preg_replace('/[^a-z0-9]+/', '-', $nombre);
  $nombre = trim($nombre, '-');
  return $nombre;
}

$systemCurrency = getSystemCurrency($conn);
$businessName = getBusinessName($conn);
$businessLogo = getBusinessLogo($conn);
$businessLogoVersion = getBusinessLogoVersion($conn);
$businessPhone = getBusinessPhone($conn);
$businessHours = trim((string)getSystemSetting($conn, 'business_hours', ''));
$businessAddress = trim((string)getSystemSetting($conn, 'business_address', ''));
$googleMapsUrl = trim((string)getSystemSetting($conn, 'google_maps_url', ''));
$businessLocationHint = trim((string)getSystemSetting($conn, 'business_location_hint', ''));

$socialFacebookUrl = trim((string)getSystemSetting($conn, 'social_facebook_url', ''));
$socialInstagramUrl = trim((string)getSystemSetting($conn, 'social_instagram_url', ''));
$socialGmailUrl = trim((string)getSystemSetting($conn, 'social_gmail_url', ''));

$paymentBanksJson = (string)getSystemSetting($conn, 'payment_banks', '');
$paymentBanksRaw = json_decode($paymentBanksJson, true);
if (!is_array($paymentBanksRaw)) {
  $paymentBanksRaw = [];
}

if ($businessHours === '') {
  $businessHours = 'Todos los días: 4:30 PM - 11:30 PM';
}
if ($businessAddress === '') {
  $businessAddress = 'Av. 6 , #17-77, Barrio La Cabrera, Cúcuta, Norte de Santander, Colombia.';
}
if ($googleMapsUrl === '') {
  $googleMapsUrl = 'https://maps.app.goo.gl/FiWLRGpXxnTb3gzL6';
}
if ($businessLocationHint === '') {
  $businessLocationHint = 'Centro La Cabrera';
}
$businessLogoHref = ltrim($businessLogo, '/');
if ($businessLogoVersion !== '') {
  $businessLogoHref .= (strpos($businessLogoHref, '?') === false ? '?' : '&') . 'v=' . rawurlencode($businessLogoVersion);
}
$businessIconV = $businessLogoVersion !== '' ? '&v=' . rawurlencode($businessLogoVersion) : '';
$manifestV = $businessLogoVersion !== '' ? '?v=' . rawurlencode($businessLogoVersion) : '';
$businessPhoneDisplay = $businessPhone;
$businessPhoneDigits = preg_replace('/\D+/', '', $businessPhone);
$businessPhoneLocalDigits = $businessPhoneDigits;
if ($businessPhoneLocalDigits !== '' && strlen($businessPhoneLocalDigits) > 10) {
  $businessPhoneLocalDigits = substr($businessPhoneLocalDigits, -10);
}
$businessWhatsappNumber = $businessPhoneDigits;
if ($businessWhatsappNumber === '') {
  $businessWhatsappNumber = '573223512346';
} elseif (strlen($businessWhatsappNumber) === 10) {
  $businessWhatsappNumber = '57' . $businessWhatsappNumber;
}
$whatsappInquiryUrl = 'https://wa.me/' . $businessWhatsappNumber . '?text=' . rawurlencode('👋 Hola, tengo una pregunta sobre ' . $businessName . ' 🍔');

$paymentBanks = [];
foreach ($paymentBanksRaw as $idx => $b) {
  if (!is_array($b)) {
    continue;
  }

  $active = !empty($b['active']);
  if (!$active) {
    continue;
  }

  $id = trim((string)($b['id'] ?? ''));
  $id = preg_replace('/[^a-zA-Z0-9_-]/', '', $id);
  if ($id === '') {
    $id = 'bank' . (string)$idx;
  }

  $name = trim((string)($b['name'] ?? ''));
  if ($name === '') {
    $name = 'Banco';
  }

  $logos = [];
  if (!empty($b['logos']) && is_array($b['logos'])) {
    foreach ($b['logos'] as $p) {
      $p = trim((string)$p);
      if ($p !== '') {
        $logos[] = $p;
      }
      if (count($logos) >= 3) {
        break;
      }
    }
  }

  $logo = trim((string)($b['logo'] ?? ''));
  if ($logo !== '' && empty($logos)) {
    $logos[] = $logo;
  }
  $logos = array_slice(array_values(array_filter($logos)), 0, 3);
  $logo = $logos[0] ?? $logo;
  $accountNumber = trim((string)($b['account_number'] ?? ''));
  if ($accountNumber === '' && ($id === 'nequi' || $id === 'daviplata') && $businessPhoneLocalDigits !== '') {
    $accountNumber = $businessPhoneLocalDigits;
  }

  $paymentBanks[] = [
    'id' => $id,
    'name' => $name,
    'logo' => $logo,
    'logos' => $logos,
    'account_number' => $accountNumber,
    'account_type' => trim((string)($b['account_type'] ?? '')),
    'account_holder' => trim((string)($b['account_holder'] ?? '')),
    'document' => trim((string)($b['document'] ?? '')),
  ];
}

if (empty($paymentBanks)) {
  $paymentBanks = [
    [
      'id' => 'nequi',
      'name' => 'Nequi',
      'logo' => 'images/nequi.png',
      'logos' => ['images/nequi.png'],
      'account_number' => $businessPhoneLocalDigits,
      'account_type' => '',
      'account_holder' => '',
      'document' => '',
    ],
    [
      'id' => 'daviplata',
      'name' => 'Daviplata',
      'logo' => 'images/daviplata.png',
      'logos' => ['images/daviplata.png'],
      'account_number' => $businessPhoneLocalDigits,
      'account_type' => '',
      'account_holder' => '',
      'document' => '',
    ],
  ];
}
?>
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport">

  <title><?= htmlspecialchars($businessName); ?></title>
  <meta content="" name="description">
  <meta content="" name="keywords">

  <!-- Favicons -->
  <link href="icon.php?size=64<?= $businessIconV; ?>" rel="icon" type="image/png">
  <link rel="apple-touch-icon" sizes="180x180" href="icon.php?size=180&maskable=1<?= $businessIconV; ?>">

  <!-- Google Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
    rel="stylesheet">

  <!-- Vendor CSS Files -->
  <link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
  <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="style.css" rel="stylesheet">

  <script>
    window.SYSTEM_CURRENCY = <?= json_encode($systemCurrency, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT); ?>;
    window.BUSINESS_NAME = <?= json_encode($businessName, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT); ?>;
    window.formatMoneyJs = function(value){
      const c = window.SYSTEM_CURRENCY || {};
      const fractionRaw = c.fraction_size ?? 0;
      const fraction = Math.max(0, Math.min(6, parseInt(fractionRaw, 10) || 0));
      const number = Number(value || 0);
      const formatted = number.toLocaleString('es-CO', { minimumFractionDigits: fraction, maximumFractionDigits: fraction });
      const template = (c.template || '$1');
      const symbol = (c.symbol || '$');
      const symbolPos = template.indexOf('$');
      const numberPos = template.indexOf('1');
      if (symbolPos === -1 || numberPos === -1) {
        return symbol + formatted;
      }
      if (symbolPos < numberPos) {
        const between = template.slice(symbolPos + 1, numberPos);
        const glue = /\s/.test(between) ? ' ' : '';
        return symbol + glue + formatted;
      }
      const between = template.slice(numberPos + 1, symbolPos);
      const glue = /\s/.test(between) ? ' ' : '';
      return formatted + glue + symbol;
    };
  </script>

  <!-- PWA -->
  <link rel="manifest" href="manifest.php<?= $manifestV; ?>">
  <meta name="theme-color" content="#b30000">

  

</head>

<body class="has-fixed-header">

  <!-- ======= Header ======= -->
  <header id="header" class="fixed-top d-flex align-items-center">
    <div class="container-fluid container-xl d-flex align-items-center justify-content-between">
      <h1 class="logo me-auto me-lg-0">
        <a href="index.php">
          <img src="<?= htmlspecialchars($businessLogoHref); ?>" alt="<?= htmlspecialchars($businessName); ?>">
        </a>
      </h1>
      <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">
          <!-- Botón de pedido para móviles - visible solo en móvil -->
          <a id="ver-pedido-btn-mobile" data-bs-toggle="modal" data-bs-target="#pedidoModal" class="btn btn-order2 d-lg-none me-2 position-relative">
            <img src="assets/img/carrito.png" width="18" height="18" alt="" aria-hidden="true">
            Pedir a Domicilio
            <span id="contador-items-mobile" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark text-white">0</span>
          </a>
          <button class="navbar-toggler ms-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNav" data-title="<?= htmlspecialchars($businessName); ?>">
            <ul class="navbar-nav me-auto text-lg-start text-end">
              <!-- <li class="nav-item">
                <a class="nav-link active" aria-current="page" href="#">INICIO</a>
              </li> -->
              <li class="nav-item">
                <a class="nav-link" href="#menu">
                  <span class="nav-link-left">
                    <span class="nav-link-icon" aria-hidden="true">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
                        <rect x="3" y="3" width="7" height="7" rx="2"></rect>
                        <rect x="14" y="3" width="7" height="7" rx="2"></rect>
                        <rect x="3" y="14" width="7" height="7" rx="2"></rect>
                        <rect x="14" y="14" width="7" height="7" rx="2"></rect>
                      </svg>
                    </span>
                    <span>Menú</span>
                  </span>
                  <span class="nav-link-chevron" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
                      <path d="M9 18l6-6-6-6"></path>
                    </svg>
                  </span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#contacto">
                  <span class="nav-link-left">
                    <span class="nav-link-icon" aria-hidden="true">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
                        <path d="M4 4h16v16H4z"></path>
                        <path d="M22 6l-10 7L2 6"></path>
                      </svg>
                    </span>
                    <span>Contacto</span>
                  </span>
                  <span class="nav-link-chevron" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
                      <path d="M9 18l6-6-6-6"></path>
                    </svg>
                  </span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#footer">
                  <span class="nav-link-left">
                    <span class="nav-link-icon" aria-hidden="true">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
                        <path d="M12 21s7-4.4 7-11a7 7 0 0 0-14 0c0 6.6 7 11 7 11z"></path>
                        <circle cx="12" cy="10" r="2.5"></circle>
                      </svg>
                    </span>
                    <span>Ubicación</span>
                  </span>
                  <span class="nav-link-chevron" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
                      <path d="M9 18l6-6-6-6"></path>
                    </svg>
                  </span>
                </a>
              </li>
              <!-- <li class="nav-item">
                <a class="nav-link" href="contact.php">MENSAJEANOS</a>
              </li> -->
              <li class="nav-item">
                <a class="nav-link" href="admin/admin_login.php">
                  <span class="nav-link-left">
                    <span class="nav-link-icon" aria-hidden="true">
                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
                        <path d="M20 21a8 8 0 0 0-16 0"></path>
                        <circle cx="12" cy="8" r="4"></circle>
                      </svg>
                    </span>
                    <span>Iniciar sesión</span>
                  </span>
                  <span class="nav-link-chevron" aria-hidden="true">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor">
                      <path d="M9 18l6-6-6-6"></path>
                    </svg>
                  </span>
                </a>
              </li>
            </ul>
            <div class="d-flex">
                <a id="ver-pedido-btn" data-bs-toggle="modal" data-bs-target="#pedidoModal" class="btn btn-order2 d-none d-lg-inline-block position-relative">
                  <img src="assets/img/carrito.png" width="18" height="18" alt="" aria-hidden="true">
                  Pedir a Domicilio 
                  <span id="contador-items" class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-dark text-white">0</span>
                </a>                
              </div>
              <!-- Instalar Aplicación (solo móvil) -->
              <div class="w-100 d-lg-none text-end mt-3">
                <button id="installAppBtnMobile" type="button" class="btn btn-warning" style="display:none;">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" aria-hidden="true">
                    <path d="M12 3v10"></path>
                    <path d="M8 11l4 4 4-4"></path>
                    <path d="M4 21h16"></path>
                  </svg>
                  Instalar Aplicación
                </button>
              </div>
          </div>
        </div>
      </nav>
    </div>
  </header>
  <!-- FIN de Header -->

  <!-- ======= Landing Page Section ======= -->
  <!-- <section class="landing-page">
    <div class="container">
      <div class="row">
        <div class="col-lg-7">
          <div class="content-wrapper text-end">
            <div class="pattern-dots pattern-dots-1"></div>
            <h1 class="fast-food mt-5 mb-5">¡Donde Sabe Mejor!</h1>            
            <div class="d-flex justify-content-end mt-4 mb-4">
              <a data-bs-toggle="modal" data-bs-target="#pedidoModal" class="btn btn-order"><i class="bi bi-bicycle">
                </i>Pide YA!</a>
            </div>
            <div class="pattern-dots pattern-dots-2"></div>
          </div>
        </div>  
        <div class="col-lg-5">
          <div class="productos-circle">
            <img src="assets/img/productos.gif" alt="Productos <?= htmlspecialchars($businessName); ?>">
          </div>
        </div>              
      </div>
    </div>
  </section> -->
  <!-- FIN Landing Page Section -->

  <main id="main">
    <!-- ======= Seccion de Menu ======= -->
    <section id="menu" class="menu section-bg">
      <div class="container">

        <div class="section-title mt-4">
          <h2 class="fs-2 fs-md-3 fs-sm-4">Menú</h2>
          <p class="fs-5 fs-sm-6">Descubre el sabor</p>
        </div>

        <div class="row" style="margin-top: -50px;">
          <div class="col-12 mb-4 filtros-container">

            <!-- Botón Pedir en Local -->
            <!-- <div class="text-center mb-4">
              <button type="button" class="btn btn-order-local" data-bs-toggle="modal" data-bs-target="#pedidoLocalModal">
                <i class="bi bi-shop"></i> Pedir en Local
              </button>
            </div> -->

            <ul id="menu-flters">
              <?php
                // Obtener categorías dinámicamente
                $categorias = $conn->query("SELECT DISTINCT c.id, c.name FROM categories c INNER JOIN products p ON c.id = p.category AND COALESCE(p.is_active, 1) = 1 ORDER BY c.name")->fetchAll(PDO::FETCH_ASSOC);
                // Obtener productos
                $stmt = $conn->prepare("SELECT p.*, COALESCE(c.name, 'Sin categoría') as category_name, CASE WHEN p.sale_price IS NULL OR p.sale_price <= 0 THEN p.price ELSE p.sale_price END AS sale_price FROM products p LEFT JOIN categories c ON p.category = c.id WHERE COALESCE(p.is_active, 1) = 1 ORDER BY c.name, p.name");
                $stmt->execute();
                $productos = $stmt->fetchAll(PDO::FETCH_ASSOC);
                // Obtener zonas de entrega activas
                try {
                  $zonesStmt = $conn->prepare("SELECT id, name, fee FROM delivery_zones WHERE is_active = 1 ORDER BY name");
                  $zonesStmt->execute();
                  $delivery_zones = $zonesStmt->fetchAll(PDO::FETCH_ASSOC);
                } catch (Throwable $e) {
                  $delivery_zones = [];
                }
                // Agrupar productos por categoría
                $productosPorCategoria = [];
                foreach ($productos as $producto) {
                  $catKey = normaliza_categoria($producto['category_name']);
                  if (!isset($productosPorCategoria[$catKey])) $productosPorCategoria[$catKey] = [];
                  $productosPorCategoria[$catKey][] = $producto;
                }
              ?>
              <?php foreach($categorias as $cat): ?>
                <li data-filter=".filter-<?= normaliza_categoria($cat['name']) ?>"><?= htmlspecialchars($cat['name']) ?></li>
              <?php endforeach; ?>
              <li data-filter="*" class="filter-active">Todo</li>
              </ul>
          </div>
          <div class="col-12">
            <!-- Aquí irá el contenido del menú -->

            <div class="row menu-container">
              <?php foreach($productos as $producto):
                $catClass = 'filter-'.normaliza_categoria($producto['category_name']);
              ?>
                <div class="col-12 col-md-6 col-lg-4 menu-item <?= $catClass ?>">
                  <div class="menu-card">
                    <div class="menu-img-container">
                      <img src="uploaded_img/<?= htmlspecialchars($producto['image']) ?>" class="menu-img" alt="<?= htmlspecialchars($producto['name']) ?>" loading="lazy" decoding="async">
                    </div>

                    <div class="menu-info">
                      <div class="menu-title">
                        <?= htmlspecialchars($producto['name']) ?>
                      </div>
                      <?php if(!empty($producto['description'])): ?>
                        <div class="menu-ingredients">
                          <?= nl2br(htmlspecialchars($producto['description'])) ?>
                        </div>
                      <?php endif; ?>
                      <div class="menu-price"><?= htmlspecialchars(formatMoney($producto['sale_price'], $conn)); ?></div>
                    </div>

                    <?php $nombrePlano = addslashes($producto['name']); $catKey = normaliza_categoria($producto['category_name']); ?>
                    <button type="button" class="menu-add-btn" aria-label="Agregar <?= htmlspecialchars($producto['name']) ?>" onclick="agregarItemDirecto('<?= $catKey ?>', <?= (int)$producto['id'] ?>, 1, event)">
                      <span aria-hidden="true">+</span>
                    </button>
                  </div>
                </div>
              <?php endforeach; ?>
              </div>
          </div>
        </div>

      </div>
    </section><!-- FIN de seccion Menu -->

    <section id="metodos-pago" class="contact">
      <div class="container">

        <div class="section-title">
          <h2>Métodos de pago</h2>
          <p>Transferencia</p>
        </div>

        <div class="row justify-content-center">
          <?php foreach ($paymentBanks as $b): ?>
            <?php
              $bankId = (string)($b['id'] ?? '');
              $bankDomId = preg_replace('/[^a-zA-Z0-9_-]/', '', $bankId);
              if ($bankDomId === '') {
                $bankDomId = 'bank';
              }
              $logos = [];
              if (!empty($b['logos']) && is_array($b['logos'])) {
                foreach ($b['logos'] as $p) {
                  $p = trim((string)$p);
                  if ($p !== '') {
                    $logos[] = ltrim($p, '/');
                  }
                  if (count($logos) >= 3) {
                    break;
                  }
                }
              }
              $legacyLogo = trim((string)($b['logo'] ?? ''));
              if ($legacyLogo !== '' && empty($logos)) {
                $logos[] = ltrim($legacyLogo, '/');
              }
              $logos = array_slice(array_values(array_filter($logos)), 0, 3);
              $accountNumber = (string)($b['account_number'] ?? '');
              $accountType = (string)($b['account_type'] ?? '');
              $accountHolder = (string)($b['account_holder'] ?? '');
              $document = (string)($b['document'] ?? '');
            ?>
            <div class="col-lg-6 mb-3">
              <div class="info text-center" style="box-shadow:none;">
                <?php if (!empty($logos)): ?>
                  <div class="d-flex justify-content-center" style="margin-bottom:10px;">
                    <div style="display:flex; gap:12px; flex-wrap:nowrap; align-items:center; justify-content:center; max-width:100%; overflow-x:auto; padding:4px 0;">
                      <?php foreach ($logos as $imgPath): ?>
                        <img src="<?= htmlspecialchars($imgPath); ?>" alt="<?= htmlspecialchars((string)($b['name'] ?? '')); ?>" class="img-fluid" style="width:92px; height:92px; object-fit:contain; border-radius:22px; background:#fff; border:1px solid rgba(15, 23, 42, 0.1); padding:12px; box-shadow:0 12px 28px rgba(15, 23, 42, 0.10); flex:0 0 auto;">
                      <?php endforeach; ?>
                    </div>
                  </div>
                <?php endif; ?>
                <div style="font-weight:900; font-size:1.18rem; color:#111; margin-bottom:6px;">
                  <?= htmlspecialchars((string)($b['name'] ?? '')); ?>
                </div>

                <?php if ($accountNumber !== ''): ?>
                  <div class="mt-3" style="display:flex; justify-content:center;">
                    <div style="max-width:360px; width:100%;">
                      <div style="font-weight:900; color:rgba(15, 23, 42, 0.86); font-size:.95rem; text-align:center; margin-bottom:8px;">
                        Número / cuenta / teléfono
                      </div>
                      <div class="input-group">
                        <input id="paymentNumberInput-<?= htmlspecialchars($bankDomId); ?>" type="text" class="form-control text-center" value="<?= htmlspecialchars($accountNumber); ?>" readonly>
                        <button class="btn btn-outline-success" type="button" data-copy-target="paymentNumberInput-<?= htmlspecialchars($bankDomId); ?>" data-copy-status="copyPaymentNumberStatus-<?= htmlspecialchars($bankDomId); ?>">Copiar</button>
                      </div>
                      <small id="copyPaymentNumberStatus-<?= htmlspecialchars($bankDomId); ?>" class="text-muted d-block mt-2" style="min-height:20px;"></small>
                    </div>
                  </div>
                <?php endif; ?>

                <?php if ($document !== ''): ?>
                  <div class="mt-2" style="display:flex; justify-content:center;">
                    <div style="max-width:360px; width:100%;">
                      <div style="font-weight:900; color:rgba(15, 23, 42, 0.86); font-size:.95rem; text-align:center; margin-bottom:8px;">
                        Documento
                      </div>
                      <div class="input-group">
                        <input id="paymentDocumentInput-<?= htmlspecialchars($bankDomId); ?>" type="text" class="form-control text-center" value="<?= htmlspecialchars($document); ?>" readonly>
                        <button class="btn btn-outline-success" type="button" data-copy-target="paymentDocumentInput-<?= htmlspecialchars($bankDomId); ?>" data-copy-status="copyPaymentDocumentStatus-<?= htmlspecialchars($bankDomId); ?>">Copiar</button>
                      </div>
                      <small id="copyPaymentDocumentStatus-<?= htmlspecialchars($bankDomId); ?>" class="text-muted d-block mt-2" style="min-height:20px;"></small>
                    </div>
                  </div>
                <?php endif; ?>

                <?php if ($accountType !== ''): ?>
                  <div class="mt-3" style="color:#111; font-weight:800; font-size:1.05rem;">Tipo: <?= htmlspecialchars($accountType); ?></div>
                <?php endif; ?>

                <?php if ($accountHolder !== ''): ?>
                  <div class="mt-2" style="color:#111; font-weight:800; font-size:1.05rem;">Titular: <?= htmlspecialchars($accountHolder); ?></div>
                <?php endif; ?>
              </div>
            </div>
          <?php endforeach; ?>
        </div>
      </div>
    </section>



    <!-- Modal de Pedidos -->
    <div class="modal fade" id="pedidoModal" tabindex="-1" aria-labelledby="pedidoModalLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="pedidoModalLabel">Pedido a Domicilio</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <form id="pedidoForm">
              <div class="mb-3">
                <label for="nombre" class="form-label">Nombre y Apellido</label>
                <input type="text" class="form-control" id="nombre" required>
              </div>
              <div class="mb-3">
                <label for="telefono" class="form-label">Teléfono Celular</label>
                <input type="tel" class="form-control" id="telefono" required>
              </div>
              <?php if (!empty($delivery_zones)): ?>
              <div class="mb-3">
                <label for="zonaEntrega" class="form-label">Zona/Localidad de Entrega</label>
                <select class="form-select" id="zonaEntrega" required>
                  <option value="" selected disabled>Selecciona tu zona/localidad</option>
                  <option value="other" data-fee="0" data-name="Localidad no registrada">Mi localidad no está registrada</option>
                  <?php foreach ($delivery_zones as $z): ?>
                    <option value="<?= (int)$z['id'] ?>" data-fee="<?= (float)$z['fee'] ?>" data-name="<?= htmlspecialchars($z['name']) ?>">
                      <?= htmlspecialchars($z['name']) ?> - <?= htmlspecialchars(formatMoney((float)$z['fee'], $conn)); ?>
                    </option>
                  <?php endforeach; ?>
                </select>
              </div>
              <?php endif; ?>
              <div class="mb-3">
                <label for="direccion" class="form-label">Describe tu Dirección</label>
                <textarea class="form-control" id="direccion" rows="2" required></textarea>
                <input type="hidden" id="latitud" name="latitud">
                <input type="hidden" id="longitud" name="longitud">
              </div>
              <div class="mb-3">
                <button type="button" class="btn btn-outline-primary w-100" id="direccionGoogleBtn">
                  <i class="bi bi-geo-alt-fill me-2"></i> Dirección Google Maps
                </button>
                <small id="direccionGoogleStatus" class="text-muted d-block mt-2"></small>
              </div>
              <!-- ACCION PARA OBTENER LA DIRECCION POR GOOGLE MAPS -->
              <!-- <div class="mb-3">
                <button type="button" class="btn btn-outline-primary w-100" id="obtenerUbicacion">
                  <i class="bi bi-geo-alt-fill me-2"></i> Añadir ubicación actual
                </button>
                <small class="text-muted d-block mt-2">Al usar la ubicación actual, se añadirá automáticamente tu dirección</small>
              </div> -->
              <div class="mb-3">
                <label for="metodoPago" class="form-label">Método de Pago</label>
                <select class="form-select" id="metodoPago" required>
                  <option value="">Seleccione un método de pago</option>
                  <option value="efectivo">Efectivo</option>
                  <option value="transferencia">Transferencia</option>
                  <option value="pago_movil">Pago Móvil</option>
                </select>
              </div>

              <div class="mb-3">
                <label for="notas" class="form-label">Notas Adicionales (Opcional)</label>
                <textarea class="form-control" id="notas" rows="2"></textarea>
              </div>

              <div class="mb-3">
                <label class="form-label">Filtrar por categoría</label>
                <select id="selectCategoriaPedido" class="form-select mb-2">
                  <option value="">Seleccione una categoría</option>
                  <?php foreach($categorias as $cat): ?>
                    <option value="<?= normaliza_categoria($cat['name']) ?>"><?= htmlspecialchars($cat['name']) ?></option>
                  <?php endforeach; ?>
                </select>
              </div>
              <div class="mb-3">
                <label class="form-label">Selecciona tus comidas</label>
                <div id="productosPorCategoria">
                  <?php
                    foreach ($categorias as $cat) {
                      $catKey = normaliza_categoria($cat['name']);
                      if (!isset($productosPorCategoria[$catKey])) continue;
                  ?>
                    <div class="categoria-bloque mb-3 categoria-bloque-<?= $catKey ?>">
                      <h5 style="color:#b30000; margin-bottom:10px;"><?= htmlspecialchars($cat['name']) ?></h5>
                      <div class="row">
                        <?php foreach ($productosPorCategoria[$catKey] as $producto): ?>
                          <div class="col-md-6 col-lg-4 mb-2 producto-categoria producto-categoria-<?= $catKey ?>">
                            <div class="card h-100 shadow-sm">
                              <div class="card-body d-flex align-items-center">
                                <img src="uploaded_img/<?= htmlspecialchars($producto['image']) ?>" alt="<?= htmlspecialchars($producto['name']) ?>" style="width:60px;height:60px;object-fit:cover;border-radius:8px;margin-right:10px;" loading="lazy" decoding="async">
                                <div style="flex:1;">
                                  <div style="font-weight:bold;"><?= htmlspecialchars($producto['name']) ?></div>
                                  <div><?= htmlspecialchars(formatMoney($producto['sale_price'], $conn)); ?></div>
                                </div>
                                <div class="d-flex flex-column align-items-center ms-2">
                                  <button type="button" class="btn btn-sm btn-outline-secondary" onclick="actualizarCantidadPedido('<?= $catKey ?>', <?= $producto['id'] ?>, -1)">-</button>
                                  <span id="cantidad-<?= $catKey ?>-<?= $producto['id'] ?>" class="mx-1">0</span>
                                  <button type="button" class="btn btn-sm btn-outline-primary" onclick="actualizarCantidadPedido('<?= $catKey ?>', <?= $producto['id'] ?>, 1)">+</button>
                                </div>
                              </div>
                            </div>
                          </div>
                        <?php endforeach; ?>
                      </div>
                    </div>
                  <?php } ?>
                </div>
              </div>

              <div class="carrito-pedido mb-3">
                <h5 style="color: #000000 !important;">Tu Pedido:</h5>
                <div id="listaPedido" class="lista-pedido">
                  <!-- Aquí se mostrarán los items seleccionados -->
                </div>
              </div>

              <div class="total-pedido">
                <div style="font-weight:600;color:#111">Subtotal Comidas: <span id="subtotalComidas">0,00</span></div>
                <div style="font-weight:600;color:#111">Comisión de Envío: <span id="comisionEnvio">0,00</span></div>
                <h4 style="color: #32CD32 !important;">Total: <span id="totalPedido">0,00</span></h4>
              </div>
              <div id="transferenciaAlert" class="alert alert-warning align-items-center mt-2 small d-none" role="alert">
                <i class="bi bi-receipt me-2"></i>
                <div>Has elegido <strong>Transferencia</strong>. Para agilizar la confirmación, por favor envía el <strong>comprobante de pago</strong> por WhatsApp.</div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            <button type="button" class="btn btn-success" id="enviarWhatsApp">
              <i class="bi bi-whatsapp"></i> Enviar pedido por WhatsApp
            </button>
          </div>
        </div>
      </div>
    </div>


    <!-- Modal de Pedido en Local -->
<div class="modal fade modal-local" id="pedidoLocalModal" tabindex="-1" aria-labelledby="pedidoLocalModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="pedidoLocalModalLabel">
          <i class="bi bi-shop me-2"></i>Pedido en Local
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form id="pedidoLocalForm">
          <div class="mb-3">
            <label for="nombreLocal" class="form-label">Nombre y Apellido</label>
            <input type="text" class="form-control" id="nombreLocal" required>
          </div>
          <div class="mb-3">
            <label class="form-label">Selecciona tu Mesa</label>
            <div class="mesa-selector">
              <?php for($i = 1; $i <= 6; $i++): ?>
                <div class="mesa-option" data-mesa="<?= $i ?>">
                  Mesa <?= $i ?>
                </div>
              <?php endfor; ?>
            </div>
            <input type="hidden" id="mesaSeleccionada" name="mesa" required>
          </div>
          <div class="mb-3">
            <label for="metodoPagoLocal" class="form-label">Método de Pago</label>
            <select class="form-select" id="metodoPagoLocal" required>
              <option value="">Seleccione un método de pago</option>
              <option value="efectivo">Efectivo</option>
              <option value="transferencia">Transferencia</option>
            </select>
          </div>

          <div class="mb-3">
            <label for="notasLocal" class="form-label">Notas Adicionales (Opcional)</label>
            <textarea class="form-control" id="notasLocal" rows="2"></textarea>
          </div>

          <div class="mb-3">
            <label class="form-label">Buscar por categoría</label>
            <select id="selectCategoriaPedidoLocal" class="form-select mb-2">
              <option value="">Seleccione una categoría</option>
              <?php foreach($categorias as $cat): ?>
                <option value="<?= normaliza_categoria($cat['name']) ?>"><?= htmlspecialchars($cat['name']) ?></option>
              <?php endforeach; ?>
            </select>
          </div>
          <div class="mb-3">
            <label class="form-label">Selecciona tus comidas</label>
            <div id="productosPorCategoriaLocal">
              <?php
                foreach ($categorias as $cat) {
                  $catKey = normaliza_categoria($cat['name']);
                  if (!isset($productosPorCategoria[$catKey])) continue;
              ?>
                <div class="categoria-bloque-local mb-3 categoria-bloque-local-<?= $catKey ?>" style="display:none;">
                  <h5 style="color:#28a745; margin-bottom:10px;"><?= htmlspecialchars($cat['name']) ?></h5>
                  <div class="row">
                    <?php foreach ($productosPorCategoria[$catKey] as $producto): ?>
                      <div class="col-md-6 col-lg-4 mb-2 producto-categoria-local producto-categoria-local-<?= $catKey ?>">
                        <div class="card h-100 shadow-sm">
                          <div class="card-body d-flex align-items-center">
                            <img src="uploaded_img/<?= htmlspecialchars($producto['image']) ?>" alt="<?= htmlspecialchars($producto['name']) ?>" style="width:60px;height:60px;object-fit:cover;border-radius:8px;margin-right:10px;" loading="lazy" decoding="async">
                            <div style="flex:1;">
                              <div style="font-weight:bold;"><?= htmlspecialchars($producto['name']) ?></div>
                              <div><?= htmlspecialchars(formatMoney($producto['price'], $conn)); ?></div>
                            </div>
                            <div class="d-flex flex-column align-items-center ms-2">
                              <button type="button" class="btn btn-sm btn-outline-secondary" onclick="actualizarCantidadPedidoLocal('<?= $catKey ?>', <?= $producto['id'] ?>, -1)">-</button>
                              <span id="cantidad-local-<?= $catKey ?>-<?= $producto['id'] ?>" class="mx-1">0</span>
                              <button type="button" class="btn btn-sm btn-outline-primary" onclick="actualizarCantidadPedidoLocal('<?= $catKey ?>', <?= $producto['id'] ?>, 1)">+</button>
                            </div>
                          </div>
                        </div>
                      </div>
                    <?php endforeach; ?>
                  </div>
                </div>
              <?php } ?>
            </div>
          </div>

          <div class="carrito-pedido mb-3">
            <h5 style="color: #000000 !important;">Tu Pedido:</h5>
            <div id="listaPedidoLocal" class="lista-pedido">
              <!-- Aquí se mostrarán los items seleccionados -->
            </div>
          </div>

          <div class="total-pedido">
            <h4 style="color: #28a745 !important;">Total: <span id="totalPedidoLocal">0,00</span></h4>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
        <button type="button" class="btn btn-success" id="enviarPedidoLocal">
          <i class="bi bi-check-circle"></i> Enviar Pedido
        </button>
      </div>
    </div>
  </div>
</div>


    <!-- ======= Seccion de Contactos ======= -->
    
    <section id="contacto" class="contact">
      <div class="container" data-aos="fade-up">

        <div class="section-title" id="ubicacion">
          <h2>Contacto</h2>
          <p>Tu mesa te espera</p>
        </div>

        <div class="row mt-4">
          <div class="col-lg-5">
            <div class="open-hours-hexagon">
              <h3>Horario de Atención</h3>
              <div class="day">
                <?= nl2br(htmlspecialchars($businessHours)); ?>
              </div>
            </div>
          </div>

          <div class="col-lg-7">
            <div class="info">
              <div class="address">
                <i class="bi bi-geo-alt"></i>
                <h4>Ubicación:</h4>
                <p><?= htmlspecialchars($businessAddress); ?></p>
              </div>

              <!-- <div class="email">
                <i class="bi bi-envelope"></i>
                <h4>Correo:</h4>
                <p>EDITHJOHANACAICEDOCHINCHILLA@GMAIL.COM</p>
              </div> -->

              <div class="phone">
                <i class="bi bi-phone"></i>
                <h4>Teléfono:</h4>
                <p><?= htmlspecialchars($businessPhoneDisplay); ?></p>
              </div>
              <!-- Redes sociales -->
              <div class="social-media mt-2" style="display: flex; gap: 12px; align-items: center;">
                <a href="<?= htmlspecialchars($whatsappInquiryUrl); ?>" target="_blank" title="WhatsApp <?= htmlspecialchars($businessName); ?>" style="color: #25D366; font-size: 1.7rem; display: flex; align-items: center; text-decoration: none; background: none !important; border: none !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;">
                  <i class="bi bi-whatsapp" style="color: #25D366; font-size: 1.7rem; background: none !important; border: none !important; box-shadow: none !important; outline: none !important; border-radius: 0 !important;"></i>
                </a>

                <?php if ($socialFacebookUrl !== ''): ?>
                  <a href="<?= htmlspecialchars($socialFacebookUrl); ?>" target="_blank" rel="noopener" title="Facebook <?= htmlspecialchars($businessName); ?>" style="display:flex;align-items:center;text-decoration:none;background:none !important;border:none !important;box-shadow:none !important;outline:none !important;border-radius:0 !important;padding:0 !important;margin:0 !important;">
                    <img src="assets/img/facebook.png" alt="Facebook" width="28" height="28" style="display:block;" loading="lazy">
                  </a>
                <?php endif; ?>

                <?php if ($socialInstagramUrl !== ''): ?>
                  <a href="<?= htmlspecialchars($socialInstagramUrl); ?>" target="_blank" rel="noopener" title="Instagram <?= htmlspecialchars($businessName); ?>" style="display:flex;align-items:center;text-decoration:none;background:none !important;border:none !important;box-shadow:none !important;outline:none !important;border-radius:0 !important;padding:0 !important;margin:0 !important;">
                    <img src="assets/img/instagram.png" alt="Instagram" width="28" height="28" style="display:block;" loading="lazy">
                  </a>
                <?php endif; ?>

                <?php if ($socialGmailUrl !== ''): ?>
                  <a href="<?= htmlspecialchars($socialGmailUrl); ?>" target="_blank" rel="noopener" title="Gmail <?= htmlspecialchars($businessName); ?>" style="display:flex;align-items:center;text-decoration:none;background:none !important;border:none !important;box-shadow:none !important;outline:none !important;border-radius:0 !important;padding:0 !important;margin:0 !important;">
                    <img src="assets/img/gmail.png" alt="Gmail" width="28" height="28" style="display:block;" loading="lazy">
                  </a>
                <?php endif; ?>

              </div>
            </div>
          </div>

          <div class="row mt-5" data-aos="fade-up">
            <div class="col-12">
              <!-- Etiqueta arriba de la imagen -->
              <div class="ubicacion-badge">
                <span class="ubicacion-icon"><i class="bi bi-geo-alt-fill"></i></span>
                <span class="ubicacion-text"><?= htmlspecialchars($businessName); ?><br><small><?= htmlspecialchars($businessLocationHint); ?></small></span>
              </div>
              <!-- <iframe style="border:0; width: 100%; height: 350px; border-radius: 15px; box-shadow: var(--shadow-md);"
                src="https://www.google.com/maps?q=8.599013,-71.156755&z=20&output=embed&hl=es"
                allowfullscreen loading="lazy" referrerpolicy="no-referrer-when-downgrade"
                title="Ubicación CC History Center, Mérida, Venezuela"></iframe> -->
              <!-- BOTÓN CÓMO LLEGAR -->
              <div class="d-flex justify-content-center mt-3 mb-4">
                <a href="<?= htmlspecialchars($googleMapsUrl); ?>" target="_blank" rel="noopener" class="btn-como-llegar-maps-img">
                  <span class="icono-maps-img" aria-hidden="true">
                    <img src="images/maps.png" alt="Google Maps" width="28" height="28" style="display:inline-block;vertical-align:middle;border-radius:6px;box-shadow:0 2px 8px rgba(66,133,244,0.10);background:#fff;" loading="lazy">
                  </span>
                  <span class="texto-btn-maps-img">¿Cómo llegar?</span>
                  <span class="direccion-btn-maps-img">Google Maps<br><span style='font-size:0.95em;color:#4285F4;'><?= htmlspecialchars($businessLocationHint); ?></span></span>
                </a>
              </div>
               <!-- GALERÍA DEL LOCAL -->
              <div class="gallery-wrapper" data-aos="fade-up">
                <!-- <div class="gallery-video-container" data-aos="zoom-in" data-aos-delay="50">
                  <video id="galleryVideo" class="gallery-video" src="assets/img/video.mp4" autoplay loop muted playsinline preload="auto"></video>
                  <button id="toggleMuteBtn" class="video-mute-btn" type="button" aria-pressed="false" title="Activar sonido">
                    <i class="bi bi-volume-mute-fill"></i>
                  </button>
                </div> -->
                <div class="row g-3">
                  <?php
                    $galleryDir = __DIR__ . '/assets/img/galeria';
                    $galleryUrlBase = 'assets/img/galeria';
                    $exts = ['jpg','jpeg','png','webp','gif','JPG','JPEG','PNG','WEBP','GIF'];
                    $galleryFiles = [];
                    if (is_dir($galleryDir)) {
                      $found = [];
                      foreach (scandir($galleryDir) as $f) {
                        $e = pathinfo($f, PATHINFO_EXTENSION);
                        if (in_array($e, $exts)) { $found[$f] = true; }
                      }
                      $preferredOrder = [
                        'pareycomarestaurante-20251029-0001.jpg',
                        'pareycomarestaurante-20251029-0002.jpg',
                        'pareycomarestaurante-20251029-0004.jpg',
                        '1_335c08ac-e804-4144-93ae-50c6c5e63f6f.jpeg',
                      ];
                      foreach ($preferredOrder as $filename) {
                        if (isset($found[$filename])) {
                          $galleryFiles[] = $filename;
                          unset($found[$filename]);
                        }
                      }
                      if (!empty($found)) {
                        $remaining = array_keys($found);
                        natsort($remaining);
                        $galleryFiles = array_merge($galleryFiles, $remaining);
                      }
                    }
                    if (!empty($galleryFiles)) {
                      $delay = 0;
                      foreach ($galleryFiles as $img):
                        $rel = $galleryUrlBase . '/' . $img;
                        $delay = ($delay + 50) % 300;
                  ?>
                    <div class="col-4" data-aos="zoom-in-up" data-aos-delay="<?= $delay ?>">
                      <a href="<?= htmlspecialchars($rel) ?>" class="gallery-lightbox" data-gallery="galeria-local">
                        <div class="gallery-item">
                          <img src="<?= htmlspecialchars($rel) ?>" alt="<?= htmlspecialchars($businessName); ?> - Galería" class="gallery-img" loading="lazy">
                          <span class="gallery-zoom"><i class="bi bi-arrows-fullscreen"></i></span>
                        </div>
                      </a>
                    </div>
                  <?php endforeach; } else { ?>
                    <div class="col-12">
                      <div class="map-highlight-container mb-3 position-relative">
                        <img src="assets/img/local.jpg" alt="<?= htmlspecialchars($businessName); ?> Local" class="img-fluid map-highlight-img">
                      </div>
                    </div>
                  <?php } ?>
                </div>
              </div>
              
            </div>
          </div>

      </div>
    </section><!-- FIN de Contacto -->
  </main><!-- FIN #main -->

  <!-- Footer -->
  <footer id="footer" class="footer-spb">
    <div class="footer-wave"></div>
    <div class="container py-4">
      <div class="row align-items-center gy-4">
        <div class="col-md-4 text-center text-md-start mb-3 mb-md-0">
          <img src="<?= htmlspecialchars($businessLogoHref); ?>" alt="<?= htmlspecialchars($businessName); ?>" class="footer-logo mb-2">
          <h5 class="footer-brand mb-0"><?= htmlspecialchars($businessName); ?></h5>
          <p class="footer-slogan mb-0">¡Donde sabe mejor!</p>
        </div>
        <div class="col-md-4 text-center mb-3 mb-md-0">
          <div class="footer-phrase">
            <i class="bi bi-stars" style="font-size:2rem;color:#ffc107; animation: spinStar 2.5s linear infinite;"></i>
            <div class="footer-phrase-text mt-2">
              <span>¡Gracias por preferirnos!🍔</span>
            </div>
            <div class="footer-phrase-sub">
              <span>Calidad, sabor y atención para ti.</span>
            </div>
          </div>
        </div>
        <div class="col-md-4 text-center text-md-end">
          <div class="footer-contact mb-2">
            <i class="bi bi-telephone"></i> <span><?= htmlspecialchars($businessPhoneDigits !== '' ? '+' . $businessPhoneDigits : $businessPhoneDisplay); ?></span>
          </div>
          <!-- <div class="footer-contact mb-2">
            <i class="bi bi-envelope"></i> <span>EDITHJOHANACAICEDOCHINCHILLA@GMAIL.COM</span>
          </div> -->
          <div class="footer-contact">
            <i class="bi bi-geo-alt"></i> <span><?= htmlspecialchars($businessAddress); ?></span>
          </div>
        </div>
      </div>
      <!-- Botón Instalar Aplicación en escritorio (footer) -->
      <div class="row mt-2 d-none d-lg-flex justify-content-center">
        <div class="col-auto">
          <button id="installAppBtnDesktop" type="button" class="btn btn-order2 btn-install-pro" style="display:none;">
            <i class="bi bi-download"></i> Instalar Aplicación
          </button>
        </div>
      </div>
      <hr class="footer-divider my-4">
      <div class="row">
        <div class="col-12 text-center">
          <div class="footer-copyright">
            &copy; <?= date('Y'); ?> <strong><?= htmlspecialchars($businessName); ?></strong>. Todos los Derechos Reservados.
          </div>
          <div class="footer-credits">
            Creado por 
            <a href="https://aircan.me/" target="_blank" class="footer-link-sb">
              <i class="bi bi-lightning-charge-fill"></i> Aircan
            </a>
          </div>
        </div>
      </div>
    </div>
  </footer>
  <!-- FIN del Footer -->

  <div id="preloader">
    <div class="preloader-content">
      <img src="<?= htmlspecialchars($businessLogoHref); ?>" class="preloader-logo" alt="<?= htmlspecialchars($businessName); ?> Logo">
      <div class="preloader-text">
        Bienvenido a <span><?= htmlspecialchars($businessName); ?></span>
      </div>
    </div>
  </div>
  
  <!-- Botones flotantes -->
  <div class="float-buttons-container">
    <a href="<?= htmlspecialchars($whatsappInquiryUrl); ?>"
      class="whatsapp-float" target="_blank" rel="noopener" aria-label="WhatsApp">
      <img src="assets/img/whatsapp.png" width="55" height="55" alt="WhatsApp">
    </a>
    <a href="#" class="back-to-top">
      <i class="bi bi-arrow-up-short"></i>
    </a>
  </div>

  <!-- ALERTA FLOTANTE PARA AGREGAR AL PEDIDO -->
  <div id="alerta-agregado" style="display:none;position:fixed;top:clamp(72px, 8vh, 90px);right:clamp(12px, 2vw, 30px);z-index:2000;width:min(360px, calc(100vw - 24px));max-width:360px;" aria-live="polite" aria-atomic="true"></div>

  <!-- Vendor JS Files -->
  <script src="assets/vendor/aos/aos.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="assets/vendor/glightbox/js/glightbox.min.js"></script>
  <script src="assets/vendor/isotope-layout/isotope.pkgd.min.js"></script>
  <script src="assets/vendor/php-email-form/validate.js"></script>
  <script src="assets/vendor/swiper/swiper-bundle.min.js"></script>

  <!-- Template Main JS File -->
  <script src="assets/js/main.js"></script>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const header = document.getElementById('header');
      const collapseEl = document.getElementById('navbarNav');
      if (!header || !collapseEl || !window.bootstrap) return;

      const toggler = document.querySelector('[data-bs-target="#navbarNav"]');

      const collapseApi = function () {
        return window.bootstrap.Collapse.getOrCreateInstance(collapseEl, { toggle: false });
      };

      const setOpenState = function (isOpen) {
        header.classList.toggle('menu-open', isOpen);
        document.body.classList.toggle('menu-overlay-open', isOpen);
      };

      collapseEl.addEventListener('show.bs.collapse', function () {
        setOpenState(true);
      });

      collapseEl.addEventListener('hidden.bs.collapse', function () {
        setOpenState(false);
      });

      if (collapseEl.classList.contains('show') && window.innerWidth < 992) {
        setOpenState(true);
      }

      collapseEl.querySelectorAll('.nav-link').forEach(function (link) {
        link.addEventListener('click', function () {
          try { collapseApi().hide(); } catch (e) {}
        });
      });

      collapseEl.addEventListener('click', function (e) {
        if (e.target === collapseEl) {
          try { collapseApi().hide(); } catch (e2) {}
        }
      });

      document.addEventListener('click', function (e) {
        if (!header.classList.contains('menu-open')) return;
        if (collapseEl.contains(e.target)) return;
        if (toggler && toggler.contains(e.target)) return;
        try { collapseApi().hide(); } catch (e5) {}
      });

      document.addEventListener('keydown', function (e) {
        if (e.key === 'Escape' && header.classList.contains('menu-open')) {
          try { collapseApi().hide(); } catch (e3) {}
        }
      });

      const media = window.matchMedia('(min-width: 992px)');
      const syncToDesktop = function () {
        if (media.matches) {
          try { collapseApi().hide(); } catch (e4) {}
          setOpenState(false);
        }
      };

      if (typeof media.addEventListener === 'function') {
        media.addEventListener('change', syncToDesktop);
      } else if (typeof media.addListener === 'function') {
        media.addListener(syncToDesktop);
      }
    });
  </script>

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const copyButtons = Array.from(document.querySelectorAll('[data-copy-target]'));
      if (copyButtons.length) {
        copyButtons.forEach((btn) => {
          btn.addEventListener('click', async function () {
            const targetId = btn.getAttribute('data-copy-target') || '';
            const statusId = btn.getAttribute('data-copy-status') || '';
            const input = targetId ? document.getElementById(targetId) : null;
            const status = statusId ? document.getElementById(statusId) : null;
            if (!input) return;

            const textToCopy = input.value;
            let ok = false;
            try {
              if (navigator.clipboard && window.isSecureContext) {
                await navigator.clipboard.writeText(textToCopy);
                ok = true;
              }
            } catch (e) {}
            if (!ok) {
              try {
                input.focus();
                input.select();
                input.setSelectionRange(0, 99999);
                ok = document.execCommand('copy');
              } catch (e) {}
            }
            if (status) status.textContent = ok ? 'Número copiado' : 'No se pudo copiar';
            if (ok) {
              const prevText = btn.textContent;
              btn.textContent = 'Copiado';
              setTimeout(() => { btn.textContent = prevText; }, 1200);
            }
          });
        });
      }

      // --- INICIALIZACIÓN ---
      window.productosMenu = {};
      <?php foreach ($productos as $producto): $catKey = normaliza_categoria($producto['category_name']); ?>
        if (!window.productosMenu['<?= $catKey ?>']) window.productosMenu['<?= $catKey ?>'] = [];
        window.productosMenu['<?= $catKey ?>'].push({
          id: <?= $producto['id'] ?>,
          nombre: "<?= addslashes($producto['name']) ?>",
          precio: <?= (float)$producto['sale_price'] ?>,
          categoria: '<?= $catKey ?>',
        });
      <?php endforeach; ?>

      let pedidoActual = [];
      let deliveryFee = 0;
      let deliveryZoneName = '';

      // --- FUNCIONES ---
      function md5(str) {
        let hash = 0, i, chr;
        if (str.length === 0) return hash;
        for (i = 0; i < str.length; i++) {
          chr   = str.charCodeAt(i);
          hash  = ((hash << 5) - hash) + chr;
          hash |= 0;
        }
        return Math.abs(hash);
      }

      function normalizaId(nombre) {
        return nombre.replace(/[^a-zA-Z0-9]/g, '_');
      }

      // Función JS para normalizar categorías igual que en PHP
      function normaliza_categoria(nombre) {
        return nombre
          .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
          .toLowerCase()
          .replace(/[^a-z0-9]+/g, '-')
          .replace(/^-+|-+$/g, '');
      }

      function formatMoneyLocal(valor) {
        if (window.formatMoneyJs) {
          return window.formatMoneyJs(valor);
        }
        return Number(valor || 0).toLocaleString('es-CO', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
      }
      
      // Inicializar galería (GLightbox)
      if (typeof GLightbox !== 'undefined') {
        GLightbox({ selector: '.gallery-lightbox', touchNavigation: true, loop: true, closeOnOutsideClick: true });
      }

      window.actualizarCantidadPedido = function(categoria, id, cambio) {
        var catKey = normaliza_categoria(categoria);
        const idSpan = 'cantidad-' + catKey + '-' + id;
        const cantidadElement = document.getElementById(idSpan);
        const existingItemIndex = pedidoActual.findIndex(item => item.categoria === catKey && item.id === id);
        const existingQty = existingItemIndex !== -1 ? (parseInt(pedidoActual[existingItemIndex].cantidad, 10) || 0) : 0;
        let cantidad = cantidadElement ? (parseInt(cantidadElement.textContent, 10) || 0) : existingQty;
        cantidad += cambio;
        cantidad = Math.max(0, cantidad);
        if (cantidadElement) cantidadElement.textContent = cantidad;
        const itemIndex = existingItemIndex;
        const producto = (window.productosMenu[catKey] || []).find(p => p.id === id);
        const precio = producto ? producto.precio : 0;
        const nombre = producto ? producto.nombre : '';
        if (cantidad > 0) {
          if (itemIndex === -1) {
            pedidoActual.push({ categoria: catKey, id, nombre, cantidad, precio });
          } else {
            pedidoActual[itemIndex].cantidad = cantidad;
          }
        } else if (itemIndex !== -1) {
          pedidoActual.splice(itemIndex, 1);
        }
        actualizarListaPedidos();
        actualizarContadorItems();
        actualizarTotalPedido();
      };

      function actualizarContadorItems() {
        const totalItems = pedidoActual.reduce((sum, item) => sum + item.cantidad, 0);
        const counters = [
          document.getElementById('contador-items'),
          document.getElementById('contador-items-mobile')
        ].filter(Boolean);

        counters.forEach(el => {
          el.textContent = totalItems;
          el.style.display = totalItems > 0 ? '' : 'none';
          el.classList.remove('badge-pop');
          void el.offsetWidth;
          el.classList.add('badge-pop');
        });
      }

      function actualizarListaPedidos() {
        const listaPedido = document.getElementById('listaPedido');
        listaPedido.innerHTML = '';
        pedidoActual.forEach(item => {
          const itemElement = document.createElement('div');
          itemElement.className = 'item-seleccionado';
          itemElement.innerHTML = `
            <div class="info-item">
              <h6>${item.nombre}</h6>
              <p class="mb-0">${formatMoneyLocal(item.precio)}</p>
            </div>
            <div class="acciones-item">
              <div class="d-flex flex-column align-items-center">
                <small class="text-muted">Cantidad</small>
                <span class="cantidad-destacada">${item.cantidad}</span>
              </div>
              <span class="subtotal">${formatMoneyLocal(item.precio * item.cantidad)}</span>
              <button type="button" onclick="actualizarCantidadPedido('${item.categoria}', ${item.id}, -1)">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          `;
          listaPedido.appendChild(itemElement);
        });
      }

      function actualizarTotalPedido() {
        const subtotal = pedidoActual.reduce((sum, item) => sum + (item.precio * item.cantidad), 0);
        const comision = Number(deliveryFee || 0);
        const total = subtotal + comision;
        const subtotalEl = document.getElementById('subtotalComidas');
        const comisionEl = document.getElementById('comisionEnvio');
        const totalEl = document.getElementById('totalPedido');
        if (subtotalEl) subtotalEl.textContent = formatMoneyLocal(subtotal);
        if (comisionEl) comisionEl.textContent = formatMoneyLocal(comision);
        if (totalEl) totalEl.textContent = formatMoneyLocal(total);
      }

      actualizarContadorItems();
      actualizarTotalPedido();

      (function() {
        const enhance = function(scopeEl) {
          if (!scopeEl) return;
          const selects = scopeEl.querySelectorAll('select.form-select');
          selects.forEach(function(sel) {
            if (sel.closest('.select-arrow-wrap')) return;
            const wrap = document.createElement('div');
            wrap.className = 'select-arrow-wrap';
            const parent = sel.parentNode;
            parent.insertBefore(wrap, sel);
            wrap.appendChild(sel);
            const arrow = document.createElement('i');
            arrow.className = 'bi bi-chevron-down select-arrow';
            wrap.appendChild(arrow);

            const open = function() { wrap.classList.add('is-open'); };
            const close = function() { wrap.classList.remove('is-open'); };
            sel.addEventListener('mousedown', open);
            sel.addEventListener('keydown', function(e) {
              if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') open();
            });
            sel.addEventListener('change', close);
            sel.addEventListener('blur', close);
          });
        };

        enhance(document.getElementById('pedidoModal'));
        enhance(document.getElementById('pedidoLocalModal'));
      })();

      const scrollToField = function(targetEl, focusEl) {
        const focusTarget = focusEl || targetEl;
        if (!targetEl && !focusTarget) return;
        const scrollTarget = (targetEl || focusTarget);
        const block = scrollTarget.closest('.select-arrow-wrap') || scrollTarget.closest('.mb-3') || scrollTarget;
        try {
          block.scrollIntoView({ behavior: 'smooth', block: 'center' });
        } catch (e) {
          try { block.scrollIntoView(true); } catch (e2) {}
        }
        if (focusTarget && typeof focusTarget.focus === 'function') {
          setTimeout(function() {
            try { focusTarget.focus({ preventScroll: true }); } catch (e3) { try { focusTarget.focus(); } catch (e4) {} }
          }, 280);
        }
      };

      const wireAutoClearInvalid = function(formEl) {
        if (!formEl) return;
        const fields = formEl.querySelectorAll('input, textarea, select');
        fields.forEach(function(el) {
          const evt = (el.tagName === 'SELECT') ? 'change' : 'input';
          el.addEventListener(evt, function() { el.classList.remove('is-invalid'); });
          el.addEventListener('blur', function() { if (el.value && String(el.value).trim()) el.classList.remove('is-invalid'); });
        });
      };

      wireAutoClearInvalid(document.getElementById('pedidoForm'));
      wireAutoClearInvalid(document.getElementById('pedidoLocalForm'));

      // --- ENVÍO POR WHATSAPP ---
      // Alerta para Transferencia
      const metodoPagoEl = document.getElementById('metodoPago');
      const transferenciaAlert = document.getElementById('transferenciaAlert');
      if (metodoPagoEl && transferenciaAlert) {
        const toggleTransferenciaAlert = function() {
          const isTransfer = metodoPagoEl.value === 'transferencia';
          transferenciaAlert.classList.toggle('d-none', !isTransfer);
          transferenciaAlert.setAttribute('aria-hidden', isTransfer ? 'false' : 'true');
        };
        metodoPagoEl.addEventListener('change', toggleTransferenciaAlert);
        toggleTransferenciaAlert();
      }
      // Zona de entrega (comisión)
      const zonaEntregaEl = document.getElementById('zonaEntrega');
      if (zonaEntregaEl) {
        const onZonaChange = function() {
          const opt = zonaEntregaEl.options[zonaEntregaEl.selectedIndex];
          const feeAttr = opt && opt.dataset ? opt.dataset.fee : '0';
          const feeVal = parseFloat(feeAttr || '0');
          deliveryFee = isNaN(feeVal) ? 0 : feeVal;
          deliveryZoneName = (opt && opt.dataset && opt.dataset.name) ? opt.dataset.name : '';
          actualizarTotalPedido();
        };
        zonaEntregaEl.addEventListener('change', onZonaChange);
        onZonaChange();
      }
      // Dirección Google Maps (Geolocalización)
      (function(){
        const btn = document.getElementById('direccionGoogleBtn');
        const statusEl = document.getElementById('direccionGoogleStatus');
        const latEl = document.getElementById('latitud');
        const lonEl = document.getElementById('longitud');
        if (btn) {
          btn.addEventListener('click', function(){
            if (!navigator.geolocation) {
              if (statusEl) statusEl.textContent = 'Tu dispositivo/navegador no soporta GPS.';
              return;
            }
            if (statusEl) statusEl.textContent = 'Obteniendo ubicación...';
            navigator.geolocation.getCurrentPosition(function(pos){
              const { latitude, longitude } = pos.coords;
              if (latEl) latEl.value = latitude;
              if (lonEl) lonEl.value = longitude;
              if (statusEl) statusEl.textContent = 'Ubicación capturada ✔';
            }, function(err){
              if (statusEl) statusEl.textContent = 'No se pudo obtener la ubicación. Activa el GPS y permisos.';
            }, { enableHighAccuracy: true, timeout: 20000, maximumAge: 0 });
          });
        }
      })();
      const enviarWhatsAppBtn = document.getElementById('enviarWhatsApp');
      if (enviarWhatsAppBtn) enviarWhatsAppBtn.addEventListener('click', function () {
        const nombre = document.getElementById('nombre');
        const telefono = document.getElementById('telefono');
        const direccion = document.getElementById('direccion');
        const zonaEntrega = document.getElementById('zonaEntrega');
        const metodoPago = document.getElementById('metodoPago');
        const notas = document.getElementById('notas');
        const latEl = document.getElementById('latitud');
        const lonEl = document.getElementById('longitud');
        [nombre, telefono, direccion, zonaEntrega, metodoPago].forEach(field => { if (field) field.classList.remove('is-invalid'); });
        let isValid = true;
        let errorMessage = '';
        let firstInvalidEl = null;
        if (!nombre.value) {
          nombre.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor ingrese su nombre y apellido';
          firstInvalidEl = nombre;
        } else if (!telefono.value) {
          telefono.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor ingrese su número de teléfono';
          firstInvalidEl = telefono;
        } else if (!direccion.value && !(latEl && latEl.value && lonEl && lonEl.value)) {
          direccion.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor describe tu dirección o usa Dirección Google Maps';
          firstInvalidEl = direccion;
        } else if (zonaEntrega && !zonaEntrega.value) {
          zonaEntrega.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor seleccione su zona/localidad de entrega';
          firstInvalidEl = zonaEntrega;
        } else if (!metodoPago.value) {
          metodoPago.classList.add('is-invalid');
          isValid = false;
          errorMessage = 'Por favor seleccione un método de pago';
          firstInvalidEl = metodoPago;
        } else if (pedidoActual.length === 0) {
          isValid = false;
          errorMessage = 'Por favor seleccione al menos un item del menú';
          firstInvalidEl = document.getElementById('selectCategoriaPedido') || document.getElementById('productosPorCategoria');
        }
        if (!isValid) {
          const errorDiv = document.createElement('div');
          errorDiv.className = 'alert alert-danger alert-dismissible fade show';
          errorDiv.innerHTML = `
            <i class="bi bi-exclamation-triangle-fill"></i> ${errorMessage}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          `;
          const prevAlert = document.querySelector('#pedidoForm .alert');
          if (prevAlert) prevAlert.remove();
          document.querySelector('#pedidoForm').insertBefore(errorDiv, document.querySelector('#pedidoForm').firstChild);
          if (firstInvalidEl) scrollToField(firstInvalidEl, firstInvalidEl);
          return;
        }
        const subtotal = pedidoActual.reduce((sum, item) => sum + (item.precio * item.cantidad), 0);
        const comision = Number(deliveryFee || 0);
        const total = subtotal + comision;
        let mensaje = `🍕 *NUEVO PEDIDO - ${window.BUSINESS_NAME || ''}* 🍗\n\n`;
        mensaje += `👤 *Cliente:* ${nombre.value}\n`;
        mensaje += `📱 *Teléfono:* ${telefono.value}\n`;
        const latVal = latEl && latEl.value ? String(latEl.value).trim() : '';
        const lonVal = lonEl && lonEl.value ? String(lonEl.value).trim() : '';
        if (latVal && lonVal) {
          const mapsLink = `https://www.google.com/maps?q=${latVal},${lonVal}`;
          mensaje += `📍 *Link:* ${mapsLink}\n`;
        }
        if (direccion.value && direccion.value.trim()) {
          mensaje += `📍 *Dirección:* ${direccion.value.trim()}\n`;
        }
        if (zonaEntrega && zonaEntrega.value) {
          mensaje += `📦 *Zona/Localidad:* ${deliveryZoneName}\n`;
          mensaje += `🚚 *Comisión de Envío:* ${formatMoneyLocal(comision)}\n`;
        }
        mensaje += `💳 *Método de Pago:* ${metodoPago.value}\n`;
        if (notas && notas.value.trim()) {
          mensaje += `📝 *Notas:* ${notas.value.trim()}\n`;
        }
        mensaje += `\n🍽️ *Productos:*\n`;
        pedidoActual.forEach(item => {
          mensaje += `• ${item.nombre} - ${item.cantidad} x ${formatMoneyLocal(item.precio)} = ${formatMoneyLocal(item.precio * item.cantidad)}\n`;
        });
        mensaje += `\n🧺 *Subtotal comidas:* ${formatMoneyLocal(subtotal)}\n`;
        if (comision > 0) mensaje += `🚚 *Comisión envío:* ${formatMoneyLocal(comision)}\n`;
        mensaje += `💰 *TOTAL A PAGAR:* ${formatMoneyLocal(total)}\n\n`;
        mensaje += `¡Gracias por tu pedido! 😊`;
        const businessWhatsappNumber = <?= json_encode($businessWhatsappNumber, JSON_UNESCAPED_UNICODE | JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_AMP | JSON_HEX_QUOT); ?>;
        const whatsappOrderUrl = `https://wa.me/${businessWhatsappNumber}?text=${encodeURIComponent(mensaje)}`;
        window.open(whatsappOrderUrl, '_blank');
      });

      // --- FILTRO DE CATEGORÍAS EN EL FORMULARIO ---
      const selectCategoria = document.getElementById('selectCategoriaPedido');
      if (selectCategoria) {
        document.querySelectorAll('.categoria-bloque').forEach(bloque => {
          bloque.style.display = 'none';
        });
        document.querySelectorAll('.producto-categoria').forEach(prod => {
          prod.style.display = 'none';
        });

        selectCategoria.addEventListener('change', function() {
          const categoria = this.value;
          document.querySelectorAll('.categoria-bloque').forEach(bloque => {
            bloque.style.display = 'none';
          });
          document.querySelectorAll('.producto-categoria').forEach(prod => {
            prod.style.display = 'none';
          });
          if (categoria) {
            const bloqueMostrar = document.querySelector('.categoria-bloque-' + categoria);
            if (bloqueMostrar) {
              bloqueMostrar.style.display = '';
              bloqueMostrar.querySelectorAll('.producto-categoria-' + categoria).forEach(prod => {
                prod.style.display = '';
                // Sincronizar el contador visual con el carrito usando el id
                const spanCantidad = prod.querySelector('span[id^="cantidad-"]');
                if (spanCantidad) {
                  // Extraer el id del producto del id del span
                  const idMatch = spanCantidad.id.match(/cantidad-[^-]+-(\d+)/);
                  const idProd = idMatch ? parseInt(idMatch[1]) : null;
                  const item = pedidoActual.find(item => item.categoria === categoria && item.id === idProd);
                  spanCantidad.textContent = item ? item.cantidad : 0;
                }
              });
              bloqueMostrar.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
          }
        });

        selectCategoria.value = '';
        document.querySelectorAll('.categoria-bloque').forEach(bloque => {
          bloque.style.display = 'none';
        });
        document.querySelectorAll('.producto-categoria').forEach(prod => {
          prod.style.display = 'none';
        });
      }

      // Al abrir el modal, sincroniza los contadores visuales con el carrito usando el id
      const pedidoModal = document.getElementById('pedidoModal');
      if (pedidoModal) {
        pedidoModal.addEventListener('show.bs.modal', function () {
          const selectCategoria = document.getElementById('selectCategoriaPedido');
          if (selectCategoria) {
            selectCategoria.value = '';
            document.querySelectorAll('.categoria-bloque').forEach(bloque => {
              bloque.style.display = 'none';
            });
            document.querySelectorAll('.producto-categoria').forEach(prod => {
              prod.style.display = 'none';
            });
          }
          pedidoActual.forEach(item => {
            const id = 'cantidad-' + item.categoria + '-' + item.id;
            const cantidadElement = document.getElementById(id);
            if (cantidadElement) cantidadElement.textContent = item.cantidad;
          });
        });
      }

      // --- AGREGAR ITEM DIRECTO DESDE EL MENÚ ---
      window.agregarItemDirecto = function(categoria, idOrNombre, cantidad, event) {
        if (event && typeof event.preventDefault === 'function') {
          event.preventDefault();
        }
        var catKey = normaliza_categoria(categoria);
        const list = (window.productosMenu[catKey] || []);
        const idNum = typeof idOrNombre === 'number' ? idOrNombre : parseInt(idOrNombre, 10);
        const producto = Number.isFinite(idNum)
          ? list.find(p => p.id === idNum)
          : list.find(p => p.nombre === String(idOrNombre));
        if (producto) {
          actualizarCantidadPedido(catKey, producto.id, cantidad);
          mostrarAlertaAgregado(producto.nombre);
        }
      };

      // FUNCIÓN PARA MOSTRAR ALERTA FLOTANTE AL AGREGAR PRODUCTO
      function mostrarAlertaAgregado(nombreProducto) {
        const alertaDiv = document.getElementById('alerta-agregado');
        if (!alertaDiv) return;
        if (window.__toastAgregadoTimer) {
          clearTimeout(window.__toastAgregadoTimer);
          window.__toastAgregadoTimer = null;
        }

        alertaDiv.innerHTML = `
          <div class="add-toast" role="status">
            <div class="add-toast-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M20 6L9 17l-5-5" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
              </svg>
            </div>
            <div class="add-toast-body">
              <div class="add-toast-title">Agregado al pedido</div>
              <div class="add-toast-message">${nombreProducto}</div>
            </div>
            <button type="button" class="add-toast-close" aria-label="Cerrar">
              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M18 6L6 18" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
                <path d="M6 6l12 12" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" />
              </svg>
            </button>
            <div class="add-toast-progress" aria-hidden="true"></div>
          </div>
        `;
        alertaDiv.style.display = 'block';

        const toastEl = alertaDiv.querySelector('.add-toast');
        const closeBtn = alertaDiv.querySelector('.add-toast-close');
        const hideToast = function () {
          if (!toastEl) {
            alertaDiv.style.display = 'none';
            alertaDiv.innerHTML = '';
            return;
          }
          toastEl.classList.add('is-leaving');
          window.setTimeout(function () {
            alertaDiv.style.display = 'none';
            alertaDiv.innerHTML = '';
          }, 240);
        };

        if (closeBtn) {
          closeBtn.addEventListener('click', function () {
            if (window.__toastAgregadoTimer) {
              clearTimeout(window.__toastAgregadoTimer);
              window.__toastAgregadoTimer = null;
            }
            hideToast();
          }, { once: true });
        }

        window.__toastAgregadoTimer = window.setTimeout(hideToast, 2400);
      }

      

    });
  </script>

  <!-- PWA: Service Worker + Install flow -->
  <script>
    (function() {
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', function() {
          navigator.serviceWorker.register('sw.js').catch(function(err){
            console.error('SW registration failed:', err);
          });
        });
      }

      var deferredPrompt = null;
      var btnMobile = document.getElementById('installAppBtnMobile');
      var btnDesktop = document.getElementById('installAppBtnDesktop');

      function hideInstallButtons() {
        if (btnMobile) btnMobile.style.display = 'none';
        if (btnDesktop) btnDesktop.style.display = 'none';
      }
      function showInstallButtons() {
        // Ocultar si ya está instalada
        var isStandalone = window.matchMedia && window.matchMedia('(display-mode: standalone)').matches;
        var isIOSStandalone = window.navigator && window.navigator.standalone;
        if (isStandalone || isIOSStandalone) { hideInstallButtons(); return; }
        if (btnMobile) btnMobile.style.display = '';
        if (btnDesktop) btnDesktop.style.display = '';
      }

      window.addEventListener('beforeinstallprompt', function(e){
        e.preventDefault();
        deferredPrompt = e;
        showInstallButtons();
      });

      window.addEventListener('appinstalled', function(){
        hideInstallButtons();
        deferredPrompt = null;
        try { localStorage.setItem('pwaInstalled', '1'); } catch (e) {}
      });

      async function triggerInstall() {
        if (!deferredPrompt) return;
        try {
          deferredPrompt.prompt();
          var choice = await deferredPrompt.userChoice;
          deferredPrompt = null;
          if (choice && choice.outcome === 'accepted') {
            hideInstallButtons();
          }
        } catch (e) {
          console.warn('Install prompt error:', e);
        }
      }

      if (btnMobile) btnMobile.addEventListener('click', triggerInstall);
      if (btnDesktop) btnDesktop.addEventListener('click', triggerInstall);

      document.addEventListener('DOMContentLoaded', function(){
        var alreadyInstalled = false;
        try { alreadyInstalled = localStorage.getItem('pwaInstalled') === '1'; } catch (e) {}
        var isStandalone = window.matchMedia && window.matchMedia('(display-mode: standalone)').matches;
        var isIOSStandalone = window.navigator && window.navigator.standalone;
        if (alreadyInstalled || isStandalone || isIOSStandalone) {
          hideInstallButtons();
        }
      });
    })();
  </script>

  <!-- --- PEDIDO LOCAL --- -->
  <script>
    let pedidoLocalActual = [];

    // Selección de mesa
    document.addEventListener('DOMContentLoaded', function() {
      const mesaOptions = document.querySelectorAll('.mesa-option');
      const mesaSeleccionadaInput = document.getElementById('mesaSeleccionada');
      const mesaSelector = document.querySelector('#pedidoLocalModal .mesa-selector');
      
      if (mesaOptions && mesaSeleccionadaInput) {
        mesaOptions.forEach(option => {
          option.addEventListener('click', function() {
            mesaOptions.forEach(opt => opt.classList.remove('selected'));
            this.classList.add('selected');
            mesaSeleccionadaInput.value = this.dataset.mesa;
            if (mesaSelector) mesaSelector.classList.remove('is-invalid');
          });
        });
      }
    });

    // Funciones para el pedido local
    window.actualizarCantidadPedidoLocal = function(categoria, id, cambio) {
      var catKey = categoria; // ya viene normalizado
      const idSpan = 'cantidad-local-' + catKey + '-' + id;
      const cantidadElement = document.getElementById(idSpan);
      if (!cantidadElement) return;
      
      let cantidad = parseInt(cantidadElement.textContent) || 0;
      cantidad += cambio;
      cantidad = Math.max(0, cantidad);
      cantidadElement.textContent = cantidad;
      
      const itemIndex = pedidoLocalActual.findIndex(item => item.categoria === catKey && item.id === id);
      const producto = (window.productosMenu[catKey] || []).find(p => p.id === id);
      const precio = producto ? producto.precio : 0;
      const nombre = producto ? producto.nombre : '';
      
      if (cantidad > 0) {
        if (itemIndex === -1) {
          pedidoLocalActual.push({ categoria: catKey, id, nombre, cantidad, precio });
        } else {
          pedidoLocalActual[itemIndex].cantidad = cantidad;
        }
      } else if (itemIndex !== -1) {
        pedidoLocalActual.splice(itemIndex, 1);
      }
      
      actualizarListaPedidosLocal();
      actualizarTotalPedidoLocal();
    };

    function actualizarListaPedidosLocal() {
      const listaPedido = document.getElementById('listaPedidoLocal');
      if (!listaPedido) return;
      
      listaPedido.innerHTML = '';
      pedidoLocalActual.forEach(item => {
        const itemElement = document.createElement('div');
        itemElement.className = 'item-seleccionado';
        itemElement.innerHTML = `
          <div class="info-item">
            <h6>${item.nombre}</h6>
            <p class="mb-0">${formatMoneyLocal(item.precio)}</p>
          </div>
          <div class="acciones-item">
            <div class="d-flex flex-column align-items-center">
              <small class="text-muted">Cantidad</small>
              <span class="cantidad-destacada">${item.cantidad}</span>
            </div>
            <span class="subtotal">${formatMoneyLocal(item.precio * item.cantidad)}</span>
            <button type="button" onclick="actualizarCantidadPedidoLocal('${item.categoria}', ${item.id}, -1)">
              <i class="bi bi-trash"></i>
            </button>
          </div>
        `;
        listaPedido.appendChild(itemElement);
      });
    }

    function actualizarTotalPedidoLocal() {
      const total = pedidoLocalActual.reduce((sum, item) => sum + (item.precio * item.cantidad), 0);
      const totalElement = document.getElementById('totalPedidoLocal');
      if (totalElement) totalElement.textContent = formatMoneyLocal(total);
    }

    // Envío del pedido local
    document.addEventListener('DOMContentLoaded', function() {
      const enviarPedidoLocalBtn = document.getElementById('enviarPedidoLocal');
      if (enviarPedidoLocalBtn) {
        enviarPedidoLocalBtn.addEventListener('click', function() {
          const nombre = document.getElementById('nombreLocal');
          // const telefono = document.getElementById('telefonoLocal'); // Eliminado
          const mesaSeleccionada = document.getElementById('mesaSeleccionada');
          const mesaSelector = document.querySelector('#pedidoLocalModal .mesa-selector');
          const metodoPago = document.getElementById('metodoPagoLocal');
          const notas = document.getElementById('notasLocal');
          const selectCategoriaLocal = document.getElementById('selectCategoriaPedidoLocal');
          const productosPorCategoriaLocal = document.getElementById('productosPorCategoriaLocal');
          
          // Limpiar errores previos
          [nombre, /*telefono,*/ mesaSeleccionada, metodoPago].forEach(field => {
            if (field) field.classList.remove('is-invalid');
          });
          if (mesaSelector) mesaSelector.classList.remove('is-invalid');
          
          let isValid = true;
          let errorMessage = '';
          let firstInvalidEl = null;
          let firstFocusEl = null;
          
          if (!nombre.value) {
            nombre.classList.add('is-invalid');
            isValid = false;
            errorMessage = 'Por favor ingrese su nombre y apellido';
            firstInvalidEl = nombre;
            firstFocusEl = nombre;
          } else if (!mesaSeleccionada.value) {
            isValid = false;
            errorMessage = 'Por favor seleccione una mesa';
            if (mesaSelector) {
              mesaSelector.classList.add('is-invalid');
              firstInvalidEl = mesaSelector;
              const firstMesa = document.querySelector('#pedidoLocalModal .mesa-option');
              if (firstMesa) {
                firstMesa.tabIndex = -1;
                firstFocusEl = firstMesa;
              }
            } else {
              firstInvalidEl = mesaSeleccionada;
              firstFocusEl = mesaSeleccionada;
            }
          } else if (!metodoPago.value) {
            metodoPago.classList.add('is-invalid');
            isValid = false;
            errorMessage = 'Por favor seleccione un método de pago';
            firstInvalidEl = metodoPago;
            firstFocusEl = metodoPago;
          } else if (pedidoLocalActual.length === 0) {
            isValid = false;
            errorMessage = 'Por favor seleccione al menos un item del menú';
            firstInvalidEl = selectCategoriaLocal || productosPorCategoriaLocal;
            firstFocusEl = selectCategoriaLocal || null;
          }
          
          if (!isValid) {
            const errorDiv = document.createElement('div');
            errorDiv.className = 'alert alert-danger alert-dismissible fade show';
            errorDiv.innerHTML = `
              <i class="bi bi-exclamation-triangle-fill"></i> ${errorMessage}
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            const prevAlert = document.querySelector('#pedidoLocalForm .alert');
            if (prevAlert) prevAlert.remove();
            document.querySelector('#pedidoLocalForm').insertBefore(errorDiv, document.querySelector('#pedidoLocalForm').firstChild);

            const scrollTarget = firstInvalidEl || errorDiv;
            const focusTarget = firstFocusEl || (firstInvalidEl && typeof firstInvalidEl.focus === 'function' ? firstInvalidEl : null);
            const block = (scrollTarget && scrollTarget.closest) ? (scrollTarget.closest('.select-arrow-wrap') || scrollTarget.closest('.mb-3') || scrollTarget) : scrollTarget;
            if (block && block.scrollIntoView) {
              try { block.scrollIntoView({ behavior: 'smooth', block: 'center' }); } catch (e) { try { block.scrollIntoView(true); } catch (e2) {} }
            }
            if (focusTarget && typeof focusTarget.focus === 'function') {
              setTimeout(function() {
                try { focusTarget.focus({ preventScroll: true }); } catch (e3) { try { focusTarget.focus(); } catch (e4) {} }
              }, 280);
            }
            return;
          }
          
          // Preparar datos para envío
          const total = pedidoLocalActual.reduce((sum, item) => sum + (item.precio * item.cantidad), 0);
          const datos = {
            nombre: nombre.value,
            // telefono: telefono.value, // Eliminado
            mesa: mesaSeleccionada.value,
            metodoPago: metodoPago.value,
            notas: notas.value,
            pedido: pedidoLocalActual,
            total: total
          };
          
          // Enviar pedido
          fetch('enviar_pedido_local.php', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify(datos)
          })
          .then(response => response.json())
          .then(data => {
            if (data.success) {
              // Mostrar mensaje de éxito
              const alertaDiv = document.getElementById('alerta-agregado');
              if (alertaDiv) {
                alertaDiv.innerHTML = `
                  <div class="alert alert-success alert-dismissible fade show shadow" role="alert" style="font-size:1rem;">
                    <i class="bi bi-check-circle-fill me-2"></i>
                    <strong>¡Pedido enviado!</strong> Tu pedido en local fue recibido correctamente.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
                  </div>
                `;
                alertaDiv.style.display = 'block';
                setTimeout(() => { alertaDiv.style.display = 'none'; }, 3500);
              }
              // Limpiar formulario
              document.getElementById('pedidoLocalForm').reset();
              pedidoLocalActual = [];
              actualizarListaPedidosLocal();
              actualizarTotalPedidoLocal();
              document.querySelectorAll('.mesa-option').forEach(opt => opt.classList.remove('selected'));
              // Cerrar modal después de 2 segundos
              setTimeout(() => {
                const modal = bootstrap.Modal.getInstance(document.getElementById('pedidoLocalModal'));
                if (modal) modal.hide();
              }, 2000);
            } else {
              const errorDiv = document.createElement('div');
              errorDiv.className = 'alert alert-danger alert-dismissible fade show';
              errorDiv.innerHTML = `
                <i class="bi bi-exclamation-triangle-fill"></i> ${data.message}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              `;
              const prevAlert = document.querySelector('#pedidoLocalForm .alert');
              if (prevAlert) prevAlert.remove();
              document.querySelector('#pedidoLocalForm').insertBefore(errorDiv, document.querySelector('#pedidoLocalForm').firstChild);
            }
          })
          .catch(error => {
            console.error('Error:', error);
            const errorDiv = document.createElement('div');
            errorDiv.className = 'alert alert-danger alert-dismissible fade show';
            errorDiv.innerHTML = `
              <i class="bi bi-exclamation-triangle-fill"></i> Error al enviar el pedido. Inténtalo de nuevo.
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            `;
            const prevAlert = document.querySelector('#pedidoLocalForm .alert');
            if (prevAlert) prevAlert.remove();
            document.querySelector('#pedidoLocalForm').insertBefore(errorDiv, document.querySelector('#pedidoLocalForm').firstChild);
          });
        });
      }
      
      // Filtro de categorías para pedido local
      const selectCategoriaLocal = document.getElementById('selectCategoriaPedidoLocal');
      if (selectCategoriaLocal) {
        document.querySelectorAll('.categoria-bloque-local').forEach(bloque => bloque.style.display = 'none');
        selectCategoriaLocal.value = '';
        selectCategoriaLocal.addEventListener('change', function() {
          const categoria = this.value;
          document.querySelectorAll('.categoria-bloque-local').forEach(bloque => {
            bloque.style.display = 'none';
          });
          document.querySelectorAll('.producto-categoria-local').forEach(prod => {
            prod.style.display = 'none';
          });
          
          if (categoria) {
            const bloqueMostrar = document.querySelector('.categoria-bloque-local-' + categoria);
            if (bloqueMostrar) {
              bloqueMostrar.style.display = '';
              bloqueMostrar.querySelectorAll('.producto-categoria-local-' + categoria).forEach(prod => {
                prod.style.display = '';
              });
              bloqueMostrar.scrollIntoView({ behavior: 'smooth', block: 'start' });
            }
          }
        });

        selectCategoriaLocal.dispatchEvent(new Event('change'));
      }
      const pedidoLocalModal = document.getElementById('pedidoLocalModal');
      if (pedidoLocalModal) {
        pedidoLocalModal.addEventListener('show.bs.modal', function () {
          if (!selectCategoriaLocal) return;
          selectCategoriaLocal.value = '';
          selectCategoriaLocal.dispatchEvent(new Event('change'));
        });
      }
    });

    // --- DELEGACIÓN DE EVENTOS PARA SUMAR/RESTAR EN PEDIDO LOCAL ---
    document.addEventListener('DOMContentLoaded', function() {
      const productosPorCategoriaLocal = document.getElementById('productosPorCategoriaLocal');
      if (productosPorCategoriaLocal) {
        productosPorCategoriaLocal.addEventListener('click', function(e) {
          const btn = e.target.closest('[data-btn-local]');
          if (btn) {
            const cat = btn.getAttribute('data-cat');
            const id = parseInt(btn.getAttribute('data-id'));
            const cambio = parseInt(btn.getAttribute('data-cambio'));
            window.actualizarCantidadPedidoLocal(cat, id, cambio);
          }
        });
      }
    });

  </script>

  <!-- ALERTA MODAL CENTRADA PARA PEDIDO LOCAL -->
  <div id="alerta-pedido-local" style="display:none;position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:3000;align-items:center;justify-content:center;background:rgba(0,0,0,0.25);">
    <div style="background:#fff;border-radius:18px;box-shadow:0 8px 32px rgba(0,0,0,0.18);padding:38px 32px 28px 32px;max-width:95vw;width:370px;text-align:center;animation:modalIn 0.22s cubic-bezier(.4,2,.6,1);position:relative;">
      <i class="bi bi-check-circle-fill" style="font-size:2.5rem;color:#28a745;"></i>
      <div style="font-size:1.35rem;font-weight:900;color:#28a745;margin:18px 0 8px 0;">¡Pedido enviado!</div>
      <div style="font-size:1.13rem;color:#222;margin-bottom:18px;">Tu pedido en local fue recibido correctamente.</div>
      <button type="button" class="btn btn-success" id="cerrarAlertaPedidoLocal">Cerrar</button>
    </div>
  </div>
  
  <script>
  function mostrarAlertaPedidoLocalCentrada() {
    const alerta = document.getElementById('alerta-pedido-local');
    if (!alerta) return;
    alerta.style.display = 'flex';
    // Cierre automático
    setTimeout(() => { alerta.style.display = 'none'; }, 3500);
    // Cierre manual
    const btnCerrar = document.getElementById('cerrarAlertaPedidoLocal');
    if (btnCerrar) {
      btnCerrar.onclick = function() { alerta.style.display = 'none'; };
    }
  }
  </script>

  <script>
  (function() {
    const video = document.getElementById('galleryVideo');
    const btn = document.getElementById('toggleMuteBtn');
    if (!video || !btn) return;

    function updateIconAndState() {
      const icon = btn.querySelector('i');
      if (video.muted) {
        btn.setAttribute('aria-pressed', 'false');
        btn.title = 'Activar sonido';
        if (icon) icon.className = 'bi bi-volume-mute-fill';
      } else {
        btn.setAttribute('aria-pressed', 'true');
        btn.title = 'Silenciar';
        if (icon) icon.className = 'bi bi-volume-up-fill';
      }
    }

    btn.addEventListener('click', function() {
      video.muted = !video.muted;
      if (!video.muted) {
        const p = video.play();
        if (p && typeof p.catch === 'function') { p.catch(() => {}); }
      }
      btn.classList.remove('pulse'); void btn.offsetWidth; btn.classList.add('pulse');
      updateIconAndState();
    });

    document.addEventListener('visibilitychange', function() {
      if (document.hidden) {
        video.muted = true;
        updateIconAndState();
      }
    });

    // Ensure initial state
    video.muted = true;
    updateIconAndState();
  })();
  </script>

</body>

</html>
User / IP	: 216.73.216.217
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64