{"id":77,"date":"2025-01-09T20:31:38","date_gmt":"2025-01-09T20:31:38","guid":{"rendered":"http:\/\/book.parpico.com\/?page_id=77"},"modified":"2025-01-10T21:14:41","modified_gmt":"2025-01-10T21:14:41","slug":"reservations","status":"publish","type":"page","link":"https:\/\/chilaibeauty.ae\/book\/reservations\/","title":{"rendered":"Reservations"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t \r\n \r\n \r\n \r\n \r\n Services<\/title>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link rel=\"stylesheet\"\r\n href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.19\/css\/intlTelInput.min.css\"\/>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/intl-tel-input\/17.0.19\/js\/intlTelInput.min.js\"><\/script>\r\n <link\r\n href=\"https:\/\/fonts.googleapis.com\/css2?family=Outfit:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap\"\r\n rel=\"stylesheet\"\r\n \/>\r\n <style>\r\n @font-face {\r\n font-family: \"KannadaMN\";\r\n src: url(\".\/assets\/font\/KannadaMN.woff2\") format(\"woff2\");\r\n font-weight: normal;\r\n font-style: normal;\r\n }\r\n\r\n *,\r\n *::after,\r\n ::before {\r\n box-sizing: border-box;\r\n padding: 0;\r\n margin: 0;\r\n }\r\n\r\n body {\r\n \/* font-family: \"KannadaMN\"; *\/\r\n font-family: \"Roboto\", serif;\r\n }\r\n.PopupBackIcon{width:24px;fill:#000;}\r\n .services-component {\r\n max-width: 1184px;\r\n width: 100%;\r\n margin-inline: auto;\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n }\r\n\r\n .services-container {\r\n max-width: 785px;\r\n width: 100%;\r\n }\r\n\r\n .services-title {\r\n font-size: 40px;\r\n font-weight: 700;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .services-category-container {\r\n display: flex;\r\n list-style: none;\r\n gap: 4px;\r\n margin-bottom: 32px;\r\n padding-bottom: 16px;\r\n position: relative; \/* \u0628\u0631\u0627\u06cc \u062c\u0627\u06cc\u06af\u0630\u0627\u0631\u06cc ::before *\/\r\n overflow: auto;\r\n }\r\n\r\n \/* \u0646\u0634\u0627\u0646\u06af\u0631 \u0645\u062a\u062d\u0631\u06a9 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 ::before *\/\r\n .services-category-container::before {\r\n content: \"\";\r\n position: absolute;\r\n height: 36px; \/* \u0645\u062a\u0646\u0627\u0633\u0628 \u0628\u0627 \u0627\u0631\u062a\u0641\u0627\u0639 \u0627\u0644\u0645\u0646\u062a\u200c\u0647\u0627 *\/\r\n border-radius: 9999px;\r\n background-color: #0d1619;\r\n transition: all 0.3s ease-in-out;\r\n z-index: 0;\r\n pointer-events: none;\r\n top: 0;\r\n left: 0;\r\n width: var(--indicator-width, 0);\r\n transform: translateX(var(--indicator-left, 0));\r\n }\r\n\r\n .services-category {\r\n display: flex;\r\n min-width: fit-content;\r\n align-items: center;\r\n justify-content: center;\r\n height: 36px;\r\n padding-inline: 16px;\r\n line-height: 0px;\r\n border-radius: 9999px;\r\n text-align: center;\r\n font-size: 15px;\r\n font-weight: 600;\r\n cursor: pointer;\r\n position: relative;\r\n z-index: 1;\r\n transition: color 0.3s ease-in-out;\r\n }\r\n\r\n .services-category.active-category {\r\n color: #fff;\r\n }\r\n\r\n .services-category:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n .services-category.active-category:hover {\r\n background-color: unset;\r\n }\r\n\r\n .services-list-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 12px;\r\n list-style: none;\r\n }\r\n\r\n .services-list {\r\n max-width: 880px;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n border-radius: 8px;\r\n padding-inline: 24px;\r\n padding-block: 20px;\r\n border: solid #d7d7d7;\r\n border-width: 1px;\r\n transition: all 0.2s;\r\n cursor: pointer;\r\n }\r\n\r\n .services-list:hover {\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .services-details {\r\n display: flex;\r\n flex-direction: column;\r\n pointer-events: none;\r\n }\r\n\r\n .services-name {\r\n font-size: 17px;\r\n font-weight: 600;\r\n color: #0d1619;\r\n }\r\n\r\n .services-time {\r\n display: flex;\r\n gap: 2px;\r\n margin-bottom: 12px;\r\n color: #757676;\r\n font-size: 15px;\r\n font-weight: 500;\r\n }\r\n\r\n .services-price {\r\n font-weight: 600;\r\n }\r\n\r\n .services-book-btn {\r\n text-decoration: none;\r\n color: #0d1619;\r\n padding-inline: 15px;\r\n padding-block: 8px;\r\n border: 1px solid #d7d7d7;\r\n border-radius: 9999px;\r\n background-color: #fff;\r\n transition: all 0.2s;\r\n }\r\n\r\n .services-book-btn:hover {\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .services-see-all {\r\n display: inline-block;\r\n text-decoration: none;\r\n color: #0d1619;\r\n font-size: 17px;\r\n font-weight: 700;\r\n border: 1px solid #d7d7d7;\r\n padding-block: 14px;\r\n padding-inline: 19px;\r\n border-radius: 8px;\r\n margin-top: 24px;\r\n transition: all 0.2s;\r\n }\r\n\r\n .services-see-all:hover {\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .side-panel-salon {\r\n min-width: 450px;\r\n height: fit-content;\r\n border-radius: 10px;\r\n background-color: #fff;\r\n box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);\r\n transition: all 0.3s ease-in-out;\r\n }\r\n\r\n .salon-details-s1 {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 14px;\r\n padding: 32px;\r\n border-bottom: 1px solid #e5e5e5;\r\n }\r\n\r\n .salon-name {\r\n font-size: 36px;\r\n font-weight: 700;\r\n }\r\n\r\n .salon-rating {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n }\r\n\r\n .salon-rating-number {\r\n font-size: 24px;\r\n font-weight: 700;\r\n }\r\n\r\n .salon-stars {\r\n display: flex;\r\n align-items: center;\r\n height: 32px;\r\n }\r\n\r\n .salon-stars svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .salon-reviews {\r\n text-decoration: none;\r\n font-size: 24px;\r\n font-weight: 700;\r\n }\r\n\r\n .salon-book-btn {\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 100%;\r\n height: 48px;\r\n text-decoration: none;\r\n color: #fff;\r\n background-color: #0d1619;\r\n font-size: 17px;\r\n border-radius: 8px;\r\n transition: all 0.2s;\r\n }\r\n\r\n .salon-book-btn:hover {\r\n background-color: #0d1619e9;\r\n }\r\n\r\n .salon-details-s2 {\r\n padding: 32px;\r\n }\r\n\r\n .status {\r\n font-size: 16px;\r\n margin-bottom: 10px;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 20px;\r\n transition: all 0.3s ease-in-out;\r\n }\r\n\r\n .status.hide-gap {\r\n gap: 0px;\r\n }\r\n\r\n .status .closed-status {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n cursor: pointer;\r\n user-select: none;\r\n }\r\n\r\n .clock-svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n .closed-status .closed {\r\n color: #b7570b;\r\n font-weight: 500;\r\n }\r\n\r\n .closed-status button svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .closed-status button {\r\n height: 20px;\r\n background: none;\r\n border: none;\r\n font-size: 16px;\r\n cursor: pointer;\r\n transform: rotate(180deg);\r\n transition: transform 0.3s ease;\r\n }\r\n\r\n .closed-status.active button {\r\n transform: rotate(0deg);\r\n }\r\n\r\n .opened-status-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 15px;\r\n opacity: 0;\r\n max-height: 0;\r\n overflow: hidden;\r\n transition: max-height 0.3s ease-in-out, opacity 0.1s ease-in-out;\r\n }\r\n\r\n .opened-status-container.active {\r\n opacity: 1;\r\n max-height: 500px;\r\n }\r\n\r\n .open-time {\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n }\r\n\r\n .open-day-container {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .open-circle {\r\n width: 13px;\r\n height: 13px;\r\n border-radius: 50%;\r\n background-color: #78d240;\r\n }\r\n\r\n .open-day {\r\n font-size: 17px;\r\n }\r\n\r\n .open-time-container {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 5px;\r\n font-size: 17px;\r\n }\r\n\r\n .address {\r\n display: grid;\r\n grid-template-columns: 1fr;\r\n gap: 6px;\r\n font-size: 16px;\r\n margin-top: 20px;\r\n }\r\n\r\n .address div {\r\n display: flex;\r\n align-items: center;\r\n gap: 5px;\r\n }\r\n\r\n .address svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n .address a {\r\n color: #3498db;\r\n text-decoration: none;\r\n margin-left: 29px;\r\n }\r\n\r\n \/* \ud83c\udf1f \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u067e\u0627\u067e\u200c\u0622\u067e *\/\r\n .services-item-popup-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background: rgba(0, 0, 0, 0.5); \/* \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 \u062a\u06cc\u0631\u0647 \u0648 \u0634\u0641\u0627\u0641 *\/\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n z-index: 9999;\r\n opacity: 0;\r\n visibility: hidden;\r\n transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;\r\n }\r\n\r\n \/* \ud83d\udfe2 \u0646\u0645\u0627\u06cc\u0634 \u0641\u0639\u0627\u0644 \u067e\u0633\u200c\u0632\u0645\u06cc\u0646\u0647 *\/\r\n .services-item-popup-overlay.active {\r\n opacity: 1;\r\n visibility: visible;\r\n }\r\n\r\n \/* \ud83d\udce6 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 \u067e\u0627\u067e\u200c\u0622\u067e *\/\r\n .services-item-popup-container {\r\n background-color: #fff;\r\n border-radius: 12px;\r\n max-width: 720px;\r\n width: 100%;\r\n text-align: center;\r\n position: relative;\r\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);\r\n opacity: 0;\r\n transform: translateY(20px); \/* \u0634\u0631\u0648\u0639 \u0627\u0632 \u06a9\u0645\u06cc \u067e\u0627\u06cc\u06cc\u0646\u200c\u062a\u0631 *\/\r\n transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;\r\n padding-top: 74px;\r\n }\r\n\r\n \/* \ud83d\udfe2 \u0646\u0645\u0627\u06cc\u0634 \u0641\u0639\u0627\u0644 \u06a9\u0627\u0646\u062a\u06cc\u0646\u0631 *\/\r\n .services-item-popup-overlay.active .services-item-popup-container {\r\n opacity: 1;\r\n transform: translateY(0); \/* \u0628\u0647 \u0645\u0648\u0642\u0639\u06cc\u062a \u0627\u0635\u0644\u06cc \u062e\u0648\u062f \u0628\u0627\u0632\u0645\u06cc\u200c\u06af\u0631\u062f\u062f *\/\r\n }\r\n\r\n \/* \u274c \u062f\u06a9\u0645\u0647 \u0628\u0633\u062a\u0646 *\/\r\n .popup-close-btn {\r\n position: absolute;\r\n top: 20px;\r\n right: 40px;\r\n background: none;\r\n border: none;\r\n padding: 11px;\r\n cursor: pointer;\r\n color: #333;\r\n font-weight: 300;\r\n }\r\n\r\n .popup-close-btn svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n \/* \ud83d\udcdd \u0639\u0646\u0648\u0627\u0646 \u067e\u0627\u067e\u200c\u0622\u067e *\/\r\n .services-item-name-popup {\r\n font-size: 28px;\r\n font-weight: bold;\r\n margin-bottom: 12px;\r\n padding-inline: 48px;\r\n text-align: left;\r\n }\r\n\r\n \/* \ud83d\udcdd \u0632\u06cc\u0631\u0639\u0646\u0648\u0627\u0646 *\/\r\n .services-item-radio-title-popup {\r\n text-align: left;\r\n font-size: 20px;\r\n margin-bottom: 16px;\r\n padding-inline: 48px;\r\n }\r\n\r\n \/* \ud83d\udfe1 \u06a9\u0627\u0631\u062a \u06af\u0632\u06cc\u0646\u0647 *\/\r\n .option-card {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n border-radius: 8px;\r\n padding: 20px 16px;\r\n margin-inline: 32px;\r\n transition: all 0.2s;\r\n }\r\n\r\n .option-card:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n .content {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n }\r\n\r\n .content p {\r\n margin-bottom: 6px;\r\n font-size: 17px;\r\n color: #767575;\r\n }\r\n\r\n .content .price {\r\n font-size: 17px;\r\n color: #0d1619;\r\n font-weight: 500;\r\n }\r\n\r\n .add-to-booking-container {\r\n padding-inline: 48px;\r\n }\r\n\r\n .add-to-booking-btn,\r\n .remove-from-booking {\r\n border: none;\r\n border-radius: 8px;\r\n width: 100%;\r\n height: 48px;\r\n margin-block: 32px;\r\n font-size: 17px;\r\n font-weight: 500;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n\r\n .add-to-booking-btn:active,\r\n .remove-from-booking:active {\r\n transform: scale(0.97);\r\n }\r\n\r\n .add-to-booking-btn {\r\n background-color: #0d1619;\r\n color: #fff;\r\n }\r\n\r\n .add-to-booking-btn:hover {\r\n background-color: #0d1619e9;\r\n }\r\n\r\n .remove-from-booking {\r\n background-color: #fff;\r\n border: 1px solid #bfbfbf;\r\n color: #0d1619;\r\n }\r\n\r\n .remove-from-booking:hover {\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <div class=\"services-component\">\r\n <!-- popUp -->\r\n <div class=\"services-item-popup-overlay\">\r\n <div class=\"services-item-popup-container\">\r\n <button class=\"popup-close-btn\">\r\n <svg\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n fill=\"none\"\r\n viewBox=\"0 0 24 24\"\r\n stroke-width=\"1.5\"\r\n stroke=\"currentColor\"\r\n class=\"size-6\"\r\n >\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n d=\"M6 18 18 6M6 6l12 12\"\r\n \/>\r\n <\/svg>\r\n <\/button>\r\n <h4 class=\"services-item-name-popup\"><\/h4>\r\n <div class=\"option-card-container\"><\/div>\r\n <div class=\"add-to-booking-container\">\r\n <button class=\"add-to-booking-btn\">Add to booking<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- popUp -->\r\n\r\n <div class=\"services-container\">\r\n <h2 class=\"services-title\">Services<\/h2>\r\n <ul class=\"services-category-container\"><\/ul>\r\n <ul class=\"services-list-container\"><\/ul>\r\n <a href=\"https:\/\/chilaibeauty.ae\/book\/see-all\/\" class=\"services-see-all\">See all<\/a>\r\n <\/div>\r\n <!-- Sidebar -->\r\n <div class=\"side-panel-salon\">\r\n <div class=\"salon-details-s1\">\r\n <h2 class=\"salon-name\">Lash n' Nails by Bern<\/h2>\r\n <a href=\"https:\/\/chilaibeauty.ae\/book\/see-all\/\" class=\"salon-book-btn\">Book now<\/a>\r\n <\/div>\r\n <div class=\"salon-details-s2\">\r\n <div class=\"business-hours\">\r\n <div class=\"address\">\r\n <div>\r\n <svg\r\n fill=\"currentColor\"\r\n xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\r\n viewBox=\"0 0 32 32\"\r\n >\r\n <path\r\n d=\"M16 8a5 5 0 1 0 0 10 5 5 0 0 0 0-10m0 8a3 3 0 1 1 0-5.999A3 3 0 0 1 16 16m0-14A11.013 11.013 0 0 0 5 13c0 3.925 1.814 8.085 5.25 12.031a31.8 31.8 0 0 0 5.181 4.788 1 1 0 0 0 1.148 0 31.8 31.8 0 0 0 5.171-4.788C25.181 21.085 27 16.925 27 13A11.01 11.01 0 0 0 16 2m0 25.75C13.934 26.125 7 20.156 7 13a9 9 0 0 1 18 0c0 7.154-6.934 13.125-9 14.75\"\r\n ><\/path>\r\n <\/svg>\r\n <span> 138 Street, Al Kuwait, Hawalli Governorate<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- Sidebar -->\r\n <\/div>\r\n <script type=\"module\" defer>\r\n \/\/ \u062a\u0646\u0638\u06cc\u0645\u0627\u062a API\r\n const apiURL = \"https:\/\/chilaibeauty.ae\/book\/wp-json\/chilaibeauty\/v1\/full-service-data\";\r\n\r\n let servicesAPI = null;\r\n\r\n \/\/ \u062a\u0627\u0628\u0639\u06cc \u0628\u0631\u0627\u06cc \u062f\u0631\u06cc\u0627\u0641\u062a \u062f\u0627\u062f\u0647 \u0627\u0632 API\r\n async function fetchServicesAPI() {\r\n try {\r\n const response = await fetch(apiURL);\r\n if (!response.ok) {\r\n throw new Error(\"Network response was not ok.\");\r\n }\r\n servicesAPI = await response.json();\r\n console.log(\"API Data Loaded:\", servicesAPI);\r\n } catch (error) {\r\n console.error(\"Error fetching API:\", error);\r\n }\r\n }\r\n\r\n \/\/ \u062a\u0627\u0628\u0639 \u0627\u0635\u0644\u06cc \u06a9\u0647 \u0634\u0627\u0645\u0644 \u0627\u062c\u0631\u0627\u06cc \u06a9\u062f\u0647\u0627 \u0627\u0633\u062a\r\n async function initializeApp() {\r\n \/\/ \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u062f\u0627\u062f\u0647\u200c\u0647\u0627\u06cc API\r\n await fetchServicesAPI();\r\n\r\n \/\/ \u062d\u0627\u0644\u0627 \u06a9\u0647 \u062f\u0627\u062f\u0647\u200c\u0647\u0627 \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0646\u062f\u060c \u0633\u0627\u06cc\u0631 \u06a9\u062f\u0647\u0627 \u0627\u062c\u0631\u0627 \u0645\u06cc\u200c\u0634\u0648\u0646\u062f\r\n function popupOpening(callback) {\r\n const popupOverlay = document.querySelector(\r\n \".services-item-popup-overlay\"\r\n );\r\n const servicesListItems = document.querySelector(\r\n \".services-list-container\"\r\n );\r\n const closePopupBtn = document.querySelector(\".popup-close-btn\");\r\n const popupTitle = document.querySelector(\".services-item-name-popup\");\r\n const popupOptionsContainer = document.querySelector(\r\n \".services-item-popup-container .option-card-container\"\r\n );\r\n const addToBooking = document.querySelector(\".add-to-booking-btn\");\r\n\r\n let selectedService = null;\r\n\r\n servicesListItems.addEventListener(\"click\", (event) => {\r\n if (event.target.classList.contains(\"services-book-btn\")) {\r\n return;\r\n }\r\n\r\n const serviceItem = event.target.closest(\".services-list\");\r\n if (!serviceItem) return;\r\n\r\n const serviceId = serviceItem.getAttribute(\"data-service-id\");\r\n\r\n servicesAPI.categories.forEach((category) => {\r\n category.services.forEach((service) => {\r\n if (service.id == serviceId) selectedService = service;\r\n });\r\n });\r\n\r\n if (selectedService) {\r\n popupTitle.textContent = selectedService.name;\r\n\r\n popupOptionsContainer.innerHTML = `\r\n <div class=\"option-card\">\r\n <div class=\"content\">\r\n <p>${selectedService.duration} min<\/p>\r\n <span class=\"price\">${servicesAPI.currency} ${selectedService.price}<\/span>\r\n <\/div>\r\n <\/div>`;\r\n\r\n popupOverlay.classList.add(\"active\");\r\n document.body.style.overflow = \"hidden\";\r\n }\r\n });\r\n\r\n closePopupBtn.addEventListener(\"click\", () => {\r\n popupOverlay.classList.remove(\"active\");\r\n document.body.style.overflow = \"\";\r\n });\r\n\r\n popupOverlay.addEventListener(\"click\", (event) => {\r\n if (event.target === popupOverlay) {\r\n popupOverlay.classList.remove(\"active\");\r\n document.body.style.overflow = \"\";\r\n }\r\n });\r\n\r\n addToBooking.addEventListener(\"click\", () => {\r\n if (selectedService) {\r\n if (callback) callback(selectedService);\r\n\r\n popupOverlay.classList.remove(\"active\");\r\n document.body.style.overflow = \"\";\r\n }\r\n });\r\n }\r\n\r\n function initCategorySelection() {\r\n const categories = document.querySelectorAll(\".services-category\");\r\n const container = document.querySelector(\r\n \".services-category-container\"\r\n );\r\n\r\n function moveIndicator(element) {\r\n const {offsetLeft, offsetWidth} = element;\r\n container.style.setProperty(\"--indicator-width\", `${offsetWidth}px`);\r\n container.style.setProperty(\"--indicator-left\", `${offsetLeft}px`);\r\n }\r\n\r\n const activeCategory = document.querySelector(\r\n \".services-category.active-category\"\r\n );\r\n if (activeCategory) {\r\n moveIndicator(activeCategory);\r\n }\r\n\r\n categories.forEach((category) => {\r\n category.addEventListener(\"click\", () => {\r\n categories.forEach((item) =>\r\n item.classList.remove(\"active-category\")\r\n );\r\n category.classList.add(\"active-category\");\r\n moveIndicator(category);\r\n\r\n category.scrollIntoView({behavior: \"smooth\", block: \"nearest\", inline: \"center\"});\r\n });\r\n });\r\n }\r\n\r\n function renderServices() {\r\n const categoriesContainer = document.querySelector(\r\n \".services-category-container\"\r\n );\r\n const servicesListContainer = document.querySelector(\r\n \".services-list-container\"\r\n );\r\n\r\n categoriesContainer.innerHTML = servicesAPI.categories\r\n .map(\r\n (category, index) => `\r\n <li class=\"services-category ${\r\n index === 0 ? \"active-category\" : \"\"\r\n }\" data-category-id=\"${category.id}\">\r\n ${category.name}\r\n <\/li>`\r\n )\r\n .join(\"\");\r\n\r\n renderServiceItems(servicesAPI.categories[0].services);\r\n\r\n categoriesContainer\r\n .querySelectorAll(\".services-category\")\r\n .forEach((categoryItem) => {\r\n categoryItem.addEventListener(\"click\", () => {\r\n const selectedCategoryId =\r\n categoryItem.getAttribute(\"data-category-id\");\r\n\r\n const selectedCategory = servicesAPI.categories.find(\r\n (category) => category.id == selectedCategoryId\r\n );\r\n\r\n renderServiceItems(selectedCategory.services);\r\n\r\n categoriesContainer\r\n .querySelectorAll(\".services-category\")\r\n .forEach((item) => {\r\n item.classList.remove(\"active-category\");\r\n });\r\n categoryItem.classList.add(\"active-category\");\r\n });\r\n });\r\n\r\n function renderServiceItems(services) {\r\n servicesListContainer.innerHTML = services\r\n .map(\r\n (service) => `\r\n <li class=\"services-list\" data-service-id=\"${service.id}\">\r\n <div class=\"services-details\">\r\n <span class=\"services-name\">${service.name}<\/span>\r\n <span class=\"services-time\">${service.duration} min<\/span>\r\n <span class=\"services-price\">from <span class=\"services-price-value\">${service.price} ${servicesAPI.currency}<\/span><\/span>\r\n <\/div>\r\n <a href=\"#\" class=\"services-book-btn\">Book<\/a>\r\n <\/li>`\r\n )\r\n .join(\"\");\r\n\r\n addBookingEventListeners();\r\n }\r\n\r\n function addBookingEventListeners() {\r\n const bookButtons = document.querySelectorAll(\".services-book-btn\");\r\n bookButtons.forEach((button) => {\r\n button.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n\r\n const serviceItem = button.closest(\".services-list\");\r\n\r\n const serviceId = serviceItem.getAttribute(\"data-service-id\");\r\n const serviceName =\r\n serviceItem.querySelector(\".services-name\").textContent;\r\n const serviceTime =\r\n serviceItem.querySelector(\".services-time\").textContent;\r\n const servicePrice = serviceItem.querySelector(\r\n \".services-price-value\"\r\n ).textContent;\r\n\r\n console.log({\r\n id: serviceId,\r\n name: serviceName,\r\n duration: serviceTime,\r\n price: servicePrice,\r\n });\r\n });\r\n });\r\n }\r\n }\r\n\r\n renderServices();\r\n initCategorySelection();\r\n popupOpening((selectedService) => {\r\n console.log(selectedService);\r\n });\r\n }\r\n\r\n \/\/ \u0627\u062c\u0631\u0627\u06cc \u0628\u0631\u0646\u0627\u0645\u0647\r\n initializeApp();\r\n <\/script>\r\n <\/body>\r\n <\/html>\r\n \t\t<div class=\"elementor-shortcode\"><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-77","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/pages\/77","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/comments?post=77"}],"version-history":[{"count":9,"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/pages\/77\/revisions"}],"predecessor-version":[{"id":96,"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/pages\/77\/revisions\/96"}],"wp:attachment":[{"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/media?parent=77"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}