{"id":15,"date":"2026-08-11T05:11:08","date_gmt":"2026-08-11T05:11:08","guid":{"rendered":"https:\/\/demo.lucertix.net\/?page_id=15"},"modified":"2026-08-11T06:14:22","modified_gmt":"2026-08-11T06:14:22","slug":"home","status":"publish","type":"page","link":"https:\/\/demo.lucertix.net\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"15\" class=\"elementor elementor-15\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-574f051 e-flex e-con-boxed e-con e-parent\" data-id=\"574f051\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;slideshow&quot;,&quot;background_slideshow_gallery&quot;:[{&quot;id&quot;:25,&quot;url&quot;:&quot;https:\\\/\\\/demo.lucertix.net\\\/wp-content\\\/uploads\\\/2026\\\/08\\\/797ef323-e9ee-4d38-8306-5966bab2f27b.webp&quot;}],&quot;background_slideshow_loop&quot;:&quot;yes&quot;,&quot;background_slideshow_slide_duration&quot;:5000,&quot;background_slideshow_slide_transition&quot;:&quot;fade&quot;,&quot;background_slideshow_transition_duration&quot;:500}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0194d44 elementor-widget elementor-widget-html\" data-id=\"0194d44\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\r\n\/* =========================================================\r\n   PERMATA HOTEL BOGOR\r\n   AVAILABILITY BAR\r\n   PREFIX: ph-\r\n   \r\n   DESAIN:\r\n   - Thin pill\r\n   - White background\r\n   - Gold CTA\r\n   - Sticky saat scroll\r\n   - Tidak ada full-width white background\r\n========================================================= *\/\r\n\r\n\r\n\/* =========================================================\r\n   ROOT\r\n========================================================= *\/\r\n\r\n.ph-availability {\r\n\r\n    --ph-gold: #a68555;\r\n    --ph-gold-dark: #8c6d40;\r\n\r\n    --ph-text: #292929;\r\n    --ph-muted: #888888;\r\n\r\n    --ph-border: #e5ded4;\r\n\r\n    --ph-navbar-height: 90px;\r\n\r\n    width: 100% !important;\r\n\r\n    margin: 0 !important;\r\n    padding: 0 !important;\r\n\r\n    position: relative !important;\r\n\r\n    z-index: 9000 !important;\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif !important;\r\n\r\n    box-sizing: border-box !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   RESET\r\n========================================================= *\/\r\n\r\n.ph-availability *,\r\n.ph-availability *::before,\r\n.ph-availability *::after {\r\n\r\n    box-sizing: border-box !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CONTAINER\r\n========================================================= *\/\r\n\r\n.ph-availability__container {\r\n\r\n    width:\r\n        calc(100% - 60px) !important;\r\n\r\n    max-width:\r\n        1180px !important;\r\n\r\n    margin:\r\n        0 auto !important;\r\n\r\n    padding:\r\n        0 !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MAIN PILL\r\n========================================================= *\/\r\n\r\n.ph-availability__bar {\r\n\r\n    display:\r\n        grid !important;\r\n\r\n    grid-template-columns:\r\n        minmax(0, 1fr)\r\n        minmax(0, 1fr)\r\n        190px !important;\r\n\r\n    align-items:\r\n        center !important;\r\n\r\n    width:\r\n        100% !important;\r\n\r\n    height:\r\n        64px !important;\r\n\r\n    min-height:\r\n        64px !important;\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n    padding:\r\n        5px !important;\r\n\r\n    background:\r\n        #ffffff !important;\r\n\r\n    border:\r\n        1px solid\r\n        rgba(0, 0, 0, 0.08) !important;\r\n\r\n    border-radius:\r\n        999px !important;\r\n\r\n    box-shadow:\r\n        0 8px 28px\r\n        rgba(0, 0, 0, 0.10) !important;\r\n\r\n    transition:\r\n        box-shadow 0.25s ease !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STICKY WRAPPER\r\n========================================================= *\/\r\n\r\n\/*\r\n   PENTING:\r\n\r\n   Wrapper sticky TETAP TRANSPARAN.\r\n   Tidak ada background putih full width.\r\n*\/\r\n\r\n.ph-availability.ph-is-sticky {\r\n\r\n    position:\r\n        fixed !important;\r\n\r\n    top:\r\n        var(--ph-navbar-height) !important;\r\n\r\n    left:\r\n        0 !important;\r\n\r\n    width:\r\n        100% !important;\r\n\r\n    padding:\r\n        8px 0 !important;\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n    background:\r\n        transparent !important;\r\n\r\n    border:\r\n        0 !important;\r\n\r\n    box-shadow:\r\n        none !important;\r\n\r\n    animation:\r\n        phAvailabilityStickyIn\r\n        0.25s ease both !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STICKY PILL\r\n========================================================= *\/\r\n\r\n\/*\r\n   DESAIN BAR TIDAK DIUBAH.\r\n   Tinggi tetap 64px.\r\n*\/\r\n\r\n.ph-availability.ph-is-sticky\r\n.ph-availability__bar {\r\n\r\n    height:\r\n        64px !important;\r\n\r\n    min-height:\r\n        64px !important;\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n    box-shadow:\r\n        0 8px 28px\r\n        rgba(0, 0, 0, 0.12) !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   STICKY ANIMATION\r\n========================================================= *\/\r\n\r\n@keyframes phAvailabilityStickyIn {\r\n\r\n    from {\r\n\r\n        opacity:\r\n            0;\r\n\r\n        transform:\r\n            translateY(-5px);\r\n\r\n    }\r\n\r\n    to {\r\n\r\n        opacity:\r\n            1;\r\n\r\n        transform:\r\n            translateY(0);\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FIELD\r\n========================================================= *\/\r\n\r\n.ph-availability__field {\r\n\r\n    position:\r\n        relative !important;\r\n\r\n    display:\r\n        flex !important;\r\n\r\n    align-items:\r\n        center !important;\r\n\r\n    min-width:\r\n        0 !important;\r\n\r\n    height:\r\n        52px !important;\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n    padding:\r\n        0 28px !important;\r\n\r\n    background:\r\n        transparent !important;\r\n\r\n    border:\r\n        0 !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DIVIDER\r\n========================================================= *\/\r\n\r\n.ph-availability__field\r\n+ .ph-availability__field {\r\n\r\n    border-left:\r\n        1px solid\r\n        var(--ph-border) !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   FIELD INNER\r\n========================================================= *\/\r\n\r\n.ph-availability__field-inner {\r\n\r\n    display:\r\n        flex !important;\r\n\r\n    flex-direction:\r\n        column !important;\r\n\r\n    justify-content:\r\n        center !important;\r\n\r\n    width:\r\n        100% !important;\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n    padding:\r\n        0 !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   LABEL\r\n========================================================= *\/\r\n\r\n.ph-availability__label {\r\n\r\n    display:\r\n        block !important;\r\n\r\n    margin:\r\n        0 0 3px 0 !important;\r\n\r\n    padding:\r\n        0 !important;\r\n\r\n    color:\r\n        var(--ph-muted) !important;\r\n\r\n    font-size:\r\n        9px !important;\r\n\r\n    font-weight:\r\n        600 !important;\r\n\r\n    line-height:\r\n        1.2 !important;\r\n\r\n    letter-spacing:\r\n        0.14em !important;\r\n\r\n    text-transform:\r\n        uppercase !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DATE INPUT\r\n========================================================= *\/\r\n\r\n.ph-availability__input {\r\n\r\n    display:\r\n        block !important;\r\n\r\n    width:\r\n        100% !important;\r\n\r\n    height:\r\n        22px !important;\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n    padding:\r\n        0 !important;\r\n\r\n    color:\r\n        var(--ph-text) !important;\r\n\r\n    background:\r\n        transparent !important;\r\n\r\n    border:\r\n        0 !important;\r\n\r\n    border-radius:\r\n        0 !important;\r\n\r\n    outline:\r\n        none !important;\r\n\r\n    box-shadow:\r\n        none !important;\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif !important;\r\n\r\n    font-size:\r\n        14px !important;\r\n\r\n    font-weight:\r\n        500 !important;\r\n\r\n    line-height:\r\n        22px !important;\r\n\r\n    cursor:\r\n        pointer !important;\r\n\r\n    appearance:\r\n        none !important;\r\n\r\n    -webkit-appearance:\r\n        none !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   INPUT STATES\r\n========================================================= *\/\r\n\r\n.ph-availability__input:hover,\r\n.ph-availability__input:focus,\r\n.ph-availability__input:active {\r\n\r\n    color:\r\n        var(--ph-text) !important;\r\n\r\n    background:\r\n        transparent !important;\r\n\r\n    border:\r\n        0 !important;\r\n\r\n    outline:\r\n        none !important;\r\n\r\n    box-shadow:\r\n        none !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   DATE ICON\r\n========================================================= *\/\r\n\r\n.ph-availability__input::-webkit-calendar-picker-indicator {\r\n\r\n    width:\r\n        15px !important;\r\n\r\n    height:\r\n        15px !important;\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n    padding:\r\n        0 !important;\r\n\r\n    opacity:\r\n        0.45 !important;\r\n\r\n    cursor:\r\n        pointer !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA AREA\r\n========================================================= *\/\r\n\r\n.ph-availability__action {\r\n\r\n    display:\r\n        flex !important;\r\n\r\n    align-items:\r\n        center !important;\r\n\r\n    width:\r\n        100% !important;\r\n\r\n    height:\r\n        52px !important;\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n    padding:\r\n        0 !important;\r\n\r\n    background:\r\n        transparent !important;\r\n\r\n    border:\r\n        0 !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA BUTTON\r\n========================================================= *\/\r\n\r\n.ph-availability__button {\r\n\r\n    display:\r\n        flex !important;\r\n\r\n    align-items:\r\n        center !important;\r\n\r\n    justify-content:\r\n        center !important;\r\n\r\n    width:\r\n        100% !important;\r\n\r\n    height:\r\n        52px !important;\r\n\r\n    margin:\r\n        0 !important;\r\n\r\n    padding:\r\n        0 24px !important;\r\n\r\n    color:\r\n        #ffffff !important;\r\n\r\n    background:\r\n        var(--ph-gold) !important;\r\n\r\n    border:\r\n        0 !important;\r\n\r\n    border-radius:\r\n        999px !important;\r\n\r\n    outline:\r\n        none !important;\r\n\r\n    box-shadow:\r\n        none !important;\r\n\r\n    font-family:\r\n        Arial,\r\n        Helvetica,\r\n        sans-serif !important;\r\n\r\n    font-size:\r\n        10px !important;\r\n\r\n    font-weight:\r\n        600 !important;\r\n\r\n    line-height:\r\n        1 !important;\r\n\r\n    letter-spacing:\r\n        0.12em !important;\r\n\r\n    text-transform:\r\n        uppercase !important;\r\n\r\n    text-decoration:\r\n        none !important;\r\n\r\n    cursor:\r\n        pointer !important;\r\n\r\n    appearance:\r\n        none !important;\r\n\r\n    -webkit-appearance:\r\n        none !important;\r\n\r\n    transition:\r\n        background 0.25s ease,\r\n        transform 0.25s ease,\r\n        box-shadow 0.25s ease !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   CTA HOVER\r\n========================================================= *\/\r\n\r\n.ph-availability__button:hover,\r\n.ph-availability__button:focus {\r\n\r\n    color:\r\n        #ffffff !important;\r\n\r\n    background:\r\n        var(--ph-gold-dark) !important;\r\n\r\n    border:\r\n        0 !important;\r\n\r\n    box-shadow:\r\n        0 5px 15px\r\n        rgba(\r\n            140,\r\n            109,\r\n            64,\r\n            0.20\r\n        ) !important;\r\n\r\n    transform:\r\n        translateY(-1px) !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ERROR\r\n========================================================= *\/\r\n\r\n.ph-availability__field.ph-has-error {\r\n\r\n    background:\r\n        rgba(\r\n            165,\r\n            74,\r\n            63,\r\n            0.03\r\n        ) !important;\r\n\r\n}\r\n\r\n\r\n.ph-availability__error {\r\n\r\n    display:\r\n        none !important;\r\n\r\n    position:\r\n        absolute !important;\r\n\r\n    left:\r\n        28px !important;\r\n\r\n    bottom:\r\n        -20px !important;\r\n\r\n    color:\r\n        #a54a3f !important;\r\n\r\n    font-size:\r\n        10px !important;\r\n\r\n}\r\n\r\n\r\n.ph-availability__error.ph-is-visible {\r\n\r\n    display:\r\n        block !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   TABLET\r\n========================================================= *\/\r\n\r\n@media (max-width: 991px) {\r\n\r\n    .ph-availability {\r\n\r\n        --ph-navbar-height:\r\n            80px;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__container {\r\n\r\n        width:\r\n            calc(100% - 40px) !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__bar {\r\n\r\n        grid-template-columns:\r\n            minmax(0, 1fr)\r\n            minmax(0, 1fr)\r\n            170px !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__field {\r\n\r\n        padding:\r\n            0 20px !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__button {\r\n\r\n        padding:\r\n            0 15px !important;\r\n\r\n        font-size:\r\n            9px !important;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   MOBILE\r\n========================================================= *\/\r\n\r\n@media (max-width: 767px) {\r\n\r\n    .ph-availability {\r\n\r\n        --ph-navbar-height:\r\n            75px;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__container {\r\n\r\n        width:\r\n            calc(100% - 24px) !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__bar {\r\n\r\n        display:\r\n            block !important;\r\n\r\n        width:\r\n            100% !important;\r\n\r\n        height:\r\n            auto !important;\r\n\r\n        min-height:\r\n            0 !important;\r\n\r\n        padding:\r\n            5px !important;\r\n\r\n        border-radius:\r\n            24px !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability.ph-is-sticky {\r\n\r\n        top:\r\n            var(--ph-navbar-height) !important;\r\n\r\n        padding:\r\n            7px 0 !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability.ph-is-sticky\r\n    .ph-availability__bar {\r\n\r\n        height:\r\n            auto !important;\r\n\r\n        min-height:\r\n            0 !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__field {\r\n\r\n        width:\r\n            100% !important;\r\n\r\n        height:\r\n            58px !important;\r\n\r\n        min-height:\r\n            58px !important;\r\n\r\n        padding:\r\n            0 20px !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__field\r\n    + .ph-availability__field {\r\n\r\n        border-top:\r\n            1px solid\r\n            var(--ph-border) !important;\r\n\r\n        border-left:\r\n            0 !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__label {\r\n\r\n        font-size:\r\n            9px !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__input {\r\n\r\n        font-size:\r\n            14px !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__action {\r\n\r\n        width:\r\n            100% !important;\r\n\r\n        height:\r\n            50px !important;\r\n\r\n        margin-top:\r\n            4px !important;\r\n\r\n    }\r\n\r\n\r\n    .ph-availability__button {\r\n\r\n        height:\r\n            50px !important;\r\n\r\n    }\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   ACCESSIBILITY\r\n========================================================= *\/\r\n\r\n.ph-availability__button:focus-visible,\r\n.ph-availability__input:focus-visible {\r\n\r\n    outline:\r\n        2px solid\r\n        var(--ph-gold) !important;\r\n\r\n    outline-offset:\r\n        3px !important;\r\n\r\n}\r\n\r\n\r\n\/* =========================================================\r\n   REDUCED MOTION\r\n========================================================= *\/\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n\r\n    .ph-availability *,\r\n    .ph-availability *::before,\r\n    .ph-availability *::after {\r\n\r\n        animation:\r\n            none !important;\r\n\r\n        transition:\r\n            none !important;\r\n\r\n    }\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n\r\n<!-- =========================================================\r\n     AVAILABILITY BAR\r\n========================================================= -->\r\n\r\n<section\r\n    class=\"ph-availability\"\r\n    id=\"ph-availability\"\r\n    aria-label=\"Check hotel availability\"\r\n>\r\n\r\n    <div\r\n        class=\"ph-availability__container\"\r\n    >\r\n\r\n        <form\r\n            class=\"ph-availability__bar\"\r\n            id=\"ph-availability-form\"\r\n            action=\"\/booking\/\"\r\n            method=\"GET\"\r\n        >\r\n\r\n            <!-- =================================================\r\n                 CHECK IN\r\n            ================================================== -->\r\n\r\n            <div\r\n                class=\"ph-availability__field\"\r\n                id=\"ph-checkin-field\"\r\n            >\r\n\r\n                <div\r\n                    class=\"ph-availability__field-inner\"\r\n                >\r\n\r\n                    <label\r\n                        class=\"ph-availability__label\"\r\n                        for=\"ph-checkin\"\r\n                    >\r\n                        Check In\r\n                    <\/label>\r\n\r\n                    <input\r\n                        class=\"ph-availability__input\"\r\n                        type=\"date\"\r\n                        id=\"ph-checkin\"\r\n                        name=\"check_in\"\r\n                        required\r\n                    >\r\n\r\n                <\/div>\r\n\r\n                <span\r\n                    class=\"ph-availability__error\"\r\n                    id=\"ph-checkin-error\"\r\n                >\r\n                    Please select a check-in date.\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 CHECK OUT\r\n            ================================================== -->\r\n\r\n            <div\r\n                class=\"ph-availability__field\"\r\n                id=\"ph-checkout-field\"\r\n            >\r\n\r\n                <div\r\n                    class=\"ph-availability__field-inner\"\r\n                >\r\n\r\n                    <label\r\n                        class=\"ph-availability__label\"\r\n                        for=\"ph-checkout\"\r\n                    >\r\n                        Check Out\r\n                    <\/label>\r\n\r\n                    <input\r\n                        class=\"ph-availability__input\"\r\n                        type=\"date\"\r\n                        id=\"ph-checkout\"\r\n                        name=\"check_out\"\r\n                        required\r\n                    >\r\n\r\n                <\/div>\r\n\r\n                <span\r\n                    class=\"ph-availability__error\"\r\n                    id=\"ph-checkout-error\"\r\n                >\r\n                    Check-out must be after check-in.\r\n                <\/span>\r\n\r\n            <\/div>\r\n\r\n\r\n            <!-- =================================================\r\n                 CTA\r\n            ================================================== -->\r\n\r\n            <div\r\n                class=\"ph-availability__action\"\r\n            >\r\n\r\n                <button\r\n                    type=\"submit\"\r\n                    class=\"ph-availability__button\"\r\n                >\r\n                    Check Availability\r\n                <\/button>\r\n\r\n            <\/div>\r\n\r\n        <\/form>\r\n\r\n    <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n<script>\r\n\r\n(function () {\r\n\r\n    \"use strict\";\r\n\r\n\r\n    document.addEventListener(\r\n        \"DOMContentLoaded\",\r\n        function () {\r\n\r\n\r\n            \/* =================================================\r\n               ELEMENTS\r\n            ================================================= *\/\r\n\r\n            const phAvailability =\r\n                document.getElementById(\r\n                    \"ph-availability\"\r\n                );\r\n\r\n\r\n            const phForm =\r\n                document.getElementById(\r\n                    \"ph-availability-form\"\r\n                );\r\n\r\n\r\n            const phCheckin =\r\n                document.getElementById(\r\n                    \"ph-checkin\"\r\n                );\r\n\r\n\r\n            const phCheckout =\r\n                document.getElementById(\r\n                    \"ph-checkout\"\r\n                );\r\n\r\n\r\n            const phCheckinField =\r\n                document.getElementById(\r\n                    \"ph-checkin-field\"\r\n                );\r\n\r\n\r\n            const phCheckoutField =\r\n                document.getElementById(\r\n                    \"ph-checkout-field\"\r\n                );\r\n\r\n\r\n            const phCheckinError =\r\n                document.getElementById(\r\n                    \"ph-checkin-error\"\r\n                );\r\n\r\n\r\n            const phCheckoutError =\r\n                document.getElementById(\r\n                    \"ph-checkout-error\"\r\n                );\r\n\r\n\r\n            if (\r\n                !phAvailability ||\r\n                !phForm ||\r\n                !phCheckin ||\r\n                !phCheckout\r\n            ) {\r\n\r\n                return;\r\n\r\n            }\r\n\r\n\r\n            \/* =================================================\r\n               TODAY\r\n            ================================================== *\/\r\n\r\n            function phGetToday() {\r\n\r\n                const phDate =\r\n                    new Date();\r\n\r\n\r\n                const phYear =\r\n                    phDate.getFullYear();\r\n\r\n\r\n                const phMonth =\r\n                    String(\r\n                        phDate.getMonth() + 1\r\n                    ).padStart(\r\n                        2,\r\n                        \"0\"\r\n                    );\r\n\r\n\r\n                const phDay =\r\n                    String(\r\n                        phDate.getDate()\r\n                    ).padStart(\r\n                        2,\r\n                        \"0\"\r\n                    );\r\n\r\n\r\n                return (\r\n                    phYear +\r\n                    \"-\" +\r\n                    phMonth +\r\n                    \"-\" +\r\n                    phDay\r\n                );\r\n\r\n            }\r\n\r\n\r\n            const phToday =\r\n                phGetToday();\r\n\r\n\r\n            \/* =================================================\r\n               DATE MINIMUM\r\n            ================================================== *\/\r\n\r\n            phCheckin.min =\r\n                phToday;\r\n\r\n            phCheckout.min =\r\n                phToday;\r\n\r\n\r\n            \/* =================================================\r\n               CHECKOUT MINIMUM\r\n            ================================================== *\/\r\n\r\n            function phUpdateCheckoutMin() {\r\n\r\n                if (\r\n                    phCheckin.value\r\n                ) {\r\n\r\n                    phCheckout.min =\r\n                        phCheckin.value;\r\n\r\n                } else {\r\n\r\n                    phCheckout.min =\r\n                        phToday;\r\n\r\n                }\r\n\r\n            }\r\n\r\n\r\n            \/* =================================================\r\n               CHECK IN\r\n            ================================================== *\/\r\n\r\n            phCheckin.addEventListener(\r\n                \"change\",\r\n                function () {\r\n\r\n                    phUpdateCheckoutMin();\r\n\r\n\r\n                    phCheckinField\r\n                        .classList\r\n                        .remove(\r\n                            \"ph-has-error\"\r\n                        );\r\n\r\n\r\n                    phCheckinError\r\n                        .classList\r\n                        .remove(\r\n                            \"ph-is-visible\"\r\n                        );\r\n\r\n\r\n                    if (\r\n                        phCheckout.value &&\r\n                        phCheckout.value <=\r\n                        phCheckin.value\r\n                    ) {\r\n\r\n                        phCheckout.value =\r\n                            \"\";\r\n\r\n                    }\r\n\r\n\r\n                    phCheckoutField\r\n                        .classList\r\n                        .remove(\r\n                            \"ph-has-error\"\r\n                        );\r\n\r\n\r\n                    phCheckoutError\r\n                        .classList\r\n                        .remove(\r\n                            \"ph-is-visible\"\r\n                        );\r\n\r\n                }\r\n            );\r\n\r\n\r\n            \/* =================================================\r\n               CHECK OUT\r\n            ================================================== *\/\r\n\r\n            phCheckout.addEventListener(\r\n                \"change\",\r\n                function () {\r\n\r\n                    if (\r\n                        phCheckin.value &&\r\n                        phCheckout.value <=\r\n                        phCheckin.value\r\n                    ) {\r\n\r\n                        phCheckout.value =\r\n                            \"\";\r\n\r\n                        phCheckoutField\r\n                            .classList\r\n                            .add(\r\n                                \"ph-has-error\"\r\n                            );\r\n\r\n                        phCheckoutError\r\n                            .classList\r\n                            .add(\r\n                                \"ph-is-visible\"\r\n                            );\r\n\r\n                    } else {\r\n\r\n                        phCheckoutField\r\n                            .classList\r\n                            .remove(\r\n                                \"ph-has-error\"\r\n                            );\r\n\r\n                        phCheckoutError\r\n                            .classList\r\n                            .remove(\r\n                                \"ph-is-visible\"\r\n                            );\r\n\r\n                    }\r\n\r\n                }\r\n            );\r\n\r\n\r\n            \/* =================================================\r\n               FORM VALIDATION\r\n            ================================================== *\/\r\n\r\n            phForm.addEventListener(\r\n                \"submit\",\r\n                function (phEvent) {\r\n\r\n                    let phValid =\r\n                        true;\r\n\r\n\r\n                    if (\r\n                        !phCheckin.value\r\n                    ) {\r\n\r\n                        phValid =\r\n                            false;\r\n\r\n                        phCheckinField\r\n                            .classList\r\n                            .add(\r\n                                \"ph-has-error\"\r\n                            );\r\n\r\n                        phCheckinError\r\n                            .classList\r\n                            .add(\r\n                                \"ph-is-visible\"\r\n                            );\r\n\r\n                    }\r\n\r\n\r\n                    if (\r\n                        !phCheckout.value\r\n                    ) {\r\n\r\n                        phValid =\r\n                            false;\r\n\r\n                        phCheckoutField\r\n                            .classList\r\n                            .add(\r\n                                \"ph-has-error\"\r\n                            );\r\n\r\n                        phCheckoutError\r\n                            .classList\r\n                            .add(\r\n                                \"ph-is-visible\"\r\n                            );\r\n\r\n                    }\r\n\r\n\r\n                    if (\r\n                        phCheckin.value &&\r\n                        phCheckout.value &&\r\n                        phCheckout.value <=\r\n                        phCheckin.value\r\n                    ) {\r\n\r\n                        phValid =\r\n                            false;\r\n\r\n                        phCheckoutField\r\n                            .classList\r\n                            .add(\r\n                                \"ph-has-error\"\r\n                            );\r\n\r\n                        phCheckoutError\r\n                            .classList\r\n                            .add(\r\n                                \"ph-is-visible\"\r\n                            );\r\n\r\n                    }\r\n\r\n\r\n                    if (!phValid) {\r\n\r\n                        phEvent.preventDefault();\r\n\r\n                    }\r\n\r\n                }\r\n            );\r\n\r\n\r\n            \/* =================================================\r\n               NAVBAR\r\n            ================================================== *\/\r\n\r\n            const phNavbar =\r\n                document.querySelector(\r\n                    \".ph-navbar\"\r\n                );\r\n\r\n\r\n            \/* =================================================\r\n               NAVBAR HEIGHT\r\n            ================================================== *\/\r\n\r\n            function phUpdateNavbarHeight() {\r\n\r\n                if (!phNavbar) {\r\n\r\n                    return;\r\n\r\n                }\r\n\r\n\r\n                const phNavbarRect =\r\n                    phNavbar.getBoundingClientRect();\r\n\r\n\r\n                const phNavbarHeight =\r\n                    phNavbarRect.height;\r\n\r\n\r\n                if (\r\n                    phNavbarHeight > 0\r\n                ) {\r\n\r\n                    phAvailability.style\r\n                        .setProperty(\r\n                            \"--ph-navbar-height\",\r\n                            phNavbarHeight + \"px\"\r\n                        );\r\n\r\n                }\r\n\r\n            }\r\n\r\n\r\n            \/* =================================================\r\n               STICKY TRIGGER\r\n               \r\n               Simpan posisi asli BAR.\r\n               Bukan posisi navbar.\r\n            ================================================== *\/\r\n\r\n            let phStickyTrigger =\r\n                0;\r\n\r\n\r\n            function phUpdateStickyTrigger() {\r\n\r\n                \/*\r\n                 * Jangan hitung ketika sedang fixed.\r\n                 *\/\r\n\r\n                const phWasSticky =\r\n                    phAvailability\r\n                        .classList\r\n                        .contains(\r\n                            \"ph-is-sticky\"\r\n                        );\r\n\r\n\r\n                if (phWasSticky) {\r\n\r\n                    phAvailability\r\n                        .classList\r\n                        .remove(\r\n                            \"ph-is-sticky\"\r\n                        );\r\n\r\n                }\r\n\r\n\r\n                const phRect =\r\n                    phAvailability\r\n                        .getBoundingClientRect();\r\n\r\n\r\n                const phScroll =\r\n                    window.pageYOffset ||\r\n                    document.documentElement.scrollTop ||\r\n                    0;\r\n\r\n\r\n                phStickyTrigger =\r\n                    phRect.top +\r\n                    phScroll;\r\n\r\n\r\n                if (phWasSticky) {\r\n\r\n                    phAvailability\r\n                        .classList\r\n                        .add(\r\n                            \"ph-is-sticky\"\r\n                        );\r\n\r\n                }\r\n\r\n            }\r\n\r\n\r\n            \/* =================================================\r\n               STICKY\r\n            ================================================== *\/\r\n\r\n            function phHandleSticky() {\r\n\r\n                const phScroll =\r\n                    window.pageYOffset ||\r\n                    document.documentElement.scrollTop ||\r\n                    0;\r\n\r\n\r\n                \/*\r\n                 * Sedikit buffer supaya tidak flicker.\r\n                 *\/\r\n\r\n                const phTrigger =\r\n                    phStickyTrigger;\r\n\r\n\r\n                if (\r\n                    phScroll >=\r\n                    phTrigger\r\n                ) {\r\n\r\n                    if (\r\n                        !phAvailability\r\n                            .classList\r\n                            .contains(\r\n                                \"ph-is-sticky\"\r\n                            )\r\n                    ) {\r\n\r\n                        phAvailability\r\n                            .classList\r\n                            .add(\r\n                                \"ph-is-sticky\"\r\n                            );\r\n\r\n                    }\r\n\r\n                } else {\r\n\r\n                    if (\r\n                        phAvailability\r\n                            .classList\r\n                            .contains(\r\n                                \"ph-is-sticky\"\r\n                            )\r\n                    ) {\r\n\r\n                        phAvailability\r\n                            .classList\r\n                            .remove(\r\n                                \"ph-is-sticky\"\r\n                            );\r\n\r\n                    }\r\n\r\n                }\r\n\r\n            }\r\n\r\n\r\n            \/* =================================================\r\n               INITIAL SETUP\r\n            ================================================== *\/\r\n\r\n            phUpdateNavbarHeight();\r\n\r\n            phUpdateStickyTrigger();\r\n\r\n            phHandleSticky();\r\n\r\n\r\n            \/* =================================================\r\n               SCROLL\r\n            ================================================== *\/\r\n\r\n            let phScrollTicking =\r\n                false;\r\n\r\n\r\n            function phOnScroll() {\r\n\r\n                if (\r\n                    !phScrollTicking\r\n                ) {\r\n\r\n                    window.requestAnimationFrame(\r\n                        function () {\r\n\r\n                            phHandleSticky();\r\n\r\n                            phScrollTicking =\r\n                                false;\r\n\r\n                        }\r\n                    );\r\n\r\n\r\n                    phScrollTicking =\r\n                        true;\r\n\r\n                }\r\n\r\n            }\r\n\r\n\r\n            window.addEventListener(\r\n                \"scroll\",\r\n                phOnScroll,\r\n                {\r\n                    passive: true\r\n                }\r\n            );\r\n\r\n\r\n            \/* =================================================\r\n               RESIZE\r\n            ================================================== *\/\r\n\r\n            window.addEventListener(\r\n                \"resize\",\r\n                function () {\r\n\r\n                    phUpdateNavbarHeight();\r\n\r\n                    phUpdateStickyTrigger();\r\n\r\n                    phHandleSticky();\r\n\r\n                }\r\n            );\r\n\r\n\r\n            \/* =================================================\r\n               WATCH NAVBAR\r\n               \r\n               Kalau navbar lu punya class\r\n               ph-is-hidden, kita tetap update\r\n               tinggi navbar.\r\n            ================================================== *\/\r\n\r\n            if (phNavbar) {\r\n\r\n                const phNavbarObserver =\r\n                    new MutationObserver(\r\n                        function () {\r\n\r\n                            phUpdateNavbarHeight();\r\n\r\n                        }\r\n                    );\r\n\r\n\r\n                phNavbarObserver.observe(\r\n                    phNavbar,\r\n                    {\r\n                        attributes:\r\n                            true,\r\n\r\n                        attributeFilter:\r\n                            [\r\n                                \"class\",\r\n                                \"style\"\r\n                            ]\r\n                    }\r\n                );\r\n\r\n            }\r\n\r\n\r\n        }\r\n    );\r\n\r\n})();\r\n\r\n<\/script>\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-9d4e9ea e-flex e-con-boxed e-con e-parent\" data-id=\"9d4e9ea\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<h2 data-interaction-id=\"eabe67a\" class=\"e-eabe67a-2b9cd10 e-heading-base\" data-e-type=\"widget\" data-id=\"eabe67a\">This is a title<\/h2>\n\t\t\t\t\t<p class=\"e-f352ff0-268c526 e-paragraph-base\" data-interaction-id=\"f352ff0\" data-e-type=\"widget\" data-id=\"f352ff0\">Permata Convention Hotel is a business and leisure hotel in Bogor. Sitting amidst lush greenery, it is strategically located opposite the famous Bogor Botanical Garden and Presidential Palace, minutes away from factory outlets and the biggest mall in Bogor, Botani Square.<br><\/p>\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>Check In Please select a check-in date. Check Out Check-out must be after check-in. Check Availability This is a title [&hellip;]<\/p>\n","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":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","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":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-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":"","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-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":"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":""},"mobile":{"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":""}},"footnotes":""},"class_list":["post-15","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.lucertix.net\/index.php?rest_route=\/wp\/v2\/pages\/15","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.lucertix.net\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.lucertix.net\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.lucertix.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.lucertix.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=15"}],"version-history":[{"count":31,"href":"https:\/\/demo.lucertix.net\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions"}],"predecessor-version":[{"id":63,"href":"https:\/\/demo.lucertix.net\/index.php?rest_route=\/wp\/v2\/pages\/15\/revisions\/63"}],"wp:attachment":[{"href":"https:\/\/demo.lucertix.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}