Updated Booking Bar<\/title>\r\n\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\r\n\r\n <style>\r\n body {\r\n font-family: \"Poppins\", sans-serif;\r\n background: #f0f2f5;\r\n padding: 40px;\r\n }\r\n\r\n .booking-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n background: #fff;\r\n padding: 20px;\r\n border-radius: 15px;\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.08);\r\n border: 1px solid #ddd;\r\n }\r\n\r\n .field {\r\n display: flex;\r\n flex-direction: column;\r\n min-width: 150px;\r\n }\r\n\r\n .label {\r\n font-size: 13px;\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n color: #333;\r\n }\r\n\r\n input {\r\n padding: 10px 12px;\r\n border: 1.5px solid #bfbfbf;\r\n border-radius: 8px;\r\n font-size: 14px;\r\n width: 160px;\r\n }\r\n\r\n input:focus {\r\n outline: none;\r\n border-color: #ff6b5a;\r\n }\r\n\r\n .counter-box {\r\n display: flex;\r\n align-items: center;\r\n border: 1.5px solid #bfbfbf;\r\n border-radius: 8px;\r\n padding: 6px 12px;\r\n width: 160px;\r\n justify-content: space-between;\r\n }\r\n\r\n .counter-box button {\r\n width: 30px;\r\n height: 30px;\r\n border: 1px solid #ccc;\r\n background: #f8f8f8;\r\n border-radius: 6px;\r\n font-size: 16px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n }\r\n\r\n .counter-box span {\r\n font-size: 15px;\r\n font-weight: 600;\r\n width: 30px;\r\n text-align: center;\r\n }\r\n\r\n .search-btn {\r\n padding: 12px 30px;\r\n border: 1.5px solid #bfbfbf;\r\n background: #ff6b5a;\r\n color: white;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h2 style=\"font-family:Poppins; color:#333; margin-bottom:15px;\">Cottages<\/h2>\r\n\r\n<div class=\"booking-container\">\r\n \r\n \r\n <div class=\"field\">\r\n <span class=\"label\">Check In<\/span>\r\n <input id=\"checkin\" placeholder=\"dd-mm-yyyy\">\r\n <\/div>\r\n\r\n \r\n <div class=\"field\">\r\n <span class=\"label\">Check Out<\/span>\r\n <input id=\"checkout\" placeholder=\"dd-mm-yyyy\">\r\n <\/div>\r\n\r\n \r\n <div class=\"field\">\r\n <span class=\"label\">Guests<\/span>\r\n <div class=\"counter-box\">\r\n <button onclick=\"changeValue('guests', -1)\">-<\/button>\r\n <span id=\"guests\">1<\/span>\r\n <button onclick=\"changeValue('guests', 1)\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"field\">\r\n <span class=\"label\">Bath<\/span>\r\n <div class=\"counter-box\">\r\n <button onclick=\"changeValue('bath', -1)\">-<\/button>\r\n <span id=\"bath\">1<\/span>\r\n <button onclick=\"changeValue('bath', 1)\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <button class=\"search-btn\" onclick=\"handleSearch()\">Search<\/button>\r\n\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\r\n\r\n<script>\r\n\/\/ \u2705 Initialize date pickers with restriction\r\nlet checkoutPicker;\r\n\r\nflatpickr(\"#checkin\", {\r\n dateFormat: \"d-m-Y\",\r\n minDate: \"today\",\r\n onChange: function(selectedDates) {\r\n checkoutPicker.set(\"minDate\", selectedDates[0]);\r\n }\r\n});\r\n\r\ncheckoutPicker = flatpickr(\"#checkout\", {\r\n dateFormat: \"d-m-Y\"\r\n});\r\n\r\n\/\/ \u2705 Counter Function\r\nfunction changeValue(id, delta) {\r\n let el = document.getElementById(id);\r\n let value = parseInt(el.innerText) + delta;\r\n if (value < 1) return;\r\n el.innerText = value;\r\n}\r\n\r\n\/\/ \u2705 SEARCH FUNCTION (MAIN FIX)\r\nfunction handleSearch() {\r\n let checkin = document.getElementById(\"checkin\").value;\r\n let checkout = document.getElementById(\"checkout\").value;\r\n let guests = document.getElementById(\"guests\").innerText;\r\n let bath = document.getElementById(\"bath\").innerText;\r\n\r\n \/\/ Validation\r\n if (!checkin || !checkout) {\r\n alert(\"Please select both dates\");\r\n return;\r\n }\r\n\r\n \/\/ Convert dates for comparison\r\n let inDate = new Date(checkin.split(\"-\").reverse().join(\"-\"));\r\n let outDate = new Date(checkout.split(\"-\").reverse().join(\"-\"));\r\n\r\n if (outDate <= inDate) {\r\n alert(\"Check-out must be after check-in\");\r\n return;\r\n }\r\n\r\n \/\/ \u2705 OUTPUT (You can replace this later)\r\n alert(\r\n \"Booking Details:\\n\\n\" +\r\n \"Check-in: \" + checkin +\r\n \"\\nCheck-out: \" + checkout +\r\n \"\\nGuests: \" + guests +\r\n \"\\nBath: \" + bath\r\n );\r\n\r\n \/\/ \u2705 OPTIONAL: Redirect to another page\r\n \/\/ window.location.href = `search.html?checkin=${checkin}&checkout=${checkout}&guests=${guests}&bath=${bath}`;\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\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-f070640 e-flex e-con-boxed e-con e-parent\" data-id=\"f070640\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-b556db7 e-con-full e-flex e-con e-child\" data-id=\"b556db7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1da5e03 elementor-widget elementor-widget-image\" data-id=\"1da5e03\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1360\" height=\"907\" src=\"https:\/\/greenacresresort.persistenttechnology.in\/wp-content\/uploads\/2026\/01\/2024-09-23-6.webp\" class=\"attachment-full size-full wp-image-104\" alt=\"\" srcset=\"https:\/\/greenacresresort.persistenttechnology.in\/wp-content\/uploads\/2026\/01\/2024-09-23-6.webp 1360w, https:\/\/greenacresresort.persistenttechnology.in\/wp-content\/uploads\/2026\/01\/2024-09-23-6-300x200.webp 300w, https:\/\/greenacresresort.persistenttechnology.in\/wp-content\/uploads\/2026\/01\/2024-09-23-6-1024x683.webp 1024w, https:\/\/greenacresresort.persistenttechnology.in\/wp-content\/uploads\/2026\/01\/2024-09-23-6-768x512.webp 768w\" sizes=\"(max-width: 1360px) 100vw, 1360px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a9953fd e-con-full e-flex e-con e-child\" data-id=\"a9953fd\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0845ff elementor-widget elementor-widget-html\" data-id=\"d0845ff\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>Room Booking<\/title>\n\n<style>\nbody {\n font-family: Arial, sans-serif;\n background: #f4f4f4;\n margin: 0;\n padding: 30px;\n}\n\n\/* ROOM CARD *\/\n.room-card {\n background: #fff;\n max-width: 800px;\n margin: auto;\n border-radius: 8px;\n padding: 25px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n}\n\n.room-card h2 {\n margin-top: 0;\n}\n\n.features {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 15px;\n margin: 20px 0;\n font-size: 14px;\n}\n\n.price-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.price {\n font-size: 26px;\n color: #d47b3a;\n}\n\nbutton {\n padding: 10px 18px;\n border-radius: 4px;\n border: 1px solid #d47b3a;\n background: transparent;\n color: #d47b3a;\n cursor: pointer;\n}\n\n.book-btn {\n background: #d47b3a;\n color: #fff;\n}\n\n\/* MODAL *\/\n.modal {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.5);\n justify-content: center;\n align-items: center;\n}\n\n.modal-content {\n background: #fff;\n width: 700px;\n padding: 25px;\n border-radius: 6px;\n position: relative;\n}\n\n.close {\n position: absolute;\n top: 10px;\n right: 15px;\n font-size: 22px;\n cursor: pointer;\n}\n\n.tabs {\n display: flex;\n border-bottom: 2px solid #eee;\n margin-bottom: 20px;\n}\n\n.tab {\n margin-right: 30px;\n padding-bottom: 10px;\n font-weight: bold;\n}\n\n.tab.active {\n color: #d47b3a;\n border-bottom: 2px solid #d47b3a;\n}\n\n.form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n}\n\nlabel {\n font-size: 14px;\n}\n\ninput {\n width: 100%;\n padding: 10px;\n margin-top: 5px;\n border-radius: 4px;\n border: 1px solid #ccc;\n}\n\n.submit-btn {\n margin-top: 25px;\n background: #d47b3a;\n color: #fff;\n border: none;\n padding: 12px;\n font-size: 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<div class=\"room-card\">\n <h2 id=\"roomName\">Standard Deluxe Cottage<\/h2>\n\n <div class=\"features\">\n <div>\ud83d\udc64 <span id=\"adults\">2<\/span> Adults<\/div>\n <div>\ud83d\udc76 <span id=\"children\">2<\/span> Children<\/div>\n <div>\ud83d\udcd0 50 Sqm<\/div>\n <div>\ud83d\udecf 1 kingsize Beds<\/div>\n <div>\ud83d\udec1 1 Bath<\/div>\n <div>\ud83d\ude97 Parking<\/div>\n <\/div>\n\n <p id=\"roomDesc\">\n Luxurious cottage with modern amenities and peaceful surroundings.\n <\/p>\n\n <div class=\"price-section\">\n <div class=\"price\">\u20b9 <span id=\"price\">6000.00<\/span> \/ Night<\/div>\n <div>\n <button>View Detail<\/button>\n <button class=\"book-btn\" onclick=\"openBooking()\">Book Now<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"modal\" id=\"bookingModal\">\n <div class=\"modal-content\">\n <span class=\"close\" onclick=\"closeBooking()\">\u00d7<\/span>\n\n <div class=\"tabs\">\n <div class=\"tab active\">BOOKING<\/div>\n <div class=\"tab\">REQUEST BOOKING<\/div>\n <\/div>\n\n <div class=\"form-grid\">\n <div>\n <label>Check in<\/label>\n <input type=\"date\">\n <\/div>\n\n <div>\n <label>Check out<\/label>\n <input type=\"date\">\n <\/div>\n\n <div>\n <label>Guests<\/label>\n <input type=\"number\" value=\"2\">\n <\/div>\n\n <div>\n <label>Rooms<\/label>\n <input type=\"number\" value=\"1\">\n <\/div>\n <\/div>\n\n <button class=\"submit-btn\">BOOK NOW<\/button>\n <\/div>\n<\/div>\n\n<script>\nfunction openBooking() {\n document.getElementById(\"bookingModal\").style.display = \"flex\";\n}\n\nfunction closeBooking() {\n document.getElementById(\"bookingModal\").style.display = \"none\";\n}\n<\/script>\n\n<\/body>\n<\/html>\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\t\t<\/div>\n\t\t\n <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n <ul>\n\t\t\t <\/ul>\n <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Updated […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-34","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/pages\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":22,"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions"}],"predecessor-version":[{"id":426,"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions\/426"}],"wp:attachment":[{"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/media?parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Updated Booking Bar<\/title>\r\n\r\n <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\r\n\r\n <style>\r\n body {\r\n font-family: \"Poppins\", sans-serif;\r\n background: #f0f2f5;\r\n padding: 40px;\r\n }\r\n\r\n .booking-container {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: 20px;\r\n background: #fff;\r\n padding: 20px;\r\n border-radius: 15px;\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.08);\r\n border: 1px solid #ddd;\r\n }\r\n\r\n .field {\r\n display: flex;\r\n flex-direction: column;\r\n min-width: 150px;\r\n }\r\n\r\n .label {\r\n font-size: 13px;\r\n font-weight: 600;\r\n margin-bottom: 5px;\r\n color: #333;\r\n }\r\n\r\n input {\r\n padding: 10px 12px;\r\n border: 1.5px solid #bfbfbf;\r\n border-radius: 8px;\r\n font-size: 14px;\r\n width: 160px;\r\n }\r\n\r\n input:focus {\r\n outline: none;\r\n border-color: #ff6b5a;\r\n }\r\n\r\n .counter-box {\r\n display: flex;\r\n align-items: center;\r\n border: 1.5px solid #bfbfbf;\r\n border-radius: 8px;\r\n padding: 6px 12px;\r\n width: 160px;\r\n justify-content: space-between;\r\n }\r\n\r\n .counter-box button {\r\n width: 30px;\r\n height: 30px;\r\n border: 1px solid #ccc;\r\n background: #f8f8f8;\r\n border-radius: 6px;\r\n font-size: 16px;\r\n cursor: pointer;\r\n font-weight: bold;\r\n }\r\n\r\n .counter-box span {\r\n font-size: 15px;\r\n font-weight: 600;\r\n width: 30px;\r\n text-align: center;\r\n }\r\n\r\n .search-btn {\r\n padding: 12px 30px;\r\n border: 1.5px solid #bfbfbf;\r\n background: #ff6b5a;\r\n color: white;\r\n border-radius: 10px;\r\n font-size: 16px;\r\n cursor: pointer;\r\n font-weight: 600;\r\n }\r\n <\/style>\r\n<\/head>\r\n\r\n<body>\r\n\r\n<h2 style=\"font-family:Poppins; color:#333; margin-bottom:15px;\">Cottages<\/h2>\r\n\r\n<div class=\"booking-container\">\r\n \r\n \r\n <div class=\"field\">\r\n <span class=\"label\">Check In<\/span>\r\n <input id=\"checkin\" placeholder=\"dd-mm-yyyy\">\r\n <\/div>\r\n\r\n \r\n <div class=\"field\">\r\n <span class=\"label\">Check Out<\/span>\r\n <input id=\"checkout\" placeholder=\"dd-mm-yyyy\">\r\n <\/div>\r\n\r\n \r\n <div class=\"field\">\r\n <span class=\"label\">Guests<\/span>\r\n <div class=\"counter-box\">\r\n <button onclick=\"changeValue('guests', -1)\">-<\/button>\r\n <span id=\"guests\">1<\/span>\r\n <button onclick=\"changeValue('guests', 1)\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"field\">\r\n <span class=\"label\">Bath<\/span>\r\n <div class=\"counter-box\">\r\n <button onclick=\"changeValue('bath', -1)\">-<\/button>\r\n <span id=\"bath\">1<\/span>\r\n <button onclick=\"changeValue('bath', 1)\">+<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <button class=\"search-btn\" onclick=\"handleSearch()\">Search<\/button>\r\n\r\n<\/div>\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\r\n\r\n<script>\r\n\/\/ \u2705 Initialize date pickers with restriction\r\nlet checkoutPicker;\r\n\r\nflatpickr(\"#checkin\", {\r\n dateFormat: \"d-m-Y\",\r\n minDate: \"today\",\r\n onChange: function(selectedDates) {\r\n checkoutPicker.set(\"minDate\", selectedDates[0]);\r\n }\r\n});\r\n\r\ncheckoutPicker = flatpickr(\"#checkout\", {\r\n dateFormat: \"d-m-Y\"\r\n});\r\n\r\n\/\/ \u2705 Counter Function\r\nfunction changeValue(id, delta) {\r\n let el = document.getElementById(id);\r\n let value = parseInt(el.innerText) + delta;\r\n if (value < 1) return;\r\n el.innerText = value;\r\n}\r\n\r\n\/\/ \u2705 SEARCH FUNCTION (MAIN FIX)\r\nfunction handleSearch() {\r\n let checkin = document.getElementById(\"checkin\").value;\r\n let checkout = document.getElementById(\"checkout\").value;\r\n let guests = document.getElementById(\"guests\").innerText;\r\n let bath = document.getElementById(\"bath\").innerText;\r\n\r\n \/\/ Validation\r\n if (!checkin || !checkout) {\r\n alert(\"Please select both dates\");\r\n return;\r\n }\r\n\r\n \/\/ Convert dates for comparison\r\n let inDate = new Date(checkin.split(\"-\").reverse().join(\"-\"));\r\n let outDate = new Date(checkout.split(\"-\").reverse().join(\"-\"));\r\n\r\n if (outDate <= inDate) {\r\n alert(\"Check-out must be after check-in\");\r\n return;\r\n }\r\n\r\n \/\/ \u2705 OUTPUT (You can replace this later)\r\n alert(\r\n \"Booking Details:\\n\\n\" +\r\n \"Check-in: \" + checkin +\r\n \"\\nCheck-out: \" + checkout +\r\n \"\\nGuests: \" + guests +\r\n \"\\nBath: \" + bath\r\n );\r\n\r\n \/\/ \u2705 OPTIONAL: Redirect to another page\r\n \/\/ window.location.href = `search.html?checkin=${checkin}&checkout=${checkout}&guests=${guests}&bath=${bath}`;\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\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-f070640 e-flex e-con-boxed e-con e-parent\" data-id=\"f070640\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-b556db7 e-con-full e-flex e-con e-child\" data-id=\"b556db7\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1da5e03 elementor-widget elementor-widget-image\" data-id=\"1da5e03\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<a href=\"#\">\n\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1360\" height=\"907\" src=\"https:\/\/greenacresresort.persistenttechnology.in\/wp-content\/uploads\/2026\/01\/2024-09-23-6.webp\" class=\"attachment-full size-full wp-image-104\" alt=\"\" srcset=\"https:\/\/greenacresresort.persistenttechnology.in\/wp-content\/uploads\/2026\/01\/2024-09-23-6.webp 1360w, https:\/\/greenacresresort.persistenttechnology.in\/wp-content\/uploads\/2026\/01\/2024-09-23-6-300x200.webp 300w, https:\/\/greenacresresort.persistenttechnology.in\/wp-content\/uploads\/2026\/01\/2024-09-23-6-1024x683.webp 1024w, https:\/\/greenacresresort.persistenttechnology.in\/wp-content\/uploads\/2026\/01\/2024-09-23-6-768x512.webp 768w\" sizes=\"(max-width: 1360px) 100vw, 1360px\" \/>\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a9953fd e-con-full e-flex e-con e-child\" data-id=\"a9953fd\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d0845ff elementor-widget elementor-widget-html\" data-id=\"d0845ff\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<title>Room Booking<\/title>\n\n<style>\nbody {\n font-family: Arial, sans-serif;\n background: #f4f4f4;\n margin: 0;\n padding: 30px;\n}\n\n\/* ROOM CARD *\/\n.room-card {\n background: #fff;\n max-width: 800px;\n margin: auto;\n border-radius: 8px;\n padding: 25px;\n box-shadow: 0 4px 10px rgba(0,0,0,0.1);\n}\n\n.room-card h2 {\n margin-top: 0;\n}\n\n.features {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 15px;\n margin: 20px 0;\n font-size: 14px;\n}\n\n.price-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.price {\n font-size: 26px;\n color: #d47b3a;\n}\n\nbutton {\n padding: 10px 18px;\n border-radius: 4px;\n border: 1px solid #d47b3a;\n background: transparent;\n color: #d47b3a;\n cursor: pointer;\n}\n\n.book-btn {\n background: #d47b3a;\n color: #fff;\n}\n\n\/* MODAL *\/\n.modal {\n display: none;\n position: fixed;\n inset: 0;\n background: rgba(0,0,0,0.5);\n justify-content: center;\n align-items: center;\n}\n\n.modal-content {\n background: #fff;\n width: 700px;\n padding: 25px;\n border-radius: 6px;\n position: relative;\n}\n\n.close {\n position: absolute;\n top: 10px;\n right: 15px;\n font-size: 22px;\n cursor: pointer;\n}\n\n.tabs {\n display: flex;\n border-bottom: 2px solid #eee;\n margin-bottom: 20px;\n}\n\n.tab {\n margin-right: 30px;\n padding-bottom: 10px;\n font-weight: bold;\n}\n\n.tab.active {\n color: #d47b3a;\n border-bottom: 2px solid #d47b3a;\n}\n\n.form-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 20px;\n}\n\nlabel {\n font-size: 14px;\n}\n\ninput {\n width: 100%;\n padding: 10px;\n margin-top: 5px;\n border-radius: 4px;\n border: 1px solid #ccc;\n}\n\n.submit-btn {\n margin-top: 25px;\n background: #d47b3a;\n color: #fff;\n border: none;\n padding: 12px;\n font-size: 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n<\/style>\n<\/head>\n\n<body>\n\n\n<div class=\"room-card\">\n <h2 id=\"roomName\">Standard Deluxe Cottage<\/h2>\n\n <div class=\"features\">\n <div>\ud83d\udc64 <span id=\"adults\">2<\/span> Adults<\/div>\n <div>\ud83d\udc76 <span id=\"children\">2<\/span> Children<\/div>\n <div>\ud83d\udcd0 50 Sqm<\/div>\n <div>\ud83d\udecf 1 kingsize Beds<\/div>\n <div>\ud83d\udec1 1 Bath<\/div>\n <div>\ud83d\ude97 Parking<\/div>\n <\/div>\n\n <p id=\"roomDesc\">\n Luxurious cottage with modern amenities and peaceful surroundings.\n <\/p>\n\n <div class=\"price-section\">\n <div class=\"price\">\u20b9 <span id=\"price\">6000.00<\/span> \/ Night<\/div>\n <div>\n <button>View Detail<\/button>\n <button class=\"book-btn\" onclick=\"openBooking()\">Book Now<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div class=\"modal\" id=\"bookingModal\">\n <div class=\"modal-content\">\n <span class=\"close\" onclick=\"closeBooking()\">\u00d7<\/span>\n\n <div class=\"tabs\">\n <div class=\"tab active\">BOOKING<\/div>\n <div class=\"tab\">REQUEST BOOKING<\/div>\n <\/div>\n\n <div class=\"form-grid\">\n <div>\n <label>Check in<\/label>\n <input type=\"date\">\n <\/div>\n\n <div>\n <label>Check out<\/label>\n <input type=\"date\">\n <\/div>\n\n <div>\n <label>Guests<\/label>\n <input type=\"number\" value=\"2\">\n <\/div>\n\n <div>\n <label>Rooms<\/label>\n <input type=\"number\" value=\"1\">\n <\/div>\n <\/div>\n\n <button class=\"submit-btn\">BOOK NOW<\/button>\n <\/div>\n<\/div>\n\n<script>\nfunction openBooking() {\n document.getElementById(\"bookingModal\").style.display = \"flex\";\n}\n\nfunction closeBooking() {\n document.getElementById(\"bookingModal\").style.display = \"none\";\n}\n<\/script>\n\n<\/body>\n<\/html>\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\t\t<\/div>\n\t\t\n <div class=\"xs_social_share_widget xs_share_url after_content \t\tmain_content wslu-style-1 wslu-share-box-shaped wslu-fill-colored wslu-none wslu-share-horizontal wslu-theme-font-no wslu-main_content\">\n\n\t\t\n <ul>\n\t\t\t <\/ul>\n <\/div> \n","protected":false},"excerpt":{"rendered":"<p>Updated […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"postBodyCss":"","postBodyMargin":[],"postBodyPadding":[],"postBodyBackground":{"backgroundType":"classic","gradient":""},"footnotes":""},"class_list":["post-34","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/pages\/34","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/comments?post=34"}],"version-history":[{"count":22,"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions"}],"predecessor-version":[{"id":426,"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/pages\/34\/revisions\/426"}],"wp:attachment":[{"href":"https:\/\/greenacresresort.persistenttechnology.in\/index.php\/wp-json\/wp\/v2\/media?parent=34"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}