{"id":100,"date":"2026-06-16T04:40:52","date_gmt":"2026-06-16T04:40:52","guid":{"rendered":"https:\/\/gabysgroup.com\/?page_id=100"},"modified":"2026-07-28T17:16:46","modified_gmt":"2026-07-28T17:16:46","slug":"reservar","status":"publish","type":"page","link":"https:\/\/gabysgroup.com\/hu\/reservar\/","title":{"rendered":"K\u00f6nyv"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"100\" class=\"elementor elementor-100\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-5544fcd e-con-full e-flex e-con e-parent\" data-id=\"5544fcd\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t<div class=\"elementor-element elementor-element-0e5d497 e-flex e-con-boxed e-con e-child\" data-id=\"0e5d497\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d9252e3 elementor-widget elementor-widget-heading\" data-id=\"d9252e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Haz una reserva<\/h2>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-f2c74cf e-flex e-con-boxed e-con e-parent\" data-id=\"f2c74cf\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ea592a8 elementor-hidden-desktop elementor-hidden-tablet elementor-hidden-mobile elementor-widget elementor-widget-html\" data-id=\"ea592a8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- Contenedor Principal de la Reserva Incrustada -->\r\n<div class=\"reserva-incrustada-wrapper\">\r\n  \r\n  <div class=\"res-header-inline\">\r\n    <h3 style=\"margin: 0; color: #333; font-size: 24px;\">Gaby's Sitges<\/h3>\r\n    <p id=\"indicador-paso-inline\">Paso 1 de 2: Detalles de la reserva<\/p>\r\n  <\/div>\r\n\r\n  <!-- PASO 1: Fecha, Personas y Hora -->\r\n  <div id=\"inline-paso-1\" class=\"res-paso-inline activo\">\r\n    <div class=\"res-fila-inline\">\r\n      <select id=\"inline-personas\" class=\"res-input-inline\">\r\n        <option value=\"1\">1 persona<\/option>\r\n        <option value=\"2\" selected>2 personas<\/option>\r\n        <option value=\"3\">3 personas<\/option>\r\n        <option value=\"4\">4 personas<\/option>\r\n        <option value=\"5+\">5+ personas<\/option>\r\n      <\/select>\r\n      <input type=\"date\" id=\"inline-fecha\" class=\"res-input-inline\">\r\n    <\/div>\r\n    \r\n    <p class=\"res-label-inline\">Selecciona la hora:<\/p>\r\n    <div class=\"grid-horas-inline\">\r\n      <button class=\"btn-hora-inline\">13:00<\/button>\r\n      <button class=\"btn-hora-inline\">13:30<\/button>\r\n      <button class=\"btn-hora-inline\">14:00<\/button>\r\n      <button class=\"btn-hora-inline\">14:30<\/button>\r\n      <button class=\"btn-hora-inline\">20:00<\/button>\r\n      <button class=\"btn-hora-inline\">20:30<\/button>\r\n      <button class=\"btn-hora-inline\">21:00<\/button>\r\n      <button class=\"btn-hora-inline\">21:30<\/button>\r\n    <\/div>\r\n\r\n    <button id=\"btn-continuar-inline\" class=\"btn-primario-inline\" disabled>Continuar ><\/button>\r\n  <\/div>\r\n\r\n  <!-- PASO 2: Datos del Cliente -->\r\n  <div id=\"inline-paso-2\" class=\"res-paso-inline\">\r\n    <div id=\"resumen-seleccion-inline\" class=\"resumen-alerta-inline\"><\/div>\r\n    \r\n    <div class=\"res-fila-inline\">\r\n      <input type=\"text\" id=\"inline-nombre\" placeholder=\"Nombre\" class=\"res-input-inline\">\r\n      <input type=\"text\" id=\"inline-apellido\" placeholder=\"Apellido\" class=\"res-input-inline\">\r\n    <\/div>\r\n    <input type=\"email\" id=\"inline-email\" placeholder=\"Direcci\u00f3n de correo electr\u00f3nico\" class=\"res-input-inline\">\r\n    <input type=\"tel\" id=\"inline-tel\" placeholder=\"N\u00famero de tel\u00e9fono\" class=\"res-input-inline\">\r\n    \r\n    <select class=\"res-input-inline\">\r\n      <option value=\"\">Seleccione el prop\u00f3sito de la visita (opcional)<\/option>\r\n      <option value=\"cumpleanos\">Cumplea\u00f1os<\/option>\r\n      <option value=\"aniversario\">Aniversario<\/option>\r\n      <option value=\"negocios\">Negocios<\/option>\r\n    <\/select>\r\n    \r\n    <textarea placeholder=\"Mensaje (opcional)\" class=\"res-input-inline\" rows=\"3\"><\/textarea>\r\n    \r\n    <p class=\"terminos-inline\">Al hacer clic en \"Enviar\" acepto los <a href=\"#\" style=\"color:#F5A623;\">T\u00e9rminos y condiciones<\/a> y reconozco la <a href=\"#\" style=\"color:#F5A623;\">Pol\u00edtica de privacidad<\/a>.<\/p>\r\n    \r\n    <div class=\"acciones-paso-2-inline\">\r\n      <button id=\"btn-volver-inline\" class=\"btn-secundario-inline\">< Volver<\/button>\r\n      <button id=\"btn-enviar-inline\" class=\"btn-primario-inline\">Enviar ><\/button>\r\n    <\/div>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- CSS Integrado -->\r\n<style>\r\n  .reserva-incrustada-wrapper {\r\n    background-color: #FDF8F1; \r\n    max-width: 600px;\r\n    margin: 40px auto; \r\n    padding: 30px;\r\n    border-radius: 12px;\r\n    box-shadow: 0 10px 30px rgba(0,0,0,0.1); \r\n    font-family: sans-serif;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .res-header-inline { margin-bottom: 25px; }\r\n  #indicador-paso-inline { font-size: 14px; color: #777; margin-top: 5px; }\r\n\r\n  \/* Control de visibilidad de los pasos *\/\r\n  .res-paso-inline { display: none; }\r\n  .res-paso-inline.activo { display: block; animation: deslizarEntrada 0.4s ease; }\r\n  \r\n  @keyframes deslizarEntrada {\r\n    from { opacity: 0; transform: translateX(20px); }\r\n    to { opacity: 1; transform: translateX(0); }\r\n  }\r\n\r\n  .res-fila-inline {\r\n    display: flex;\r\n    gap: 15px;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .res-input-inline {\r\n    width: 100%;\r\n    padding: 14px;\r\n    border: 1px solid #ddd;\r\n    border-radius: 6px;\r\n    margin-bottom: 15px;\r\n    font-size: 15px;\r\n    box-sizing: border-box;\r\n    transition: border-color 0.3s;\r\n    font-family: inherit;\r\n  }\r\n\r\n  .res-input-inline:focus {\r\n    outline: none;\r\n    border-color: #F5A623;\r\n    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.2);\r\n  }\r\n\r\n  textarea.res-input-inline { resize: vertical; }\r\n\r\n  \/* Grid de horas *\/\r\n  .res-label-inline { font-size: 15px; color: #444; margin-bottom: 10px; font-weight: bold; }\r\n  .grid-horas-inline {\r\n    display: grid;\r\n    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\r\n    gap: 10px;\r\n    margin-bottom: 25px;\r\n  }\r\n\r\n  .btn-hora-inline {\r\n    padding: 12px;\r\n    border: 1px solid #ddd;\r\n    background: white;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    font-size: 15px;\r\n    transition: all 0.2s;\r\n  }\r\n\r\n  .btn-hora-inline:hover { border-color: #F5A623; color: #F5A623; }\r\n  .btn-hora-inline.seleccionada {\r\n    background-color: #F5A623;\r\n    color: white;\r\n    border-color: #F5A623;\r\n    font-weight: bold;\r\n  }\r\n\r\n  \/* Botones principales y secundarios *\/\r\n  .btn-primario-inline {\r\n    width: 100%;\r\n    padding: 16px;\r\n    background-color: #F5A623;\r\n    color: white;\r\n    border: none;\r\n    border-radius: 6px;\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n    cursor: pointer;\r\n    transition: background-color 0.3s;\r\n  }\r\n\r\n  .btn-primario-inline:hover:not(:disabled) { background-color: #e0961d; }\r\n  .btn-primario-inline:disabled { background-color: #fbd69c; cursor: not-allowed; }\r\n\r\n  .acciones-paso-2-inline { display: flex; gap: 15px; }\r\n  \r\n  .btn-secundario-inline {\r\n    width: 40%;\r\n    padding: 16px;\r\n    background-color: transparent;\r\n    color: #444;\r\n    border: 1px solid #ccc;\r\n    border-radius: 6px;\r\n    cursor: pointer;\r\n    font-size: 16px;\r\n    font-weight: bold;\r\n    transition: background 0.3s;\r\n  }\r\n  .btn-secundario-inline:hover { background-color: #f0f0f0; }\r\n\r\n  \/* Alerta de resumen *\/\r\n  .resumen-alerta-inline {\r\n    background-color: #fff;\r\n    border-left: 4px solid #F5A623;\r\n    padding: 15px;\r\n    margin-bottom: 20px;\r\n    font-size: 15px;\r\n    color: #333;\r\n    box-shadow: 0 2px 5px rgba(0,0,0,0.05);\r\n  }\r\n\r\n  .terminos-inline { font-size: 13px; color: #666; margin-bottom: 20px; line-height: 1.5; }\r\n\r\n  \/* Responsivo para m\u00f3viles *\/\r\n  @media (max-width: 600px) {\r\n    .res-fila-inline { flex-direction: column; gap: 0; }\r\n    .reserva-incrustada-wrapper { padding: 20px; margin: 20px 10px; }\r\n  }\r\n<\/style>\r\n\r\n<!-- JavaScript Integrado -->\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function() {\r\n  const paso1 = document.getElementById(\"inline-paso-1\");\r\n  const paso2 = document.getElementById(\"inline-paso-2\");\r\n  const indicador = document.getElementById(\"indicador-paso-inline\");\r\n  \r\n  const btnContinuar = document.getElementById(\"btn-continuar-inline\");\r\n  const btnVolver = document.getElementById(\"btn-volver-inline\");\r\n  const btnEnviar = document.getElementById(\"btn-enviar-inline\");\r\n  const btnHoras = document.querySelectorAll(\".btn-hora-inline\");\r\n  \r\n  const inputPersonas = document.getElementById(\"inline-personas\");\r\n  const inputFecha = document.getElementById(\"inline-fecha\");\r\n  const resumen = document.getElementById(\"resumen-seleccion-inline\");\r\n  \r\n  let horaElegida = \"\";\r\n\r\n  \/\/ Establecer fecha de hoy por defecto al cargar\r\n  if(!inputFecha.value) inputFecha.valueAsDate = new Date();\r\n\r\n  \/\/ Seleccionar hora\r\n  btnHoras.forEach(btn => {\r\n    btn.addEventListener(\"click\", function() {\r\n      btnHoras.forEach(b => b.classList.remove(\"seleccionada\"));\r\n      this.classList.add(\"seleccionada\");\r\n      horaElegida = this.innerText;\r\n      btnContinuar.disabled = false;\r\n    });\r\n  });\r\n\r\n  \/\/ Ir al Paso 2\r\n  btnContinuar.addEventListener(\"click\", () => {\r\n    paso1.classList.remove(\"activo\");\r\n    paso2.classList.add(\"activo\");\r\n    indicador.innerText = \"Paso 2 de 2: Tus datos\";\r\n    \r\n    const personasTxt = inputPersonas.options[inputPersonas.selectedIndex].text;\r\n    const fechaObj = new Date(inputFecha.value + 'T00:00:00');\r\n    const opcionesFecha = { weekday: 'short', day: '2-digit', month: '2-digit', year: 'numeric' };\r\n    const fechaFormateada = fechaObj.toLocaleDateString('es-ES', opcionesFecha);\r\n    \r\n    resumen.innerHTML = `Gaby's Sitges<br><strong>${personasTxt}<\/strong>, ${fechaFormateada}, <strong>${horaElegida}<\/strong>`;\r\n  });\r\n\r\n  \/\/ Volver al Paso 1\r\n  btnVolver.addEventListener(\"click\", () => {\r\n    paso2.classList.remove(\"activo\");\r\n    paso1.classList.add(\"activo\");\r\n    indicador.innerText = \"Paso 1 de 2: Detalles de la reserva\";\r\n  });\r\n  \r\n  \/\/ --- L\u00d3GICA DE ENV\u00cdO AJAX ---\r\n  btnEnviar.addEventListener(\"click\", function(e) {\r\n    e.preventDefault(); \r\n    \r\n    const nombre = document.getElementById(\"inline-nombre\").value.trim();\r\n    const apellido = document.getElementById(\"inline-apellido\").value.trim();\r\n    const email = document.getElementById(\"inline-email\").value.trim();\r\n    const telefono = document.getElementById(\"inline-tel\").value.trim();\r\n    const proposito = document.querySelector(\"#inline-paso-2 select\").value;\r\n    const mensaje = document.querySelector(\"#inline-paso-2 textarea\").value;\r\n\r\n    if(!nombre || !email || !telefono) {\r\n        alert(\"Por favor, rellena tu nombre, correo y tel\u00e9fono.\");\r\n        return;\r\n    }\r\n\r\n    const textoOriginalBtn = btnEnviar.innerText;\r\n    btnEnviar.innerText = \"Enviando...\";\r\n    btnEnviar.disabled = true;\r\n\r\n    const datos = new URLSearchParams();\r\n    datos.append('action', 'procesar_reserva_sitges');    \r\n    datos.append('personas', inputPersonas.options[inputPersonas.selectedIndex].text);\r\n    datos.append('fecha', inputFecha.value);\r\n    datos.append('hora', horaElegida);\r\n    datos.append('nombre', nombre);\r\n    datos.append('apellido', apellido);\r\n    datos.append('email', email);\r\n    datos.append('telefono', telefono);\r\n    datos.append('proposito', proposito);\r\n    datos.append('mensaje', mensaje);\r\n\r\n    fetch('\/wp-admin\/admin-ajax.php', {\r\n        method: 'POST',\r\n        body: datos,\r\n        headers: {\r\n            'Content-Type': 'application\/x-www-form-urlencoded'\r\n        }\r\n    })\r\n    .then(respuesta => respuesta.json())\r\n    .then(resultado => {\r\n        if(resultado.success) {\r\n            paso2.innerHTML = `<div style=\"text-align:center; padding: 40px 0;\">\r\n                <svg viewBox=\"0 0 24 24\" width=\"64\" height=\"64\" stroke=\"#F5A623\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\" style=\"margin-bottom:15px;\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"><\/path><polyline points=\"22 4 12 14.01 9 11.01\"><\/polyline><\/svg>\r\n                <h2 style=\"color:#333;\">\u00a1Reserva Solicitada!<\/h2>\r\n                <p style=\"color:#666;\">${resultado.data}<\/p>\r\n            <\/div>`;\r\n        } else {\r\n            alert(resultado.data);\r\n            btnEnviar.innerText = textoOriginalBtn;\r\n            btnEnviar.disabled = false;\r\n        }\r\n    })\r\n    .catch(error => {\r\n        alert(\"Hubo un error de conexi\u00f3n. Por favor, intenta de nuevo.\");\r\n        btnEnviar.innerText = textoOriginalBtn;\r\n        btnEnviar.disabled = false;\r\n    });\r\n\r\n  });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0bf61ce elementor-widget elementor-widget-html\" data-id=\"0bf61ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div id=\"hors-hydra-71ff5480-ed87-11ed-8094-918f559c77be\"><\/div>\r\n\r\n<script>\r\nvar _hors = [\r\n    ['eid', 'hydra-71ff5480-ed87-11ed-8094-918f559c77be'],\r\n    ['tagid', 'hors-hydra-71ff5480-ed87-11ed-8094-918f559c77be'],\r\n    ['width', '100%'],\r\n    ['height', ''],\r\n    ['foregroundColor', ''],\r\n    ['backgroundColor', ''],\r\n    ['linkColor', ''],\r\n    ['errorColor', ''],\r\n    ['primaryButtonForegroundColor', ''],\r\n    ['primaryButtonBackgroundColor', ''],\r\n    ['secondaryButtonForegroundColor', ''],\r\n    ['secondaryButtonBackgroundColor', '']\r\n];\r\n\r\n(function(d, t) {\r\n    var e = d.createElement(t),\r\n        s = d.getElementsByTagName(t)[0];\r\n\r\n    e.src = \"https:\/\/reservation.dish.co\/widget.js\";\r\n    s.parentNode.insertBefore(e, s);\r\n}(document, 'script'));\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Haz una reserva Gaby&#8217;s Sitges Paso 1 de 2: Detalles de la reserva 1 persona2 personas3 personas4 personas5+ personas Selecciona la hora: 13:00 13:30 14:00 14:30 20:00 20:30 21:00 21:30 Continuar > Seleccione el prop\u00f3sito de la visita (opcional)Cumplea\u00f1osAniversarioNegocios Al hacer clic en \u00abEnviar\u00bb acepto los T\u00e9rminos y condiciones y reconozco la Pol\u00edtica de privacidad. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-100","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/gabysgroup.com\/hu\/wp-json\/wp\/v2\/pages\/100","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/gabysgroup.com\/hu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/gabysgroup.com\/hu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/gabysgroup.com\/hu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/gabysgroup.com\/hu\/wp-json\/wp\/v2\/comments?post=100"}],"version-history":[{"count":22,"href":"https:\/\/gabysgroup.com\/hu\/wp-json\/wp\/v2\/pages\/100\/revisions"}],"predecessor-version":[{"id":752,"href":"https:\/\/gabysgroup.com\/hu\/wp-json\/wp\/v2\/pages\/100\/revisions\/752"}],"wp:attachment":[{"href":"https:\/\/gabysgroup.com\/hu\/wp-json\/wp\/v2\/media?parent=100"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}