Generate BE Plugin HTML (GuestPro)

Generate BE Plugin HTML

Pilih tipe Booking Engine yang ingin dibuat:

Single Booking Engine

Untuk 1 properti. Tampil bar booking langsung (tanpa pilihan property).

Dibuat untuk Single BE berikut: https://secure.guestpro.net/kubu-tropis/booking

Group Booking Engine

Untuk banyak properti. Tamu memilih property lewat dropdown sebelum pilih tanggal.

Dibuat untuk Group BE berikut: https://secure-group.guestpro.net/nuanu

<!DOCTYPE html>
<html>

<link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
</head>

<body>

<div class="booking-bar">

<div class="booking-field date-range-field">
                <div class="date-input-wrapper">
                    <input type="text" id="check-in" class="unstyled-input" placeholder="CHECK-IN" readonly>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ccc" class="bi bi-calendar3"
                        viewBox="0 0 16 16">
                        <path
                            d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" />
                        <path
                            d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                    </svg>
                </div>
                <div class="separator"></div>
                <div class="date-input-wrapper">
                    <input type="text" id="check-out" class="unstyled-input" placeholder="CHECK-OUT" readonly>
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#ccc" class="bi bi-calendar3"
                        viewBox="0 0 16 16">
                        <path
                            d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z" />
                        <path
                            d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2z" />
                    </svg>
                </div>
            </div>

<div class="booking-field guest-field position-relative" onclick="ShowHidePopUp()">
                <div class="guest-info w-100">
                    <span class="label">Guests</span>

<div class="guest-value">
                        <span id="adult-guest">1</span> Adults,
                        <span id="children-guest">0</span> Children,
                        <span id="infant-guest">0</span> Infants
                    </div>
                </div>

<div class="pop-up-guest" id="pop-up-guest" onclick="event.stopPropagation();">

<div class="pt-2 pb-3 border-bottom">
                        <div class="row align-items-center">
                            <div class="col-6">
                                <p class="title mb-0">Adult</p>
                                <p class="description mb-0 text-muted">Ages 17 or above</p>
                            </div>

</div>
                            </div>
                        </div>
                    </div>

<div class="py-3 border-bottom">
                        <div class="row align-items-center">
                            <div class="col-6">
                                <p class="title mb-0">Children</p>
                                <p class="description mb-0 text-muted">Ages 2-16</p>
                            </div>

</div>
                            </div>
                        </div>
                    </div>

<div class="pt-3 pb-2">
                        <div class="row align-items-center">
                            <div class="col-6">
                                <p class="title mb-0">Infants</p>
                                <p class="description mb-0 text-muted">Under 2 years</p>
                            </div>

</div>
                            </div>
                        </div>
                    </div>

</div>
            </div>

<div class="booking-field promo-field">
                <input type="text" name="promo-code" id="promo-code" class="unstyled-input px-3"
                    placeholder="PROMO CODE">
            </div>

<div class="booking-field button-field">
                <button type="button" onclick="OnBook()" class="btn-book-now">
                    CHECK AVAILABILITY
                </button>
            </div>

</div>
    </div>

</body>

</html>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/rangePlugin.js"></script>

function fetchAvailabilityData(startDate, endDate, fpInstance) {
        if (isFetching) return;
        isFetching = true;

let adult = document.getElementById("adult-guest").innerHTML || 1;
        let child = document.getElementById("children-guest").innerHTML || 0;
        let infant = document.getElementById("infant-guest").innerHTML || 0;

let url = `https://api.marketconnect.id/guestapp-hotel/api/search-availability?merchant_id=${merchant_id}&start_date=${startDate}&end_date=${endDate}&adult=${adult}&child=${child}&infant=${infant}&use_promotion_combine=true&promo_code=`;

fetch(url)
            .then(response => response.json())
            .then(result => {
                if (result.success && result.data) {
                    result.data.forEach(item => {
                        availabilityCache[item.date] = item;
                    });
                    fpInstance.redraw();
                }
            })
            .catch(error => console.error("Error fetching availability:", error))
            .finally(() => {
                isFetching = false;
            });
    }

function getFetchDates(instance) {
        const today = new Date();
        today.setHours(0, 0, 0, 0);

const startYear = instance.currentYear;
        const startMonth = instance.currentMonth;

let startDateObj = new Date(startYear, startMonth, 1);
        if (startDateObj < today) {
            startDateObj = today;
        }

const start = startDateObj.getFullYear() + "-" +
            String(startDateObj.getMonth() + 1).padStart(2, '0') + "-" +
            String(startDateObj.getDate()).padStart(2, '0');

let endMonth = startMonth + 1; // For 2 months view
        let endYear = startYear;
        if (endMonth > 11) {
            endMonth = endMonth % 12;
            endYear++;
        }
        let lastDay = new Date(endYear, endMonth + 1, 0).getDate();

let endDateObj = new Date(endYear, endMonth, lastDay);
        if (endDateObj < startDateObj) {
            endDateObj = startDateObj;
        }

const end = endDateObj.getFullYear() + "-" +
            String(endDateObj.getMonth() + 1).padStart(2, '0') + "-" +
            String(endDateObj.getDate()).padStart(2, '0');

return { start, end };
    }

// Initialize Flatpickr for Check-in & Check-out with Range Plugin & 2 Months Display
    const fp = flatpickr("#check-in", {
        mode: "range",
        minDate: "today",
        dateFormat: "Y-m-d",
        showMonths: window.innerWidth > 576 ? 2 : 1, // Responsive showMonths
        plugins: [new rangePlugin({ input: "#check-out" })],
        closeOnSelect: false,
        onOpen: function (selectedDates, dateStr, instance) {
            instance._prevDates = selectedDates.map(d => d.getTime());
        },
        onChange: function (selectedDates, dateStr, instance) {
            if (selectedDates.length === 2) {
                let prev = instance._prevDates || [];
                let shouldClose = false;

if (prev.length < 2) {
                    shouldClose = true;
                } else {
                    let startChanged = selectedDates[0].getTime() !== prev[0];
                    let endChanged = selectedDates[1].getTime() !== prev[1];

if (startChanged && !endChanged) {
                        shouldClose = false;
                    } else if (endChanged) {
                        shouldClose = true;
                    } else {
                        shouldClose = true;
                    }
                }

if (shouldClose) {
                    setTimeout(() => instance.close(), 100);
                }
            }
            instance._prevDates = selectedDates.map(d => d.getTime());
        },
        onReady: function (selectedDates, dateStr, instance) {
            // Append footer legend
            const calendar = instance.calendarContainer;
            const footerHtml = `
                <div class="calendar-footer">
                    <ul class="legend-text">
                        <li>Prices are in Indonesian Rupiah (IDR)</li>
                        <li>The price shown is the price per night</li>
                    </ul>
                </div>
            `;
            calendar.insertAdjacentHTML('beforeend', footerHtml);

const data = availabilityCache[dateStr];

if (dayElem.querySelector('.day-price')) {
                dayElem.querySelector('.day-price').remove();
            }

// Only add prices if the day is not disabled because of minDate (past dates)
            if (!dayElem.classList.contains("flatpickr-disabled")) {
                if (data) {
                    if (data.availability > 0) {
                        const price = formatPrice(data.lower_price);
                        dayElem.insertAdjacentHTML('beforeend', `<span class="day-price">${price}</span>`);
                    } else {
                        dayElem.insertAdjacentHTML('beforeend', `<span class="day-price sold-out-text">Sold Out</span>`);
                        dayElem.classList.add("is-sold-out");
                    }
                } else {
                    dayElem.insertAdjacentHTML('beforeend', `<span class="day-price placeholder-price"> </span>`);
                }
            }
        }
    });

window.addEventListener('resize', function () {
        const shouldShowMonths = window.innerWidth > 576 ? 2 : 1;
        if (fp.config.showMonths !== shouldShowMonths) {
            fp.set('showMonths', shouldShowMonths);
        }
    });

function refetchData() {
        const dates = getFetchDates(fp);
        fetchAvailabilityData(dates.start, dates.end, fp);
    }

// Menutup popup guest ketika click di luar area
    document.addEventListener('click', function (event) {
        var isClickInside = document.querySelector('.guest-field').contains(event.target);
        if (!isClickInside) {
            document.getElementById("pop-up-guest").style.display = "none";
        }
    });
</script>

let check_in_input = document.getElementById("check-in")
        let check_out_input = document.getElementById("check-out")

if (check_in != '' && check_out != '') {
            if (promo_code != '') {
                window.open(link + merchant_id + "/hotel-filter-redirect/" + check_in + "/" + check_out + "/" + promo_code + "?guest=" + adult + "-" + children + "-" + infant + "");
            } else {
                window.open(link + merchant_id + "/hotel-filter-redirect/" + check_in + "/" + check_out + "/promo_code_empty" + "?guest=" + adult + "-" + children + "-" + infant + "");
            }
        }
        else {
            alert("Please select check-in and check-out dates.");
        }
    }

// ADULT
    function AdultsAdd() {
        var adult = document.getElementById('adult-amount');
        var guest = document.getElementById('adult-guest');
        var number = parseInt(adult.innerHTML);
        number++;
        adult.innerHTML = number;
        guest.innerHTML = number;
        if (typeof refetchData === 'function') refetchData();
    }
    function AdultsMin() {
        var adult = document.getElementById('adult-amount');
        var guest = document.getElementById('adult-guest');
        if (adult.innerHTML > 1) {
            var number = parseInt(adult.innerHTML);
            number--;
            adult.innerHTML = number;
            guest.innerHTML = number;
            if (typeof refetchData === 'function') refetchData();
        }
    }

// CHILDREN
    function ChildrenAdd() {
        var children = document.getElementById('children-amount');
        var guest = document.getElementById('children-guest');
        var number = parseInt(children.innerHTML);
        number++;
        children.innerHTML = number;
        guest.innerHTML = number;
        if (typeof refetchData === 'function') refetchData();
    }
    function ChildrenMin() {
        var children = document.getElementById('children-amount');
        var guest = document.getElementById('children-guest');
        var number = parseInt(children.innerHTML);
        if (number > 0) {
            number--;
            children.innerHTML = number;
            guest.innerHTML = number;
            if (typeof refetchData === 'function') refetchData();
        }
    }

// INFANT
    function InfantAdd() {
        var infant = document.getElementById('infant-amount');
        var guest = document.getElementById('infant-guest');
        var number = parseInt(infant.innerHTML);
        number++;
        infant.innerHTML = number;
        guest.innerHTML = number;
        if (typeof refetchData === 'function') refetchData();
    }
    function InfantMin() {
        var infant = document.getElementById('infant-amount');
        var guest = document.getElementById('infant-guest');
        var number = parseInt(infant.innerHTML);
        if (number > 0) {
            number--;
            infant.innerHTML = number;
            guest.innerHTML = number;
            if (typeof refetchData === 'function') refetchData();
        }
    }

function ShowHidePopUp() {
        var show = document.getElementById("pop-up-guest")
        if (show.style.display === "block") {
            show.style.display = "none";
        } else {
            show.style.display = "block"
        }
    }
</script>

.be-gp {
        top: 50px;
        position: relative;
        z-index: 99;
    }

/* Booking Bar Container */
    .booking-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(15px);
        padding: 10px;
        border-radius: 0px;
        width: 100%;
        max-width: 1050px;
        gap: 10px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

/* Individual Fields */
    .booking-field {
        background-color: {BG_COLOR};
        border-radius: 0px;
        height: 60px;
        display: flex;
        align-items: center;
        border: 1px solid transparent;
        transition: border-color 0.3s ease;
    }

.booking-field:hover {
        border-color: #e0e0e0;
    }

/* Date Range Field */
    .date-range-field {
        flex: 2;
        padding: 0;
        display: flex;
        align-items: center;
    }

.date-input-wrapper {
        flex: 1;
        height: 100%;
        display: flex;
        align-items: center;
        padding: 0 20px;
        cursor: pointer;
    }

.separator {
        width: 1px;
        height: 40px;
        background-color: #eaeaea;
    }

.unstyled-input {
        border: none !important;
        background: transparent;
        font-size: 14px;
        color: #333;
        outline: none;
        width: 100%;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

.unstyled-input::placeholder {
        color: #666;
        font-weight: 500;
    }

/* Guest Field */
    .guest-field {
        flex: 1.2;
        padding: 0 20px;
        cursor: pointer;
        justify-content: space-between;
    }

.guest-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

.guest-field .label {
        font-size: 11px;
        color: #777;
        margin-bottom: 2px;
        text-transform: capitalize;
    }

.guest-value {
        font-size: 15px;
        color: #333;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
    }

.dropdown-icon {
        color: #555;
    }

/* Button Field */
    .button-field {
        flex: 1.1;
        background-color: transparent;
        padding: 0 15px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        border: none;
    }

.button-field:hover {
        border-color: transparent;
    }

.btn-book-now {
        width: 100%;
        background: {BTN_COLOR};
        border: none;
        color: #fff;
        font-weight: 600;
        font-size: 13px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: background-color 0.3s ease;
        padding-top: 12px;
        padding-bottom: 12px;
        text-transform: uppercase;
    }

.btn-book-now:hover {
        background-color: {BTN_HOVER_COLOR};
    }

/* Pop Up Guest */
    .pop-up-guest {
        background-color: #fff;
        border-radius: 0px;
        padding: 16px 24px;
        width: 100%;
        min-width: 280px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
        display: none;
        position: absolute;
        top: 75px;
        left: 0;
        z-index: 99;
        border: 1px solid #eaeaea;
        cursor: default;
    }

.pop-up-guest .title {
        font-size: 15px;
        font-weight: 600;
        color: #333;
    }

.pop-up-guest .description {
        font-size: 12px;
        color: #888;
        margin-bottom: 0px;
    }

.pop-up-guest .icon {
        border: 1px solid #ddd;
        border-radius: 50%;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: #555;
        transition: background 0.2s;
    }

.pop-up-guest .icon:hover {
        background-color: #f5f5f5;
    }

.bold {
        font-weight: 600;
        font-size: 16px;
    }

/* Flatpickr Customization agar bersih dan rapi */
    .flatpickr-calendar {
        border: none !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
        border-radius: 0px !important;
        padding: 10px !important;
        margin-top: 15px !important;
        font-family: inherit !important;
    }

.flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange,
    .flatpickr-day.selected.inRange,
    .flatpickr-day.startRange.inRange,
    .flatpickr-day.endRange.inRange,
    .flatpickr-day.selected:focus,
    .flatpickr-day.startRange:focus,
    .flatpickr-day.endRange:focus,
    .flatpickr-day.selected:hover,
    .flatpickr-day.startRange:hover,
    .flatpickr-day.endRange:hover,
    .flatpickr-day.selected.prevMonthDay,
    .flatpickr-day.startRange.prevMonthDay,
    .flatpickr-day.endRange.prevMonthDay,
    .flatpickr-day.selected.nextMonthDay,
    .flatpickr-day.startRange.nextMonthDay,
    .flatpickr-day.endRange.nextMonthDay {
        background: {BTN_COLOR} !important;
        border-color: {BTN_COLOR} !important;
    }

#check-in,
    #check-out {
        padding: 27px 0 !important;
    }

/* --- Custom Calendar Styles --- */
    .flatpickr-day {
        height: auto !important;
        min-height: 52px;
        max-width: none !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 8px;
        line-height: normal !important;
    }

.flatpickr-day .day-price {
        font-size: 10px;
        color: #777;
        margin-top: 4px;
        font-weight: 500;
    }

.flatpickr-day.selected .day-price,
    .flatpickr-day.startRange .day-price,
    .flatpickr-day.endRange .day-price,
    .flatpickr-day.selected.inRange .day-price,
    .flatpickr-day.startRange.inRange .day-price,
    .flatpickr-day.endRange.inRange .day-price {
        color: #fff;
    }

.flatpickr-day.is-sold-out {
        pointer-events: none;
        color: #ccc;
    }

.flatpickr-day.is-sold-out .sold-out-text {
        color: #d9534f;
    }

.calendar-footer {
        padding: 15px 20px 0px;
        border-top: 1px solid #eaeaea;
        margin-top: 10px;
        background: #fff;
        border-radius: 0 0 0px 0px;
    }

.legend-text {
        text-align: left;
        list-style-type: disc;
        padding-left: 20px;
        margin-bottom: 15px;
        font-size: 13px;
        color: #555;
        margin-top: 0;
    }

.legend-text li {
        margin-bottom: 5px;
    }
    .flatpickr-weekdays{
        height: 42px!important;
    }

/* Responsive adjustments */
    @media (max-width: 992px) {
        .booking-bar {
            flex-direction: column;
            padding: 16px;
            gap: 6px;
        }

.booking-field.button-field {
            padding: 0px !important;
        }

#check-in,
        #check-out {
            padding: 23px 0 !important;
        }

.booking-field {
            width: 100%;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

.date-range-field {
            flex-direction: row;
        }

.booking-field.guest-field.position-relative {
            padding-top: 12px;
            padding-bottom: 12px;
        }

/* Promo Field */
        .promo-field {
            padding: 0px !important;
            min-height: 66px;
        }
    }

@media (max-width: 576px) {
        .date-range-field {
            flex-direction: column;
            height: auto;
        }

.date-input-wrapper {
            height: 60px;
            width: 100%;
            border-bottom: 1px solid #eaeaea;
        }

.date-input-wrapper:last-child {
            border-bottom: none;
        }

.separator {
            display: none;
        }

.flatpickr-calendar {
            width: 100% !important;
        }
    }

/* Promo Field */
    .promo-field {
        flex: 1;
        padding: 0 20px;
        display: flex;
        align-items: center;
        height: 60px;
    }

.promo-field input {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
        outline: none;
        text-transform: none;
    }
</style>

<!DOCTYPE html>
<html>

<body>

<div class="booking-bar">

<div class="booking-field property-field position-relative" onclick="ShowHideProperty()">
                <div class="guest-info w-100">
                    <span class="label">Property</span>
                    <div class="guest-value" id="property-display">Select property</div>
                </div>
                <span class="dropdown-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                        class="bi bi-chevron-down" viewBox="0 0 16 16">
                        <path fill-rule="evenodd"
                            d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
                    </svg>
                </span>

<div class="pop-up-guest pop-up-property" id="pop-up-property" onclick="event.stopPropagation();">
                    {PROPERTY_OPTIONS}
                </div>
            </div>

<div class="pop-up-guest" id="pop-up-guest" onclick="event.stopPropagation();">

</div>
                            </div>
                        </div>
                    </div>

</div>
                            </div>
                        </div>
                    </div>

</div>
                            </div>
                        </div>
                    </div>

</div>
            </div>

</div>
    </div>

</body>

</html>

<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://cdn.jsdelivr.net/npm/flatpickr/dist/plugins/rangePlugin.js"></script>

let availabilityCache = {};
    let isFetching = false;
    var selectedPropertyCode = (properties[0] && properties[0].code) ? properties[0].code : "";
    let merchant_id = (properties[0] && properties[0].merchant_id) ? properties[0].merchant_id : "";

function getSelectedProperty() {
        for (var i = 0; i < properties.length; i++) {
            if (properties[i].code === selectedPropertyCode) return properties[i];
        }
        return properties[0];
    }

// Toggle popup property (gaya .pop-up-guest)
    function ShowHideProperty() {
        var show = document.getElementById("pop-up-property");
        if (show.style.display === "block") {
            show.style.display = "none";
        } else {
            show.style.display = "block";
        }
    }

// Pilih property dari popup
    function SelectProperty(el) {
        selectedPropertyCode = el.getAttribute("data-code");

var items = document.querySelectorAll(".property-item");
        for (var i = 0; i < items.length; i++) {
            items[i].classList.remove("active");
        }
        el.classList.add("active");

var disp = document.getElementById("property-display");
        if (disp) disp.innerText = el.innerText;

document.getElementById("pop-up-property").style.display = "none";
        OnPropertyChange();
    }

function OnPropertyChange() {
        var p = getSelectedProperty();
        merchant_id = p ? p.merchant_id : "";
        availabilityCache = {};
        if (fp && fp.redraw) fp.redraw();
        refetchData();
    }

// Tampilan awal display + tutup popup property saat klik di luar
    if (properties[0]) {
        var _propDisp = document.getElementById("property-display");
        if (_propDisp) _propDisp.innerText = properties[0].name;
    }
    document.addEventListener('click', function (event) {
        var propField = document.querySelector('.property-field');
        if (propField && !propField.contains(event.target)) {
            var pp = document.getElementById("pop-up-property");
            if (pp) pp.style.display = "none";
        }
    });

function fetchAvailabilityData(startDate, endDate, fpInstance) {
        if (isFetching) return;
        if (!merchant_id) return;
        isFetching = true;

let todayObj = new Date();
        let checkin = todayObj.getFullYear() + "-" +
            String(todayObj.getMonth() + 1).padStart(2, '0') + "-" +
            String(todayObj.getDate()).padStart(2, '0');

let url = `https://secure-group.guestpro.net/api/search-availability?merchant_id=${merchant_id}&start_date=${startDate}&end_date=${endDate}&checkin=${checkin}&adult=${adult}&child=${child}&infant=${infant}&promo_code=&use_promotion_combine=true`;

function getFetchDates(instance) {
        const today = new Date();
        today.setHours(0, 0, 0, 0);

const startYear = instance.currentYear;
        const startMonth = instance.currentMonth;

let startDateObj = new Date(startYear, startMonth, 1);
        if (startDateObj < today) {
            startDateObj = today;
        }

const start = startDateObj.getFullYear() + "-" +
            String(startDateObj.getMonth() + 1).padStart(2, '0') + "-" +
            String(startDateObj.getDate()).padStart(2, '0');

let endDateObj = new Date(endYear, endMonth, lastDay);
        if (endDateObj < startDateObj) {
            endDateObj = startDateObj;
        }

const end = endDateObj.getFullYear() + "-" +
            String(endDateObj.getMonth() + 1).padStart(2, '0') + "-" +
            String(endDateObj.getDate()).padStart(2, '0');

return { start, end };
    }

const data = availabilityCache[dateStr];

if (dayElem.querySelector('.day-price')) {
                dayElem.querySelector('.day-price').remove();
            }

function refetchData() {
        const dates = getFetchDates(fp);
        fetchAvailabilityData(dates.start, dates.end, fp);
    }

let link = "{PARAM_LINK}"
        let merchant_code = prop.code
        let check_in = document.getElementById("check-in").value
        let check_out = document.getElementById("check-out").value
        let promo_code = document.getElementById("promo-code").value
        let adult = document.getElementById("adult-guest").innerHTML
        let children = document.getElementById("children-guest").innerHTML
        let infant = document.getElementById("infant-guest").innerHTML

if (check_in != '' && check_out != '') {
            let url = link + "property/" + merchant_code +
                "?checkin=" + check_in +
                "&checkout=" + check_out +
                "&adult=" + adult +
                "&child=" + children +
                "&infant=" + infant;
            if (promo_code != '') {
                url += "&promo_code=" + promo_code;
            }
            url += "#rooms-filter";
            window.open(url);
        }
        else {
            alert("Please select check-in and check-out dates.");
        }
    }

.be-gp {
        top: 50px;
        position: relative;
        z-index: 99;
    }

/* Booking Bar Container */
    .booking-bar {
        display: flex;
        flex-direction: row;
        align-items: center;
        background-color: rgba(255, 255, 255, 0.45);
        backdrop-filter: blur(15px);
        padding: 10px;
        border-radius: 0px;
        width: 100%;
        max-width: 1200px;
        gap: 10px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    }

.booking-field:hover {
        border-color: #e0e0e0;
    }

/* Property Field */
    .property-field {
        flex: 1.2;
        padding: 0 20px;
        cursor: pointer;
        justify-content: space-between;
    }

.property-field .label {
        font-size: 11px;
        color: #777;
        margin-bottom: 2px;
        text-transform: capitalize;
    }

.property-field .guest-value {
        font-size: 14px;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0.5px;
    }

/* Pop Up Property (gaya .pop-up-guest) */
    .pop-up-property {
        max-height: 280px;
        overflow-y: auto;
    }

.property-item {
        padding: 12px 2px;
        font-size: 14px;
        color: #333;
        cursor: pointer;
        border-bottom: 1px solid #f0f0f0;
        text-transform: none;
        letter-spacing: 0.5px;
        transition: color 0.2s;
    }

.property-item:last-child {
        border-bottom: none;
    }

.property-item:hover,
    .property-item.active {
        color: {BTN_COLOR};
        font-weight: 600;
    }