{"id":3190,"date":"2025-06-08T10:39:18","date_gmt":"2025-06-08T10:39:18","guid":{"rendered":"https:\/\/bhutanspiritsanctuary.com\/staging\/?page_id=3190"},"modified":"2026-02-08T22:52:59","modified_gmt":"2026-02-08T22:52:59","slug":"reserve","status":"publish","type":"page","link":"https:\/\/bhutanspiritsanctuary.com\/de_lang\/reserve\/","title":{"rendered":"Buchen"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3190\" class=\"elementor elementor-3190\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-fa3558c e-con-full e-flex e-con e-parent\" data-id=\"fa3558c\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-c2aa5ea e-flex e-con-boxed e-con e-parent\" data-id=\"c2aa5ea\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-af77763 elementor-widget elementor-widget-heading\" data-id=\"af77763\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Reservation enquiry<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d24c4a4 elementor-widget elementor-widget-text-editor\" data-id=\"d24c4a4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>After submitting our team will be in touch.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-1ec2e6a e-flex e-con-boxed e-con e-parent\" data-id=\"1ec2e6a\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2bc300b elementor-widget__width-initial elementor-widget-mobile__width-initial elementor-widget elementor-widget-html\" data-id=\"2bc300b\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div class=\"reservation-form\">\r\n<form action=\"https:\/\/formspree.io\/f\/mjkbleey\" method=\"POST\">\r\n  <!-- Step 1: Check-in & Check-out Dates -->\r\n  <div class=\"step step-1\">\r\n    <h2>Select dates<\/h2><br>\r\n    <label>Check-in Date<\/label>\r\n    <input type=\"date\" name=\"checkin\" id=\"checkin\" required>\r\n    \r\n    <label>Check-out Date<\/label>\r\n    <input type=\"date\" name=\"checkout\" id=\"checkout\" required>\r\n    \r\n    <button type=\"button\" class=\"btn-next\" data-step=\"2\">Next<\/button>\r\n  <\/div>\r\n\r\n  <!-- Step 2: Room Type Selection -->\r\n  <div class=\"step step-2\" style=\"display: none;\">\r\n    <h2>Select room type<\/h2><br>\r\n    <label>Room Type<\/label>\r\n    <select name=\"room_type\" required>\r\n      <option value=\"balcony\">Balcony Room<\/option>\r\n      <option value=\"terrace\">Terrace Room<\/option>\r\n    <\/select>\r\n    \r\n    <button type=\"button\" class=\"btn-prev\" data-step=\"1\">Back<\/button>\r\n    <button type=\"button\" class=\"btn-next\" data-step=\"3\">Next<\/button>\r\n  <\/div>\r\n\r\n  <!-- Step 3: Personal Information -->\r\n  <div class=\"step step-3\" style=\"display: none;\">\r\n    <h2>Personal information<\/h2><br>\r\n    <label>Name<\/label>\r\n    <input type=\"text\" name=\"name\" placeholder=\"Your name\" required>\r\n\r\n    <label>Email<\/label>\r\n    <input type=\"email\" name=\"email\" placeholder=\"Your email address\" required>\r\n\r\n    <label>Phone<\/label>\r\n    <input type=\"tel\" name=\"phone\" placeholder=\"Your phone number\">\r\n\r\n    <label>Number of Guests<\/label>\r\n    <input type=\"number\" name=\"number_of_guest\" min=\"1\" required>\r\n\r\n    <label>Remarks<\/label>\r\n    <textarea name=\"remarks\" placeholder=\"Any special requests...\"><\/textarea>\r\n\r\n    <button type=\"button\" class=\"btn-prev\" data-step=\"2\">Back<\/button>\r\n    <button type=\"button\" class=\"btn-next\" data-step=\"4\">Next<\/button>\r\n  <\/div>\r\n\r\n  <!-- Step 4: Confirm Details -->\r\n  <div class=\"step step-4\" style=\"display: none;\">\r\n    <h2>Confirm your details<\/h2>\r\n    <div id=\"confirmation-summary\"><\/div>\r\n    <button type=\"button\" class=\"btn-prev\" data-step=\"3\">Back<\/button>\r\n    <button type=\"submit\" class=\"btn-type\">Confirm & Submit<\/button>\r\n  <\/div>\r\n\r\n  <input type=\"hidden\" name=\"_next\" value=\"https:\/\/bhutanspiritsanctuary.com\">\r\n  <input type=\"hidden\" name=\"subject\" value=\"New enquiry from {{ name }}\">\r\n<\/form>\r\n<\/div>\r\n<style>\r\n\/* General styling for reservation form *\/\r\n.reservation-form {\r\n  min-height: 660px;\r\n    background-color: #FDFBF5;\r\n    padding: 40px;\r\n \r\n}\r\n\r\n\/* Step container hidden by default *\/\r\n.reservation-form .step {\r\n    display: none;\r\n    opacity: 0;\r\n    transition: opacity 0.4s ease-in-out;\r\n}\r\n\r\n\/* Active step visible *\/\r\n.reservation-form .step.active {\r\n    display: block;\r\n    opacity: 1;\r\n}\r\n\r\n.reservation-form .step.step-1 {\r\n    display: block;\r\n    opacity: 1;\r\n}\r\n\r\n\/* Label styling *\/\r\n.reservation-form label {\r\n    display: block;\r\n    font-weight: 300;\r\n    margin-bottom: 5px;\r\n    color: #020722;\r\n}\r\n\r\n\/* Input fields styling *\/\r\n.reservation-form input,\r\n.reservation-form select,\r\n.reservation-form textarea {\r\n    width: 100%;\r\n    padding: 10px;\r\n    border: none;\r\n    border-bottom: 1px solid #7A7A7A;\r\n    background-color: #FDFBF5;\r\n    margin-bottom: 10px;\r\n}\r\n\r\n\/* Focus effect *\/\r\n.reservation-form input:focus,\r\n.reservation-form select:focus,\r\n.reservation-form textarea:focus {\r\n    border-bottom: 2px solid #BC9342;\r\n    outline: none;\r\n}\r\n\r\n\/* Date fields *\/\r\n.reservation-form input[type=\"date\"] {\r\n    cursor: pointer;\r\n}\r\n\r\n\/* Button styling *\/\r\n.reservation-form button {\r\n    background-color: #BC9342;\r\n    color: white;\r\n    padding: 10px 30px;\r\n    border: none;\r\n    border-radius: 1px;\r\n    cursor: pointer;\r\n    margin-top: 10px;\r\n    transition: background-color 0.3s ease-in-out;\r\n    text-transform: uppercase;\r\n}\r\n\r\n\/* Hover effect *\/\r\n.reservation-form button:hover {\r\n    background-color: #020722;\r\n}\r\n@media (max-width: 480px) {\r\n    .reservation-form {\r\n        max-width: 100%;\r\n       min-height: 600px;\r\n       padding: 20px;\r\n    }\r\n\r\n    .reservation-form button {\r\n        font-size: 16px;\r\n        padding: 10px;\r\n    }\r\n}\r\n\r\n\/* Confirmation Summary Styling *\/\r\n.reservation-form #confirmation-summary {\r\n    margin-top: 40px;\r\n    color: #020722;\r\n}\r\n\r\n.reservation-form #confirmation-summary ul {\r\n    list-style: none;\r\n    padding: 0;\r\n    margin: 0;\r\n}\r\n\r\n.reservation-form #confirmation-summary li {\r\n    margin-bottom: 10px;\r\n    padding: 6px;\r\n}\r\n<\/style>\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", function () {\r\n  const steps = Array.from(document.querySelectorAll('.step'));\r\n  const nextBtns = document.querySelectorAll('.btn-next');\r\n  const prevBtns = document.querySelectorAll('.btn-prev');\r\n  const submitBtn = document.querySelector('.btn-type');\r\n  let currentStep = 0;\r\n\r\n  function updateStepDisplay(stepIndex) {\r\n    steps.forEach(step => step.style.display = \"none\");\r\n    steps[stepIndex].style.display = \"block\";\r\n  }\r\n\r\n  function validateStep(stepIndex) {\r\n    let isValid = true;\r\n    const currentFields = steps[stepIndex].querySelectorAll(\"input[required], select[required], textarea[required]\");\r\n\r\n    currentFields.forEach(input => {\r\n      if (!input.value.trim()) {\r\n        isValid = false;\r\n        input.style.border = \"2px solid red\";\r\n      } else {\r\n        input.style.border = \"1px solid #7A7A7A\";\r\n      }\r\n    });\r\n\r\n    \/\/ Step 1-specific validation\r\n    if (stepIndex === 0) {\r\n      const checkinField = document.getElementById(\"checkin\");\r\n      const checkoutField = document.getElementById(\"checkout\");\r\n\r\n      if (checkinField && !checkinField.value) {\r\n        isValid = false;\r\n        checkinField.style.border = \"2px solid red\";\r\n        alert(\"Please select a check-in date.\");\r\n      }\r\n\r\n      if (checkinField.value && checkoutField.value) {\r\n        const checkinDate = new Date(checkinField.value);\r\n        const checkoutDate = new Date(checkoutField.value);\r\n        if (checkoutDate <= checkinDate) {\r\n          isValid = false;\r\n          checkoutField.style.border = \"2px solid red\";\r\n          alert(\"Check-out date must be after check-in.\");\r\n        }\r\n      }\r\n    }\r\n\r\n    return isValid;\r\n  }\r\n\r\n  function populateConfirmation() {\r\n    const summaryContainer = document.getElementById(\"confirmation-summary\");\r\n    const formData = {\r\n      \"Check-in\": document.getElementById(\"checkin\").value,\r\n      \"Check-out\": document.getElementById(\"checkout\").value,\r\n      \"Room Type\": document.querySelector(\"select[name='room_type']\").value,\r\n      \"Name\": document.querySelector(\"input[name='name']\").value,\r\n      \"Email\": document.querySelector(\"input[name='email']\").value,\r\n      \"Phone\": document.querySelector(\"input[name='phone']\").value,\r\n      \"Guests\": document.querySelector(\"input[name='number_of_guest']\").value,\r\n      \"Remarks\": document.querySelector(\"textarea[name='remarks']\").value || \"\u2014\"\r\n    };\r\n\r\n    summaryContainer.innerHTML = `<ul style=\"list-style:none; padding:0;\">${Object.entries(formData)\r\n      .map(([label, value]) => `<li><strong>${label}:<\/strong> ${value}<\/li>`)\r\n      .join(\"\")}<\/ul>`;\r\n  }\r\n\r\n  nextBtns.forEach(button => {\r\n    button.addEventListener('click', function () {\r\n      let stepTarget = parseInt(this.dataset.step);\r\n      if (validateStep(currentStep)) {\r\n        steps[currentStep].classList.remove('active');\r\n        currentStep = stepTarget - 1;\r\n\r\n        if (currentStep === 3) populateConfirmation(); \/\/ Step 4 logic\r\n\r\n        steps[currentStep].classList.add('active');\r\n        updateStepDisplay(currentStep);\r\n      }\r\n    });\r\n  });\r\n\r\n  prevBtns.forEach(button => {\r\n    button.addEventListener('click', function () {\r\n      let stepTarget = parseInt(this.dataset.step);\r\n      steps[currentStep].classList.remove('active');\r\n      currentStep = stepTarget - 1;\r\n      steps[currentStep].classList.add('active');\r\n      updateStepDisplay(currentStep);\r\n    });\r\n  });\r\n\r\n  submitBtn.addEventListener(\"click\", function (event) {\r\n    if (!validateStep(currentStep)) {\r\n      event.preventDefault();\r\n    }\r\n  });\r\n\r\n  \/\/ Check-in & Check-out min logic\r\n  const checkinField = document.getElementById(\"checkin\");\r\n  const checkoutField = document.getElementById(\"checkout\");\r\n  const today = new Date().toISOString().split(\"T\")[0];\r\n\r\n  if (checkinField && checkoutField) {\r\n    checkinField.setAttribute(\"min\", today);\r\n    checkoutField.setAttribute(\"min\", today);\r\n\r\n    checkinField.addEventListener(\"change\", function () {\r\n      const checkinDate = new Date(this.value);\r\n      if (!isNaN(checkinDate.getTime())) {\r\n        const minCheckoutDate = new Date(checkinDate);\r\n        minCheckoutDate.setDate(minCheckoutDate.getDate() + 1);\r\n        checkoutField.setAttribute('min', minCheckoutDate.toISOString().split('T')[0]);\r\n      }\r\n    });\r\n\r\n    checkinField.addEventListener(\"focusout\", function () {\r\n      const checkinDate = new Date(this.value);\r\n      const todayDate = new Date(today);\r\n      if (checkinDate < todayDate || isNaN(checkinDate)) {\r\n        alert(\"Check-in date must be today or later.\");\r\n        this.value = \"\";\r\n        this.style.border = \"2px solid red\";\r\n      } else {\r\n        this.style.border = \"1px solid #7A7A7A\";\r\n      }\r\n    });\r\n\r\n    checkoutField.addEventListener(\"focusout\", function () {\r\n      const checkoutDate = new Date(this.value);\r\n      const checkinDate = new Date(checkinField.value);\r\n      if (checkoutDate <= checkinDate || isNaN(checkoutDate)) {\r\n        alert(\"Check-out date must be after check-in.\");\r\n        this.value = \"\";\r\n        this.style.border = \"2px solid red\";\r\n      } else {\r\n        this.style.border = \"1px solid #7A7A7A\";\r\n      }\r\n    });\r\n  }\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-044795d e-con-full elementor-hidden-tablet elementor-hidden-mobile e-flex e-con e-child\" data-id=\"044795d\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\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>Reservation enquiry After submitting our team will be in touch. Select dates Check-in Date Check-out Date Next Select room type Room Type Balcony RoomTerrace Room Back Next Personal information Name Email Phone Number of Guests Remarks Back Next Confirm your details Back Confirm &#038; Submit<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"unboxed","site-sidebar-style":"unboxed","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-3190","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bhutanspiritsanctuary.com\/de_lang\/wp-json\/wp\/v2\/pages\/3190","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bhutanspiritsanctuary.com\/de_lang\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bhutanspiritsanctuary.com\/de_lang\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bhutanspiritsanctuary.com\/de_lang\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bhutanspiritsanctuary.com\/de_lang\/wp-json\/wp\/v2\/comments?post=3190"}],"version-history":[{"count":86,"href":"https:\/\/bhutanspiritsanctuary.com\/de_lang\/wp-json\/wp\/v2\/pages\/3190\/revisions"}],"predecessor-version":[{"id":7121,"href":"https:\/\/bhutanspiritsanctuary.com\/de_lang\/wp-json\/wp\/v2\/pages\/3190\/revisions\/7121"}],"wp:attachment":[{"href":"https:\/\/bhutanspiritsanctuary.com\/de_lang\/wp-json\/wp\/v2\/media?parent=3190"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}