{"id":12432,"date":"2017-10-02T17:39:50","date_gmt":"2017-10-02T15:39:50","guid":{"rendered":"http:\/\/www.magnificat.center\/?page_id=12432"},"modified":"2026-05-11T09:04:22","modified_gmt":"2026-05-11T07:04:22","slug":"availabili","status":"publish","type":"page","link":"https:\/\/www.magnificat.center\/?page_id=12432&lang=en","title":{"rendered":"Availability"},"content":{"rendered":"\n<!-- Custom Site Title and Description Override -->\n<div class=\"custom-site-header\">\n    <h1 class=\"custom-site-title\">Check Availability<\/h1>\n    <p class=\"custom-site-description\">Check availability for individual or group reservations.<\/p>\n<\/div>\n\n<style>\n.custom-site-header {\n    text-align: center;\n    padding: 20px;\n    background: #f5f5f5;\n    border-radius: 5px;\n    margin-bottom: 20px;\n}\n\n.custom-site-title {\n    margin: 0 0 10px 0;\n    font-size: 28px;\n    font-weight: bold;\n    color: #333;\n}\n\n.custom-site-description {\n    margin: 0;\n    font-size: 16px;\n    color: #666;\n}\n<\/style>\n\n\n\n<!-- Magnificat Center Availability Checker -->\n<div class=\"mag-availability-wrapper\">\n<style>\n        .mag-availability-wrapper {\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n            max-width: 1400px;\n            margin: 0 auto;\n            padding: 1rem;\n            background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);\n            border-radius: 24px;\n        }\n\n        .mag-tabs {\n            display: flex;\n            gap: 0.75rem;\n            margin-bottom: 1.5rem;\n            justify-content: center;\n            border-bottom: 2px solid rgba(212, 175, 55, 0.2);\n            padding-bottom: 0.75rem;\n            flex-wrap: wrap;\n        }\n\n        .mag-tab {\n            padding: 0.6rem 1.25rem;\n            font-size: 0.9rem;\n            font-weight: 600;\n            cursor: pointer;\n            border-radius: 40px;\n            transition: all 0.3s ease;\n            background: white;\n            color: #6c757d;\n            border: 1px solid #e9ecef;\n        }\n\n        .mag-tab.active {\n            background: linear-gradient(135deg, #d4af37 0%, #b8942e 100%);\n            color: white;\n            border-color: #d4af37;\n            box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);\n        }\n\n        .mag-panel {\n            display: none;\n            animation: magFadeIn 0.3s ease;\n        }\n\n        .mag-panel.active {\n            display: block;\n        }\n\n        @keyframes magFadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n\n        .mag-search-card {\n            background: white;\n            border-radius: 20px;\n            padding: 1.25rem;\n            margin-bottom: 1.5rem;\n            box-shadow: 0 2px 12px rgba(0,0,0,0.05);\n            border: 1px solid rgba(212, 175, 55, 0.2);\n        }\n\n        .mag-room-selector {\n            display: grid;\n            grid-template-columns: 1fr;\n            gap: 1rem;\n            margin-bottom: 1.5rem;\n        }\n\n        .mag-room-type {\n            background: #f8f9fa;\n            border-radius: 16px;\n            padding: 1rem;\n            transition: all 0.2s ease;\n            border: 1px solid #e9ecef;\n        }\n\n        .mag-room-type-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 0.75rem;\n            flex-wrap: wrap;\n            gap: 0.5rem;\n        }\n\n        .mag-room-name {\n            font-weight: 700;\n            font-size: 1rem;\n            color: #1a1a2e;\n        }\n\n        .mag-room-badge {\n            font-size: 0.65rem;\n            background: #e9ecef;\n            padding: 0.2rem 0.6rem;\n            border-radius: 20px;\n            color: #6c757d;\n        }\n\n        .mag-room-desc {\n            font-size: 0.75rem;\n            color: #6c757d;\n            margin-bottom: 0.75rem;\n            line-height: 1.3;\n        }\n\n        .mag-room-controls {\n            display: flex;\n            align-items: center;\n            gap: 1rem;\n            justify-content: space-between;\n        }\n\n        .mag-room-counter {\n            display: flex;\n            align-items: center;\n            gap: 0.5rem;\n            background: white;\n            border-radius: 40px;\n            padding: 0.2rem;\n            border: 1px solid #e9ecef;\n        }\n\n        .mag-counter-btn {\n            width: 28px;\n            height: 28px;\n            border-radius: 50%;\n            border: none;\n            background: #f8f9fa;\n            color: #d4af37;\n            font-size: 1rem;\n            font-weight: bold;\n            cursor: pointer;\n            transition: all 0.2s ease;\n        }\n\n        .mag-counter-value {\n            min-width: 35px;\n            text-align: center;\n            font-weight: 600;\n            font-size: 1rem;\n        }\n\n        .mag-room-available {\n            font-size: 0.75rem;\n            color: #28a745;\n            font-weight: 500;\n        }\n\n        .mag-date-range {\n            display: flex;\n            flex-direction: column;\n            gap: 0.75rem;\n            margin-bottom: 1.25rem;\n        }\n\n        .mag-date-group {\n            width: 100%;\n        }\n\n        .mag-date-group label {\n            display: block;\n            font-size: 0.75rem;\n            font-weight: 600;\n            text-transform: uppercase;\n            letter-spacing: 0.5px;\n            color: #d4af37;\n            margin-bottom: 0.4rem;\n        }\n\n        .mag-date-group input {\n            width: 100%;\n            padding: 0.7rem 0.875rem;\n            border: 2px solid #e9ecef;\n            border-radius: 14px;\n            font-size: 0.9rem;\n            font-family: inherit;\n            transition: all 0.2s ease;\n        }\n\n        .mag-btn-search {\n            background: linear-gradient(135deg, #d4af37 0%, #b8942e 100%);\n            color: white;\n            border: none;\n            padding: 0.7rem 1.5rem;\n            border-radius: 14px;\n            font-size: 0.9rem;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            width: 100%;\n            margin-top: 0.5rem;\n        }\n\n        .mag-results-header {\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            margin-bottom: 1.25rem;\n            gap: 0.5rem;\n            text-align: center;\n        }\n\n        .mag-results-title {\n            font-size: 1.1rem;\n            font-weight: 700;\n            color: #1a1a2e;\n        }\n\n        .mag-results-count {\n            color: #6c757d;\n            font-size: 0.8rem;\n        }\n\n        .mag-mobile-list {\n            display: flex;\n            flex-direction: column;\n            gap: 1rem;\n            margin-bottom: 1.5rem;\n        }\n\n        .mag-date-card {\n            background: white;\n            border-radius: 16px;\n            padding: 1rem;\n            box-shadow: 0 2px 8px rgba(0,0,0,0.05);\n            border: 1px solid #e9ecef;\n            transition: all 0.2s ease;\n        }\n\n        .mag-date-card.available-match {\n            background: #e8f5e9;\n            border-color: #28a745;\n        }\n\n        .mag-date-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 0.75rem;\n            padding-bottom: 0.5rem;\n            border-bottom: 2px solid #f0f0f0;\n        }\n\n        .mag-date-display {\n            font-size: 1rem;\n            font-weight: 700;\n            color: #1a1a2e;\n        }\n\n        .mag-match-badge {\n            background: #28a745;\n            color: white;\n            font-size: 0.7rem;\n            padding: 0.2rem 0.6rem;\n            border-radius: 20px;\n            font-weight: 500;\n        }\n\n        .mag-rooms-grid {\n            display: grid;\n            grid-template-columns: 1fr 1fr;\n            gap: 0.6rem;\n        }\n\n        .mag-room-item {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            background: #f8f9fa;\n            padding: 0.5rem 0.75rem;\n            border-radius: 12px;\n        }\n\n        .mag-room-item-name {\n            font-size: 0.8rem;\n            font-weight: 600;\n            color: #495057;\n        }\n\n        .mag-room-item-count {\n            font-weight: 700;\n            padding: 0.2rem 0.5rem;\n            border-radius: 8px;\n            font-size: 0.8rem;\n        }\n\n        .mag-room-item-count.available {\n            color: #28a745;\n            background: #e8f5e9;\n        }\n\n        .mag-room-item-count.limited {\n            color: #ffc107;\n            background: #fff3e0;\n        }\n\n        .mag-room-item-count.full {\n            color: #dc3545;\n            background: #ffebee;\n        }\n\n        .mag-book-btn {\n            display: block;\n            width: 100%;\n            padding: 0.8rem;\n            background: linear-gradient(135deg, #d4af37 0%, #b8942e 100%);\n            color: white;\n            text-align: center;\n            text-decoration: none;\n            border-radius: 16px;\n            font-size: 0.9rem;\n            font-weight: 600;\n            transition: all 0.2s ease;\n            border: none;\n            cursor: pointer;\n            margin-top: 0;\n        }\n\n        .mag-book-btn:hover {\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);\n        }\n\n        .mag-booking-modal {\n            display: none;\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background: rgba(0,0,0,0.5);\n            z-index: 1000;\n            justify-content: center;\n            align-items: center;\n        }\n\n        .mag-booking-modal.active {\n            display: flex;\n        }\n\n        .mag-booking-options {\n            background: white;\n            border-radius: 28px;\n            padding: 1.5rem;\n            max-width: 350px;\n            width: 90%;\n            text-align: center;\n        }\n\n        .mag-booking-options h3 {\n            font-size: 1.3rem;\n            color: #1a1a2e;\n            margin-bottom: 0.5rem;\n        }\n\n        .mag-booking-options p {\n            color: #6c757d;\n            margin-bottom: 1.25rem;\n            font-size: 0.85rem;\n            white-space: pre-line;\n        }\n\n        .mag-booking-buttons {\n            display: flex;\n            flex-direction: column;\n            gap: 0.75rem;\n        }\n\n        .mag-booking-btn {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 0.6rem;\n            padding: 0.8rem;\n            border-radius: 16px;\n            text-decoration: none;\n            font-weight: 600;\n            font-size: 0.9rem;\n        }\n\n        .mag-booking-btn.whatsapp {\n            background: #25D366;\n            color: white;\n        }\n\n        .mag-booking-btn.email {\n            background: #EA4335;\n            color: white;\n        }\n\n        .mag-booking-btn.form {\n            background: linear-gradient(135deg, #d4af37 0%, #b8942e 100%);\n            color: white;\n        }\n\n        .mag-booking-close {\n            margin-top: 0.75rem;\n            padding: 0.6rem;\n            background: #f8f9fa;\n            border: none;\n            border-radius: 14px;\n            cursor: pointer;\n            color: #6c757d;\n            font-weight: 500;\n            width: 100%;\n        }\n\n        .mag-no-data {\n            text-align: center;\n            padding: 2rem;\n            color: #6c757d;\n        }\n\n        .mag-loading {\n            text-align: center;\n            padding: 2rem;\n            color: #d4af37;\n            font-weight: 500;\n        }\n\n        .mag-footer {\n            text-align: center;\n            margin-top: 1.5rem;\n            padding: 1rem;\n            color: #6c757d;\n            font-size: 0.7rem;\n        }\n\n        .mag-disclaimer {\n            text-align: center;\n            margin-top: 0.5rem;\n            margin-bottom: 1rem;\n            padding: 0.6rem;\n            font-size: 0.7rem;\n            color: #856404;\n            background: #fff3cd;\n            border-radius: 12px;\n            border-left: 4px solid #ffc107;\n        }\n\n        \/* Toast Notification *\/\n        .mag-toast {\n            position: fixed;\n            bottom: 20px;\n            left: 50%;\n            transform: translateX(-50%);\n            background: #28a745;\n            color: white;\n            padding: 12px 24px;\n            border-radius: 40px;\n            font-size: 0.85rem;\n            font-weight: 500;\n            box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n            z-index: 1001;\n            animation: slideUp 0.3s ease;\n            white-space: nowrap;\n        }\n\n        .mag-toast.error {\n            background: #dc3545;\n        }\n\n        @keyframes slideUp {\n            from {\n                opacity: 0;\n                transform: translateX(-50%) translateY(20px);\n            }\n            to {\n                opacity: 1;\n                transform: translateX(-50%) translateY(0);\n            }\n        }\n\n        @media (min-width: 769px) {\n            .mag-availability-wrapper {\n                padding: 2rem;\n            }\n            \n            .mag-date-range {\n                flex-direction: row;\n                align-items: flex-end;\n            }\n            \n            .mag-date-group {\n                flex: 1;\n            }\n            \n            .mag-btn-search {\n                margin-top: 0;\n            }\n            \n            .mag-room-selector {\n                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n            }\n            \n            .mag-rooms-grid {\n                grid-template-columns: repeat(3, 1fr);\n            }\n        }\n    <\/style>\n\n\n    <!-- Booking Modal -->\n    <div class=\"mag-booking-modal\" id=\"bookingModal\">\n        <div class=\"mag-booking-options\">\n            <h3>\ud83d\udcc5 Book Your Stay<\/h3>\n            <p id=\"bookingDetails\">Choose your preferred contact method<\/p>\n            <div class=\"mag-booking-buttons\">\n                <a href=\"#\" class=\"mag-booking-btn whatsapp\" id=\"whatsappBtn\">\n                    \ud83d\udcac WhatsApp\n                <\/a>\n                <a href=\"#\" class=\"mag-booking-btn email\" id=\"emailBtn\">\n                    \ud83d\udce7 Email\n                <\/a>\n                <a href=\"#\" class=\"mag-booking-btn form\" id=\"formBtn\">\n                    \ud83d\udcdd Contact Form\n                <\/a>\n            <\/div>\n            <button class=\"mag-booking-close\" onclick=\"closeBookingModal()\">Cancel<\/button>\n        <\/div>\n    <\/div>\n\n    <!-- Header -->\n    <div style=\"text-align: center; margin-bottom: 0.5rem;\">\n        <div style=\"font-size: 1.6rem; font-weight: 700; background: linear-gradient(135deg, #d4af37 0%, #f5e7a3 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;\">Magnificat Center<\/div>\n        <div style=\"color: #6c757d; margin-top: 0.3rem; font-size: 0.85rem;\">Check Availability &amp; Book Your Stay<\/div>\n    <\/div>\n\n    <div class=\"mag-disclaimer\">\n        \u26a0\ufe0f Please note that the data is informational only and might not be 100% accurate!\n    <\/div>\n\n    <!-- Tabs - Search by Rooms first, General second -->\n    <div class=\"mag-tabs\">\n        <div class=\"mag-tab active\" data-tab=\"rooms\">\ud83c\udfe8 Search by Rooms<\/div>\n        <div class=\"mag-tab\" data-tab=\"general\">\ud83d\udcc5 Check Availability For Groups<\/div>\n    <\/div>\n\n    <!-- Search by Rooms Panel (active first) -->\n    <div class=\"mag-panel active\" id=\"roomsPanel\">\n        <div class=\"mag-search-card\">\n            <div class=\"mag-room-selector\">\n                <div class=\"mag-room-type\">\n                    <div class=\"mag-room-type-header\">\n                        <span class=\"mag-room-name\">\ud83d\udecf\ufe0f Double Room<\/span>\n                        <span class=\"mag-room-badge\">Double<\/span>\n                    <\/div>\n                    <div class=\"mag-room-desc\">Comfortable double room with all amenities<\/div>\n                    <div class=\"mag-room-controls\">\n                        <div class=\"mag-room-counter\">\n                            <button class=\"mag-counter-btn\" onclick=\"updateRoomCount('double', -1)\">\u2212<\/button>\n                            <span class=\"mag-counter-value\" id=\"doubleCount\">0<\/span>\n                            <button class=\"mag-counter-btn\" onclick=\"updateRoomCount('double', 1)\">+<\/button>\n                        <\/div>\n                        <span class=\"mag-room-available\" id=\"doubleAvailable\">&#8212;<\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"mag-room-type\">\n                    <div class=\"mag-room-type-header\">\n                        <span class=\"mag-room-name\">\u267f Disabled People Room<\/span>\n                        <span class=\"mag-room-badge\">Double DDA<\/span>\n                    <\/div>\n                    <div class=\"mag-room-desc\">Specially designed for guests with disabilities<\/div>\n                    <div class=\"mag-room-controls\">\n                        <div class=\"mag-room-counter\">\n                            <button class=\"mag-counter-btn\" onclick=\"updateRoomCount('double_dda', -1)\">\u2212<\/button>\n                            <span class=\"mag-counter-value\" id=\"doubleDdaCount\">0<\/span>\n                            <button class=\"mag-counter-btn\" onclick=\"updateRoomCount('double_dda', 1)\">+<\/button>\n                        <\/div>\n                        <span class=\"mag-room-available\" id=\"doubleDdaAvailable\">&#8212;<\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"mag-room-type\">\n                    <div class=\"mag-room-type-header\">\n                        <span class=\"mag-room-name\">\ud83d\udc68\u200d\ud83d\udc69\u200d\ud83d\udc67 Triple Family Room<\/span>\n                        <span class=\"mag-room-badge\">Triple<\/span>\n                    <\/div>\n                    <div class=\"mag-room-desc\">Spacious room for up to 3 persons<\/div>\n                    <div class=\"mag-room-controls\">\n                        <div class=\"mag-room-counter\">\n                            <button class=\"mag-counter-btn\" onclick=\"updateRoomCount('triple', -1)\">\u2212<\/button>\n                            <span class=\"mag-counter-value\" id=\"tripleCount\">0<\/span>\n                            <button class=\"mag-counter-btn\" onclick=\"updateRoomCount('triple', 1)\">+<\/button>\n                        <\/div>\n                        <span class=\"mag-room-available\" id=\"tripleAvailable\">&#8212;<\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"mag-room-type\">\n                    <div class=\"mag-room-type-header\">\n                        <span class=\"mag-room-name\">\ud83c\udfe2 Apartment for 4<\/span>\n                        <span class=\"mag-room-badge\">App for 4<\/span>\n                    <\/div>\n                    <div class=\"mag-room-desc\">Spacious 4-person apartment<\/div>\n                    <div class=\"mag-room-controls\">\n                        <div class=\"mag-room-counter\">\n                            <button class=\"mag-counter-btn\" onclick=\"updateRoomCount('app4', -1)\">\u2212<\/button>\n                            <span class=\"mag-counter-value\" id=\"app4Count\">0<\/span>\n                            <button class=\"mag-counter-btn\" onclick=\"updateRoomCount('app4', 1)\">+<\/button>\n                        <\/div>\n                        <span class=\"mag-room-available\" id=\"app4Available\">&#8212;<\/span>\n                    <\/div>\n                <\/div>\n\n                <div class=\"mag-room-type\">\n                    <div class=\"mag-room-type-header\">\n                        <span class=\"mag-room-name\">\ud83c\udfe2 Apartment for 5<\/span>\n                        <span class=\"mag-room-badge\">App for 5<\/span>\n                    <\/div>\n                    <div class=\"mag-room-desc\">Deluxe 5-person apartment<\/div>\n                    <div class=\"mag-room-controls\">\n                        <div class=\"mag-room-counter\">\n                            <button class=\"mag-counter-btn\" onclick=\"updateRoomCount('app5', -1)\">\u2212<\/button>\n                            <span class=\"mag-counter-value\" id=\"app5Count\">0<\/span>\n                            <button class=\"mag-counter-btn\" onclick=\"updateRoomCount('app5', 1)\">+<\/button>\n                        <\/div>\n                        <span class=\"mag-room-available\" id=\"app5Available\">&#8212;<\/span>\n                    <\/div>\n                <\/div>\n            <\/div>\n\n            <div class=\"mag-date-range\">\n                <div class=\"mag-date-group\">\n                    <label>\ud83d\udcc5 CHECK-IN<\/label>\n                    <input type=\"date\" id=\"roomStartDate\">\n                <\/div>\n                <div class=\"mag-date-group\">\n                    <label>\ud83d\udcc5 CHECK-OUT<\/label>\n                    <input type=\"date\" id=\"roomEndDate\">\n                <\/div>\n                <div class=\"mag-date-group\">\n                    <button class=\"mag-btn-search\" onclick=\"roomSearch()\">\ud83d\udd0d SEARCH ROOMS<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div id=\"roomResults\"><\/div>\n    <\/div>\n\n    <!-- General Availability Panel -->\n    <div class=\"mag-panel\" id=\"generalPanel\">\n        <div class=\"mag-search-card\">\n            <div class=\"mag-date-range\">\n                <div class=\"mag-date-group\">\n                    <label>\ud83d\udcc5 CHECK-IN<\/label>\n                    <input type=\"date\" id=\"genStartDate\">\n                <\/div>\n                <div class=\"mag-date-group\">\n                    <label>\ud83d\udcc5 CHECK-OUT<\/label>\n                    <input type=\"date\" id=\"genEndDate\">\n                <\/div>\n                <div class=\"mag-date-group\">\n                    <button class=\"mag-btn-search\" onclick=\"generalSearch()\">\ud83d\udd0d CHECK AVAILABILITY<\/button>\n                <\/div>\n            <\/div>\n        <\/div>\n\n        <div id=\"generalResults\"><\/div>\n    <\/div>\n\n    <div class=\"mag-footer\">\n        <p>For inquiries and bookings, contact us at <strong>info@magnificat.center<\/strong><\/p>\n        <p style=\"margin-top: 0.3rem; font-size: 0.65rem;\">\u00a9 Magnificat Center &#8211; Your Sanctuary of Peace<\/p>\n    <\/div>\n<\/div>\n\n<script>\n\/\/ Room type display names\nconst roomNames = {\n    'double': 'Double',\n    'double_dda': 'Double DDA',\n    'triple': 'Triple',\n    'app4': 'App for 4',\n    'app5': 'App for 5'\n};\n\nconst fullRoomNames = {\n    'double': 'Double Room',\n    'double_dda': 'Disabled People Room',\n    'triple': 'Triple Family Room',\n    'app4': 'Apartment for 4',\n    'app5': 'Apartment for 5'\n};\n\nconst roomTypesList = ['double', 'double_dda', 'triple', 'app4', 'app5'];\nlet currentRoomRequests = {\n    double: 0,\n    double_dda: 0,\n    triple: 0,\n    app4: 0,\n    app5: 0\n};\n\nlet availabilityData = {};\nlet currentResultsData = {\n    dates: [],\n    startDate: null,\n    endDate: null,\n    type: 'general'\n};\n\n\/\/ API URL\nconst API_URL = 'https:\/\/magnificat.center\/api\/availability.php';\nconst WHATSAPP_NUMBER = '38763767145';\nconst CONTACT_FORM_URL = 'https:\/\/www.magnificat.center\/?page_id=12323&lang=en';\n\n\/\/ Toast notification\nfunction showToast(message, isError = false) {\n    const existingToast = document.querySelector('.mag-toast');\n    if (existingToast) existingToast.remove();\n    \n    const toast = document.createElement('div');\n    toast.className = 'mag-toast' + (isError ? ' error' : '');\n    toast.textContent = message;\n    document.body.appendChild(toast);\n    \n    setTimeout(() => {\n        toast.remove();\n    }, 4000);\n}\n\n\/\/ Validate dates\nfunction validateDates(startDate, endDate) {\n    if (!startDate || !endDate) {\n        showToast('Please select both dates', true);\n        return false;\n    }\n    if (startDate > endDate) {\n        showToast('End date cannot be before start date', true);\n        return false;\n    }\n    return true;\n}\n\n\/\/ Single Book Now button handler\nfunction handleBookNow() {\n    const activeTab = document.querySelector('.mag-tab.active').dataset.tab;\n    \n    if (activeTab === 'general') {\n        const startDate = document.getElementById('genStartDate').value;\n        const endDate = document.getElementById('genEndDate').value;\n        if (!startDate || !endDate) {\n            showToast('Please select dates first', true);\n            return;\n        }\n        openBookingModal(startDate, endDate, null, null, 'general');\n    } else {\n        const startDate = document.getElementById('roomStartDate').value;\n        const endDate = document.getElementById('roomEndDate').value;\n        if (!startDate || !endDate) {\n            showToast('Please select dates first', true);\n            return;\n        }\n        \n        const totalRooms = Object.values(currentRoomRequests).reduce((a, b) => a + b, 0);\n        if (totalRooms === 0) {\n            showToast('Please select at least one room', true);\n            return;\n        }\n        \n        const roomSummary = Object.entries(currentRoomRequests)\n            .filter(([_, count]) => count > 0)\n            .map(([type, count]) => `${count}x ${roomNames[type]}`)\n            .join(', ');\n        \n        openBookingModal(startDate, endDate, null, roomSummary, 'rooms');\n    }\n}\n\n\/\/ Booking Modal Functions\nfunction openBookingModal(checkIn, checkOut, date = null, rooms = null, bookingType = 'general') {\n    const formattedCheckIn = formatDisplayDate(checkIn);\n    const formattedCheckOut = formatDisplayDate(checkOut);\n    \n    const modal = document.getElementById('bookingModal');\n    const details = document.getElementById('bookingDetails');\n    \n    let detailsText = `Check-in: ${formattedCheckIn}\\nCheck-out: ${formattedCheckOut}`;\n    if (rooms) {\n        detailsText += `\\nRooms: ${rooms}`;\n    }\n    details.innerText = detailsText;\n    \n    let message = `Hello Magnificat Center,%0A%0A`;\n    message += `I would like to inquire about availability for:%0A`;\n    message += `Check-in: ${formattedCheckIn}%0A`;\n    message += `Check-out: ${formattedCheckOut}%0A`;\n    message += `Duration: ${calculateNights(formattedCheckIn, formattedCheckOut)} night(s)%0A%0A`;\n    \n    if (rooms) {\n        message += `Room request: ${rooms}%0A%0A`;\n    }\n    \n    message += `Please let me know availability and rates.%0A%0AThank you!`;\n    \n    const whatsappBtn = document.getElementById('whatsappBtn');\n    const emailBtn = document.getElementById('emailBtn');\n    const formBtn = document.getElementById('formBtn');\n    \n    whatsappBtn.href = `https:\/\/wa.me\/${WHATSAPP_NUMBER}?text=${message}`;\n    \n    const emailSubject = encodeURIComponent(`Booking Inquiry - ${formattedCheckIn} to ${formattedCheckOut}`);\n    const emailBody = message.replace(\/%0A\/g, '\\n');\n    emailBtn.href = `mailto:info@magnificat.center?subject=${emailSubject}&body=${encodeURIComponent(emailBody)}`;\n    \n    formBtn.href = CONTACT_FORM_URL;\n    \n    modal.classList.add('active');\n}\n\nfunction calculateNights(checkIn, checkOut) {\n    const [inDay, inMonth, inYear] = checkIn.split('.');\n    const [outDay, outMonth, outYear] = checkOut.split('.');\n    const inDate = new Date(inYear, inMonth - 1, inDay);\n    const outDate = new Date(outYear, outMonth - 1, outDay);\n    const diffTime = Math.abs(outDate - inDate);\n    return Math.ceil(diffTime \/ (1000 * 60 * 60 * 24));\n}\n\nfunction closeBookingModal() {\n    document.getElementById('bookingModal').classList.remove('active');\n}\n\ndocument.addEventListener('click', function(event) {\n    const modal = document.getElementById('bookingModal');\n    if (event.target === modal) closeBookingModal();\n});\n\n\/\/ Initialize\ndocument.addEventListener('DOMContentLoaded', function() {\n    const today = new Date();\n    const thirtyDaysLater = new Date();\n    thirtyDaysLater.setDate(today.getDate() + 30);\n    \n    document.getElementById('genStartDate').value = formatDate(today);\n    document.getElementById('genEndDate').value = formatDate(thirtyDaysLater);\n    document.getElementById('genStartDate').min = formatDate(today);\n    document.getElementById('genEndDate').min = formatDate(today);\n    \n    document.getElementById('roomStartDate').value = '';\n    document.getElementById('roomEndDate').value = '';\n    document.getElementById('roomStartDate').min = formatDate(today);\n    document.getElementById('roomEndDate').min = formatDate(today);\n    \n    const roomStart = document.getElementById('roomStartDate');\n    const roomEnd = document.getElementById('roomEndDate');\n    \nroomStart.addEventListener('change', function() {\n    if (roomStart.value) {\n        roomEnd.min = formatDate(new Date(new Date(roomStart.value).setDate(new Date(roomStart.value).getDate() + 1)));\n        if (roomEnd.value && roomStart.value > roomEnd.value) {\n            showToast('End date cannot be before start date', true);\n            roomEnd.value = '';\n        }\n    }\n});\n    \n    roomEnd.addEventListener('change', function() {\n        if (roomStart.value && roomStart.value > roomEnd.value) {\n            showToast('End date cannot be before start date', true);\n            roomEnd.value = '';\n        }\n    });\n    \n    document.querySelectorAll('.mag-tab').forEach(tab => {\n        tab.addEventListener('click', function() {\n            document.querySelectorAll('.mag-tab').forEach(t => t.classList.remove('active'));\n            document.querySelectorAll('.mag-panel').forEach(p => p.classList.remove('active'));\n            this.classList.add('active');\n            document.getElementById(this.dataset.tab + 'Panel').classList.add('active');\n            \n            if (this.dataset.tab === 'general') {\n                generalSearch();\n            } else {\n                if (document.getElementById('roomStartDate').value && document.getElementById('roomEndDate').value) {\n                    loadAvailabilityData();\n                }\n                updateRoomAvailabilityDisplay();\n            }\n        });\n    });\n    \n    generalSearch();\n});\n\nfunction formatDate(date) {\n    const year = date.getFullYear();\n    const month = String(date.getMonth() + 1).padStart(2, '0');\n    const day = String(date.getDate()).padStart(2, '0');\n    return `${year}-${month}-${day}`;\n}\n\nfunction formatDisplayDate(dateStr) {\n    const [year, month, day] = dateStr.split('-');\n    return `${day}.${month}.${year}`;\n}\n\nfunction getStatusClass(count) {\n    if (count === 0) return 'full';\n    if (count <= 2) return 'limited';\n    return 'available';\n}\n\nasync function loadAvailabilityData() {\n    const startDate = document.getElementById('roomStartDate').value;\n    const endDate = document.getElementById('roomEndDate').value;\n    if (!startDate || !endDate) return;\n    \n    try {\n        const response = await fetch(`${API_URL}?start=${startDate}&#038;end=${endDate}`);\n        const data = await response.json();\n        if (data.success) {\n            availabilityData = {};\n            data.data.forEach(day => { availabilityData[day.date] = day; });\n            updateRoomAvailabilityDisplay();\n        }\n    } catch (error) {\n        console.error('Error:', error);\n    }\n}\n\nfunction updateRoomAvailabilityDisplay() {\n    const startDate = document.getElementById('roomStartDate').value;\n    if (!startDate) {\n        roomTypesList.forEach(room => {\n            document.getElementById(`${room}Available`).innerHTML = '--';\n        });\n        return;\n    }\n    \n    const checkDate = formatDate(new Date(new Date(startDate).setDate(new Date(startDate).getDate() + 1)));\n    const dayData = availabilityData[checkDate];\n    \n    if (dayData) {\n        document.getElementById('doubleAvailable').innerHTML = dayData.double || 0;\n        document.getElementById('doubleDdaAvailable').innerHTML = dayData.double_dda || 0;\n        document.getElementById('tripleAvailable').innerHTML = dayData.triple || 0;\n        document.getElementById('app4Available').innerHTML = dayData.app4 || 0;\n        document.getElementById('app5Available').innerHTML = dayData.app5 || 0;\n    } else {\n        roomTypesList.forEach(room => {\n            document.getElementById(`${room}Available`).innerHTML = '--';\n        });\n    }\n}\n\nfunction updateRoomCount(roomType, delta) {\n    const newCount = Math.max(0, currentRoomRequests[roomType] + delta);\n    currentRoomRequests[roomType] = newCount;\n    document.getElementById(`${roomType}Count`).innerHTML = newCount;\n}\n\nasync function generalSearch() {\n    const startDate = document.getElementById('genStartDate').value;\n    const endDate = document.getElementById('genEndDate').value;\n    if (!validateDates(startDate, endDate)) return;\n    \n    const resultsDiv = document.getElementById('generalResults');\n    resultsDiv.innerHTML = '<div class=\"mag-loading\">Loading availability data...<\/div>';\n    \n    try {\n        const response = await fetch(`${API_URL}?start=${startDate}&end=${endDate}`);\n        const data = await response.json();\n        if (data.success) {\n            renderGeneralResults(data, startDate, endDate);\n        } else {\n            throw new Error(data.message);\n        }\n    } catch (error) {\n        resultsDiv.innerHTML = '<div class=\"mag-no-data\">Unable to load availability data. Please try again later.<\/div>';\n    }\n}\n\nfunction renderGeneralResults(data, globalStartDate, globalEndDate) {\n    const resultsDiv = document.getElementById('generalResults');\n    const availabilityDataList = data.data || [];\n    \n    if (availabilityDataList.length === 0) {\n        resultsDiv.innerHTML = '<div class=\"mag-no-data\">No availability for selected dates<\/div>';\n        return;\n    }\n    \n    const availabilityMap = {};\n    availabilityDataList.forEach(day => { availabilityMap[day.date] = day; });\n    \n    const startDate = new Date(data.start_date);\n    const endDate = new Date(data.end_date);\n    let currentDate = new Date(startDate);\n    \n    let html = `<div class=\"mag-mobile-list\">`;\n    \n    while (currentDate < endDate) {\n        const dateStr = formatDate(currentDate);\n        const displayDate = formatDisplayDate(dateStr);\n        const dayData = availabilityMap[dateStr];\n        \n        let totalRooms = 0;\n        if (dayData) {\n            totalRooms = roomTypesList.reduce((sum, type) => sum + (dayData[type] || 0), 0);\n        }\n        \n        const statusColor = totalRooms === 0 ? '#dc3545' : totalRooms <= 3 ? '#ffc107' : '#28a745';\n        const statusBg    = totalRooms === 0 ? '#ffebee' : totalRooms <= 3 ? '#fff3e0' : '#e8f5e9';\n        \n        html += `\n            <div class=\"mag-date-card\" style=\"display:flex; justify-content:space-between; align-items:center; padding: 0.75rem 1rem;\">\n                <span class=\"mag-date-display\">\ud83d\udcc5 ${displayDate}<\/span>\n                <span style=\"\n                    font-weight: 700;\n                    font-size: 0.95rem;\n                    color: ${statusColor};\n                    background: ${statusBg};\n                    padding: 0.3rem 0.9rem;\n                    border-radius: 20px;\n                    white-space: nowrap;\n                \">\n                    ${dayData ? `${totalRooms} rooms` : '\u2014'}\n                <\/span>\n            <\/div>\n        `;\n        \n        currentDate.setDate(currentDate.getDate() + 1);\n    }\n    \n    html += `<\/div>`;\n    html += `<button class=\"mag-book-btn\" onclick=\"handleBookNow()\">\ud83d\udcc5 Book Now<\/button>`;\n    resultsDiv.innerHTML = html;\n}\n\nasync function roomSearch() {\n    const startDate = document.getElementById('roomStartDate').value;\n    const endDate = document.getElementById('roomEndDate').value;\n    if (!validateDates(startDate, endDate)) return;\n    \n    const totalRooms = Object.values(currentRoomRequests).reduce((a, b) => a + b, 0);\n    if (totalRooms === 0) {\n        showToast('Please select at least one room', true);\n        return;\n    }\n    \n    const resultsDiv = document.getElementById('roomResults');\n    resultsDiv.innerHTML = '<div class=\"mag-loading\">Searching for available rooms...<\/div>';\n    \n    try {\n        const response = await fetch(`${API_URL}?start=${startDate}&end=${endDate}`);\n        const data = await response.json();\n        if (data.success) {\n            renderRoomResults(data, startDate, endDate);\n        } else {\n            throw new Error(data.message);\n        }\n    } catch (error) {\n        resultsDiv.innerHTML = '<div class=\"mag-no-data\">Unable to search. Please try again later.<\/div>';\n    }\n}\n\nfunction renderRoomResults(data, globalStartDate, globalEndDate) {\n    const resultsDiv = document.getElementById('roomResults');\n    const availabilityDataList = data.data || [];\n    \n    if (availabilityDataList.length === 0) {\n        resultsDiv.innerHTML = '<div class=\"mag-no-data\">No availability for selected dates<\/div>';\n        return;\n    }\n    \n    const availabilityMap = {};\n    availabilityDataList.forEach(day => { availabilityMap[day.date] = day; });\n    \n    const startDate = new Date(data.start_date);\n    const endDate = new Date(data.end_date);\n    let currentDate = new Date(startDate);\n    let matchCount = 0;\n    \n    const allDates = [];\n    while (currentDate < endDate) {\n        const dateStr = formatDate(currentDate);\n        const dayData = availabilityMap[dateStr];\n        let isMatch = false;\n        \n        if (dayData) {\n            isMatch = true;\n            for (const [roomType, requested] of Object.entries(currentRoomRequests)) {\n                if (requested > 0 && (dayData[roomType] || 0) < requested) {\n                    isMatch = false;\n                    break;\n                }\n            }\n            if (isMatch) matchCount++;\n        }\n        \n        allDates.push({\n            date: dateStr,\n            displayDate: formatDisplayDate(dateStr),\n            data: dayData,\n            isMatch: isMatch\n        });\n        currentDate.setDate(currentDate.getDate() + 1);\n    }\n    \n    let html = `\n        <div class=\"mag-results-header\">\n            <div class=\"mag-results-title\">\ud83c\udfe8 Room Search Results<\/div>\n            <div class=\"mag-results-count\">${matchCount} days match your criteria<\/div>\n        <\/div>\n        <div class=\"mag-mobile-list\">\n    `;\n    \n    allDates.forEach(dateInfo => {\n        const matchClass = dateInfo.isMatch ? 'available-match' : '';\n        const hasData = dateInfo.data !== null;\n        \n        html += `<div class=\"mag-date-card ${matchClass}\">`;\n        html += `<div class=\"mag-date-header\">`;\n        html += `<span class=\"mag-date-display\">\ud83d\udcc5 ${dateInfo.displayDate}<\/span>`;\n        if (dateInfo.isMatch) html += `<span class=\"mag-match-badge\">\u2713 Available<\/span>`;\n        html += `<\/div>`;\n        \n        if (hasData && dateInfo.data) {\n            const rooms = dateInfo.data;\n            html += `<div class=\"mag-rooms-grid\">`;\n            \n            for (const [roomType, requested] of Object.entries(currentRoomRequests)) {\n                if (requested > 0) {\n                    const available = rooms[roomType] || 0;\n                    const statusClass = available >= requested ? 'available' : 'full';\n                    const displayName = roomNames[roomType];\n                    \n                    html += `\n                        <div class=\"mag-room-item\">\n                            <span class=\"mag-room-item-name\">${displayName} (${requested})<\/span>\n                            <span class=\"mag-room-item-count ${statusClass}\">${available}<\/span>\n                        <\/div>\n                    `;\n                }\n            }\n            \n            html += `<\/div>`;\n            if (!dateInfo.isMatch && dateInfo.data) {\n                html += `<div style=\"text-align: center; margin-top: 0.6rem; font-size: 0.7rem; color: #dc3545;\">\u274c Not enough rooms<\/div>`;\n            }\n        } else {\n            html += `<div style=\"text-align: center; color: #999; padding: 1rem;\">No data<\/div>`;\n        }\n        \n        html += `<\/div>`;\n    });\n    \n    html += `<\/div>`;\n    html += `<button class=\"mag-book-btn\" onclick=\"handleBookNow()\">\ud83d\udcc5 Book Now<\/button>`;\n    resultsDiv.innerHTML = html;\n}\n\ndocument.getElementById('roomStartDate')?.addEventListener('change', loadAvailabilityData);\ndocument.getElementById('roomEndDate')?.addEventListener('change', loadAvailabilityData);\n<\/script>\n\n\n\n<div class=\"minimal-profile-box\">\n    <a href=\"mailto:igor.pintaric@yandex.com\" class=\"profile-card\">\n        <img decoding=\"async\" src=\"https:\/\/magnificat.center\/360.webp\" alt=\"Logo\" class=\"subtle-logo\">\n        <div class=\"id-frame\">\n            Powered by \u00a9360 &#8211; Click to contact\n        <\/div>\n    <\/a>\n<\/div>\n\n<style>\n\/* Reset and Container *\/\n.minimal-profile-box {\n    display: flex;\n    justify-content: center;\n    padding: 20px;\n    background-color: #ffffff;\n}\n\n\/* The Link Wrapper *\/\n.profile-card {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-decoration: none;\n    transition: transform 0.3s ease;\n    gap: 8px; \/* Tight spacing between logo and ID *\/\n}\n\n\/* Subtle Floating Animation (No Rotation) *\/\n.subtle-logo {\n    width: 80px; \/* Adjusted size for subtlety *\/\n    height: auto;\n    border-radius: 50%;\n    animation: float-y 4s ease-in-out infinite;\n}\n\n@keyframes float-y {\n    0%, 100% { transform: translateY(0px); }\n    50% { transform: translateY(-5px); }\n}\n\n\/* ID in a Rounded Frame *\/\n.id-frame {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n    font-size: 13px;\n    color: #555;\n    padding: 6px 16px;\n    border: 1.5px solid #eaeaea;\n    border-radius: 20px; \/* Fully rounded corners *\/\n    transition: all 0.3s ease;\n    background-color: transparent;\n}\n\n\/* Hover Interaction: Subtle Expansion *\/\n.profile-card:hover {\n    transform: scale(1.05);\n}\n\n.profile-card:hover .id-frame {\n    border-color: #000;\n    color: #000;\n    background-color: #fcfcfc;\n    box-shadow: 0 4px 10px rgba(0,0,0,0.05);\n}\n\n\/* Stop float animation on hover for a stable click *\/\n.profile-card:hover .subtle-logo {\n    animation-play-state: paused;\n}\n<\/style>\n","protected":false},"excerpt":{"rendered":"<p>Check Availability Check availability for individual or group reservations. \ud83d\udcc5 Book Your Stay Choose your preferred contact method \ud83d\udcac WhatsApp \ud83d\udce7 Email \ud83d\udcdd Contact Form Cancel Magnificat Center Check Availability &amp; Book Your Stay \u26a0\ufe0f Please note that the data is informational only and might not be 100% accurate! \ud83c\udfe8 Search by Rooms \ud83d\udcc5 Check [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":15285,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12432","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/pages\/12432","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.magnificat.center\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12432"}],"version-history":[{"count":42,"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/pages\/12432\/revisions"}],"predecessor-version":[{"id":16419,"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/pages\/12432\/revisions\/16419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.magnificat.center\/index.php?rest_route=\/wp\/v2\/media\/15285"}],"wp:attachment":[{"href":"https:\/\/www.magnificat.center\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12432"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}