{"id":84,"date":"2025-01-10T21:11:46","date_gmt":"2025-01-10T21:11:46","guid":{"rendered":"http:\/\/book.parpico.com\/?page_id=84"},"modified":"2025-06-08T17:48:21","modified_gmt":"2025-06-08T17:48:21","slug":"see-all","status":"publish","type":"page","link":"https:\/\/chilaibeauty.ae\/book\/see-all\/","title":{"rendered":"see-all"},"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\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 margin: auto;\r\n }\r\n\r\n .services-component-2 {\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-2 {\r\n max-width: 785px;\r\n width: 100%;\r\n }\r\n\r\n .services-steps {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n color: #acacac;\r\n list-style: none;\r\n font-size: 15px;\r\n font-weight: 500;\r\n margin-bottom: 12px;\r\n }\r\n\r\n .services-steps-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 12px;\r\n }\r\n\r\n .services-steps-item.active {\r\n color: #0d1619;\r\n }\r\n\r\n .services-steps svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .services-title {\r\n font-size: 40px;\r\n font-weight: 700;\r\n margin-bottom: 16px;\r\n }\r\n\r\n .services-category-container-2 {\r\n position: sticky;\r\n top: 71px;\r\n display: flex;\r\n list-style: none;\r\n gap: 4px;\r\n margin-bottom: 32px;\r\n padding-block: 16px;\r\n background-color: white;\r\n overflow: auto;\r\n scroll-behavior: smooth;\r\n }\r\n\r\n .services-category-container-2.show {\r\n z-index: 999;\r\n border-bottom: 2px solid #f2f2f2;\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-2::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: 16px;\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-category-section {\r\n margin-bottom: 36px;\r\n scroll-margin-top: 100px;\r\n }\r\n\r\n .services-category-title {\r\n font-size: 24px;\r\n padding-bottom: 24px;\r\n font-weight: 500;\r\n margin: 0;\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.active {\r\n border: solid 3px #000;\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: 400;\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: 400;\r\n }\r\n\r\n .services-price {\r\n font-weight: 600;\r\n }\r\n\r\n .services-book-btn-2 {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 28px;\r\n height: 28px;\r\n text-decoration: none;\r\n color: #0d1619;\r\n border-radius: 8px;\r\n background-color: #f2f2f2;\r\n transition: all 0.2s;\r\n border: none;\r\n cursor: pointer;\r\n }\r\n\r\n .services-book-btn-2 svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .services-book-btn-2:hover {\r\n background-color: #e5e5e5;\r\n }\r\n\r\n .selected-book-btn {\r\n display: none;\r\n }\r\n\r\n .selected-book-btn,\r\n .unselected-book-btn {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .services-book-btn-2.active {\r\n background-color: #000;\r\n }\r\n\r\n .services-book-btn-2.active:hover {\r\n background-color: #5c4ace;\r\n }\r\n\r\n .services-book-btn-2.active .selected-book-btn {\r\n display: unset;\r\n color: #fff;\r\n }\r\n\r\n .services-book-btn-2.active .unselected-book-btn {\r\n display: none;\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-cart {\r\n width: 360px;\r\n height: 100%;\r\n }\r\n\r\n .cart-salon-details-container {\r\n position: sticky; \/* \u062b\u0627\u0628\u062a \u0645\u0627\u0646\u062f\u0646 \u062f\u0631 \u0645\u062d\u062f\u0648\u062f\u0647 \u0648\u0627\u0644\u062f *\/\r\n top: 108px;\r\n display: flex;\r\n flex-direction: column;\r\n height: auto;\r\n min-height: 480px;\r\n border-radius: 8px;\r\n padding: 24px;\r\n padding-bottom: 88px;\r\n border: 1px solid #e5e5e5;\r\n }\r\n\r\n .cart-salon-pic-and-details {\r\n display: flex;\r\n gap: 16px;\r\n padding-bottom: 16px;\r\n }\r\n\r\n .salon-image-link {\r\n width: 64px;\r\n height: 64px;\r\n border-radius: 6px;\r\n overflow: hidden;\r\n border: 1px solid #e5e5e5;\r\n }\r\n\r\n .cart-salon-pic {\r\n width: 100% !important;\r\n height: 100% !important;\r\n }\r\n\r\n .cart-salon-details {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: flex-start;\r\n gap: 4px;\r\n }\r\n\r\n .cart-salon-name {\r\n font-size: 17px;\r\n font-weight: 500;\r\n }\r\n\r\n .cart-salon-rating {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n }\r\n\r\n .cart-salon-rating-number {\r\n font-size: 15px;\r\n font-weight: 500;\r\n }\r\n\r\n .cart-salon-stars {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 2px;\r\n height: 16px;\r\n }\r\n\r\n .cart-salon-stars svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .cart-salon-reviews {\r\n font-size: 15px;\r\n font-weight: 500;\r\n }\r\n\r\n .cart-salon-address {\r\n font-size: 15px;\r\n color: #757676;\r\n font-weight: 500;\r\n }\r\n\r\n .cart-item-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: 16px;\r\n list-style: none;\r\n border-bottom: 1px solid #e5e5e5;\r\n padding-top: 12px;\r\n padding-bottom: 32px;\r\n }\r\n\r\n .no-service-alert {\r\n font-size: 15px;\r\n color: #757676;\r\n }\r\n\r\n .cart-item {\r\n display: flex;\r\n justify-content: space-between;\r\n gap: 20px;\r\n }\r\n\r\n .cart-item-name {\r\n font-size: 15px;\r\n margin-bottom: 0;\r\n }\r\n\r\n .cart-item-time-and-service {\r\n display: flex;\r\n align-items: center;\r\n gap: 6px;\r\n font-size: 15px;\r\n color: #757676;\r\n margin-top: 2px;\r\n }\r\n\r\n .cart-item-price {\r\n text-wrap: nowrap;\r\n font-size: 15px;\r\n font-weight: 400;\r\n }\r\n\r\n .cart-total {\r\n display: flex;\r\n justify-content: space-between;\r\n margin-top: 17px;\r\n font-size: 17px;\r\n font-weight: 600;\r\n }\r\n\r\n .cart-checkout-btn {\r\n position: absolute;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n bottom: 24px;\r\n width: calc(100% - 48px);\r\n height: 48px;\r\n font-size: 17px;\r\n font-weight: 600;\r\n border-radius: 8px;\r\n border: none;\r\n background-color: #0d1619;\r\n color: #fff;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n }\r\n\r\n .cart-checkout-btn:hover {\r\n background-color: #0d1619e9;\r\n color: #fff;\r\n }\r\n\r\n .services-header-container {\r\n position: sticky;\r\n top: 0;\r\n z-index: 1;\r\n display: flex;\r\n justify-content: center;\r\n width: 100%;\r\n height: 72px;\r\n background-color: #fff;\r\n }\r\n\r\n .header-sticky {\r\n z-index: 1002;\r\n background-color: white;\r\n box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\r\n }\r\n\r\n .services-header {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n max-width: 1440px;\r\n width: 100%;\r\n padding-inline: 32px;\r\n }\r\n\r\n .close-services-page {\r\n padding: 11px;\r\n padding-bottom: 7px;\r\n transition: all 0.2s;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n }\r\n\r\n .close-services-page:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n .close-services-page svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n .hedaer-back-btn {\r\n padding: 11px;\r\n padding-bottom: 7px;\r\n color: inherit;\r\n transition: all 0.2s;\r\n border-radius: 8px;\r\n }\r\n\r\n .hedaer-back-btn:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n .hedaer-back-btn svg {\r\n width: 24px;\r\n height: 24px;\r\n }\r\n\r\n .header-title {\r\n opacity: 0;\r\n max-width: 1184px;\r\n width: 100%;\r\n font-size: 20px;\r\n font-weight: 600;\r\n transition: all 0.3s ease-in-out;\r\n }\r\n\r\n .header-title.show {\r\n opacity: 1;\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\r\n .cart-item-count {\r\n display: none;\r\n }\r\n\r\n @media (max-width: 767px) {\r\n .services-component-2, .services-component {\r\n display: block !important;\r\n }\r\n\r\n .side-panel-cart .cart-salon-pic-and-details {\r\n display: none ! impoerant;\r\n }\r\n\r\n .cart-item-count {\r\n display: block;\r\n }\r\n }\r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n \r\n <\/style>\r\n <\/head>\r\n <body>\r\n <header class=\"services-header-container\">\r\n <div class=\"services-header\">\r\n <a href=\"https:\/\/chilaibeauty.ae\/book\/reservations\/\" class=\"hedaer-back-btn\">\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 fill-rule=\"evenodd\"\r\n d=\"M14.707 6.293a1 1 0 0 1 0 1.414L7.414 15H27a1 1 0 1 1 0 2H7.414l7.293 7.293a1 1 0 0 1-1.414 1.414l-9-9a1 1 0 0 1 0-1.414l9-9a1 1 0 0 1 1.414 0\"\r\n clip-rule=\"evenodd\"\r\n ><\/path>\r\n <\/svg>\r\n <\/a>\r\n <span class=\"header-title\">Select services<\/span>\r\n <span class=\"close-services-page\">\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 fill-rule=\"evenodd\"\r\n d=\"M7.293 7.293a1 1 0 0 1 1.414 0L16 14.586l7.293-7.293a1 1 0 1 1 1.414 1.414L17.414 16l7.293 7.293a1 1 0 0 1-1.414 1.414L16 17.414l-7.293 7.293a1 1 0 0 1-1.414-1.414L14.586 16 7.293 8.707a1 1 0 0 1 0-1.414\"\r\n clip-rule=\"evenodd\"\r\n ><\/path>\r\n <\/svg>\r\n <\/span>\r\n <\/div>\r\n <\/header>\r\n\r\n <div class=\"services-component-2\">\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 <h5 class=\"services-item-radio-title-popup\">Select an option *<\/h5>\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-btn-2\">\r\n Add to booking\r\n <\/button>\r\n <button class=\"remove-from-booking hidden\">Remove<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <!-- popUp -->\r\n\r\n\r\n <div class=\"services-container-2\">\r\n <div class=\"d-none-g\">\r\n <div class=\"cart-salon-pic-and-details\">\r\n <a href=\"#\" class=\"salon-image-link\">\r\n <img decoding=\"async\"\r\n src=\"\/wp-content\/uploads\/2025\/01\/logo-transparent.webp\"\r\n alt=\"\"\r\n class=\"cart-salon-pic\"\r\n \/>\r\n <\/a>\r\n <div class=\"cart-salon-details\">\r\n <p class=\"cart-salon-name\">chilaibeauty<\/p>\r\n <p class=\"cart-salon-address\">Dubai, United Arab Emirates<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <ul class=\"services-steps\">\r\n <li class=\"services-steps-item active\">\r\n <a href=\"\/book\/see-all\"><span>Services<\/span><\/a>\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 fill-rule=\"evenodd\"\r\n d=\"M12.293 9.043a1 1 0 0 1 1.414 0l6.25 6.25a1 1 0 0 1 0 1.414l-6.25 6.25a1 1 0 0 1-1.414-1.414L17.836 16l-5.543-5.543a1 1 0 0 1 0-1.414\"\r\n clip-rule=\"evenodd\"\r\n ><\/path>\r\n <\/svg>\r\n <\/li>\r\n <li class=\"services-steps-item\">\r\n <span>Professional<\/span>\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 fill-rule=\"evenodd\"\r\n d=\"M12.293 9.043a1 1 0 0 1 1.414 0l6.25 6.25a1 1 0 0 1 0 1.414l-6.25 6.25a1 1 0 0 1-1.414-1.414L17.836 16l-5.543-5.543a1 1 0 0 1 0-1.414\"\r\n clip-rule=\"evenodd\"\r\n ><\/path>\r\n <\/svg>\r\n <\/li>\r\n <li class=\"services-steps-item\">\r\n <a href=\"\/book\/schedule\"><span>Time<\/span><\/a>\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 fill-rule=\"evenodd\"\r\n d=\"M12.293 9.043a1 1 0 0 1 1.414 0l6.25 6.25a1 1 0 0 1 0 1.414l-6.25 6.25a1 1 0 0 1-1.414-1.414L17.836 16l-5.543-5.543a1 1 0 0 1 0-1.414\"\r\n clip-rule=\"evenodd\"\r\n ><\/path>\r\n <\/svg>\r\n <\/li>\r\n <li class=\"services-steps-item\">\r\n <span>Confirm<\/span>\r\n <\/li>\r\n <\/ul>\r\n <h2 class=\"services-title\">Select services<\/h2>\r\n <ul class=\"services-category-container-2\"><\/ul>\r\n <ul class=\"services-list-container\"><\/ul>\r\n <\/div>\r\n\r\n <!-- Sidebar -->\r\n <div class=\"side-panel-cart\">\r\n <div class=\"cart-salon-details-container\">\r\n <div class=\"cart-salon-pic-and-details\">\r\n <a href=\"#\" class=\"salon-image-link\">\r\n <img decoding=\"async\"\r\n src=\"\/wp-content\/uploads\/2025\/01\/logo-transparent.webp\"\r\n alt=\"\"\r\n class=\"cart-salon-pic\"\r\n \/>\r\n <\/a>\r\n <div class=\"cart-salon-details\">\r\n <p class=\"cart-salon-name\">chilaibeauty<\/p>\r\n <p class=\"cart-salon-address\">Dubai, United Arab Emirates<\/p>\r\n <\/div>\r\n <\/div>\r\n <ul class=\"cart-item-list\">\r\n <p class=\"no-service-alert\">No services selected<\/p>\r\n <\/ul>\r\n <div class=\"cart-item-count\">\r\n <p>No services selected<\/p>\r\n <\/div>\r\n\r\n <div class=\"cart-total\">\r\n <p class=\"cart-total-title\">Total<\/p>\r\n <p class=\"cart-total-price\">free<\/p>\r\n <\/div>\r\n <a href=\"https:\/\/chilaibeauty.ae\/book\/schedule\/\" class=\"cart-checkout-btn\" style=\"text-align: center;\">Continue<\/a>\r\n <\/div>\r\n <\/div>\r\n <!-- Sidebar -->\r\n <\/div>\r\n <script type=\"module\" defer>\r\n const apiURL = \"https:\/\/chilaibeauty.ae\/book\/wp-json\/chilaibeauty\/v1\/full-service-data\";\r\n let servicesAPI = null;\r\n\r\n \/\/ Fetch API data\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 initializeApp();\r\n } catch (error) {\r\n console.error(\"Error fetching API:\", error);\r\n }\r\n }\r\n\r\n function setCookie(name, value, days) {\r\n const date = new Date();\r\n date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);\r\n const expires = `expires=${date.toUTCString()}`;\r\n document.cookie = `${name}=${value};${expires};path=\/`;\r\n }\r\n\r\n function getCookie(name) {\r\n const cookies = document.cookie.split(\"; \");\r\n for (let cookie of cookies) {\r\n const [key, value] = cookie.split(\"=\");\r\n if (key === name) return value;\r\n }\r\n return null;\r\n }\r\n\r\n\r\n \/\/ Initialize App\r\n function initializeApp() {\r\n const hash = window.location.hash;\r\n let categoryId = null\r\n if (hash.startsWith(\"#category-\")) {\r\n categoryId = +hash.replace(\"#category-\", \"\");\r\n }\r\n renderServices();\r\n categoryId ? initCategorySelection(categoryId) :\r\n initCategorySelection();\r\n popupOpening();\r\n populateCartFromCookies();\r\n\r\n const servicesHeader = document.querySelector(\r\n \".services-header-container\"\r\n );\r\n const servicesTitle = document.querySelector(\".header-title\");\r\n const servicesCategory = document.querySelector(\r\n \".services-category-container-2\"\r\n );\r\n\r\n\r\n window.addEventListener(\"scroll\", () => {\r\n if (window.scrollY > servicesHeader.offsetHeight) {\r\n servicesHeader.classList.add(\"header-sticky\");\r\n servicesTitle.classList.add(\"show\");\r\n servicesCategory.classList.add(\"show\");\r\n } else {\r\n servicesHeader.classList.remove(\"header-sticky\");\r\n servicesTitle.classList.remove(\"show\");\r\n servicesCategory.classList.remove(\"show\");\r\n }\r\n });\r\n }\r\n\r\n function renderServices() {\r\n const categoriesContainer = document.querySelector(\r\n \".services-category-container-2\"\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 servicesListContainer.innerHTML = servicesAPI.categories\r\n .map(\r\n (category) => `\r\n <div class=\"services-category-section\" data-category-section=\"${\r\n category.id\r\n }\">\r\n <h2 class=\"services-category-title\">${category.name}<\/h2>\r\n <ul class=\"services-list-container\">\r\n ${category.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 <button class=\"services-book-btn-2\">\r\n <span class=\"selected-book-btn\">\r\n <svg fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 32 32\"><path fill-rule=\"evenodd\" d=\"M28.394 10.06a1.5 1.5 0 0 0-2.121-2.12l-12.94 12.939-5.94-5.94a1.5 1.5 0 0 0-2.12 2.122l7 7a1.5 1.5 0 0 0 2.12 0z\" clip-rule=\"evenodd\"><\/path><\/svg>\r\n <\/span>\r\n <span class=\"unselected-book-btn\">\r\n <svg fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path d=\"M13.125 3.75a1.125 1.125 0 0 0-2.25 0v7.125H3.75a1.125 1.125 0 0 0 0 2.25h7.125v7.125a1.125 1.125 0 0 0 2.25 0v-7.125h7.125a1.125 1.125 0 0 0 0-2.25h-7.125z\"><\/path><\/svg>\r\n <\/span>\r\n <\/button>\r\n <\/li>`\r\n )\r\n .join(\"\")}\r\n <\/ul>\r\n <\/div>`\r\n )\r\n .join(\"\");\r\n\r\n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0648 \u0627\u0639\u0645\u0627\u0644 \u06a9\u0644\u0627\u0633 \u0641\u0639\u0627\u0644 \u0628\u0631 \u0627\u0633\u0627\u0633 \u06a9\u0648\u06a9\u06cc\u200c\u0647\u0627\r\n const existingServices = getCookie(\"bookedServices\");\r\n if (existingServices) {\r\n const serviceIds = existingServices.split(\",\");\r\n\r\n serviceIds.forEach((serviceId) => {\r\n const serviceElement = document.querySelector(\r\n `.services-list[data-service-id=\"${serviceId}\"]`\r\n );\r\n\r\n if (serviceElement) {\r\n serviceElement.classList.add(\"active\");\r\n const bookButton = serviceElement.querySelector(\".services-book-btn-2\");\r\n if (bookButton) {\r\n bookButton.classList.add(\"active\");\r\n }\r\n }\r\n });\r\n }\r\n }\r\n\r\n function initCategorySelection(initialCategoryId = null) {\r\n const categories = document.querySelectorAll(\".services-category\");\r\n const sections = document.querySelectorAll(\".services-category-section\");\r\n const container = document.querySelector(\".services-category-container-2\");\r\n\r\n \/\/ \u0645\u062a\u063a\u06cc\u0631 \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u062d\u0627\u0644\u062a \u06a9\u0644\u06cc\u06a9 \u062f\u0633\u062a\u06cc\r\n let isManualScroll = false;\r\n\r\n \/\/ \u062d\u0631\u06a9\u062a \u0646\u0634\u0627\u0646\u06af\u0631 (Indicator)\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 \/\/ \u062a\u0646\u0638\u06cc\u0645 \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0641\u0639\u0627\u0644 \u0647\u0646\u06af\u0627\u0645 \u0627\u0633\u06a9\u0631\u0648\u0644\r\n function setActiveCategoryByScroll() {\r\n if (isManualScroll) return; \/\/ \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0639\u0645\u0644\u06a9\u0631\u062f \u0647\u0646\u06af\u0627\u0645 \u06a9\u0644\u06cc\u06a9\r\n\r\n let activeSection = null;\r\n\r\n sections.forEach((section) => {\r\n const rect = section.getBoundingClientRect();\r\n if (rect.top <= 150 && rect.bottom >= 150) {\r\n activeSection = section;\r\n }\r\n });\r\n\r\n \/\/ \u0627\u06af\u0631 \u0628\u0647 \u0627\u0646\u062a\u0647\u0627\u06cc \u0635\u0641\u062d\u0647 \u0631\u0633\u06cc\u062f\u06cc\u0645\r\n if (\r\n window.innerHeight + window.scrollY >=\r\n document.body.offsetHeight - 100\r\n ) {\r\n activeSection = sections[sections.length - 1];\r\n }\r\n\r\n if (activeSection) {\r\n const targetCategoryId = activeSection.getAttribute(\r\n \"data-category-section\"\r\n );\r\n categories.forEach((category) => {\r\n category.classList.remove(\"active-category\");\r\n if (category.getAttribute(\"data-category-id\") === targetCategoryId) {\r\n category.classList.add(\"active-category\");\r\n moveIndicator(category);\r\n category.scrollIntoView({behavior: \"smooth\", block: \"nearest\", inline: \"center\"});\r\n }\r\n });\r\n }\r\n }\r\n\r\n function scrollToCategory(categoryId) {\r\n const targetSection = document.querySelector(\r\n `[data-category-section=\"${categoryId}\"]`\r\n );\r\n const targetCategory = document.querySelector(\r\n `[data-category-id=\"${categoryId}\"]`\r\n );\r\n\r\n if (targetSection && targetCategory) {\r\n isManualScroll = true;\r\n\r\n categories.forEach((item) => item.classList.remove(\"active-category\"));\r\n targetCategory.classList.add(\"active-category\");\r\n moveIndicator(targetCategory);\r\n\r\n window.scrollTo({\r\n top: targetSection.offsetTop - 100,\r\n behavior: \"smooth\",\r\n });\r\n\r\n setTimeout(() => {\r\n isManualScroll = false;\r\n }, 1000);\r\n }\r\n }\r\n\r\n \/\/ \u0645\u0648\u0642\u0639\u06cc\u062a \u0627\u0648\u0644\u06cc\u0647 \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0641\u0639\u0627\u0644\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 \/\/ \u0631\u0648\u06cc\u062f\u0627\u062f \u06a9\u0644\u06cc\u06a9 \u0628\u0631\u0627\u06cc \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc\u200c\u0647\u0627\r\n categories.forEach((category) => {\r\n if (!category.dataset.listenerAdded) {\r\n \/\/ \u0627\u06af\u0631 \u0631\u0648\u06cc\u062f\u0627\u062f \u0642\u0628\u0644\u0627\u064b \u0627\u0636\u0627\u0641\u0647 \u0646\u0634\u062f\u0647 \u0627\u0633\u062a\r\n category.addEventListener(\"click\", () => {\r\n isManualScroll = true;\r\n\r\n categories.forEach((item) => item.classList.remove(\"active-category\"));\r\n category.classList.add(\"active-category\");\r\n moveIndicator(category);\r\n\r\n const targetId = category.getAttribute(\"data-category-id\");\r\n scrollToCategory(targetId);\r\n });\r\n\r\n category.dataset.listenerAdded = \"true\"; \/\/ \u062b\u0628\u062a \u0627\u06cc\u0646\u06a9\u0647 \u0627\u06cc\u0646 \u062f\u0633\u062a\u0647\u200c\u0628\u0646\u062f\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f \u062f\u0627\u0631\u062f\r\n }\r\n });\r\n\r\n \/\/ \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0627\u0636\u0627\u0641\u0647 \u0634\u062f\u0646 \u0686\u0646\u062f\u0628\u0627\u0631\u0647\u200c\u06cc \u0631\u0648\u06cc\u062f\u0627\u062f Scroll\r\n if (!window.hasScrollListener) {\r\n window.addEventListener(\"scroll\", setActiveCategoryByScroll);\r\n window.hasScrollListener = true;\r\n }\r\n\r\n if (initialCategoryId) {\r\n setTimeout(() => {\r\n scrollToCategory(initialCategoryId);\r\n }, 500);\r\n }\r\n }\r\n\r\n\r\n function popupOpening() {\r\n const popupOverlay = document.querySelector(\".services-item-popup-overlay\");\r\n const servicesListItems = document.querySelector(\".services-list-container\");\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 addToBookingBtn = document.querySelector(\".add-to-booking-btn-2\");\r\n const removeFromBookingBtn = document.querySelector(\".remove-from-booking\");\r\n\r\n servicesListItems.addEventListener(\"click\", (event) => {\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 let selectedService;\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\" data-service-id=\"${selectedService.id}\">\r\n <p>${selectedService.duration} min<\/p>\r\n <span class=\"price\">${selectedService.price} ${servicesAPI.currency}<\/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 \/\/ Check if service is already in cookies\r\n const existingServices = getCookie(\"bookedServices\");\r\n const serviceIds = existingServices ? existingServices.split(\",\") : [];\r\n if (serviceIds.includes(serviceId)) {\r\n addToBookingBtn.classList.add(\"hidden\");\r\n removeFromBookingBtn.classList.remove(\"hidden\");\r\n } else {\r\n addToBookingBtn.classList.remove(\"hidden\");\r\n removeFromBookingBtn.classList.add(\"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\r\n const cartItemCount = document.querySelector('.cart-item-count p');\r\n\r\n function updateCartItemCount(container) {\r\n const cartItems = container.querySelectorAll('.cart-item');\r\n cartItemCount.textContent = `${cartItems.length} service selected`;\r\n }\r\n\/\/ \u062a\u0648\u0627\u0628\u0639 \u06a9\u0645\u06a9\u06cc \u0628\u0631\u0627\u06cc \u0645\u062f\u06cc\u0631\u06cc\u062a \u0642\u06cc\u0645\u062a\u200c\u0647\u0627\r\nfunction getPriceValue(priceText) {\r\n if (!priceText) return 0;\r\n if (typeof priceText !== 'string') return parseFloat(priceText) || 0;\r\n \r\n \/\/ \u062d\u0630\u0641 \u06a9\u0627\u0631\u0627\u06a9\u062a\u0631\u0647\u0627\u06cc \u063a\u06cc\u0631\u0639\u062f\u062f\u06cc \u0648 \u062a\u0628\u062f\u06cc\u0644 \u0628\u0647 \u0639\u062f\u062f\r\n const numericValue = parseFloat(priceText.replace(\/[^\\d.]\/g, '')) || 0;\r\n return numericValue;\r\n}\r\n\r\nfunction formatPrice(price) {\r\n if (isNaN(price)) return \"free\"; \/\/ \u0627\u0635\u0644\u0627\u062d \u0634\u062f\u0647\r\n if (price <= 0) return \"free\";\r\n return `${servicesAPI.currency} ${price.toFixed(2)}`;\r\n}\r\n\r\n addToBookingBtn.addEventListener(\"click\", () => {\r\n const selectedItem = document.querySelector(\".content\");\r\n const cartItemList = document.querySelector(\".cart-item-list\");\r\n const servicesList = document.querySelectorAll(\".services-list\");\r\n const cartTotal = document.querySelector(\".cart-total-price\");\r\n const productDetails = {\r\n productName: popupTitle.textContent,\r\n duration: selectedItem.querySelector(\"p\").textContent,\r\n price: getPriceValue(selectedItem.querySelector(\".price\").textContent),\r\n id: selectedItem.getAttribute(\"data-service-id\"),\r\n };\r\n\r\n \r\n if (cartItemList.querySelector(\".no-service-alert\")) {\r\n cartItemList.removeChild(cartItemList.querySelector(\".no-service-alert\"));\r\n }\r\n\r\n cartItemList.innerHTML += `<li class=\"cart-item\" data-service-id=\"${productDetails.id}\">\r\n <div class=\"cart-item-details\">\r\n <p class=\"cart-item-name\">${productDetails.productName}<\/p>\r\n <div class=\"cart-item-time-and-service\">\r\n <span class=\"cart-item-time\">${productDetails.duration}<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"cart-item-price\">${formatPrice(productDetails.price)}<\/p>\r\n <\/li>`;\r\n\r\n popupOverlay.classList.remove(\"active\");\r\n document.body.style.overflow = \"\";\r\n\r\n\t \/\/ \u0645\u062d\u0627\u0633\u0628\u0647 \u062c\u0645\u0639 \u06a9\u0644\r\n const cartPreviousPrice = cartTotal.textContent.includes(\"free\") \r\n ? 0 \r\n : getPriceValue(cartTotal.textContent);\r\n\r\n const newTotal = cartPreviousPrice + productDetails.price;\r\n cartTotal.textContent = formatPrice(newTotal);\r\n\r\n\r\n \/\/ \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648\u0636\u0639\u06cc\u062a \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627\r\n servicesList.forEach((service) => {\r\n if (service.getAttribute(\"data-service-id\") == productDetails.id) {\r\n service.classList.add(\"active\");\r\n service.querySelector(\".services-book-btn-2\").classList.add(\"active\");\r\n }\r\n });\r\n\r\n \/\/ \u0630\u062e\u06cc\u0631\u0647 \u062f\u0631 \u06a9\u0648\u06a9\u06cc\r\n const existingServices = getCookie(\"bookedServices\");\r\n const serviceIds = existingServices ? existingServices.split(\",\") : [];\r\n if (!serviceIds.includes(productDetails.id)) {\r\n serviceIds.push(productDetails.id);\r\n setCookie(\"bookedServices\", serviceIds.join(\",\"), 7);\r\n }\r\n\r\n updateCartItemCount(cartItemList);\r\n addToBookingBtn.classList.add(\"hidden\");\r\n removeFromBookingBtn.classList.remove(\"hidden\");\r\n\r\n \r\n });\r\nremoveFromBookingBtn.addEventListener(\"click\", () => {\r\n const selectedItem = document.querySelector(\".content\");\r\n const cartItemList = document.querySelector(\".cart-item-list\");\r\n const servicesList = document.querySelectorAll(\".services-list\");\r\n const cartTotal = document.querySelector(\".cart-total-price\");\r\n const serviceId = selectedItem.getAttribute(\"data-service-id\");\r\n\r\n\t\/\/ \u062d\u0630\u0641 \u0633\u0631\u0648\u06cc\u0633 \u0627\u0632 \u0633\u0628\u062f \u062e\u0631\u06cc\u062f\r\n const cartItem = cartItemList.querySelector(`.cart-item[data-service-id=\"${serviceId}\"]`);\r\n\r\n \r\nif (cartItem) {\r\n const itemPrice = getPriceValue(cartItem.querySelector(\".cart-item-price\").textContent);\r\n cartItem.remove();\r\n \r\n if (cartItemList.querySelectorAll(\".cart-item\").length === 0) {\r\n cartItemList.innerHTML = `<p class=\"no-service-alert\">No services selected<\/p>`;\r\n }\r\n\r\n \/\/ \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u062c\u0645\u0639 \u06a9\u0644\r\n const currentTotal = getPriceValue(cartTotal.textContent);\r\n const newTotal = currentTotal - itemPrice;\r\n cartTotal.textContent = formatPrice(newTotal);\r\n }\r\n\r\n \r\n\r\n \/\/ \u0628\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc \u0648\u0636\u0639\u06cc\u062a \u0633\u0631\u0648\u06cc\u0633\u200c\u0647\u0627\r\n servicesList.forEach((service) => {\r\n if (service.getAttribute(\"data-service-id\") == serviceId) {\r\n service.classList.remove(\"active\");\r\n service.querySelector(\".services-book-btn-2\").classList.remove(\"active\");\r\n }\r\n });\r\n\r\n \/\/ \u062d\u0630\u0641 \u0627\u0632 \u06a9\u0648\u06a9\u06cc\r\n \/\/ \u062d\u0630\u0641 \u0627\u0632 \u06a9\u0648\u06a9\u06cc\r\n const existingServices = getCookie(\"bookedServices\");\r\n const serviceIds = existingServices ? existingServices.split(\",\") : [];\r\n const updatedServiceIds = serviceIds.filter((id) => id !== serviceId);\r\n setCookie(\"bookedServices\", updatedServiceIds.join(\",\"), 7);\r\n\r\n updateCartItemCount(cartItemList);\r\n removeFromBookingBtn.classList.add(\"hidden\");\r\n addToBookingBtn.classList.remove(\"hidden\");\r\n popupOverlay.classList.remove(\"active\");\r\n document.body.style.overflow = \"\";\r\n });\r\n }\r\n\r\n function findServiceById(serviceId) {\r\n let foundService = null;\r\n\r\n servicesAPI.categories.forEach((category) => {\r\n category.services.forEach((service) => {\r\n if (service.id == serviceId) {\r\n foundService = service;\r\n }\r\n });\r\n });\r\n\r\n return foundService;\r\n }\r\n\r\n \/\/ \u0627\u0635\u0644\u0627\u062d \u062a\u0627\u0628\u0639 populateCartFromCookies\r\nfunction populateCartFromCookies() {\r\n const existingServices = getCookie(\"bookedServices\");\r\n const cartItemList = document.querySelector(\".cart-item-list\");\r\n const cartTotal = document.querySelector(\".cart-total-price\");\r\n const cartItemCount = document.querySelector('.cart-item-count p');\r\n let totalPrice = 0;\r\n\r\n if (!existingServices) return;\r\n\r\n const serviceIds = existingServices.split(\",\");\r\n cartItemCount.textContent = `${serviceIds.length} services selected`;\r\n\r\n serviceIds.forEach((serviceId) => {\r\n const serviceDetails = findServiceById(serviceId);\r\n if (serviceDetails) {\r\n if (cartItemList.querySelector(\".no-service-alert\")) {\r\n cartItemList.removeChild(cartItemList.querySelector(\".no-service-alert\"));\r\n }\r\n\r\n cartItemList.innerHTML += `<li class=\"cart-item\" data-service-id=\"${serviceDetails.id}\">\r\n <div class=\"cart-item-details\">\r\n <p class=\"cart-item-name\">${serviceDetails.name}<\/p>\r\n <div class=\"cart-item-time-and-service\">\r\n <span class=\"cart-item-time\">${serviceDetails.duration} min<\/span>\r\n <\/div>\r\n <\/div>\r\n <p class=\"cart-item-price\">${formatPrice(serviceDetails.price)}<\/p>\r\n <\/li>`;\r\n \r\n totalPrice += getPriceValue(serviceDetails.price);\r\n }\r\n });\r\n\r\n cartTotal.textContent = formatPrice(totalPrice);\r\n}\r\n\r\n \/\/ Start the app\r\n fetchServicesAPI();\r\n <\/script>\r\n <\/body>\r\n <\/html>\r\n\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-84","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/pages\/84","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=84"}],"version-history":[{"count":7,"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":557,"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/pages\/84\/revisions\/557"}],"wp:attachment":[{"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/media?parent=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}