{"id":168,"date":"2024-08-28T12:49:23","date_gmt":"2024-08-28T12:49:23","guid":{"rendered":"http:\/\/bhutanspiritsanctuary.com\/pt\/?page_id=168"},"modified":"2025-03-06T10:55:57","modified_gmt":"2025-03-06T10:55:57","slug":"balcony-room","status":"publish","type":"page","link":"https:\/\/bhutanspiritsanctuary.com\/pt\/rooms\/balcony-room\/","title":{"rendered":"Balcony Room"},"content":{"rendered":"\n<p><strong>Fill out form to send enquiry<\/strong><\/p>\n\n\n\n<form id=\"multiStepForm\" class=\"bg-cream form-validate\" action=\"https:\/\/formspree.io\/f\/mqkebgdk\" method=\"POST\" novalidate>\n    <div class=\"form-step form-step-active pt-5\">\n        <div class=\"form-horizontal\">\n            <div class=\"form-group\">\n                <label for=\"name\">Name:<\/label>\n                <input type=\"text\" id=\"name\" name=\"name\" required>\n                <span class=\"error-message\"><\/span>\n            <\/div>\n            <div class=\"form-group\">\n                <label for=\"email\">Email:<\/label>\n                <input type=\"email\" id=\"email\" name=\"email\" required>\n                <span class=\"error-message\"><\/span>\n            <\/div>\n        <\/div>\n        <label for=\"phone\">Your Phone Number:<\/label>\n        <input type=\"tel\" id=\"phone\" name=\"phone\" required>\n        <span class=\"error-message\"><\/span>\n        <label for=\"guests\">Number of Guests:<\/label>\n        <input type=\"number\" id=\"guests\" name=\"number_of_guest\" required>\n        <span class=\"error-message\"><\/span>\n\n        <p class=\"pt-4 mb-0\">For check-out, please select a date later than your arrival date.<\/p>\n        <div class=\"form-horizontal\">\n            <div class=\"form-group\">\n                <label for=\"checkin\">Check-in Date:<\/label>\n                <input type=\"date\" id=\"checkin\" name=\"checkin\" required>\n                <span class=\"error-message\"><\/span>\n            <\/div>\n            <div class=\"form-group\">\n                <label for=\"checkout\">Check-out Date:<\/label>\n                <input type=\"date\" id=\"checkout\" name=\"checkout\" required>\n                <span class=\"error-message\"><\/span>\n            <\/div>\n        <\/div>\n        <label for=\"remarks\">Remarks<\/label>\n        <textarea id=\"remarks\" name=\"remarks\" required style=\"height: 100px;\"><\/textarea>\n        <span class=\"error-message\"><\/span>\n        <div class=\"clearfix pt-50\">\n            <button type=\"button\" class=\"btn-next\">Next<\/button>\n        <\/div>\n    <\/div>\n    <div class=\"form-step pt-5\">\n        <h2>Confirm Reservation<\/h2>\n        <p>Please review your details before submitting:<\/p>\n        <div class=\"review-section\">\n            <p><strong>Name:<\/strong> <span id=\"review-name\"><\/span><\/p>\n            <p><strong>Email:<\/strong> <span id=\"review-email\"><\/span><\/p>\n            <p><strong>Phone:<\/strong> <span id=\"review-phone\"><\/span><\/p>\n            <p><strong>Number of Guests:<\/strong> <span id=\"review-guests\"><\/span><\/p>\n            <p><strong>Check-in Date:<\/strong> <span id=\"review-checkin\"><\/span><\/p>\n            <p><strong>Check-out Date:<\/strong> <span id=\"review-checkout\"><\/span><\/p>\n            <p><strong>Remarks:<\/strong> <span id=\"review-remarks\"><\/span><\/p>\n        <\/div>\n        <div class=\"clearfix pt-50\">\n            <button type=\"button\" class=\"btn-prev\">Previous<\/button>\n            <button type=\"submit\" class=\"btn-type\">Submit<\/button>\n        <\/div>\n    <\/div>\n<\/form>\n<script>\n    document.addEventListener(\"DOMContentLoaded\", function () {\n        const nextBtn = document.querySelector(\".btn-next\");\n        const prevBtn = document.querySelector(\".btn-prev\");\n        const submitBtn = document.querySelector(\".btn-type\");\n        const formSteps = document.querySelectorAll(\".form-step\");\n        let currentStep = 0;\n\n        function validateFields(step) {\n            let isValid = true;\n            const inputs = formSteps[step].querySelectorAll(\"input[required], textarea[required]\");\n\n            inputs.forEach(input => {\n                const errorSpan = input.nextElementSibling;\n                if (!input.value.trim()) {\n                    input.classList.add(\"error\");\n                    if (errorSpan) errorSpan.textContent = \"This field is required.\";\n                    isValid = false;\n                } else {\n                    input.classList.remove(\"error\");\n                    if (errorSpan) errorSpan.textContent = \"\";\n                }\n            });\n\n            return isValid;\n        }\n\n        function updateReview() {\n            document.getElementById(\"review-name\").textContent = document.getElementById(\"name\").value;\n            document.getElementById(\"review-email\").textContent = document.getElementById(\"email\").value;\n            document.getElementById(\"review-phone\").textContent = document.getElementById(\"phone\").value;\n            document.getElementById(\"review-guests\").textContent = document.getElementById(\"guests\").value;\n            document.getElementById(\"review-checkin\").textContent = document.getElementById(\"checkin\").value;\n            document.getElementById(\"review-checkout\").textContent = document.getElementById(\"checkout\").value;\n            document.getElementById(\"review-remarks\").textContent = document.getElementById(\"remarks\").value;\n        }\n\n        nextBtn.addEventListener(\"click\", function () {\n            if (!validateFields(currentStep)) return;\n\n            updateReview();\n            formSteps[currentStep].classList.remove(\"form-step-active\");\n            currentStep++;\n            formSteps[currentStep].classList.add(\"form-step-active\");\n\n            \/\/ Do not hide the \"Next\" button\n        });\n\n        prevBtn.addEventListener(\"click\", function () {\n            formSteps[currentStep].classList.remove(\"form-step-active\");\n            currentStep--;\n            formSteps[currentStep].classList.add(\"form-step-active\");\n        });\n\n        submitBtn.addEventListener(\"click\", function (e) {\n            if (!validateFields(currentStep)) {\n                e.preventDefault();\n            }\n        });\n\n        \/\/ Disable past dates and enforce check-out after check-in\n        let today = new Date().toISOString().split(\"T\")[0];\n        let checkinInput = document.getElementById(\"checkin\");\n        let checkoutInput = document.getElementById(\"checkout\");\n\n        checkinInput.setAttribute(\"min\", today);\n        checkoutInput.setAttribute(\"min\", today);\n\n        checkinInput.addEventListener(\"change\", function () {\n            let checkinDate = checkinInput.value;\n            checkoutInput.setAttribute(\"min\", checkinDate);\n        });\n\n        \/\/ Prevent manual date input\n        [checkinInput, checkoutInput].forEach(input => {\n            input.addEventListener(\"keydown\", function (event) {\n                event.preventDefault();\n            });\n\n            input.addEventListener(\"input\", function (event) {\n                event.preventDefault();\n            });\n        });\n    });\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>Fill out form to send enquiry Name: Email: Your Phone Number: Number of Guests: For check-out, please select a date later than your arrival date. Check-in Date: Check-out Date: Remarks Next Confirm Reservation Please review your details before submitting: Name: Email: Phone: Number of Guests: Check-in Date: Check-out Date: Remarks: Previous Submit<\/p>\n","protected":false},"author":1,"featured_media":89,"parent":49,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-forms-page.php","meta":{"footnotes":""},"class_list":["post-168","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/bhutanspiritsanctuary.com\/pt\/wp-json\/wp\/v2\/pages\/168","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bhutanspiritsanctuary.com\/pt\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bhutanspiritsanctuary.com\/pt\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bhutanspiritsanctuary.com\/pt\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bhutanspiritsanctuary.com\/pt\/wp-json\/wp\/v2\/comments?post=168"}],"version-history":[{"count":45,"href":"https:\/\/bhutanspiritsanctuary.com\/pt\/wp-json\/wp\/v2\/pages\/168\/revisions"}],"predecessor-version":[{"id":543,"href":"https:\/\/bhutanspiritsanctuary.com\/pt\/wp-json\/wp\/v2\/pages\/168\/revisions\/543"}],"up":[{"embeddable":true,"href":"https:\/\/bhutanspiritsanctuary.com\/pt\/wp-json\/wp\/v2\/pages\/49"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bhutanspiritsanctuary.com\/pt\/wp-json\/wp\/v2\/media\/89"}],"wp:attachment":[{"href":"https:\/\/bhutanspiritsanctuary.com\/pt\/wp-json\/wp\/v2\/media?parent=168"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}