{"id":406,"date":"2025-09-13T22:33:50","date_gmt":"2025-09-13T22:33:50","guid":{"rendered":"http:\/\/vps-5052324-x.dattaweb.com\/arcoiris\/index.php\/hotel-search\/"},"modified":"2025-12-10T09:21:03","modified_gmt":"2025-12-10T12:21:03","slug":"hotel-search","status":"publish","type":"page","link":"https:\/\/arcoirisdesantarosa.com.ar\/index.php\/hotel-search\/","title":{"rendered":"Hotel Booking Search"},"content":{"rendered":"<script>\n   const HOTEL_NONCE = \"2a7363c5e9\";\n   const API_URL = \"https:\/\/arcoirisdesantarosa.com.ar\/index.php\/wp-json\/\";\n   const BASE_URL = \"https:\/\/arcoirisdesantarosa.com.ar\/index.php\";\n<\/script>\n<style>\n    .custom-room-list {\n        display: flex;\n        width: 100%;\n        justify-content: center;\n    }\n    @media (max-width: 1000px) {\n        .custom-room-list {\n            flex-direction: column;\n            align-items: center;\n        }\n        .custom-room-list .room-card {\n            width: 100% !important;\n            justify-content: center;\n        }\n    }\n    .custom-room-list .room-card {\n        width: 40%;\n        max-width: 400px;\n        margin: 10px;\n        border-radius: 5px;\n        box-shadow: 0 2px 4px rgba(255, 255, 255, 0.1);\n        background-color: #fff;\n        color: #333;\n    }\n\n    .custom-room-list .room-card .show-calendar {\n        display: inline-block;\n        margin-top: 10px;\n        color: #fff;\n        border: none;\n        border-radius: 5px;\n        cursor: pointer;\n    }\n\n    .custom-room-list .room-card .room-image {\n        width: 100%;\n        height: 200px;\n        overflow: hidden;\n    }\n\n    .custom-room-list .room-card .room-image img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n    }\n\n    .custom-room-list .room-card .room-details {\n        padding: 10px;\n    }\n    .custom-room-list .room-card .room-details h3 {\n        font-size: 18px;\n        margin-bottom: 5px;\n    }\n    .custom-room-list .room-card .room-details .room-capacity {\n        font-size: 14px;\n        color: #666;\n        margin: 2px 0;\n    }\n\n    .calendar-modal{\n        display:none;\n        position:fixed;\n        z-index:9999;\n        top:0;\n        left:0;\n        width:100%;\n        height:100%;\n        background:rgba(0,0,0,0.6);\n\n        justify-content:center;\n        align-items:center;\n    }\n\n    .calendar-modal.show{\n        display:flex;\n    }\n\n    .calendar-modal-content{\n        background:#fff;\n        padding:25px;\n        border-radius:8px;\n        width:90%;\n        max-width:500px;\n        text-align:center;\n    }\n\n    #close-modal{\n        float:right;\n        cursor:pointer;\n        font-size:22px;\n    }\n\n    #modal-reserve:disabled {\n        background-color: #ccc;\n        cursor: not-allowed;\n    }\n<\/style>\n\n\n<div id=\"hotel-booking-search-69f266fc31fdd\" class=\"hotel-booking-search\" style=\"flex-direction: column;margin: 120px 0 80px;\">\n\n    <h2 style=\"width:100%\">Selecciona una Caba\u00f1a<\/h2>\n    <div class=\"hotel-booking-search-rooms\">\n\n        <div class=\"custom-room-list\"><div class=\"room-card\"><div class=\"room-image\"><img decoding=\"async\" width=\"186\" height=\"248\" src=\"https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo25.jpg\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" \/><\/div><div class=\"room-details\"><h3>Caba\u00f1a 1<\/h3><p class=\"room-capacity\">Hasta 6 personas<\/p><p class=\"room-price\">Desde $150.000 \/ noche<\/p><button \n                    class=\"show-calendar\" \n                    data-room=\"411\"\n                    data-prices='{\"6\":\"150000\"}'\n                    data-capacity=\"6\"\n                >\n                    Reservar\n                <\/button><div class=\"calendar-container\" \n                        id=\"calendar-411\" \n                        data-blocked='[\"2026-04-03\",\"2026-04-04\",\"2026-04-05\",\"2026-04-14\"]' \n                        style=\"display:none;\"><\/div><\/div><\/div><div class=\"room-card\"><div class=\"room-image\"><img decoding=\"async\" width=\"186\" height=\"248\" src=\"https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo4.jpg\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" \/><\/div><div class=\"room-details\"><h3>Caba\u00f1a 2<\/h3><p class=\"room-capacity\">Hasta 4 personas<\/p><p class=\"room-price\">Desde $60.000 \/ noche<\/p><button \n                    class=\"show-calendar\" \n                    data-room=\"410\"\n                    data-prices='{\"2\":\"60000\",\"4\":\"110000\"}'\n                    data-capacity=\"4\"\n                >\n                    Reservar\n                <\/button><div class=\"calendar-container\" \n                        id=\"calendar-410\" \n                        data-blocked='[\"2025-10-12\",\"2025-09-27\",\"2025-09-28\",\"2025-09-29\",\"2025-09-30\",\"2025-10-01\",\"2026-03-05\",\"2026-03-06\",\"2026-03-07\",\"2026-03-08\",\"2026-03-09\",\"2026-03-10\",\"2026-03-11\",\"2026-03-12\",\"2026-04-22\",\"2026-04-23\",\"2026-04-26\",\"2026-04-27\"]' \n                        style=\"display:none;\"><\/div><\/div><\/div><div class=\"room-card\"><div class=\"room-image\"><img fetchpriority=\"high\" decoding=\"async\" width=\"768\" height=\"575\" src=\"https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo6-1-768x575.jpg\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" srcset=\"https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo6-1-768x575.jpg 768w, https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo6-1-300x225.jpg 300w, https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo6-1-1024x767.jpg 1024w, https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo6-1.jpg 1408w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/div><div class=\"room-details\"><h3>Caba\u00f1a 3<\/h3><p class=\"room-capacity\">Hasta 4 personas<\/p><p class=\"room-price\">Desde $60.000 \/ noche<\/p><button \n                    class=\"show-calendar\" \n                    data-room=\"419\"\n                    data-prices='{\"2\":\"110000\",\"4\":\"60000\"}'\n                    data-capacity=\"4\"\n                >\n                    Reservar\n                <\/button><div class=\"calendar-container\" \n                        id=\"calendar-419\" \n                        data-blocked='[\"2026-04-26\",\"2026-04-27\",\"2026-04-28\"]' \n                        style=\"display:none;\"><\/div><\/div><\/div><div class=\"room-card\"><div class=\"room-image\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"575\" src=\"https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo5-1-768x575.jpg\" class=\"attachment-medium_large size-medium_large wp-post-image\" alt=\"\" srcset=\"https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo5-1-768x575.jpg 768w, https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo5-1-300x225.jpg 300w, https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo5-1-1024x767.jpg 1024w, https:\/\/arcoirisdesantarosa.com.ar\/wp-content\/uploads\/2025\/05\/complejo5-1.jpg 1408w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/div><div class=\"room-details\"><h3>Caba\u00f1a 4<\/h3><p class=\"room-capacity\">Hasta 6 personas<\/p><p class=\"room-price\">Desde $150.000 \/ noche<\/p><button \n                    class=\"show-calendar\" \n                    data-room=\"420\"\n                    data-prices='{\"6\":\"150000\"}'\n                    data-capacity=\"6\"\n                >\n                    Reservar\n                <\/button><div class=\"calendar-container\" \n                        id=\"calendar-420\" \n                        data-blocked='[\"2026-04-29\",\"2026-05-13\",\"2026-05-14\",\"2026-05-15\",\"2026-05-16\",\"2026-05-17\",\"2026-05-18\",\"2026-05-19\"]' \n                        style=\"display:none;\"><\/div><\/div><\/div><\/div>    <\/div>\n\n<\/div>\n<div id=\"calendar-modal\" class=\"calendar-modal\">\n    \n    <div class=\"calendar-modal-content\">\n\n        <span id=\"close-modal\">&times;<\/span>\n\n        <h3>Seleccionar fechas<\/h3>\n\n        <div style=\"display: flex; justify-content: center;\">\n            <div id=\"modal-calendar\"><\/div>\n        <\/div>\n\n        <div id=\"price-selector-container\" style=\"margin-bottom:15px; display:none;\">\n            <label>Seleccionar opci\u00f3n:<\/label>\n            <select id=\"price-selector\"><\/select>\n\n            <p id=\"selected-price\" style=\"margin-top:10px; font-weight:bold;\"><\/p>\n        <\/div>\n\n        <button id=\"modal-reserve\" disabled style=\"margin-top:15px; border: none;\">\n            Confirmar\n        <\/button>\n\n    <\/div>\n\n<\/div>\n\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\n<script>\n    async function bookRoom(roomId, checkin, checkout) {\n\n        const response = await fetch(API_URL + 'wphb\/v1\/rooms\/book-rooms?_locale=user', {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/json',\n                'X-WP-Nonce': HOTEL_NONCE\n            },\n            credentials: 'same-origin',\n            body: JSON.stringify({\n                roomID: roomId.toString(),\n                checkinDate: checkin,\n                checkoutDate: checkout,\n                extraData: []\n            })\n        });\n\n        const data = await response.json();\n        console.log(data);\n\n        if (response.ok) {\n            window.location.href = BASE_URL + '\/hotel-cart\/';\n        } else {\n            alert('Error al reservar');\n        }\n    }\n\ndocument.addEventListener(\"DOMContentLoaded\", function(){\n\n    const modal = document.getElementById(\"calendar-modal\");\n    const modalCalendar = document.getElementById(\"modal-calendar\");\n    const reserveBtn = document.getElementById(\"modal-reserve\");\n    const closeModal = document.getElementById(\"close-modal\");\n\n    const priceSelectorContainer = document.getElementById(\"price-selector-container\");\n    const priceSelector = document.getElementById(\"price-selector\");\n    const selectedPriceText = document.getElementById(\"selected-price\");\n\n    let currentRoom = null;\n    let checkIn = null;\n    let checkOut = null;\n    let calendarInstance = null;\n    let selectedPriceKey = null;\n    let selectedPriceValue = null;\n\n    closeModal.onclick = () => modal.classList.remove(\"show\");\n\n    window.onclick = function(e){\n        if(e.target === modal){\n            modal.classList.remove(\"show\");\n        }\n    }\n\n    document.querySelectorAll(\".show-calendar\").forEach(button => {\n\n        button.addEventListener(\"click\", function(){\n\n            currentRoom = this.dataset.room;\n            const prices = JSON.parse(this.dataset.prices);\n\n            const container = document.getElementById(\"calendar-\" + currentRoom);\n            const blockedDates = JSON.parse(container.dataset.blocked);\n\n            modal.classList.add(\"show\");\n\n            \/\/ \ud83d\udd39 reset calendario\n            if (calendarInstance) calendarInstance.destroy();\n            modalCalendar.innerHTML = \"\";\n\n            reserveBtn.disabled = true;\n            checkIn = null;\n            checkOut = null;\n\n            \/\/ \ud83d\udd39 configurar selector de precios\n            priceSelector.innerHTML = \"\";\n            selectedPriceText.innerHTML = \"\";\n\n            const keys = Object.keys(prices);\n\n            if (keys.length > 1) {\n\n                priceSelectorContainer.style.display = \"block\";\n\n                keys.forEach(key => {\n                    const option = document.createElement(\"option\");\n\n                    option.value = key;\n                    option.text = key === \"default\" \n                        ? this.dataset.capacity + \" personas\" \n                        : key + \" personas\";\n\n                    option.dataset.price = prices[key];\n\n                    priceSelector.appendChild(option);\n                });\n\n                \/\/ default\n                selectedPriceKey = keys[0];\n                selectedPriceValue = prices[keys[0]];\n                updatePrice();\n\n            } else {\n\n                priceSelectorContainer.style.display = \"none\";\n\n                selectedPriceKey = keys[0];\n                selectedPriceValue = prices[keys[0]];\n            }\n\n            priceSelector.onchange = function(){\n                selectedPriceKey = this.value;\n                selectedPriceValue = this.options[this.selectedIndex].dataset.price;\n                updatePrice();\n            };\n\n            function updatePrice(){\n                selectedPriceText.innerHTML = \n                    \"Precio: $\" + Number(selectedPriceValue).toLocaleString('es-AR') + \" \/ noche\";\n            }\n\n            \/\/ \ud83d\udd39 calendario\n            calendarInstance = flatpickr(modalCalendar, {\n\n                inline:true,\n                mode:\"range\",\n                minDate:\"today\",\n                disable:blockedDates,\n                dateFormat:\"Y-m-d\",\n\n                onChange:function(selectedDates, dateStr, instance){\n\n                    if(selectedDates[0] && selectedDates[1]){\n\n                        checkIn = instance.formatDate(selectedDates[0],\"Y-m-d\");\n                        checkOut = instance.formatDate(selectedDates[1],\"Y-m-d\");\n\n                        reserveBtn.disabled = false;\n\n                    } else {\n                        reserveBtn.disabled = true;\n                    }\n\n                }\n\n            });\n\n        });\n\n    });\n\n    reserveBtn.onclick = async function(){\n\n        const formattedCheckIn  = checkIn.replaceAll('-', '\/');\n        const formattedCheckOut = checkOut.replaceAll('-', '\/');\n\n        const response = await fetch(API_URL + 'wphb\/v1\/rooms\/book-rooms?_locale=user', {\n            method: 'POST',\n            headers: {\n                'Content-Type': 'application\/json',\n                'X-WP-Nonce': HOTEL_NONCE\n            },\n            credentials: 'same-origin',\n            body: JSON.stringify({\n                roomID: currentRoom.toString(),\n                checkinDate: formattedCheckIn,\n                checkoutDate: formattedCheckOut,\n                extraData: [\n                    {\n                        key: \"custom_price\",\n                        value: selectedPriceValue\n                    }\n                ]\n            })\n        });\n\n        if (response.ok) {\n            window.location.href = BASE_URL + '\/hotel-cart\/';\n        } else {\n            alert('Error al reservar');\n        }\n\n    };\n\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-406","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arcoirisdesantarosa.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/406","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arcoirisdesantarosa.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arcoirisdesantarosa.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arcoirisdesantarosa.com.ar\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/arcoirisdesantarosa.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=406"}],"version-history":[{"count":1,"href":"https:\/\/arcoirisdesantarosa.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/406\/revisions"}],"predecessor-version":[{"id":483,"href":"https:\/\/arcoirisdesantarosa.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/406\/revisions\/483"}],"wp:attachment":[{"href":"https:\/\/arcoirisdesantarosa.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=406"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}