{"id":2599,"date":"2023-05-22T06:16:55","date_gmt":"2023-05-22T06:16:55","guid":{"rendered":"https:\/\/www.gazebo.ae\/ar\/?page_id=2599"},"modified":"2026-02-24T09:58:53","modified_gmt":"2026-02-24T09:58:53","slug":"locations","status":"publish","type":"page","link":"https:\/\/www.gazebo.ae\/ar\/locations\/","title":{"rendered":"Locations"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2599\" class=\"elementor elementor-2599\">\n\t\t\t\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-41be2fc elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"41be2fc\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-5f8457c\" data-id=\"5f8457c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-222f61b elementor-widget elementor-widget-spacer\" data-id=\"222f61b\" data-element_type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.13.2 - 11-05-2023 *\/\n.elementor-column .elementor-spacer-inner{height:var(--spacer-size)}.e-con{--container-widget-width:100%}.e-con-inner>.elementor-widget-spacer,.e-con>.elementor-widget-spacer{width:var(--container-widget-width,var(--spacer-size));--align-self:var(--container-widget-align-self,initial);--flex-shrink:0}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container,.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer,.e-con>.elementor-widget-spacer>.elementor-widget-container,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer{height:100%}.e-con-inner>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner,.e-con>.elementor-widget-spacer>.elementor-widget-container>.elementor-spacer>.elementor-spacer-inner{height:var(--container-widget-height,var(--spacer-size))}<\/style>\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-872a1fb elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"872a1fb\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-936a72c\" data-id=\"936a72c\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-element elementor-element-d0901d8 elementor-widget elementor-widget-html\" data-id=\"d0901d8\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<div id=\"gazebo-store-locator-root\" dir=\"rtl\">\n    <!-- \n    GAZEBO STORE LOCATOR (ARABIC) - WORDPRESS EMBED CODE\n    Paste this entire block into a 'Custom HTML' block in WordPress.\n    -->\n\n    <!-- STYLES -->\n    <style>\n        .modal-overlay * {\n            box-sizing: border-box;\n        }\n        \/* Reset for standalone\/iframe viewing *\/\n        html,\n        body {\n            margin: 0;\n            padding: 0;\n            height: auto !important;\n            min-height: 100%;\n            overflow: auto !important;\n            -webkit-overflow-scrolling: touch;\n        }\n\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@300;400;600&family=Playfair+Display:wght@700&family=Noto+Sans+Arabic:wght@300;400;600;700&display=swap');\n\n        #gazebo-store-locator-root {\n            --primary-color: #640e00;\n            --accent-color: #c5a059;\n            --text-color: #333;\n            --bg-color: #fdfcf9;\n            --sidebar-width: 450px;\n            --mobile-font-scale: 1.1;\n            --card-bg: #ffffff;\n            --shadow: 0 10px 30px rgba(0, 0, 0, 0.05);\n            font-family: 'Noto Sans Arabic', 'Outfit', sans-serif;\n            color: var(--text-color);\n            background: var(--bg-color);\n            margin: 20px 0;\n            border-radius: 12px;\n            overflow: hidden;\n            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n            -webkit-font-smoothing: antialiased;\n            direction: rtl;\n        }\n\n        @media (max-width: 600px) {\n            #gazebo-store-locator-root {\n                margin: 0;\n                border-radius: 0;\n                box-shadow: none;\n                overflow: visible !important;\n            }\n        }\n\n        #gazebo-store-locator-root * {\n            box-sizing: border-box;\n        }\n\n        .app-container {\n            display: flex;\n            height: 900px;\n            width: 100%;\n        }\n\n        .sidebar {\n            width: var(--sidebar-width);\n            height: 100%;\n            overflow-y: auto;\n            background: white;\n            box-shadow: -2px 0 20px rgba(0, 0, 0, 0.05);\n            z-index: 10;\n            display: flex;\n            flex-direction: column;\n        }\n\n        .sidebar-header {\n            padding: 25px;\n            background: var(--bg-color);\n            border-bottom: 1px solid #eee;\n        }\n\n        .logo-container h1 {\n            font-family: 'Noto Sans Arabic', 'Playfair Display', serif;\n            font-size: 24px;\n            color: var(--primary-color);\n            margin-bottom: 20px;\n        }\n\n        .search-controls {\n            display: flex;\n            flex-direction: column;\n            gap: 12px;\n        }\n\n        .search-input-wrapper {\n            position: relative;\n            display: flex;\n            align-items: center;\n        }\n\n        .search-input-wrapper input {\n            width: 100%;\n            padding: 12px 15px 12px 40px;\n            border: 1px solid #ddd !important;\n            border-radius: 8px !important;\n            font-size: 14px;\n            text-align: right;\n        }\n\n        .search-icon {\n            position: absolute;\n            left: 15px;\n            right: auto;\n            color: #888;\n        }\n\n        .action-buttons {\n            display: flex;\n            gap: 10px;\n        }\n\n        .btn {\n            flex: 1;\n            padding: 12px;\n            border-radius: 8px;\n            border: 1px solid #ddd;\n            background: white;\n            cursor: pointer;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n            font-size: 14px;\n            font-weight: 600;\n            transition: all 0.2s;\n        }\n\n        .btn:active {\n            transform: scale(0.98);\n        }\n\n        .btn.active {\n            background: var(--primary-color);\n            color: white;\n            border-color: var(--primary-color);\n        }\n\n        .filters-row {\n            display: flex;\n            gap: 8px;\n        }\n\n        .filters-row select {\n            flex: 1;\n            padding: 8px;\n            border: 1px solid #ddd;\n            border-radius: 4px;\n            font-size: 12px;\n            text-align: right;\n        }\n\n        .results-container {\n            flex: 1;\n            padding: 15px;\n        }\n\n        .store-card {\n            background: var(--card-bg);\n            border-radius: 12px;\n            overflow: hidden;\n            margin-bottom: 20px;\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);\n            border: 1px solid #eee;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            text-align: right;\n        }\n\n        .store-card:hover {\n            transform: translateY(-5px);\n            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);\n        }\n\n        .store-image-container {\n            width: 100%;\n            aspect-ratio: 16 \/ 7;\n            overflow: hidden;\n            position: relative;\n        }\n\n        .store-image {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n\n        .store-info {\n            padding: 15px;\n        }\n\n        .store-name {\n            font-family: 'Noto Sans Arabic', 'Playfair Display', serif;\n            font-size: 18px;\n            color: var(--primary-color);\n            margin-bottom: 5px;\n        }\n\n        .store-distance {\n            display: inline-block;\n            padding: 2px 6px;\n            background: #f0f7f1;\n            color: #2d6a4f;\n            font-size: 11px;\n            border-radius: 4px;\n            margin-bottom: 10px;\n        }\n\n        .store-detail {\n            display: flex;\n            gap: 8px;\n            margin-bottom: 6px;\n            font-size: 13px;\n            color: #666;\n            align-items: center;\n        }\n\n        .store-detail i {\n            color: var(--accent-color);\n        }\n\n        .book-btn {\n            display: block;\n            width: 100%;\n            padding: 10px;\n            background: var(--primary-color);\n            color: white !important;\n            text-align: center;\n            text-decoration: none !important;\n            border-radius: 6px;\n            font-weight: 600;\n            margin-top: 10px;\n            box-sizing: border-box;\n        }\n\n        .map-wrapper {\n            flex: 1;\n            background: #e5e3df;\n        }\n\n        .opening-soon-badge {\n            position: absolute;\n            top: 10px;\n            left: 10px;\n            right: auto;\n            background: #640e00;\n            color: white;\n            padding: 5px 12px;\n            border-radius: 4px;\n            font-size: 13px;\n            font-weight: 600;\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);\n            z-index: 5;\n        }\n\n        #map-canvas {\n            width: 100%;\n            height: 100%;\n        }\n\n        \/* Modal Styles *\/\n        .modal-overlay {\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.7);\n            z-index: 999999;\n            justify-content: center;\n            align-items: center;\n            backdrop-filter: blur(5px);\n            padding: 20px;\n            box-sizing: border-box;\n            overflow-y: auto;\n            \/* Re-defining variables for body-level scope *\/\n            --primary-color: #640e00;\n            --accent-color: #c5a059;\n            font-family: 'Outfit', sans-serif;\n        }\n\n        .modal-content {\n            background: white;\n            width: 90%;\n            max-width: 500px;\n            border-radius: 15px;\n            overflow: hidden;\n            position: relative;\n            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);\n            animation: modalSlideUp 0.3s ease-out;\n            text-align: right;\n        }\n\n        @keyframes modalSlideUp {\n            from {\n                transform: translateY(30px);\n                opacity: 0;\n            }\n\n            to {\n                transform: translateY(0);\n                opacity: 1;\n            }\n        }\n\n        .modal-close {\n            position: absolute;\n            top: 15px;\n            left: 15px;\n            right: auto;\n            width: 30px;\n            height: 30px;\n            background: white;\n            border-radius: 50%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            cursor: pointer;\n            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n            z-index: 10;\n        }\n\n        .modal-image {\n            width: 100%;\n            height: 250px;\n            object-fit: cover;\n        }\n\n        .modal-body {\n            padding: 25px;\n        }\n\n        .modal-title {\n            font-family: 'Noto Sans Arabic', 'Playfair Display', serif;\n            font-size: 28px;\n            color: var(--primary-color);\n            margin-bottom: 10px;\n        }\n\n        .modal-info-row {\n            display: flex;\n            gap: 12px;\n            margin-bottom: 15px;\n            font-size: 15px;\n            line-height: 1.4;\n        }\n\n        .modal-info-row i {\n            color: var(--accent-color);\n            width: 20px;\n            text-align: center;\n            margin-top: 3px;\n        }\n\n        .modal-book-btn {\n            display: block;\n            width: 100%;\n            padding: 15px;\n            background: var(--primary-color);\n            color: white !important;\n            text-align: center;\n            text-decoration: none !important;\n            border-radius: 8px;\n            font-weight: 600;\n            font-size: 16px;\n            margin-top: 15px;\n        }\n\n        .modal-direction-btn {\n            display: block;\n            width: 100%;\n            padding: 15px;\n            background: #fff;\n            color: var(--primary-color) !important;\n            border: 2px solid var(--primary-color);\n            text-align: center;\n            text-decoration: none !important;\n            border-radius: 8px;\n            font-weight: 600;\n            font-size: 16px;\n            margin-top: 10px;\n        }\n\n        .marker-tooltip {\n            position: fixed;\n            background: #1f3530;\n            color: white;\n            padding: 6px 14px;\n            border-radius: 6px;\n            font-size: 14px;\n            font-weight: 600;\n            pointer-events: none;\n            z-index: 10000;\n            display: none;\n            transform: translate(-50%, calc(-100% - 15px));\n            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);\n            white-space: nowrap;\n            font-family: 'Noto Sans Arabic', sans-serif;\n            direction: rtl;\n        }\n\n        @media (max-width: 991px) {\n            .app-container {\n                flex-direction: column;\n                height: auto;\n            }\n\n            .sidebar {\n                width: 100%;\n                height: auto;\n                overflow: visible;\n                order: 1;\n                flex: none;\n            }\n\n            .sidebar-header {\n                padding: 30px 20px;\n                background: white;\n            }\n\n            .logo-container h1 {\n                font-size: 30px;\n                text-align: center;\n                margin-bottom: 25px;\n                line-height: 1.2;\n            }\n\n            .search-input-wrapper input {\n                font-size: 16px;\n                padding: 12px 15px 12px 40px;\n                height: 50px;\n            }\n\n            .btn {\n                padding: 15px;\n                font-size: 15px;\n            }\n\n            .action-buttons {\n                flex-direction: column;\n                gap: 12px;\n                width: 100%;\n                max-width: 400px;\n                margin: 0 auto;\n            }\n\n            .search-input-wrapper {\n                width: 100%;\n                max-width: 400px;\n                margin: 0 auto;\n            }\n\n            .filters-row {\n                flex-direction: row;\n                gap: 10px;\n                width: 100%;\n                max-width: 400px;\n                margin: 10px auto 0;\n            }\n\n            .filters-row select {\n                height: 45px;\n                font-size: 15px;\n            }\n\n            .store-name {\n                font-size: 24px;\n                margin-bottom: 8px;\n            }\n\n            .store-detail {\n                font-size: 15px;\n                line-height: 1.4;\n                margin-bottom: 12px;\n            }\n\n            .results-container {\n                height: auto;\n                overflow-y: visible;\n                padding: 15px;\n            }\n\n            .book-btn {\n                font-size: 16px;\n                padding: 15px;\n                border-radius: 8px;\n            }\n\n            .no-res-text {\n                font-size: 14px !important;\n                padding: 15px !important;\n            }\n\n            .store-image-container {\n                aspect-ratio: 16 \/ 8;\n            }\n\n            .map-wrapper {\n                width: 100%;\n                height: 350px;\n                order: 2;\n                flex: none;\n                margin-top: 10px;\n            }\n\n            .opening-soon-badge {\n                font-size: 14px;\n                padding: 6px 14px;\n                top: 15px;\n                left: 15px;\n                border-radius: 6px;\n            }\n\n            .modal-content {\n                width: 90%;\n                max-width: 450px;\n                margin: auto;\n                border-radius: 15px;\n            }\n\n            .modal-image {\n                height: 220px;\n            }\n\n            .modal-body {\n                padding: 20px;\n            }\n\n            .modal-title {\n                font-size: 24px;\n                margin-bottom: 15px;\n            }\n\n            .modal-info-row {\n                font-size: 15px;\n                margin-bottom: 15px;\n                gap: 10px;\n            }\n\n            .modal-info-row i {\n                font-size: 16px;\n                width: 20px;\n            }\n\n            .modal-book-btn {\n                font-size: 16px;\n                padding: 15px;\n                border-radius: 8px;\n                margin-top: 15px;\n            }\n\n            .modal-direction-btn {\n                font-size: 16px;\n                padding: 15px;\n                border-radius: 8px;\n                margin-top: 10px;\n                border-width: 2px;\n            }\n\n            .store-distance {\n                font-size: 14px;\n                padding: 4px 10px;\n                margin-bottom: 15px;\n            }\n\n            .modal-close {\n                width: 34px;\n                height: 34px;\n                font-size: 18px;\n                top: 15px;\n                left: 15px;\n            }\n        }\n    <\/style>\n\n    <!-- CONTENT -->\n    <div class=\"app-container\">\n        <aside class=\"sidebar\">\n            <header class=\"sidebar-header\">\n                <div class=\"logo-container\">\n                    <h1>\u0627\u0628\u062d\u062b \u0639\u0646 \u0623\u0642\u0631\u0628 \u0641\u0631\u0639 \u063a\u0627\u0632\u064a\u0628\u0648<\/h1>\n                <\/div>\n                <div class=\"search-controls\">\n                    <div class=\"search-input-wrapper\">\n                        <input type=\"text\" id=\"locationSearch\" placeholder=\"\u0627\u0628\u062d\u062b \u0639\u0646 \u0627\u0644\u0645\u0646\u0637\u0642\u0629 \u0623\u0648 \u0627\u0644\u0645\u062f\u064a\u0646\u0629...\">\n                        <i class=\"fa-solid fa-magnifying-glass search-icon\"><\/i>\n                    <\/div>\n                    <div class=\"action-buttons\">\n                        <button class=\"btn\" id=\"useLocationBtn\">\n                            <i class=\"fa-solid fa-location-crosshairs\"><\/i> \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u062d\u0627\u0644\u064a\n                        <\/button>\n                        <button class=\"btn active\" id=\"viewAllBtn\">\n                            <i class=\"fa-solid fa-list-ul\"><\/i> \u0639\u0631\u0636 \u0627\u0644\u0643\u0644\n                        <\/button>\n                    <\/div>\n                    <div class=\"filters-row\">\n                        <select id=\"cityFilter\">\n                            <option value=\"\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0625\u0645\u0627\u0631\u0627\u062a<\/option>\n                            <option value=\"Dubai\">\u062f\u0628\u064a<\/option>\n                            <option value=\"Abu Dhabi\">\u0623\u0628\u0648 \u0638\u0628\u064a<\/option>\n                            <option value=\"Sharjah\">\u0627\u0644\u0634\u0627\u0631\u0642\u0629<\/option>\n                            <option value=\"Ajman\">\u0639\u062c\u0645\u0627\u0646<\/option>\n                            <option value=\"Fujairah\">\u0627\u0644\u0641\u062c\u064a\u0631\u0629<\/option>\n                            <option value=\"Ras Al Khaimah\">\u0631\u0623\u0633 \u0627\u0644\u062e\u064a\u0645\u0629<\/option>\n                            <option value=\"Umm Al Quwain\">\u0623\u0645 \u0627\u0644\u0642\u064a\u0648\u064a\u0646<\/option>\n                        <\/select>\n                        <select id=\"amenityFilter\">\n                            <option value=\"\">\u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0631\u0627\u0641\u0642<\/option>\n                            <option value=\"has_outdoor\">\u062c\u0644\u0633\u0627\u062a \u062e\u0627\u0631\u062c\u064a\u0629<\/option>\n                            <option value=\"has_private_dining\">\u063a\u0631\u0641\u0629 \u0637\u0639\u0627\u0645 \u062e\u0627\u0635\u0629<\/option>\n                            <option value=\"has_step_free\">\u0645\u062f\u062e\u0644 \u0645\u0647\u064a\u0623 \u0644\u0644\u0643\u0631\u0627\u0633\u064a \u0627\u0644\u0645\u062a\u062d\u0631\u0643\u0629<\/option>\n                        <\/select>\n                    <\/div>\n                <\/div>\n            <\/header>\n            <div class=\"results-container\" id=\"resultsList\">\n                <p style=\"text-align:center; padding: 20px;\">\u062c\u0627\u0631\u064a \u062a\u062d\u0645\u064a\u0644 \u0627\u0644\u0641\u0631\u0648\u0639...<\/p>\n            <\/div>\n        <\/aside>\n        <main class=\"map-wrapper\">\n            <div id=\"map-canvas\"><\/div>\n        <\/main>\n    <\/div>\n    <div id=\"gazebo-ar-marker-tooltip\" class=\"marker-tooltip\"><\/div>\n    <div id=\"gazebo-ar-store-modal\" class=\"modal-overlay\">\n        <div class=\"modal-content\">\n            <div class=\"modal-close\" onclick=\"closeModal()\"><i class=\"fa-solid fa-xmark\"><\/i><\/div>\n            <div style=\"position:relative\">\n                <img decoding=\"async\" id=\"gazebo-ar-modalImage\" src=\"\" class=\"modal-image skip-lazy\" loading=\"eager\"\n                    onerror=\"this.src='https:\/\/placehold.co\/800x400?text=Gazebo+Restaurant'\">\n                <div id=\"gazebo-ar-modalOpeningSoonBadge\" class=\"opening-soon-badge\" style=\"display:none;\">\u0642\u0631\u064a\u0628\u0627\u064b<\/div>\n            <\/div>\n            <div class=\"modal-body\">\n                <h2 id=\"gazebo-ar-modalName\" class=\"modal-title\"><\/h2>\n                <div class=\"modal-info-row\">\n                    <i class=\"fa-solid fa-map-marker-alt\"><\/i>\n                    <span id=\"gazebo-ar-modalAddress\"><\/span>\n                <\/div>\n                <div id=\"gazebo-ar-modalAmenities\"\n                    style=\"display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap;\">\n                    <!-- Icons will appear here -->\n                <\/div>\n                <div class=\"modal-info-row\">\n                    <i class=\"fa-solid fa-clock\"><\/i>\n                    <span id=\"gazebo-ar-modalTimings\"><\/span>\n                <\/div>\n                <div class=\"modal-info-row\">\n                    <i class=\"fa-solid fa-phone\"><\/i>\n                    <span id=\"gazebo-ar-modalPhone\"><\/span>\n                <\/div>\n                <div class=\"modal-info-row\" id=\"gazebo-ar-modalSeatingRow\">\n                    <i class=\"fa-solid fa-chair\"><\/i>\n                    <span id=\"gazebo-ar-modalSeating\"><\/span>\n                <\/div>\n                <a id=\"gazebo-ar-modalBookBtn\" href=\"#\" target=\"_blank\" class=\"modal-book-btn\">\u062d\u062c\u0632 \u0637\u0627\u0648\u0644\u0629<\/a>\n                <a id=\"gazebo-ar-modalDirectionBtn\" href=\"#\" target=\"_blank\" class=\"modal-direction-btn\"><i\n                        class=\"fa-solid fa-diamond-turn-right\" style=\"color:inherit; width:auto; margin:0 0 0 8px\"><\/i>\n                    \u0627\u0644\u062d\u0635\u0648\u0644 \u0639\u0644\u0649 \u0627\u0644\u0627\u062a\u062c\u0627\u0647\u0627\u062a<\/a>\n            <\/div>\n        <\/div>\n    <\/div>\n<\/div>\n\n<!-- SCRIPTS -->\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/@supabase\/supabase-js@2\"><\/script>\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n\n<!-- IMPORTANT: Replace YOUR_API_KEY with your actual Google Maps API Key -->\n<script\n    src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyDPDnxDAax1hzKTLgMMWpvfj6S1LGebvSI&libraries=places&language=ar&region=AE\"><\/script>\n\n<script>\n    (function () {\n        \/\/ --- SUPABASE CONFIG ---\n        const SUPABASE_URL = 'https:\/\/hmyleiibnxzzcdoikhul.supabase.co';\n        const SUPABASE_KEY = 'sb_publishable_3jzO69-Fdz_jaT6HlLjWow_6ZlDa-Fx';\n        const supabaseClient = supabase.createClient(SUPABASE_URL, SUPABASE_KEY);\n\n        const DEFAULT_MAP_CENTER = { lat: 25.2048, lng: 55.2708 };\n        let map, markers = [], stores = [], userLocation = null, isGeoLoading = false;\n\n        async function init() {\n            \/\/ Move modal and tooltip to body to bypass WordPress theme transforms\/positioning issues\n            const modal = document.getElementById('gazebo-ar-store-modal');\n            const tooltip = document.getElementById('gazebo-ar-marker-tooltip');\n            if (modal) document.body.appendChild(modal);\n            if (tooltip) document.body.appendChild(tooltip);\n\n            initMap();\n            setupEvents();\n            \/\/ Start loading location immediately\n            window.requestUserLocation();\n            await fetchStores();\n        }\n\n        function applyFilters() {\n            const search = document.getElementById('locationSearch');\n            const cityFilter = document.getElementById('cityFilter');\n            const amenityFilter = document.getElementById('amenityFilter');\n            const useLoc = document.getElementById('useLocationBtn');\n            if (!search) return;\n\n            if (isGeoLoading) {\n                isGeoLoading = false;\n                if (useLoc) useLoc.innerHTML = '<i class=\"fa-solid fa-location-crosshairs\"><\/i> \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u062d\u0627\u0644\u064a';\n            }\n\n            const searchTerm = search.value.toLowerCase();\n            const selectedCity = cityFilter.value;\n            const selectedAmenity = amenityFilter.value;\n\n            const filtered = stores.filter(s => {\n                const matchesSearch = s.name.toLowerCase().includes(searchTerm) || s.address.toLowerCase().includes(searchTerm);\n                const clean = (str) => str.toLowerCase().replace(\/-\/g, ' ').trim();\n                \/\/ Map of Arabic names to table values if necessary, but here we assume city matches\n                const matchesCity = !selectedCity || clean(s.city || \"\").includes(clean(selectedCity));\n                const matchesAmenity = !selectedAmenity || s[selectedAmenity] === true;\n                return matchesSearch && matchesCity && matchesAmenity;\n            });\n\n            renderStores(filtered);\n        }\n\n        function initMap() {\n            if (typeof google === 'undefined') return;\n            map = new google.maps.Map(document.getElementById('map-canvas'), {\n                center: DEFAULT_MAP_CENTER,\n                zoom: 11,\n                styles: [{ \"featureType\": \"poi\", \"stylers\": [{ \"visibility\": \"off\" }] }]\n            });\n        }\n\n        async function fetchStores() {\n            const { data, error } = await supabaseClient\n                .from('gazebolocations_arabic')\n                .select('*');\n\n            if (error) {\n                console.error('Error fetching stores:', error);\n                return;\n            }\n\n            stores = data.map(s => {\n                let img = s.image_url;\n                if (img && !img.startsWith('http')) {\n                    img = 'https:\/\/gazebo-store-locator-custom.sarfaraz-cbd.workers.dev\/' + img;\n                }\n                return {\n                    ...s,\n                    image: img,\n                    bookingUrl: s.booking_url || \"#\"\n                };\n            });\n\n            \/\/ If user location already found, sort by distance immediately\n            if (userLocation) {\n                stores.forEach(s => s.distance = calculateDist(userLocation.lat, userLocation.lng, s.lat, s.lng));\n                stores.sort((a, b) => a.distance - b.distance);\n            }\n\n            renderStores(stores);\n        }\n\n        function renderStores(data) {\n            const list = document.getElementById('resultsList');\n            list.innerHTML = '';\n\n            if (data.length === 0) {\n                list.innerHTML = '<div style=\"text-align:center; padding:40px; color:#666;\"><i class=\"fa-solid fa-store-slash\" style=\"font-size:30px; margin-bottom:10px; display:block; opacity:0.5;\"><\/i>\u0644\u0645 \u064a\u062a\u0645 \u0627\u0644\u0639\u062b\u0648\u0631 \u0639\u0644\u0649 \u0623\u064a \u0645\u0637\u0627\u0639\u0645.<\/div>';\n                markers.forEach(m => m.setMap(null));\n                markers = [];\n                return;\n            }\n\n            markers.forEach(m => m.setMap(null));\n            markers = [];\n            const bounds = new google.maps.LatLngBounds();\n\n            data.forEach(s => {\n                const card = document.createElement('div');\n                card.className = 'store-card';\n\n                const isOpeningSoon = s.is_opening_soon;\n                const hasBooking = s.booking_url && s.booking_url !== \"#\" && s.booking_url.trim() !== \"\";\n\n                card.innerHTML = `\n                        <div class=\"store-image-container\">\n                            <img decoding=\"async\" src=\"${s.image}\" class=\"store-image skip-lazy\" loading=\"eager\" onerror=\"this.src='https:\/\/placehold.co\/600x300?text=%D8%BA%D8%A7%D8%B2%D9%8A%D8%A8%D9%88'\">\n                            ${isOpeningSoon ? '<div class=\"opening-soon-badge\">\u0642\u0631\u064a\u0628\u0627\u064b<\/div>' : ''}\n                        <\/div>\n                        <div class=\"store-info\">\n                            <h3 class=\"store-name\">${s.name}<\/h3>\n                            ${s.distance ? `<span class=\"store-distance\">\u0639\u0644\u0649 \u0628\u0639\u062f ${s.distance.toFixed(1)} \u0643\u0645<\/span>` : ''}\n                            <div class=\"store-detail\"><i class=\"fa-solid fa-map-marker-alt\"><\/i> ${s.address}<\/div>\n                            <div class=\"store-detail\"><i class=\"fa-solid fa-clock\"><\/i> ${s.timings || '11:00 \u0635 - 12:00 \u0635'}<\/div>\n                            <div class=\"store-detail\"><i class=\"fa-solid fa-phone\"><\/i> ${s.phone}<\/div>\n                            ${hasBooking\n                        ? `<a href=\"${s.booking_url}\" class=\"book-btn\" onclick=\"event.stopPropagation()\" target=\"_blank\">\u062d\u062c\u0632 \u0637\u0627\u0648\u0644\u0629<\/a>`\n                        : `<div class=\"no-res-text\" style=\"text-align:center; padding:12px; background:#f8f9fa; border:1px dashed #ddd; border-radius:8px; font-size:14px; color:#666; margin-top:10px; font-weight:600;\">\u0644\u0627 \u064a\u0644\u0632\u0645 \u0627\u0644\u062d\u062c\u0632<\/div>`\n                    }\n                        <\/div>\n                    `;\n\n                card.onclick = () => {\n                    map.panTo({ lat: s.lat, lng: s.lng });\n                    map.setZoom(13);\n                    openModal(s);\n                };\n                list.appendChild(card);\n\n                const m = new google.maps.Marker({\n                    position: { lat: s.lat, lng: s.lng },\n                    map: map,\n                    icon: {\n                        url: \"https:\/\/www.gazebo.ae\/ar\/wp-content\/uploads\/2026\/02\/mapicon.png\",\n                        scaledSize: new google.maps.Size(40, 50)\n                    }\n                });\n\n                m.addListener('click', () => {\n                    map.panTo({ lat: s.lat, lng: s.lng });\n                    map.setZoom(13);\n                    openModal(s);\n                });\n\n                m.addListener('mouseover', (e) => {\n                    const tooltip = document.getElementById('gazebo-ar-marker-tooltip');\n                    tooltip.textContent = s.name;\n                    tooltip.style.display = 'block';\n\n                    const updatePos = (domEvent) => {\n                        tooltip.style.left = domEvent.clientX + 'px';\n                        tooltip.style.top = domEvent.clientY + 'px';\n                    };\n\n                    if (e.domEvent) updatePos(e.domEvent);\n                });\n\n                m.addListener('mouseout', () => {\n                    document.getElementById('gazebo-ar-marker-tooltip').style.display = 'none';\n                });\n\n                markers.push(m);\n                bounds.extend(m.getPosition());\n            });\n\n            if (data.length > 0) {\n                map.fitBounds(bounds);\n                const listener = google.maps.event.addListener(map, \"idle\", function () {\n                    if (map.getZoom() > 13) map.setZoom(13);\n                    google.maps.event.removeListener(listener);\n                });\n            }\n        }\n\n        function calculateDist(l1, n1, l2, n2) {\n            const R = 6371;\n            const dLat = (l2 - l1) * Math.PI \/ 180;\n            const dLon = (n2 - n1) * Math.PI \/ 180;\n            const a = Math.sin(dLat \/ 2) ** 2 + Math.cos(l1 * Math.PI \/ 180) * Math.cos(l2 * Math.PI \/ 180) * Math.sin(dLon \/ 2) ** 2;\n            return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));\n        }\n\n        function setupEvents() {\n            const search = document.getElementById('locationSearch');\n            const cityFilter = document.getElementById('cityFilter');\n            const amenityFilter = document.getElementById('amenityFilter');\n            const viewAllBtn = document.getElementById('viewAllBtn');\n            const useLoc = document.getElementById('useLocationBtn');\n\n            search.oninput = applyFilters;\n            cityFilter.onchange = applyFilters;\n            amenityFilter.onchange = applyFilters;\n\n            viewAllBtn.onclick = () => {\n                search.value = \"\";\n                cityFilter.value = \"\";\n                amenityFilter.value = \"\";\n                applyFilters();\n            };\n\n            useLoc.onclick = () => window.requestUserLocation();\n        }\n\n        window.requestUserLocation = () => {\n            const useLoc = document.getElementById('useLocationBtn');\n            const search = document.getElementById('locationSearch');\n            const cityFilter = document.getElementById('cityFilter');\n            const amenityFilter = document.getElementById('amenityFilter');\n\n            isGeoLoading = true;\n            useLoc.innerHTML = '<i class=\"fa-solid fa-spinner fa-spin\"><\/i> \u062c\u0627\u0631\u064a \u0627\u0644\u0628\u062d\u062b \u0639\u0646 \u063a\u0627\u0632\u064a\u0628\u0648 \u0628\u0627\u0644\u0642\u0631\u0628 \u0645\u0646\u0643...';\n\n            if (!navigator.geolocation) {\n                isGeoLoading = false;\n                alert(\"\u062e\u0627\u0635\u064a\u0629 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639 \u063a\u064a\u0631 \u0645\u062f\u0639\u0648\u0645\u0629 \u0641\u064a \u0645\u062a\u0635\u0641\u062d\u0643.\");\n                useLoc.innerHTML = '<i class=\"fa-solid fa-location-crosshairs\"><\/i> \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u062d\u0627\u0644\u064a';\n                return;\n            }\n\n            navigator.geolocation.getCurrentPosition(pos => {\n                if (!isGeoLoading) return;\n                isGeoLoading = false;\n\n                userLocation = { lat: pos.coords.latitude, lng: pos.coords.longitude };\n                stores.forEach(s => s.distance = calculateDist(userLocation.lat, userLocation.lng, s.lat, s.lng));\n                stores.sort((a, b) => a.distance - b.distance);\n                useLoc.innerHTML = '<i class=\"fa-solid fa-location-crosshairs\"><\/i> \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u062d\u0627\u0644\u064a';\n\n                if (search) search.value = \"\";\n                if (cityFilter) cityFilter.value = \"\";\n                if (amenityFilter) amenityFilter.value = \"\";\n\n                \/\/ Only sort and apply if we actually have stores loaded\n                if (stores.length > 0) {\n                    applyFilters();\n                }\n            }, (err) => {\n                if (!isGeoLoading) return;\n                isGeoLoading = false;\n                useLoc.innerHTML = '<i class=\"fa-solid fa-location-crosshairs\"><\/i> \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u062d\u0627\u0644\u064a';\n                alert(\"\u0641\u0634\u0644 \u062a\u062d\u062f\u064a\u062f \u0627\u0644\u0645\u0648\u0642\u0639. \u064a\u0631\u062c\u0649 \u0627\u0644\u0645\u062d\u0627\u0648\u0644\u0629 \u0645\u0631\u0629 \u0623\u062e\u0631\u0649.\");\n            });\n        };\n\n        window.openModal = function (s) {\n            document.getElementById('gazebo-ar-modalImage').src = s.image;\n            document.getElementById('gazebo-ar-modalName').textContent = s.name;\n            document.getElementById('gazebo-ar-modalAddress').textContent = s.address;\n            document.getElementById('gazebo-ar-modalTimings').innerHTML = (s.timings || '11:00 \u0635 - 12:00 \u0635').split(' | ').join('<br>');\n            document.getElementById('gazebo-ar-modalPhone').textContent = s.phone;\n\n            const hasBooking = s.booking_url && s.booking_url !== \"#\" && s.booking_url.trim() !== \"\";\n            const bookBtn = document.getElementById('gazebo-ar-modalBookBtn');\n\n            if (hasBooking) {\n                bookBtn.href = s.booking_url;\n                bookBtn.textContent = \"\u062d\u062c\u0632 \u0637\u0627\u0648\u0644\u0629\";\n                bookBtn.style.background = \"#640e00\"; \/\/ Explicit brand color\n                bookBtn.style.color = \"white\";\n                bookBtn.style.pointerEvents = \"auto\";\n                bookBtn.style.display = \"block\";\n            } else {\n                bookBtn.href = \"javascript:void(0)\";\n                bookBtn.textContent = \"\u0644\u0627 \u064a\u0644\u0632\u0645 \u0627\u0644\u062d\u062c\u0632\";\n                bookBtn.style.background = \"#f5f5f5\";\n                bookBtn.style.color = \"#888\";\n                bookBtn.style.pointerEvents = \"none\";\n                bookBtn.style.display = \"block\";\n            }\n\n            const directionBtn = document.getElementById('gazebo-ar-modalDirectionBtn');\n            directionBtn.href = `https:\/\/www.google.com\/maps\/dir\/?api=1&destination=${s.lat},${s.lng}`;\n\n            const badge = document.getElementById('gazebo-ar-modalOpeningSoonBadge');\n            badge.style.display = s.is_opening_soon ? 'block' : 'none';\n\n            const amenityContainer = document.getElementById('gazebo-ar-modalAmenities');\n            amenityContainer.innerHTML = '';\n            if (s.has_outdoor) amenityContainer.innerHTML += '<span style=\"background:#eee; padding:5px 10px; border-radius:20px; font-size:12px;\"><i class=\"fa-solid fa-sun\"><\/i> \u062c\u0644\u0633\u0627\u062a \u062e\u0627\u0631\u062c\u064a\u0629<\/span>';\n            if (s.has_private_dining) amenityContainer.innerHTML += '<span style=\"background:#eee; padding:5px 10px; border-radius:20px; font-size:12px;\"><i class=\"fa-solid fa-door-closed\"><\/i> \u063a\u0631\u0641\u0629 \u0637\u0639\u0627\u0645 \u062e\u0627\u0635\u0629<\/span>';\n            if (s.has_step_free) amenityContainer.innerHTML += '<span style=\"background:#eee; padding:5px 10px; border-radius:20px; font-size:12px;\"><i class=\"fa-solid fa-wheelchair\"><\/i> \u0645\u062f\u062e\u0644 \u0645\u0647\u064a\u0623 \u0644\u0644\u0643\u0631\u0627\u0633\u064a<\/span>';\n\n            if (s.seating) {\n                document.getElementById('gazebo-ar-modalSeating').textContent = s.seating;\n                document.getElementById('gazebo-ar-modalSeatingRow').style.display = 'flex';\n            } else {\n                document.getElementById('gazebo-ar-modalSeatingRow').style.display = 'none';\n            }\n\n            const modalOverlay = document.getElementById('gazebo-ar-store-modal');\n            modalOverlay.style.display = 'flex';\n            modalOverlay.scrollTop = 0;\n        };\n\n        window.closeModal = function () {\n            document.getElementById('gazebo-ar-store-modal').style.display = 'none';\n        };\n\n        window.onclick = function (event) {\n            const modal = document.getElementById('gazebo-ar-store-modal');\n            if (event.target == modal) {\n                closeModal();\n            }\n        };\n\n        window.addEventListener('load', init);\n    })();\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u0627\u0628\u062d\u062b \u0639\u0646 \u0623\u0642\u0631\u0628 \u0641\u0631\u0639 \u063a\u0627\u0632\u064a\u0628\u0648 \u0627\u0633\u062a\u062e\u062f\u0627\u0645 \u0645\u0648\u0642\u0639\u064a \u0627\u0644\u062d\u0627\u0644\u064a \u0639\u0631\u0636 \u0627\u0644\u0643\u0644 \u062c\u0645\u064a\u0639 \u0627\u0644\u0625\u0645\u0627\u0631\u0627\u062a\u062f\u0628\u064a\u0623\u0628\u0648 \u0638\u0628\u064a\u0627\u0644\u0634\u0627\u0631\u0642\u0629\u0639\u062c\u0645\u0627\u0646\u0627\u0644\u0641\u062c\u064a\u0631\u0629\u0631\u0623\u0633 \u0627\u0644\u062e\u064a\u0645\u0629\u0623\u0645 \u0627\u0644\u0642\u064a\u0648\u064a\u0646 \u062c\u0645\u064a\u0639 \u0627\u0644\u0645\u0631\u0627\u0641\u0642\u062c\u0644\u0633\u0627\u062a \u062e\u0627\u0631\u062c\u064a\u0629\u063a\u0631\u0641\u0629 \u0637\u0639\u0627\u0645 \u062e\u0627\u0635\u0629\u0645\u062f\u062e\u0644&#8230; <span class=\"tst-el-more\"><a href=\"https:\/\/www.gazebo.ae\/ar\/locations\/\" class=\"tst-label tst-color tst-anima-link\">Read more<span class=\"screen-reader-text\">Read moreLocations<\/span><\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-layout-builder.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-2599","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.gazebo.ae\/ar\/wp-json\/wp\/v2\/pages\/2599","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gazebo.ae\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.gazebo.ae\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.gazebo.ae\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gazebo.ae\/ar\/wp-json\/wp\/v2\/comments?post=2599"}],"version-history":[{"count":66,"href":"https:\/\/www.gazebo.ae\/ar\/wp-json\/wp\/v2\/pages\/2599\/revisions"}],"predecessor-version":[{"id":10500,"href":"https:\/\/www.gazebo.ae\/ar\/wp-json\/wp\/v2\/pages\/2599\/revisions\/10500"}],"wp:attachment":[{"href":"https:\/\/www.gazebo.ae\/ar\/wp-json\/wp\/v2\/media?parent=2599"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}