Tul xxx Tul

Viewing: themes.php

<?php

include '../components/connect.php';
require_once '../components/admin_roles.php';

session_start();

$admin_id = $_SESSION['admin_id'] ?? null;
if (!$admin_id) {
   header('location:admin_login.php');
   exit();
}

ensureAdminRolesSchema($conn);

$businessName = getBusinessName($conn);
$businessLogo = getBusinessLogo($conn);
$businessLogoVersion = getBusinessLogoVersion($conn);
$businessLogoHref = '../' . ltrim($businessLogo, '/');
if ($businessLogoVersion !== '') {
   $businessLogoHref .= (strpos($businessLogoHref, '?') === false ? '?' : '&') . 'v=' . rawurlencode($businessLogoVersion);
}

$restaurantThemePresets = getRestaurantThemePresets();
$restaurantTheme = getRestaurantTheme($conn);
$restaurantThemeColors = $restaurantTheme['colors'];
$menuBackgroundImage = getRestaurantMenuBackgroundImage($conn);
$menuBackgroundPreview = '../' . ltrim($menuBackgroundImage, '/');
$restaurantThemeColorLabels = [
   'public_primary' => 'Principal web',
   'public_primary_dark' => 'Principal oscuro web',
   'public_secondary' => 'Secundario web',
   'public_accent' => 'Acento web',
   'public_bg' => 'Fondo web',
   'public_surface' => 'Tarjetas web',
   'public_text' => 'Texto web',
   'public_muted' => 'Texto suave web',
   'preloader_start' => 'Preloader inicio',
   'preloader_end' => 'Preloader final',
   'preloader_accent' => 'Preloader acento',
   'preloader_text' => 'Preloader texto',
   'admin_primary' => 'Principal panel',
   'admin_primary_dark' => 'Principal oscuro panel',
   'admin_secondary' => 'Lateral panel',
   'admin_accent' => 'Acento panel',
   'admin_bg' => 'Fondo panel',
   'admin_surface' => 'Tarjetas panel',
   'admin_text' => 'Texto panel',
   'success' => 'Exito',
   'warning' => 'Alerta',
   'danger' => 'Error',
   'info' => 'Info',
];

$errors = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
   $quickPreset = trim((string) ($_POST['theme_quick_apply'] ?? ''));
   $submittedPreset = $quickPreset !== '' ? $quickPreset : trim((string) ($_POST['theme_preset'] ?? ''));
   $submittedPreset = preg_replace('/[^a-z0-9_-]/', '', strtolower($submittedPreset));

   if (!isset($restaurantThemePresets[$submittedPreset])) {
      $errors[] = 'Selecciona un tema valido.';
   }

   $mode = $quickPreset !== '' ? 'preset' : trim((string) ($_POST['theme_mode'] ?? 'custom'));
   if (!in_array($mode, ['preset', 'custom'], true)) {
      $mode = 'custom';
   }

   $submittedColors = $_POST['theme_colors'] ?? [];
   if (!is_array($submittedColors)) {
      $submittedColors = [];
   }

   if (empty($errors)) {
      $backgroundAction = trim((string) ($_POST['theme_background_action'] ?? ''));
      if ($backgroundAction === 'reset') {
         setSystemSetting($conn, 'restaurant_menu_background', 'assets/img/background1.png');
      } elseif (isset($_FILES['menu_background']) && is_array($_FILES['menu_background']) && (int) ($_FILES['menu_background']['error'] ?? UPLOAD_ERR_NO_FILE) !== UPLOAD_ERR_NO_FILE) {
         $uploadError = (int) ($_FILES['menu_background']['error'] ?? UPLOAD_ERR_NO_FILE);
         $tmpName = (string) ($_FILES['menu_background']['tmp_name'] ?? '');
         $size = (int) ($_FILES['menu_background']['size'] ?? 0);
         $allowedTypes = [
            'image/jpeg' => 'jpg',
            'image/png' => 'png',
            'image/webp' => 'webp',
         ];

         if ($uploadError !== UPLOAD_ERR_OK || $tmpName === '' || !is_uploaded_file($tmpName)) {
            $errors[] = 'No se pudo subir la imagen de fondo.';
         } elseif ($size > 5 * 1024 * 1024) {
            $errors[] = 'La imagen de fondo debe pesar maximo 5 MB.';
         } else {
            $mime = '';
            if (function_exists('finfo_open')) {
               $finfo = finfo_open(FILEINFO_MIME_TYPE);
               if ($finfo) {
                  $mime = (string) finfo_file($finfo, $tmpName);
                  finfo_close($finfo);
               }
            }

            if (!isset($allowedTypes[$mime])) {
               $errors[] = 'Usa una imagen JPG, PNG o WEBP para el fondo del menu.';
            } else {
               $uploadDir = dirname(__DIR__) . DIRECTORY_SEPARATOR . 'uploaded_img' . DIRECTORY_SEPARATOR . 'theme_backgrounds';
               if (!is_dir($uploadDir)) {
                  mkdir($uploadDir, 0775, true);
               }

               $filename = 'menu_' . date('Ymd_His') . '_' . bin2hex(random_bytes(4)) . '.' . $allowedTypes[$mime];
               $target = $uploadDir . DIRECTORY_SEPARATOR . $filename;
               if (!move_uploaded_file($tmpName, $target)) {
                  $errors[] = 'No se pudo guardar la imagen de fondo.';
               } else {
                  setSystemSetting($conn, 'restaurant_menu_background', 'uploaded_img/theme_backgrounds/' . $filename);
               }
            }
         }
      }
   }

   if (empty($errors)) {
      $baseColors = $restaurantThemePresets[$submittedPreset]['colors'];
      $customColors = [];
      foreach (getRestaurantThemeColorKeys() as $key) {
         $fallback = $baseColors[$key] ?? ($restaurantThemeColors[$key] ?? '#000000');
         $customColors[$key] = normalizeRestaurantThemeHex($submittedColors[$key] ?? $fallback, $fallback);
      }

      setSystemSetting(
         $conn,
         'restaurant_theme',
         json_encode([
            'mode' => $mode,
            'preset' => $submittedPreset,
            'custom' => $customColors,
         ], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES)
      );

      addAdminFlashMessage($mode === 'preset' ? 'Tema aplicado correctamente.' : 'Tema guardado correctamente.');
      header('location:themes.php');
      exit();
   }
}

if (!empty($errors) && !empty($_POST['theme_colors']) && is_array($_POST['theme_colors'])) {
   foreach (getRestaurantThemeColorKeys() as $key) {
      $restaurantThemeColors[$key] = normalizeRestaurantThemeHex($_POST['theme_colors'][$key] ?? ($restaurantThemeColors[$key] ?? '#000000'), $restaurantThemeColors[$key] ?? '#000000');
   }
}

?>
<!DOCTYPE html>
<html lang="es">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Temas | <?= htmlspecialchars($businessName); ?></title>
   <link rel="icon" href="../icon.php?size=64<?= $businessLogoVersion !== '' ? '&v=' . rawurlencode($businessLogoVersion) : ''; ?>" type="image/png">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
   <link rel="stylesheet" href="../css/admin_style.css">
   <style>
      body.themes-page {
         min-height: 100vh;
         background:
            radial-gradient(circle at 15% 12%, color-mix(in srgb, var(--restaurant-admin-accent, #ffc107) 18%, transparent), transparent 30%),
            radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--restaurant-admin-primary, #b30000) 14%, transparent), transparent 28%),
            linear-gradient(135deg, var(--restaurant-admin-bg, #fff7ed), #fff);
      }

      .theme-wrap {
         max-width: 1240px;
         margin: 0 auto;
         padding: 1.7rem 1.2rem 3.5rem;
      }

      .theme-hero {
         display: grid;
         grid-template-columns: minmax(0, 1fr) auto;
         gap: 1rem;
         align-items: center;
         margin-bottom: 1.2rem;
      }

      .theme-hero h1 {
         margin: 0;
         color: var(--restaurant-admin-text, #111);
         font-size: clamp(1.7rem, 3vw, 2.7rem);
         font-weight: 950;
      }

      .theme-hero p {
         margin: .35rem 0 0;
         color: #64748b;
         font-weight: 750;
      }

      .btn-return,
      .theme-save {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: .55rem;
         min-height: 46px;
         border-radius: 14px;
         padding: .75rem 1rem;
         border: 1px solid rgba(15, 23, 42, .12);
         font-weight: 900;
         text-decoration: none;
         cursor: pointer;
      }

      .btn-return {
         color: var(--restaurant-admin-primary, #b30000);
         background: rgba(255, 255, 255, .8);
         box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
      }

      .theme-save {
         border: 0;
         color: #fff;
         background: linear-gradient(135deg, var(--restaurant-admin-primary, #b30000), var(--restaurant-admin-primary-dark, #7a0000));
         box-shadow: 0 16px 34px color-mix(in srgb, var(--restaurant-admin-primary, #b30000) 24%, transparent);
      }

      .theme-showcase {
         border-radius: 24px;
         overflow: hidden;
         background: rgba(255, 255, 255, .86);
         border: 1px solid rgba(15, 23, 42, .10);
         box-shadow: 0 24px 70px rgba(15, 23, 42, .13);
      }

      .preset-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
         gap: .9rem;
         padding: 1rem;
      }

      .theme-preset {
         width: 100%;
         min-height: 150px;
         border: 1px solid rgba(15, 23, 42, .12);
         border-radius: 18px;
         padding: 1rem;
         background: #fff;
         text-align: left;
         cursor: pointer;
         display: grid;
         gap: .7rem;
         box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
         transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
      }

      .theme-preset:hover {
         transform: translateY(-3px);
         border-color: var(--restaurant-admin-primary, #b30000);
         box-shadow: 0 20px 42px rgba(15, 23, 42, .14);
      }

      .theme-preset.is-active {
         border-color: var(--restaurant-admin-primary, #b30000);
         box-shadow: 0 18px 44px color-mix(in srgb, var(--restaurant-admin-primary, #b30000) 18%, transparent);
      }

      .preset-top {
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: .75rem;
      }

      .preset-icon {
         width: 44px;
         height: 44px;
         border-radius: 15px;
         color: #fff;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 12px 24px rgba(15, 23, 42, .16);
      }

      .active-chip {
         border-radius: 999px;
         padding: .32rem .65rem;
         background: color-mix(in srgb, var(--restaurant-admin-primary, #b30000) 10%, #fff);
         color: var(--restaurant-admin-primary, #b30000);
         font-size: .78rem;
         font-weight: 900;
      }

      .theme-preset strong {
         color: #0f172a;
         font-size: 1rem;
      }

      .theme-preset p {
         margin: 0;
         color: #64748b;
         font-weight: 700;
         line-height: 1.35;
         font-size: .88rem;
      }

      .swatches {
         display: flex;
         gap: .35rem;
      }

      .swatch {
         width: 28px;
         height: 28px;
         border-radius: 999px;
         border: 2px solid #fff;
         box-shadow: 0 6px 14px rgba(15, 23, 42, .15);
      }

      .theme-studio {
         display: grid;
         grid-template-columns: minmax(310px, .92fr) minmax(360px, 1.08fr);
         gap: 1rem;
         padding: 0 1rem 1rem;
      }

      .preview {
         border-radius: 22px;
         overflow: hidden;
         border: 1px solid rgba(15, 23, 42, .12);
         background: var(--preview-bg);
         min-height: 100%;
         box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
      }

      .preview-webbar {
         min-height: 70px;
         padding: 1rem 1.15rem;
         color: #fff;
         background: linear-gradient(120deg, var(--preview-primary), var(--preview-primary-dark));
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 1rem;
         font-weight: 950;
      }

      .preview-cta {
         background: var(--preview-secondary);
         color: var(--preview-primary-dark);
         border-radius: 999px;
         padding: .55rem .9rem;
         font-weight: 950;
      }

      .preview-body {
         padding: 1rem;
         display: grid;
         gap: 1rem;
      }

      .preview-loader {
         border-radius: 18px;
         min-height: 150px;
         display: grid;
         place-items: center;
         color: var(--preview-preloader-text);
         background:
            radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--preview-preloader-accent) 26%, transparent), transparent 30%),
            linear-gradient(135deg, var(--preview-preloader-start), var(--preview-preloader-end));
         position: relative;
         overflow: hidden;
      }

      .preview-loader::before {
         content: '';
         position: absolute;
         inset: 18px;
         border-radius: 18px;
         border: 1px solid color-mix(in srgb, var(--preview-preloader-text) 22%, transparent);
         box-shadow: inset 0 0 35px color-mix(in srgb, var(--preview-preloader-accent) 14%, transparent);
         pointer-events: none;
      }

      .preview-loader::after {
         content: '';
         position: absolute;
         inset: 0;
         background-image:
            radial-gradient(circle at 24% 30%, color-mix(in srgb, var(--preview-preloader-text) 18%, transparent) 0 2px, transparent 3px),
            radial-gradient(circle at 76% 68%, color-mix(in srgb, var(--preview-preloader-accent) 22%, transparent) 0 2px, transparent 3px);
         background-size: 64px 64px;
         opacity: .8;
         pointer-events: none;
      }

      .preview-loader-inner {
         position: relative;
         z-index: 1;
         display: grid;
         justify-items: center;
         gap: .65rem;
      }

      .preview-loader-inner span {
         color: var(--preview-preloader-text);
         font-weight: 950;
         text-shadow: 0 8px 22px rgba(15, 23, 42, .26);
      }

      .preview-logo {
         position: relative;
         width: 70px;
         height: 70px;
         border-radius: 20px;
         object-fit: contain;
         background: #fff;
         padding: .4rem;
         box-shadow: 0 18px 38px rgba(15, 23, 42, .18);
      }

      .preview-card {
         display: grid;
         grid-template-columns: 84px 1fr;
         gap: .9rem;
         align-items: center;
         background: var(--preview-surface);
         border-radius: 18px;
         padding: .95rem;
         border: 1px solid rgba(15, 23, 42, .10);
      }

      .preview-photo {
         width: 84px;
         height: 84px;
         border-radius: 18px;
         background: radial-gradient(circle at 35% 30%, var(--preview-secondary), transparent 38%),
            linear-gradient(135deg, var(--preview-primary), var(--preview-accent));
      }

      .preview-title {
         color: var(--preview-text);
         font-weight: 950;
      }

      .preview-muted {
         color: var(--preview-muted);
         font-weight: 700;
         font-size: .9rem;
      }

      .preview-price {
         margin-top: .45rem;
         color: var(--preview-primary);
         font-weight: 950;
      }

      .preview-admin {
         display: grid;
         grid-template-columns: 92px 1fr;
         min-height: 132px;
         border-radius: 18px;
         overflow: hidden;
         background: var(--preview-admin-bg);
         border: 1px solid rgba(15, 23, 42, .10);
      }

      .preview-sidebar {
         background: linear-gradient(180deg, var(--preview-admin-primary), var(--preview-admin-secondary));
         padding: .85rem .65rem;
         display: grid;
         gap: .5rem;
         align-content: start;
      }

      .preview-pill {
         height: 12px;
         border-radius: 999px;
         background: rgba(255, 255, 255, .78);
      }

      .preview-pill:nth-child(2) {
         background: var(--preview-admin-accent);
      }

      .preview-panel {
         padding: .9rem;
         display: grid;
         gap: .6rem;
      }

      .preview-metric {
         min-height: 32px;
         border-radius: 11px;
         background: var(--preview-surface);
         border-left: 4px solid var(--preview-admin-primary);
      }

      .custom-panel {
         border-radius: 22px;
         padding: 1rem;
         background: rgba(255, 255, 255, .78);
         border: 1px solid rgba(15, 23, 42, .10);
      }

      .custom-panel h2 {
         margin: 0 0 .35rem;
         color: #0f172a;
         font-size: 1.25rem;
         font-weight: 950;
      }

      .custom-panel p {
         margin: 0 0 1rem;
         color: #64748b;
         font-weight: 700;
      }

      .color-section-title {
         margin: 1rem 0 .7rem;
         color: #0f172a;
         font-size: 1rem;
         font-weight: 950;
      }

      .color-grid {
         display: grid;
         grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
         gap: .8rem;
      }

      .color-field {
         display: grid;
         gap: .4rem;
      }

      .color-field label {
         color: #334155;
         font-weight: 850;
         font-size: .88rem;
      }

      .color-field input[type="color"] {
         width: 100%;
         height: 48px;
         border-radius: 15px;
         padding: .25rem;
         border: 1px solid rgba(15, 23, 42, .14);
         background: #fff;
         cursor: pointer;
      }

      .actions {
         margin-top: 1rem;
         display: flex;
         flex-wrap: wrap;
         gap: .7rem;
         justify-content: flex-end;
      }

      .background-card {
         margin-top: 1.2rem;
         border-radius: 20px;
         overflow: hidden;
         border: 1px solid rgba(15, 23, 42, .11);
         background: rgba(255, 255, 255, .86);
      }

      .background-preview {
         min-height: 210px;
         background-image:
            linear-gradient(180deg, rgba(15, 23, 42, .16), rgba(15, 23, 42, .58)),
            var(--menu-background-preview);
         background-size: cover;
         background-position: center;
         display: grid;
         align-content: end;
         padding: 1rem;
      }

      .background-preview span {
         width: fit-content;
         border-radius: 999px;
         padding: .48rem .8rem;
         color: #fff;
         background: rgba(15, 23, 42, .68);
         font-weight: 950;
         backdrop-filter: blur(8px);
      }

      .background-controls {
         padding: 1rem;
         display: grid;
         gap: .8rem;
      }

      .background-controls label {
         color: #334155;
         font-weight: 900;
      }

      .background-controls input[type="file"] {
         width: 100%;
         border-radius: 15px;
         padding: .75rem;
         background: #fff;
         border: 1px dashed rgba(15, 23, 42, .22);
         cursor: pointer;
      }

      .theme-reset {
         display: inline-flex;
         align-items: center;
         justify-content: center;
         gap: .5rem;
         min-height: 46px;
         border-radius: 14px;
         padding: .75rem 1rem;
         border: 1px solid rgba(15, 23, 42, .14);
         background: #fff;
         color: #334155;
         font-weight: 900;
         cursor: pointer;
      }

      .error-box {
         background: #fef2f2;
         border: 1px solid #fecaca;
         color: #991b1b;
         border-radius: 16px;
         padding: .9rem 1rem;
         margin-bottom: 1rem;
         font-weight: 800;
      }

      @media (max-width: 900px) {
         .theme-hero,
         .theme-studio {
            grid-template-columns: 1fr;
         }
      }
   </style>
</head>

<body class="themes-page admin-panel">
   <?php include '../components/admin_header.php'; ?>

   <main class="theme-wrap">
      <div class="theme-hero">
         <div>
            <h1><i class="fa-solid fa-palette"></i> Temas del restaurante</h1>
            <p>Controla el sabor visual de la pagina web, el panel y la pantalla de carga inicial.</p>
         </div>
         <a href="settings.php" class="btn-return"><i class="fa-solid fa-arrow-left"></i> Volver a Configuracion</a>
      </div>

      <?php if (!empty($errors)): ?>
         <div class="error-box">
            <?php foreach ($errors as $err): ?>
               <div><?= htmlspecialchars($err); ?></div>
            <?php endforeach; ?>
         </div>
      <?php endif; ?>

      <form method="post" action="" id="appearanceForm" class="theme-showcase" enctype="multipart/form-data">
         <input type="hidden" name="theme_mode" id="themeMode" value="custom">
         <input type="hidden" name="theme_preset" id="themePreset" value="<?= htmlspecialchars((string) $restaurantTheme['preset']); ?>">

         <section class="preset-grid" aria-label="Temas predefinidos">
            <?php foreach ($restaurantThemePresets as $themeKey => $preset): ?>
               <?php
               $presetColors = normalizeRestaurantThemeColors($preset['colors'], $restaurantThemePresets[array_key_first($restaurantThemePresets)]['colors']);
               $presetColorsJson = json_encode($presetColors, JSON_UNESCAPED_SLASHES | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_TAG | JSON_HEX_AMP);
               $isActiveTheme = (string) $restaurantTheme['preset'] === (string) $themeKey;
               ?>
               <button type="submit" class="theme-preset <?= $isActiveTheme ? 'is-active' : ''; ?>"
                  name="theme_quick_apply" value="<?= htmlspecialchars((string) $themeKey); ?>"
                  data-theme-key="<?= htmlspecialchars((string) $themeKey); ?>"
                  data-theme-colors="<?= htmlspecialchars((string) $presetColorsJson, ENT_QUOTES); ?>">
                  <span class="preset-top">
                     <span class="preset-icon" style="background:linear-gradient(135deg, <?= htmlspecialchars($presetColors['admin_primary']); ?>, <?= htmlspecialchars($presetColors['admin_accent']); ?>);">
                        <i class="fa-solid <?= htmlspecialchars((string) $preset['icon']); ?>"></i>
                     </span>
                     <?php if ($isActiveTheme): ?>
                        <span class="active-chip">Activo</span>
                     <?php endif; ?>
                  </span>
                  <strong><?= htmlspecialchars((string) $preset['name']); ?></strong>
                  <p><?= htmlspecialchars((string) $preset['description']); ?></p>
                  <span class="swatches" aria-hidden="true">
                     <span class="swatch" style="background:<?= htmlspecialchars($presetColors['public_primary']); ?>"></span>
                     <span class="swatch" style="background:<?= htmlspecialchars($presetColors['public_secondary']); ?>"></span>
                     <span class="swatch" style="background:<?= htmlspecialchars($presetColors['public_accent']); ?>"></span>
                     <span class="swatch" style="background:<?= htmlspecialchars($presetColors['admin_secondary']); ?>"></span>
                     <span class="swatch" style="background:<?= htmlspecialchars($presetColors['admin_bg']); ?>"></span>
                  </span>
               </button>
            <?php endforeach; ?>
         </section>

         <section class="theme-studio">
            <div class="preview" id="themePreview"
               style="--preview-primary: <?= htmlspecialchars($restaurantThemeColors['public_primary']); ?>; --preview-primary-dark: <?= htmlspecialchars($restaurantThemeColors['public_primary_dark']); ?>; --preview-secondary: <?= htmlspecialchars($restaurantThemeColors['public_secondary']); ?>; --preview-accent: <?= htmlspecialchars($restaurantThemeColors['public_accent']); ?>; --preview-bg: <?= htmlspecialchars($restaurantThemeColors['public_bg']); ?>; --preview-surface: <?= htmlspecialchars($restaurantThemeColors['public_surface']); ?>; --preview-text: <?= htmlspecialchars($restaurantThemeColors['public_text']); ?>; --preview-muted: <?= htmlspecialchars($restaurantThemeColors['public_muted']); ?>; --preview-preloader-start: <?= htmlspecialchars($restaurantThemeColors['preloader_start']); ?>; --preview-preloader-end: <?= htmlspecialchars($restaurantThemeColors['preloader_end']); ?>; --preview-preloader-accent: <?= htmlspecialchars($restaurantThemeColors['preloader_accent']); ?>; --preview-preloader-text: <?= htmlspecialchars($restaurantThemeColors['preloader_text']); ?>; --preview-admin-primary: <?= htmlspecialchars($restaurantThemeColors['admin_primary']); ?>; --preview-admin-secondary: <?= htmlspecialchars($restaurantThemeColors['admin_secondary']); ?>; --preview-admin-accent: <?= htmlspecialchars($restaurantThemeColors['admin_accent']); ?>; --preview-admin-bg: <?= htmlspecialchars($restaurantThemeColors['admin_bg']); ?>;">
               <div class="preview-webbar">
                  <span><?= htmlspecialchars($businessName); ?></span>
                  <span class="preview-cta">Pedir</span>
               </div>
               <div class="preview-body">
                  <div class="preview-loader">
                     <div class="preview-loader-inner">
                        <img src="<?= htmlspecialchars($businessLogoHref); ?>" alt="<?= htmlspecialchars($businessName); ?>" class="preview-logo">
                        <span>Preparando tu pedido</span>
                     </div>
                  </div>
                  <div class="preview-card">
                     <div class="preview-photo"></div>
                     <div>
                        <div class="preview-title">Combo especial</div>
                        <div class="preview-muted">Pan artesanal, salsa de la casa y papas crocantes.</div>
                        <div class="preview-price">$ 28.000</div>
                     </div>
                  </div>
                  <div class="preview-admin">
                     <div class="preview-sidebar">
                        <span class="preview-pill"></span>
                        <span class="preview-pill"></span>
                        <span class="preview-pill"></span>
                     </div>
                     <div class="preview-panel">
                        <div class="preview-metric"></div>
                        <div class="preview-metric" style="border-left-color:var(--preview-admin-accent);"></div>
                        <div class="preview-metric"></div>
                     </div>
                  </div>
               </div>
            </div>

            <div class="custom-panel">
               <h2><i class="fa-solid fa-eye-dropper"></i> Paleta personalizada</h2>
               <p>Cambia un color y mira el resultado antes de guardar.</p>

               <?php
               $colorGroups = [
                  'Pagina web' => ['public_primary', 'public_primary_dark', 'public_secondary', 'public_accent', 'public_bg', 'public_text'],
                  'Preloader' => ['preloader_start', 'preloader_end', 'preloader_accent', 'preloader_text'],
                  'Panel admin' => ['admin_primary', 'admin_primary_dark', 'admin_secondary', 'admin_accent', 'admin_bg', 'admin_text'],
                  'Estados' => ['success', 'warning', 'danger', 'info'],
               ];
               $visibleColorKeys = array_merge(...array_values($colorGroups));
               ?>
               <?php foreach (getRestaurantThemeColorKeys() as $colorKey): ?>
                  <?php if (!in_array($colorKey, $visibleColorKeys, true)): ?>
                     <input type="hidden" name="theme_colors[<?= htmlspecialchars($colorKey); ?>]" value="<?= htmlspecialchars($restaurantThemeColors[$colorKey] ?? '#000000'); ?>">
                  <?php endif; ?>
               <?php endforeach; ?>

               <?php foreach ($colorGroups as $groupTitle => $keys): ?>
                  <div class="color-section-title"><?= htmlspecialchars($groupTitle); ?></div>
                  <div class="color-grid">
                     <?php foreach ($keys as $colorKey): ?>
                        <div class="color-field">
                           <label for="theme_<?= htmlspecialchars($colorKey); ?>"><?= htmlspecialchars($restaurantThemeColorLabels[$colorKey] ?? $colorKey); ?></label>
                           <input type="color" id="theme_<?= htmlspecialchars($colorKey); ?>"
                              name="theme_colors[<?= htmlspecialchars($colorKey); ?>]"
                              value="<?= htmlspecialchars($restaurantThemeColors[$colorKey] ?? '#000000'); ?>"
                              data-theme-color="<?= htmlspecialchars($colorKey); ?>">
                        </div>
                     <?php endforeach; ?>
                  </div>
               <?php endforeach; ?>

               <div class="background-card">
                  <div class="background-preview" id="menuBackgroundPreview" style="--menu-background-preview:url('<?= htmlspecialchars($menuBackgroundPreview, ENT_QUOTES); ?>');">
                     <span><i class="fa-solid fa-utensils"></i> Fondo actual del menu</span>
                  </div>
                  <div class="background-controls">
                     <label for="menu_background">Imagen de fondo del menu principal</label>
                     <input id="menu_background" name="menu_background" type="file" accept="image/png,image/jpeg,image/webp">
                     <p style="margin:0;color:#64748b;font-weight:700;">Recomendado: imagen horizontal, buena luz, maximo 5 MB. Se aplicara en la seccion donde aparecen los productos.</p>
                  </div>
               </div>

               <div class="actions">
                  <button type="submit" class="theme-reset" name="theme_background_action" value="reset">
                     <i class="fa-solid fa-rotate-left"></i> Fondo original
                  </button>
                  <button type="submit" class="theme-save" name="theme_save_custom" value="1">
                     <i class="fa-solid fa-floppy-disk"></i> Guardar tema
                  </button>
               </div>
            </div>
         </section>
      </form>
   </main>

   <script>
      (function () {
         const preview = document.getElementById('themePreview');
         const mode = document.getElementById('themeMode');
         const preset = document.getElementById('themePreset');
         const root = document.documentElement;

         const map = {
            public_primary: ['--preview-primary', '--color-primary', '--restaurant-public-primary'],
            public_primary_dark: ['--preview-primary-dark', '--color-primary-dark', '--restaurant-public-primary-dark'],
            public_secondary: ['--preview-secondary', '--color-secondary', '--restaurant-public-secondary'],
            public_accent: ['--preview-accent', '--restaurant-public-accent'],
            public_bg: ['--preview-bg', '--restaurant-public-bg'],
            public_surface: ['--preview-surface', '--restaurant-public-surface'],
            public_text: ['--preview-text', '--color-text', '--restaurant-public-text'],
            public_muted: ['--preview-muted', '--color-gray', '--restaurant-public-muted'],
            preloader_start: ['--preview-preloader-start', '--restaurant-preloader-start', '--preloader-start'],
            preloader_end: ['--preview-preloader-end', '--restaurant-preloader-end', '--preloader-end'],
            preloader_accent: ['--preview-preloader-accent', '--restaurant-preloader-accent', '--preloader-accent'],
            preloader_text: ['--preview-preloader-text', '--restaurant-preloader-text', '--preloader-text'],
            admin_primary: ['--preview-admin-primary', '--admin-color-primary', '--restaurant-admin-primary', '--main-color', '--primary', '--pos-primary'],
            admin_primary_dark: ['--admin-color-primary-dark', '--restaurant-admin-primary-dark', '--primary-dark', '--pos-primary-dark'],
            admin_secondary: ['--preview-admin-secondary', '--admin-color-secondary', '--restaurant-admin-secondary', '--pos-secondary'],
            admin_accent: ['--preview-admin-accent', '--admin-color-highlight', '--restaurant-admin-accent', '--pos-accent'],
            admin_bg: ['--preview-admin-bg', '--admin-color-bg', '--restaurant-admin-bg', '--pos-bg'],
            admin_surface: ['--admin-color-surface', '--restaurant-admin-surface', '--pos-surface'],
            admin_text: ['--admin-color-text', '--restaurant-admin-text', '--pos-text'],
            success: ['--success', '--success-color', '--pos-success'],
            warning: ['--warning', '--pos-warning'],
            danger: ['--danger', '--pos-danger'],
            info: ['--info']
         };

         function applyColor(key, value) {
            (map[key] || []).forEach((varName) => {
               root.style.setProperty(varName, value);
               preview?.style.setProperty(varName, value);
            });
         }

         document.querySelectorAll('[data-theme-color]').forEach((input) => {
            input.addEventListener('input', () => {
               if (mode) mode.value = 'custom';
               applyColor(input.dataset.themeColor, input.value);
            });
         });

         const backgroundInput = document.getElementById('menu_background');
         const backgroundPreview = document.getElementById('menuBackgroundPreview');
         backgroundInput?.addEventListener('change', () => {
            const file = backgroundInput.files && backgroundInput.files[0];
            if (!file || !backgroundPreview) return;
            const url = URL.createObjectURL(file);
            backgroundPreview.style.setProperty('--menu-background-preview', `url("${url}")`);
         });

         document.querySelectorAll('[data-theme-key][data-theme-colors]').forEach((button) => {
            button.addEventListener('mouseenter', () => {
               try {
                  const colors = JSON.parse(button.dataset.themeColors || '{}');
                  Object.entries(colors).forEach(([key, value]) => applyColor(key, value));
               } catch (ignored) {}
            });
            button.addEventListener('mouseleave', () => {
               document.querySelectorAll('[data-theme-color]').forEach((input) => applyColor(input.dataset.themeColor, input.value));
            });
            button.addEventListener('click', () => {
               if (mode) mode.value = 'preset';
               if (preset) preset.value = button.dataset.themeKey || preset.value;
            });
         });
      })();
   </script>
</body>

</html>
User / IP	: 216.73.217.21
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