{"id":89,"date":"2025-01-10T21:12:46","date_gmt":"2025-01-10T21:12:46","guid":{"rendered":"http:\/\/book.parpico.com\/?page_id=89"},"modified":"2025-01-10T21:14:14","modified_gmt":"2025-01-10T21:14:14","slug":"schedule","status":"publish","type":"page","link":"https:\/\/chilaibeauty.ae\/book\/schedule\/","title":{"rendered":"schedule"},"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\r\n rel=\"stylesheet\"\r\n href=\"https:\/\/unpkg.com\/flickity@2\/dist\/flickity.min.css\"\r\n \/>\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 <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\r\n <link\r\n rel=\"stylesheet\"\r\n href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\"\r\n \/>\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\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\r\n .cart-selected-date {\r\n display: flex;\r\n align-items: center;\r\n gap: 8px;\r\n color: #757676;\r\n font-size: 15px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .cart-selected-date svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .cart-item-selected-time {\r\n grid-column: span 2;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: 8px;\r\n color: #757676;\r\n font-size: 15px;\r\n margin-top: 4px;\r\n }\r\n\r\n .cart-item-selected-time svg {\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\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-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 {\r\n position: sticky;\r\n top: 72px;\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 }\r\n\r\n .services-category-container.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::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: 56px;\r\n scroll-margin-top: 100px;\r\n }\r\n\r\n .services-category-title {\r\n padding-bottom: 24px;\r\n font-weight: 500;\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 }\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: 400;\r\n }\r\n\r\n .services-book-btn {\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 svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .services-book-btn: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.active {\r\n background-color: #000;\r\n }\r\n\r\n .services-book-btn.active:hover {\r\n background-color: #5c4ace;\r\n }\r\n\r\n .services-book-btn.active .selected-book-btn {\r\n display: unset;\r\n color: #fff;\r\n }\r\n\r\n .services-book-btn.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 .calendar-container {\r\n max-width: 790px;\r\n margin: 50px auto;\r\n text-align: center;\r\n user-select: none;\r\n }\r\n\r\n .calendar-header {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .carousel {\r\n width: 100%;\r\n }\r\n\r\n .carousel-cell {\r\n margin-right: 38px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n transition: background-color 0.3s, color 0.3s;\r\n }\r\n\r\n .carousel-cell.deactive {\r\n opacity: 0.4;\r\n }\r\n\r\n .carousel-cell.deactive.active {\r\n opacity: 1;\r\n }\r\n\r\n .carousel-cell.deactive.active .carousel-cell-date::before {\r\n content: none;\r\n }\r\n\r\n .carousel-cell.deactive .carousel-cell-date {\r\n position: relative;\r\n }\r\n\r\n .carousel-cell.deactive .carousel-cell-date::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n background-color: #10191c;\r\n width: 15px;\r\n height: 2px;\r\n }\r\n\r\n .carousel-cell-date {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n border-radius: 50%;\r\n width: 64px;\r\n height: 64px;\r\n font-size: 24px;\r\n font-weight: 600;\r\n border: 1px solid #e6e6e6;\r\n transition: all 0.2s;\r\n }\r\n\r\n .carousel-cell-date:hover {\r\n border-color: #d3d3d3;\r\n background-color: #f5f5f5;\r\n }\r\n\r\n .carousel-cell-day {\r\n font-size: 15px;\r\n font-weight: 500;\r\n }\r\n\r\n .carousel-cell.active .carousel-cell-date {\r\n background-color: #000;\r\n color: white;\r\n }\r\n\r\n .carousel-cell.active .carousel-cell-date:hover {\r\n background-color: #5c4ace;\r\n }\r\n\r\n .carousel-cell span {\r\n margin-top: 5px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .flickity-prev-next-button {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n width: 36px;\r\n height: 36px;\r\n color: #10191c;\r\n top: 150px !important;\r\n border-radius: 8px;\r\n }\r\n\r\n .flickity-prev-next-button .flickity-button-icon {\r\n box-sizing: border-box;\r\n padding: 6px;\r\n }\r\n\r\n .flickity-prev-next-button:hover {\r\n background: #f6f6f6;\r\n }\r\n\r\n .flickity-prev-next-button.next,\r\n .flickity-prev-next-button.previous {\r\n top: -30px !important;\r\n }\r\n\r\n .flickity-prev-next-button.previous {\r\n left: unset;\r\n right: 60px;\r\n }\r\n\r\n .current-month {\r\n font-size: 17px;\r\n font-weight: 500;\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 .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 min-height: 480px;\r\n height: auto;\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 user-select: none;\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: grid;\r\n grid-template-columns: 1fr auto;\r\n gap: 10px;\r\n align-items: center;\r\n width: 100%;\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 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 .time-container {\r\n width: 100%;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .no-time-available {\r\n display: none;\r\n width: 100%;\r\n height: 325px;\r\n border: 1px solid #e5e5e5;\r\n border-radius: 8px;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 16px;\r\n color: #0d1619;\r\n }\r\n\r\n .no-time-available img {\r\n width: 56px !important;\r\n height: 56px !important;\r\n }\r\n\r\n .no-time-available-texts {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n gap: 4px;\r\n }\r\n\r\n .no-time-available-texts p {\r\n margin-bottom: 0;\r\n }\r\n\r\n .no-time-available-text {\r\n font-size: 21px;\r\n font-weight: 500;\r\n }\r\n\r\n .no-time-available-date {\r\n color: #757676;\r\n font-size: 15px;\r\n font-weight: 500;\r\n }\r\n\r\n .no-time-available-btn {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n font-family: inherit;\r\n height: 36px;\r\n border: 1px solid #bfbfbf;\r\n padding-inline: 15px;\r\n margin-top: 0;\r\n margin-bottom: 0;\r\n border-radius: 9999px;\r\n background-color: transparent;\r\n font-size: 15px;\r\n font-weight: 400;\r\n transition: all 0.2s;\r\n cursor: pointer;\r\n color: #0d1619;\r\n }\r\n\r\n .no-time-available-btn:hover {\r\n background-color: #f5f5f5;\r\n color: #0d1619;\r\n }\r\n\r\n .time-list {\r\n display: none;\r\n width: 100%;\r\n min-height: 325px;\r\n flex-direction: column;\r\n gap: 12px;\r\n list-style: none;\r\n }\r\n\r\n .time-list h3 {\r\n text-align: left;\r\n font-size: 20px;\r\n font-weight: 600;\r\n margin: 0;\r\n }\r\n\r\n .time-list-item {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 12px;\r\n width: 100%;\r\n box-sizing: border-box;\r\n }\r\n\r\n .time-list-item button {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n padding: 15px 25px;\r\n border-radius: 8px;\r\n margin: 0;\r\n border: none;\r\n }\r\n\r\n .time-list-item button svg {\r\n width: 16px;\r\n height: 16px;\r\n }\r\n\r\n .time-list-item label {\r\n display: block;\r\n width: 100%;\r\n padding: 20px 24px;\r\n border: 1px solid #e5e5e5;\r\n border-radius: 8px;\r\n font-size: 15px;\r\n font-weight: 400;\r\n transition: border-color 0.2s;\r\n cursor: pointer;\r\n }\r\n\r\n .time-list-item label:hover {\r\n background-color: #f5f5f5;\r\n border-color: #d3d3d3;\r\n }\r\n\r\n .time-list-item input[type=\"radio\"]:checked + label {\r\n border-color: #000;\r\n border-width: 2px;\r\n padding: 19px 23px;\r\n }\r\n\r\n .service-container {\r\n display: grid;\r\n grid-template-columns: repeat(8, 1fr); \/* \u0647\u0631 \u0631\u062f\u06cc\u0641 \u0634\u0627\u0645\u0644 5 \u0633\u062a\u0648\u0646 *\/\r\n gap: 10px; \/* \u0641\u0627\u0635\u0644\u0647 \u0628\u06cc\u0646 \u0622\u06cc\u062a\u0645\u200c\u0647\u0627 *\/\r\n list-style-type: none; \/* \u062d\u0630\u0641 \u0628\u0648\u0644\u062a\u200c\u0647\u0627 *\/\r\n padding: 0; \/* \u062d\u0630\u0641 \u0641\u0627\u0635\u0644\u0647 \u062f\u0627\u062e\u0644\u06cc *\/\r\n margin: 0; \/* \u062d\u0630\u0641 \u062d\u0627\u0634\u06cc\u0647 *\/\r\n margin-block: 5px 25px;\r\n }\r\n\r\n \/\/ .user-info-container {\r\n \/\/ display: none;\r\n \/\/ justify-content: center;\r\n \/\/ align-items: center;\r\n \/\/ position: fixed;\r\n \/\/ inset: 0;\r\n \/\/ background-color: #364a4b47;\r\n \/\/ z-index: 9999;\r\n \/\/ }\r\n\r\n .user-info-form {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n gap: 16px;\r\n width: 480px;\r\n padding: 32px 48px;\r\n padding-top: 27px;\r\n background-color: #fff;\r\n border-radius: 16px;\r\n }\r\n\r\n .user-info-form.signin-form {\r\n display: none;\r\n }\r\n\r\n .close-user-info {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n position: absolute;\r\n width: 32px;\r\n height: 32px;\r\n background-color: transparent;\r\n border: none;\r\n cursor: pointer;\r\n top: 28px;\r\n right: 28px;\r\n border-radius: 8px;\r\n padding: 0;\r\n }\r\n\r\n .close-user-info svg {\r\n width: 20px;\r\n height: 20px;\r\n color: #0d1619;\r\n }\r\n\r\n .close-user-info:hover {\r\n background-color: #f6f6f6;\r\n }\r\n\r\n .close-user-info:hover svg {\r\n color: #0d1619;\r\n }\r\n\r\n .user-info-form p {\r\n font-size: 24px;\r\n font-weight: 500;\r\n margin: 0;\r\n }\r\n\r\n .user-info-form-item {\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .user-info-form-item input {\r\n height: 46px;\r\n padding-inline: 16px;\r\n border-radius: 8px;\r\n font-size: 15px;\r\n outline: none;\r\n border: 1px solid #d7d7d7;\r\n }\r\n\r\n .show-password {\r\n position: absolute;\r\n top: 50%;\r\n right: 16px;\r\n transform: translateY(-50%);\r\n width: 20px;\r\n height: 20px;\r\n }\r\n\r\n .account-status-btn {\r\n width: fit-content;\r\n padding: 0px 10px;\r\n border: none;\r\n font-size: 0.8rem;color:#000;\r\n }\r\n\r\n .account-status-btn:hover {\r\n }\r\n\r\n .user-info-form-btn {\r\n height: 46px;\r\n border-radius: 8px;\r\n border: none;\r\n background-color: #0d1619;\r\n color: #fff;\r\n font-size: 15px;\r\n cursor: pointer;\r\n transition: all 0.2s;\r\n font-size: 17px;\r\n font-weight: 500;\r\n }\r\n\r\n .user-info-form-btn:hover {\r\n background-color: #2c3032;\r\n }\r\n\r\n .cart-item-count {\r\n display: none;\r\n }\r\n\r\n .user-login-signup p {\r\n font-size: 14px;\r\n margin: 0;\r\n }\r\n\r\n .user-login-signup h3 {\r\n font-size: 24px;\r\n margin: 0px 0px 8px 0px;\r\n }\r\n\r\n .Horizental-seprator span {\r\n background: #ccc;\r\n width: 43%;\r\n height: 1px;\r\n }\r\n\r\n .Horizental-seprator p {\r\n margin-top: -9px;\r\n font-size: 13px;\r\n }\r\n\r\n .Horizental-seprator {\r\n display: flex;\r\n justify-content: space-between;\r\n }\r\n\r\n div.nsl-container .nsl-button-google[data-skin=\"light\"] {\r\n box-shadow: unset !important;\r\n border-radius: 8px !important;\r\n width: 100%;\r\n border: 1px solid #ccc;\r\n }\r\n\r\n .nsl-button-label-container {\r\n font-weight: bolder !important;\r\n font-size: 14px !important;\r\n }\r\n\r\n .nsl-container-buttons {\r\n width: 100%;\r\n }\r\n\r\n @media (min-width: 768px) {\r\n .salon-info.d-none-lg {\r\n display: none;\r\n }\r\n }\r\n\r\n @media (max-width: 768px) {\r\n .cart-item-count {\r\n display: block;\r\n }\r\n .custom-popup-box{width:320px!important;}\r\n }\r\n.congrats-text {\r\n font-size: 21px;\r\n font-weight: bold;\r\n color: #673d85;\r\n animation: zoomInOut 2s ease-in-out infinite;\r\n display: flex;\r\n justify-content: center;\r\n}\r\n\r\n @keyframes zoomInOut {\r\n 0%, 100% {\r\n transform: scale(1);\r\n }\r\n 50% {\r\n transform: scale(1.2);\r\n }\r\n }\r\n @media (max-width: 767px) {\r\n \r\n .custom-popup-box{width:320px!important;}\r\n }\r\n \r\n .custom-popup {\r\n position: fixed;\r\n inset: 0;\r\n z-index: 9999;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n}\r\n\r\n.custom-popup-overlay {\r\n position: absolute;\r\n inset: 0;\r\n background: rgba(0, 0, 0, 0.5);\r\n}\r\n\r\n.custom-popup-box {\r\n position: relative;\r\n background: #fff;\r\n color: #333;\r\n padding: 20px 30px;\r\n border-radius: 12px;\r\n box-shadow: 0 5px 25px rgba(0,0,0,0.3);\r\n max-width: 400px;\r\n text-align: center;\r\n z-index: 10000;\r\n animation: fadeInScale 0.25s ease;\r\n}\r\n\r\n.custom-popup-box button {\r\n margin-top: 15px;\r\n padding: 8px 20px;\r\n background: #000;\r\n color: white;\r\n border: none;\r\n border-radius: 6px;\r\n cursor: pointer;\r\n transition: 0.2s;\r\n}\r\n\r\n.custom-popup-box button:hover {\r\n background: #000;\r\n}\r\n\r\n@keyframes fadeInScale {\r\n from { opacity: 0; transform: scale(0.9); }\r\n to { opacity: 1; transform: scale(1); }\r\n}\r\n\r\n \r\n \r\n\r\n <\/style>\r\n\t\t<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/bodymovin\/5.12.2\/lottie.min.js\"><\/script>\r\n<script>\r\n lottie.loadAnimation({\r\n container: document.getElementById('lottie-box'), \/\/ the HTML element\r\n renderer: 'svg',\r\n loop: true,\r\n autoplay: true,\r\n path: '\/wp-content\/uploads\/2024\/12\/Animation-1745594033356.json' \/\/ relative or absolute URL to your JSON file\r\n });\r\n<\/script>\r\n <\/head>\r\n <body>\r\n <div id=\"success-modal\" style=\"\r\n display: none;\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.8);\r\n z-index: 1000;\r\n justify-content: center;\r\n align-items: center;\r\n font-family: 'Arial', sans-serif;\">\r\n <div id=\"lottie-box\" style=\"\r\n background: #fff;\r\n padding: 30px;\r\n text-align: center;\r\n border-radius: 15px;\r\n width: 350px;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);\r\n border: 2px solid #d9d7e5;\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\" fill=\"#673d85\" width=\"60px\" height=\"60px\">\r\n <path d=\"M12 0C5.37258 0 0 5.37258 0 12C0 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 0 12 0ZM10.5 17.25L5.25 12L6.825 10.425L10.5 14.1L17.175 7.425L18.75 9L10.5 17.25Z\"\/>\r\n <\/svg>\r\n\t\t\t<div class=\"congrats-text\">\ud83c\udf89 Congratulations! \ud83c\udf89<\/div>\r\n <h2 style=\"color: #2c3e50; font-size: 20px; margin: 15px 0;\">Your booking was successful!<\/h2>\r\n <p style=\"color: #7f8c8d; font-size: 14px; margin-bottom: 20px;\">Thank you for your reservation. We look\r\n forward to serving you!<\/p>\r\n\t\t\t\t<p style=\"margin:8px 0;color: #7f8c8d; font-size: 14px;\">Dear customer, if you are late, your reservation will be canceled.<\/p>\r\n <button id=\"go-home-button\" style=\"\r\n background-color: #673d85;\r\n color: #fff;\r\n padding: 12px 25px;\r\n border: none;\r\n border-radius: 8px;\r\n cursor: pointer;\r\n font-size: 16px;\r\n transition: background-color 0.3s;\">\r\n Return to Home\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n\r\n <header class=\"services-header-container\">\r\n <div class=\"services-header\">\r\n <a href=\"https:\/\/chilaibeauty.ae\/book\/see-all\/\" 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 time<\/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\t<style>\r\n .user-info-form.login-form,\r\n .user-info-form.signin-form {\r\n display: none !important;\r\n }\r\n<\/style>\r\n <script>\r\n(function(){\r\n const f = document.querySelector('.user-info-form.login-form');\r\n if(!f) return console.log('login form not found');\r\n \/\/ clone to remove all JS listeners\r\n const clone = f.cloneNode(true);\r\n f.parentNode.replaceChild(clone, f);\r\n console.log('Login form cloned \u2014 all JS listeners removed. Try pressing Continue now.');\r\n})();\r\n<\/script>\r\n <div class=\"user-info-container\">\r\n <!-- \u0641\u0631\u0645 \u0648\u0631\u0648\u062f -->\r\n <form class=\"login-form user-info-form\" method=\"post\" action=\"\/book\/wp-json\/wp\/v2\/pages\/89\">\r\n <input type=\"hidden\" id=\"login_form_nonce\" name=\"login_form_nonce\" value=\"07fae8eaf7\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/book\/wp-json\/wp\/v2\/pages\/89\" \/> <input type=\"text\" name=\"website\" style=\"display:none\" \/>\r\n\r\n <div class=\"user-login-signup\">\r\n <h3>Log in or sign up<\/h3>\r\n <p>Log in or sign up to complete your booking<\/p>\r\n <\/div>\r\n <div class=\"nsl-container nsl-container-block\" data-align=\"left\"><div class=\"nsl-container-buttons\"><a href=\"https:\/\/chilaibeauty.ae\/book\/wp-login.php?loginSocial=google&redirect=https%3A%2F%2Fchilaibeauty.ae%2Fbook%2Fschedule\" rel=\"nofollow\" aria-label=\"Continue with <b>Google<\/b>\" data-plugin=\"nsl\" data-action=\"connect\" data-provider=\"google\" data-popupwidth=\"600\" data-popupheight=\"600\"><div class=\"nsl-button nsl-button-default nsl-button-google\" data-skin=\"light\" style=\"background-color:#fff;\"><div class=\"nsl-button-svg-container\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"#4285F4\" d=\"M20.64 12.2045c0-.6381-.0573-1.2518-.1636-1.8409H12v3.4814h4.8436c-.2086 1.125-.8427 2.0782-1.7959 2.7164v2.2581h2.9087c1.7018-1.5668 2.6836-3.874 2.6836-6.615z\"><\/path><path fill=\"#34A853\" d=\"M12 21c2.43 0 4.4673-.806 5.9564-2.1805l-2.9087-2.2581c-.8059.54-1.8368.859-3.0477.859-2.344 0-4.3282-1.5831-5.036-3.7104H3.9574v2.3318C5.4382 18.9832 8.4818 21 12 21z\"><\/path><path fill=\"#FBBC05\" d=\"M6.964 13.71c-.18-.54-.2822-1.1168-.2822-1.71s.1023-1.17.2823-1.71V7.9582H3.9573A8.9965 8.9965 0 0 0 3 12c0 1.4523.3477 2.8268.9573 4.0418L6.964 13.71z\"><\/path><path fill=\"#EA4335\" d=\"M12 6.5795c1.3214 0 2.5077.4541 3.4405 1.346l2.5813-2.5814C16.4632 3.8918 14.426 3 12 3 8.4818 3 5.4382 5.0168 3.9573 7.9582L6.964 10.29C7.6718 8.1627 9.6559 6.5795 12 6.5795z\"><\/path><\/svg><\/div><div class=\"nsl-button-label-container\">Continue with <b>Google<\/b><\/div><\/div><\/a><\/div><\/div> <div class=\"Horizental-seprator\">\r\n <span><\/span>\r\n <p>OR<\/p>\r\n <span><\/span>\r\n <\/div>\r\n <button type=\"button\" class=\"close-user-info\">\r\n <svg fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 32 32\">\r\n <path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n <div class=\"user-info-form-item\">\r\n <!-- \u062a\u063a\u06cc\u06cc\u0631 id \u0628\u0647 login_email -->\r\n <input type=\"email\" id=\"login_email\" name=\"login_email\" placeholder=\"Enter your email\" required\/>\r\n <\/div>\r\n <div class=\"user-info-form-item LoginPass\">\r\n <!-- \u062a\u063a\u06cc\u06cc\u0631 id \u0628\u0647 login_password -->\r\n <input type=\"password\" id=\"login_password\" name=\"login_password\" placeholder=\"Enter your password\" required\/>\r\n <input class=\"show-password\" type=\"checkbox\"\r\n onchange=\"document.querySelector('.login-form').querySelector('#login_password').type = this.checked ? 'text' : 'password'\">\r\n <\/div>\r\n <button type=\"button\" class=\"login-account-status account-status-btn\">you don't have an account?<\/button>\r\n <button type=\"submit\" name=\"login_form_submitted\" class=\"user-info-form-btn\">Continue<\/button>\r\n <\/form>\r\n\r\n <!-- \u0641\u0631\u0645 \u062b\u0628\u062a\u200c\u0646\u0627\u0645 -->\r\n <form class=\"signin-form user-info-form\" method=\"post\">\r\n <input type=\"hidden\" id=\"signin_form_nonce\" name=\"signin_form_nonce\" value=\"de607f8025\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/book\/wp-json\/wp\/v2\/pages\/89\" \/> <input type=\"text\" name=\"website\" style=\"display:none\" \/>\r\n\r\n <div class=\"Signup-Popup-Header\">\r\n <button class=\"signin-account-status account-status-btn\">\r\n <svg class=\"PopupBackIcon\" fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 32 32\">\r\n <path fill-rule=\"evenodd\" 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\" clip-rule=\"evenodd\"><\/path>\r\n <\/svg>\r\n <\/button>\r\n <\/div>\r\n <div class=\"user-login-signup\">\r\n <h3>Create account<\/h3>\r\n <\/div>\r\n <div class=\"user-info-form-item\">\r\n <label>Name *<\/label>\r\n <!-- \u062a\u063a\u06cc\u06cc\u0631 id \u0628\u0647 signin_name -->\r\n <input type=\"text\" id=\"signin_name\" name=\"signin_name\" placeholder=\"Enter your name\" required\/>\r\n <\/div>\r\n <div class=\"user-info-form-item\">\r\n <label>Email *<\/label>\r\n <!-- \u062a\u063a\u06cc\u06cc\u0631 id \u0628\u0647 signin_email -->\r\n <input type=\"email\" id=\"signin_email\" name=\"signin_email\" placeholder=\"Enter your email\" required\/>\r\n <\/div>\r\n <div class=\"user-info-form-item Pass\">\r\n <label>Password *<\/label>\r\n <!-- \u062a\u063a\u06cc\u06cc\u0631 id \u0628\u0647 signin_password -->\r\n <input type=\"password\" id=\"signin_password\" name=\"signin_password\" placeholder=\"Enter your password\" required\/>\r\n <input class=\"show-password\" type=\"checkbox\"\r\n onchange=\"document.querySelector('.signin-form').querySelector('#signin_password').type = this.checked ? 'text' : 'password'\">\r\n <\/div>\r\n <div class=\"user-info-form-item\">\r\n <label>Phone number *<\/label>\r\n <!-- \u062a\u063a\u06cc\u06cc\u0631 id \u0628\u0647 signin_phone -->\r\n <input type=\"tel\" id=\"signin_phone\" name=\"signin_phone\" placeholder=\"Enter your phone\"\/>\r\n <\/div>\r\n <button type=\"submit\" name=\"signin_form_submitted\" class=\"signin-form user-info-form-btn\">Continue<\/button>\r\n <\/form>\r\n <\/div>\r\n\r\n\r\n\r\n <div class=\"services-component\">\r\n <div class=\"services-container\">\r\n <div class=\"salon-info d-none-lg\">\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\">\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 active\">\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 active\">\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 time<\/h2>\r\n <span class=\"current-month\">January 2025<\/span>\r\n <div class=\"calendar-container\">\r\n <div\r\n class=\"carousel\"\r\n data-flickity='{ \"cellAlign\": \"left\", \"contain\": true, \"pageDots\": false }'\r\n ><\/div>\r\n <\/div>\r\n <div class=\"time-container\">\r\n <div class=\"no-time-available\">\r\n <img decoding=\"async\" src=\"\/wp-content\/uploads\/2025\/01\/illustration-calendar-dbfb10b915454fc731f372684f3afbdf.png\"\r\n alt=\"\"\/>\r\n <div class=\"no-time-available-texts\">\r\n <p class=\"no-time-available-text\">Fully booked on this date<\/p>\r\n <\/div>\r\n <button class=\"no-time-available-btn\">\r\n Go to next available date\r\n <\/button>\r\n <\/div>\r\n <ul class=\"time-list\"><\/ul>\r\n <\/div>\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> 1 services selected<\/p>\r\n <\/div>\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 \r\n <!-- \u062f\u06a9\u0645\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0644\u0627\u06af\u06cc\u0646 \u0634\u062f\u0647 -->\r\n <!-- \u062f\u06a9\u0645\u0647 \u0628\u0631\u0627\u06cc \u06a9\u0627\u0631\u0628\u0631\u0627\u0646 \u0646\u0627\u0634\u0646\u0627\u062e\u062a\u0647 \u06a9\u0647 \u0634\u0648\u0631\u062a\u200c\u06a9\u062f Digits \u062f\u0627\u0631\u062f -->\r\n <button class=\"cart-checkout-btn cart-final-checkout test\">\r\n <span href=\"#\" onclick=\"jQuery('this').digits_login_modal(jQuery(this));return false;\" attr-disclick=\"1\" class=\"digits-login-modal\" data-show=\"#digits-forms-popup-685\" type=\"1\"><span>Login \/ Register<\/span><\/span> <\/button>\r\n <\/div>\r\n <\/div>\r\n <!-- Sidebar -->\r\n <\/div>\r\n <script src=\"https:\/\/unpkg.com\/flickity@2\/dist\/flickity.pkgd.min.js\"><\/script>\r\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\r\n\r\n <script>\r\n var isLoggedIn = false;\r\n <\/script>\r\n\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 console.log(\"API Data Loaded:\", servicesAPI);\r\n\r\n const itemIds = getCookie('bookedServices').split(',')\r\n\r\n cartHandler();\r\n fetchCalendarData(itemIds);\r\n } catch (error) {\r\n console.error(\"Error fetching API:\", error);\r\n }\r\n }\r\n\r\n function findServiceById(serviceId) {\r\n let foundService = null;\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 function cartHandler() {\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 cartPrice = 0;\r\n\r\n if (existingServices) {\r\n const serviceIds = existingServices.split(',');\r\n\r\n cartItemCount.textContent = serviceIds.length + \" services selected\";\r\n\r\n serviceIds.forEach((serviceId) => {\r\n const serviceDetails = findServiceById(serviceId);\r\n\r\n if (serviceDetails) {\r\n if (cartItemList.querySelector(\".no-service-alert\")) {\r\n cartItemList.removeChild(\r\n cartItemList.querySelector(\".no-service-alert\")\r\n );\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\">\r\n ${serviceDetails.name}\r\n <\/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\">${servicesAPI.currency} ${serviceDetails.price}<\/p>\r\n <\/li>`;\r\n }\r\n\r\n cartPrice += +serviceDetails.price;\r\n });\r\n\r\n cartTotal.textContent = servicesAPI.currency + \" \" + cartPrice;\r\n }\r\n\r\n\r\n const cartFinalCheckout = document.querySelector(\".cart-final-checkout\");\r\n\r\n const userInfoContainer = document.querySelector(\".user-info-container\");\r\n\r\n const closeUserBtn = document.querySelector(\".close-user-info\");\r\n\r\n closeUserBtn.addEventListener(\"click\", () => {\r\n userInfoContainer.style.display = \"none\";\r\n })\r\n\r\n cartFinalCheckout.addEventListener(\"click\", () => {\r\n const serviceContainers = document.querySelectorAll(\".service-container\");\r\n const serviceInputs = document.querySelectorAll(\".service-container input[type='radio']:checked\");\r\n\r\n let selectedTime = '';\r\n let sameTimeCount = '';\r\n let timeCompatibility = true;\r\n let allSectionsSelected = true;\r\n\r\n \/\/ \u0634\u0645\u0627\u0631\u0634 \u062a\u0639\u062f\u0627\u062f \u0627\u0646\u062a\u062e\u0627\u0628\u200c\u0647\u0627\u06cc \u0647\u0631 \u062a\u0627\u06cc\u0645\r\n const timeCounts = [...serviceInputs].reduce((acc, i) => {\r\n const time = i.value.split('-').pop(); \/\/ \u0641\u0631\u0636 \u0628\u0631 \u0627\u06cc\u0646 \u06a9\u0647 \u062a\u0627\u06cc\u0645 \u0622\u062e\u0631\u06cc\u0646 \u0628\u062e\u0634 \u0645\u0642\u062f\u0627\u0631 \u0627\u0633\u062a\r\n acc[time] = (acc[time] || 0) + 1;\r\n return acc;\r\n }, {});\r\n\r\n \/\/ \u0628\u0631\u0631\u0633\u06cc \u062a\u0627\u06cc\u0645\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0628\u06cc\u0634 \u0627\u0632 \u06cc\u06a9 \u0628\u0627\u0631 \u0627\u0646\u062a\u062e\u0627\u0628 \u0634\u062f\u0647\u200c\u0627\u0646\u062f\r\n Object.entries(timeCounts).forEach(([time, count]) => {\r\n if (count > 1) {\r\n timeCompatibility = false;\r\n selectedTime = time;\r\n sameTimeCount = count;\r\n }\r\n });\r\n\r\n serviceContainers.forEach((container) => {\r\n const selectedInput = container.querySelector(\"input[type='radio']:checked\");\r\n if (!selectedInput) {\r\n allSectionsSelected = false;\r\n }\r\n });\r\n\r\n if (!allSectionsSelected || !timeCompatibility) {\r\n if (!allSectionsSelected) {\r\n showPopup(\"Please select at least one option from each section. If not available, change the date or just remove the unavailable services.\");\r\n }\r\n if (!timeCompatibility) {\r\n showPopup(`You chose ${sameTimeCount} service(s) at ${selectedTime}. Please select services in a different time.`);\r\n }\r\n } else {\r\n var isLoggedIn = false;\r\n\r\n if (isLoggedIn) {\r\n \/\/ \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062e\u062f\u0645\u0627\u062a \u0631\u0632\u0631\u0648 \u0634\u062f\u0647\r\n const selectedServices = [];\r\n const serviceContainers = document.querySelectorAll(\".service-container\");\r\n\r\n serviceContainers.forEach((container) => {\r\n const selectedInput = container.querySelector(\"input[type='radio']:checked\");\r\n if (selectedInput) {\r\n const serviceName = container.getAttribute(\"data-service-name\");\r\n const reservedTime = selectedInput.value;\r\n const selectedService = findServiceByName(selectedInput.getAttribute(\"data-service-name\"));\r\n\r\n \/\/ \u06cc\u0627\u0641\u062a\u0646 ID \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0627\u0645 \u0633\u0631\u0648\u06cc\u0633 \u0627\u0632 API\r\n const serviceDetails = findServiceByName(serviceName);\r\n\r\n if (serviceDetails) {\r\n selectedServices.push({\r\n id: serviceDetails.id,\r\n reservedTime: reservedTime,\r\n });\r\n }\r\n }\r\n });\r\n\r\n \/\/ \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u062c\u0645\u0648\u0639 \u0642\u06cc\u0645\u062a\r\n const cartTotal = document.querySelector(\".cart-total-price\").textContent.split(\" \")[1];\r\n\r\n \r\n \/\/ \u0627\u06cc\u062c\u0627\u062f \u0634\u06cc\u0621 \u0646\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644\r\n const details = {\r\n loggedIn: isLoggedIn,\r\n user: {\r\n name: \"NOT FOUND\",\r\n email: \"NOT FOUND\",\r\n phone: \"\",\r\n },\r\n date: new Date().toISOString().split(\"T\")[0],\r\n services: selectedServices,\r\n totalPrice: cartTotal,\r\n };\r\n\r\n console.log(details);\r\n\r\n fetch(\"https:\/\/chilaibeauty.ae\/book\/wp-json\/chilaibeauty\/v1\/reserve\", {\r\n method: \"POST\",\r\n credentials: \"include\",\r\n headers: {\r\n \"Content-Type\": \"application\/json\",\r\n \"X-WP-Nonce\": \"76f903eab9\" \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 nonce \u0636\u0631\u0648\u0631\u06cc\r\n },\r\n body: JSON.stringify(details),\r\n })\r\n .then((response) => {\r\n if (!response.ok) {\r\n throw new Error(\"Failed to submit details\");\r\n }\r\n return response.json();\r\n })\r\n .then((data) => {\r\n console.log(\"Response from server:\", data);\r\n userInfoContainer.style.display = \"none\";\r\n const successModal = document.getElementById(\"success-modal\");\r\n successModal.style.display = \"flex\";\r\n\r\n document.getElementById(\"go-home-button\").addEventListener(\"click\", () => {\r\n window.location.href = \"https:\/\/chilaibeauty.ae\/book\/see-all\";\r\n });\r\n fetch(\"https:\/\/chilaibeauty.ae\/book\/wp-json\/chilaibeauty\/v1\/waitlist\", {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application\/json\",\r\n },\r\n body: JSON.stringify(details),\r\n });\r\n\r\n document.cookie = \"bookedServices=; path=\/; expires=Thu, 01 Jan 1970 00:00:00 UTC;\";\r\n })\r\n .catch((error) => {\r\n console.error(\"Error submitting details:\", error);\r\n showPopup(\"There was an error submitting your booking. Please try again.\");\r\n });\r\n } else {\r\n userInfoContainer.style.display = \"flex\";\r\n }\r\n }\r\n});\r\n\r\n\r\n\/\/ ---- \u0645\u062f\u06cc\u0631\u06cc\u062a \u0635\u0641 \u067e\u0627\u067e\u200c\u0647\u0627 ----\r\nlet popupQueue = [];\r\nlet popupActive = false;\r\n\r\nfunction showPopup(message) {\r\n return new Promise((resolve) => {\r\n popupQueue.push({ message, resolve });\r\n if (!popupActive) displayNextPopup();\r\n });\r\n}\r\n\r\nfunction displayNextPopup() {\r\n if (popupQueue.length === 0) {\r\n popupActive = false;\r\n return;\r\n }\r\n\r\n popupActive = true;\r\n const { message, resolve } = popupQueue.shift();\r\n\r\n const popup = document.createElement(\"div\");\r\n popup.className = \"custom-popup\";\r\n popup.innerHTML = `\r\n <div class=\"custom-popup-overlay\"><\/div>\r\n <div class=\"custom-popup-box\">\r\n <p class=\"custom-popup-message\">${message}<\/p>\r\n <button class=\"custom-popup-ok\">OK<\/button>\r\n <\/div>\r\n `;\r\n document.body.appendChild(popup);\r\n document.body.style.overflow = \"hidden\";\r\n\r\n const okBtn = popup.querySelector(\".custom-popup-ok\");\r\n const overlay = popup.querySelector(\".custom-popup-overlay\");\r\n\r\n const closePopup = () => {\r\n okBtn.removeEventListener(\"click\", onOk);\r\n overlay.removeEventListener(\"click\", onOverlay);\r\n document.removeEventListener(\"keydown\", onKeyDown);\r\n\r\n popup.remove();\r\n document.body.style.overflow = \"\";\r\n popupActive = false;\r\n resolve(); \/\/ \u0627\u062c\u0627\u0632\u0647 \u0627\u062f\u0627\u0645\u0647 \u0628\u062f\u0647\r\n setTimeout(displayNextPopup, 0); \/\/ \u0646\u0634\u0648\u0646 \u062f\u0627\u062f\u0646 \u0628\u0639\u062f\u06cc\r\n };\r\n\r\n const onOk = (e) => {\r\n e.preventDefault();\r\n closePopup();\r\n };\r\n const onOverlay = (e) => {\r\n if (e.target === overlay) closePopup();\r\n };\r\n const onKeyDown = (e) => {\r\n if (e.key === \"Escape\") closePopup();\r\n };\r\n\r\n okBtn.addEventListener(\"click\", onOk);\r\n overlay.addEventListener(\"click\", onOverlay);\r\n document.addEventListener(\"keydown\", onKeyDown);\r\n}\r\n\r\n\r\n\r\n\r\n const loginUserInfoForm = document.querySelector(\".user-info-form.login-form\");\r\nconst signinUserInfoForm = document.querySelector(\".user-info-form.signin-form\");\r\n\r\nconst loginStatusBtn = document.querySelector(\".login-account-status\");\r\nconst signinStatusBtn = document.querySelector(\".signin-account-status\");\r\n\r\n\/\/ \u0627\u06af\u0631 \u0641\u0631\u0645\u200c\u0647\u0627 \u0648 \u062f\u06a9\u0645\u0647\u200c\u0647\u0627 \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0646\u062f\u060c \u0627\u062c\u0631\u0627 \u06a9\u0646\r\nif (loginStatusBtn && signinStatusBtn && loginUserInfoForm && signinUserInfoForm) {\r\n\r\n loginStatusBtn.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n loginUserInfoForm.style.display = \"none\";\r\n signinUserInfoForm.style.display = \"flex\";\r\n });\r\n\r\n signinStatusBtn.addEventListener(\"click\", (event) => {\r\n event.preventDefault();\r\n loginUserInfoForm.style.display = \"flex\";\r\n signinUserInfoForm.style.display = \"none\";\r\n });\r\n\r\n}\r\n\r\n\r\n signinUserInfoForm.addEventListener(\"submit\", (event) => {\r\n event.preventDefault(); \/\/ \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u0631\u0641\u0631\u0634 \u0634\u062f\u0646 \u0635\u0641\u062d\u0647\r\n\r\n const userEmail = signinUserInfoForm.querySelector(\"input[name='signin_email']\").value;\r\n const userPassword = signinUserInfoForm.querySelector(\"input[name='signin_password']\").value;\r\n const userName = signinUserInfoForm.querySelector(\"input[name='signin_name']\").value;\r\n const userPhone = signinUserInfoForm.querySelector(\"input[name='signin_phone']\").value;\r\n\r\n \/\/ \u062c\u0645\u0639\u200c\u0622\u0648\u0631\u06cc \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u062e\u062f\u0645\u0627\u062a \u0631\u0632\u0631\u0648 \u0634\u062f\u0647\r\n const selectedServices = [];\r\n const serviceContainers = document.querySelectorAll(\".service-container\");\r\n\r\n serviceContainers.forEach((container) => {\r\n const selectedInput = container.querySelector(\"input[type='radio']:checked\");\r\n if (selectedInput) {\r\n const serviceName = container.getAttribute(\"data-service-name\");\r\n const reservedTime = selectedInput.value;\r\n const selectedService = findServiceByName(selectedInput.getAttribute(\"data-service-name\"))\r\n\r\n \/\/ \u06cc\u0627\u0641\u062a\u0646 ID \u0628\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0646\u0627\u0645 \u0633\u0631\u0648\u06cc\u0633 \u0627\u0632 API\r\n const serviceDetails = findServiceByName(serviceName);\r\n\r\n if (serviceDetails) {\r\n selectedServices.push({\r\n id: serviceDetails.id,\r\n reservedTime: reservedTime,\r\n });\r\n }\r\n }\r\n });\r\n\r\n \/\/ \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u062c\u0645\u0648\u0639 \u0642\u06cc\u0645\u062a\r\n const cartTotal = document.querySelector(\".cart-total-price\").textContent.split(\" \")[1];\r\n\r\n \/\/ \u0627\u06cc\u062c\u0627\u062f \u0634\u06cc\u0621 \u0646\u0647\u0627\u06cc\u06cc \u0628\u0631\u0627\u06cc \u0627\u0631\u0633\u0627\u0644\r\n const details = {\r\n loggedIn: isLoggedIn, \/\/ \u0645\u0642\u062f\u0627\u0631 true \u06cc\u0627 false \u06a9\u0647 \u062f\u0631 \u0635\u0641\u062d\u0647 \u062a\u0639\u06cc\u06cc\u0646 \u0634\u062f\u0647 \u0627\u0633\u062a.\r\n user: {\r\n name: userName,\r\n email: userEmail,\r\n phone: userPhone,\r\n password: userPassword\r\n },\r\n date: new Date().toISOString().split(\"T\")[0], \/\/ \u062a\u0627\u0631\u06cc\u062e \u062c\u0627\u0631\u06cc \u0628\u0647 \u0641\u0631\u0645\u062a YYYY-MM-DD\r\n services: selectedServices,\r\n totalPrice: cartTotal,\r\n };\r\n\r\n console.log(\"Details to be sent:\", details);\r\n\r\n \/\/ \u0627\u0631\u0633\u0627\u0644 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u0647 \u0633\u0631\u0648\u0631 (\u0646\u0645\u0648\u0646\u0647 \u0628\u0627 fetch)\r\n\r\n fetch(\"https:\/\/chilaibeauty.ae\/book\/wp-json\/chilaibeauty\/v1\/reserve\", {\r\n method: \"POST\",\r\n credentials: \"include\",\r\n headers: {\r\n \"Content-Type\": \"application\/json\",\r\n \"X-WP-Nonce\": \"76f903eab9\" \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 nonce \u0636\u0631\u0648\u0631\u06cc\r\n },\r\n body: JSON.stringify(details),\r\n })\r\n .then((response) => {\r\n if (!response.ok) {\r\n throw new Error(\"Failed to submit details\");\r\n }\r\n return response.json();\r\n })\r\n .then((data) => {\r\n console.log(\"Response from server:\", data);\r\n userInfoContainer.style.display = \"none\";\r\n const successModal = document.getElementById(\"success-modal\");\r\n successModal.style.display = \"flex\";\r\n\r\n \/\/ \u06a9\u0646\u062a\u0631\u0644 \u062f\u06a9\u0645\u0647 \u0628\u0627\u0632\u06af\u0634\u062a \u0628\u0647 \u062e\u0627\u0646\u0647\r\n document.getElementById(\"go-home-button\").addEventListener(\"click\", () => {\r\n window.location.href = \"https:\/\/chilaibeauty.ae\/book\/see-all\";\r\n });\r\n fetch(\"https:\/\/chilaibeauty.ae\/book\/wp-json\/chilaibeauty\/v1\/waitlist\", {\r\n method: \"POST\",\r\n headers: {\r\n \"Content-Type\": \"application\/json\",\r\n },\r\n body: JSON.stringify(details),\r\n })\r\n\r\n document.cookie = \"bookedServices=; path=\/; expires=Thu, 01 Jan 1970 00:00:00 UTC;\";\r\n\r\n })\r\n .catch((error) => {\r\n console.error(\"Error submitting details:\", error);\r\n alert(\"There was an error submitting your booking. Please try again.\");\r\n });\r\n });\r\n\r\n function findServiceByName(serviceName) {\r\n let foundService = null;\r\n servicesAPI.categories.forEach((category) => {\r\n category.services.forEach((service) => {\r\n if (service.name === serviceName) {\r\n foundService = service;\r\n }\r\n });\r\n });\r\n return foundService;\r\n }\r\n }\r\n\r\n \/\/ \u0645\u0646\u0637\u0642 \u0627\u0633\u06a9\u0631\u0648\u0644 \u0628\u0631\u0627\u06cc \u0647\u062f\u0631 (\u0627\u062e\u062a\u06cc\u0627\u0631\u06cc)\r\n const servicesHeader = document.querySelector(\".services-header-container\");\r\n const servicesTitle = document.querySelector(\".header-title\");\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 } else {\r\n servicesHeader.classList.remove(\"header-sticky\");\r\n servicesTitle.classList.remove(\"show\");\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 \/\/ calendar.js\r\n async function fetchCalendarData(ids) {\r\n try {\r\n const days = generateDays();\r\n renderCarousel(days, ids);\r\n } catch (error) {\r\n console.error(\"Error generating calendar data:\", error);\r\n }\r\n }\r\n\r\n function generateDays() {\r\n const days = [];\r\n const today = new Date();\r\n const threeMonthsLater = new Date();\r\n threeMonthsLater.setMonth(today.getMonth() + 3);\r\n\r\n for (\r\n let date = new Date(today);\r\n date <= threeMonthsLater;\r\n date.setDate(date.getDate() + 1)\r\n ) {\r\n days.push({\r\n date: date.toISOString().split(\"T\")[0],\r\n available: true,\r\n });\r\n }\r\n\r\n return days;\r\n }\r\n\r\n function renderCarousel(days, ids) {\r\n const carouselContainer = document.querySelector(\".calendar-container\");\r\n carouselContainer.innerHTML = \"\";\r\n\r\n const availableDays = []\r\n\r\n servicesAPI.categories.forEach((category) => {\r\n category.services.forEach((service) => {\r\n let scheduleForDay;\r\n const uniqueDays = {};\r\n const filteredSchedule = [];\r\n\r\n ids.forEach((id) => {\r\n if (+service.id === +id) {\r\n if (service.schedule.length === 0) return;\r\n\r\n \/\/ \u0641\u06cc\u0644\u062a\u0631 \u06a9\u0631\u062f\u0646 \u062a\u0627 \u0641\u0642\u0637 \u06cc\u06a9 \u0646\u0645\u0648\u0646\u0647 \u0627\u0632 \u0647\u0631 \u0631\u0648\u0632 \u0628\u0627\u0642\u06cc \u0628\u0645\u0627\u0646\u062f\r\n service.schedule.forEach((entry) => {\r\n if (!uniqueDays[entry.day]) {\r\n uniqueDays[entry.day] = true;\r\n filteredSchedule.push(entry);\r\n }\r\n });\r\n\r\n availableDays.push(filteredSchedule)\r\n }\r\n });\r\n });\r\n });\r\n\r\n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0639\u062f\u0645 \u0648\u062c\u0648\u062f \u0631\u0648\u0632\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0641\u0642\u0637 \u06cc\u06a9 \u0627\u0633\u0644\u0627\u062a \u0628\u0627 \u0645\u0642\u062f\u0627\u0631 00:00 \u062f\u0627\u0631\u0646\u062f\r\n const unavailableDays = {};\r\n const unavailableDaysList = []\r\n\r\n availableDays.forEach((schedule) => {\r\n schedule.forEach((entry) => {\r\n if (!unavailableDays[entry.day]) {\r\n unavailableDays[entry.day] = [];\r\n }\r\n if (entry.slots.length === 1 && entry.slots[0].time === '00:00') {\r\n unavailableDays[entry.day].push(true);\r\n } else {\r\n unavailableDays[entry.day].push(false);\r\n }\r\n });\r\n });\r\n\r\n Object.keys(unavailableDays).forEach((day) => {\r\n if (unavailableDays[day].every(status => status === true)) {\r\n unavailableDaysList.push(day)\r\n }\r\n });\r\n\r\n console.log(unavailableDaysList)\r\n\r\n let carouselContent = \"\";\r\n\r\n carouselContent += `\r\n <div class=\"carousel\"\r\n data-flickity='{ \"cellAlign\": \"left\", \"contain\": true, \"pageDots\": false }'>\r\n ${days\r\n .map((day) => {\r\n const date = new Date(day.date);\r\n const dayNumber = date.getDate();\r\n const dayName = date.toLocaleDateString(\"en-US\", {\r\n weekday: \"long\",\r\n });\r\n\r\n \/\/ \u0628\u0631\u0631\u0633\u06cc \u0631\u0648\u0632 \u06cc\u06a9\u0634\u0646\u0628\u0647\r\n const isSunday = date.getDay() === 0;\r\n\r\n return `\r\n <div class=\"carousel-cell ${!day.available || isSunday || unavailableDaysList.includes(dayName) ? \"deactive\" : \"\"}\">\r\n <input\r\n type=\"radio\"\r\n id=\"day-${day.date}\"\r\n name=\"selected-day\"\r\n value=\"${day.date}\"\r\n hidden\r\n \/>\r\n <label for=\"day-${day.date}\">\r\n <span class=\"carousel-cell-date\">${dayNumber}<\/span>\r\n <span class=\"carousel-cell-day\">${dayName}<\/span>\r\n <\/label>\r\n <\/div>\r\n `;\r\n })\r\n .join(\"\")}\r\n <\/div>\r\n `;\r\n\r\n carouselContainer.innerHTML = carouselContent;\r\n\r\n const carousel = document.querySelector(\".carousel\");\r\n const flkty = new Flickity(carousel, {\r\n cellAlign: \"left\",\r\n contain: true,\r\n pageDots: false,\r\n draggable: true,\r\n wrapAround: false,\r\n initialIndex: 0,\r\n });\r\n\r\n const dayInputs = document.querySelectorAll(\r\n 'input[name=\"selected-day\"]'\r\n );\r\n const monthShow = document.querySelector(\".current-month\");\r\n\r\n dayInputs.forEach((input, index) => {\r\n input.addEventListener(\"change\", () => {\r\n document\r\n .querySelectorAll(\".carousel-cell\")\r\n .forEach((cell) => cell.classList.remove(\"active\"));\r\n\r\n const label = input.closest(\"div\");\r\n label.classList.add(\"active\");\r\n\r\n const selectedDate = days[index].date;\r\n const selectedDay = new Date(selectedDate);\r\n const dayOfWeek = selectedDay.getDay();\r\n let isSunday = false\r\n\r\n if (dayOfWeek === 0) {\r\n isSunday = true\r\n }\r\n\r\n console.log(\"Selected Date:\", selectedDate);\r\n\r\n \/\/ \u062a\u0628\u062f\u06cc\u0644 \u062a\u0627\u0631\u06cc\u062e \u0628\u0647 \u0641\u0631\u0645\u062a `January 2025`\r\n const dateObject = new Date(selectedDate); \/\/ \u062a\u0627\u0631\u06cc\u062e \u0628\u0647 \u06cc\u06a9 \u0622\u0628\u062c\u06a9\u062a Date \u062a\u0628\u062f\u06cc\u0644 \u0645\u06cc\u200c\u0634\u0648\u062f\r\n const options = {year: \"numeric\", month: \"long\"}; \/\/ \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0641\u0631\u0645\u062a\r\n const formattedDate = new Intl.DateTimeFormat(\"en-US\", options).format(\r\n dateObject\r\n );\r\n\r\n \/\/ \u0646\u0645\u0627\u06cc\u0634 \u0645\u0627\u0647 \u0648 \u0633\u0627\u0644 \u062f\u0631 \u0627\u0644\u0645\u0627\u0646 `monthShow`\r\n monthShow.textContent = formattedDate;\r\n\r\n const newIds = getCookie('bookedServices').split(',')\r\n renderTimeSlots(selectedDate, newIds, isSunday);\r\n });\r\n });\r\n\r\n if (dayInputs.length > 0 && !dayInputs[0].disabled) {\r\n dayInputs[0].checked = true;\r\n const label = dayInputs[0].closest(\"div\");\r\n label.classList.add(\"active\");\r\n renderTimeSlots(days[0].date, ids);\r\n console.log(\"Default Selected Date:\", days[0].date);\r\n }\r\n\r\n flkty.reloadCells();\r\n }\r\n\r\n \/\/ timeSlots.js\r\n function renderTimeSlots(selectedDate, ids, isSunday) {\r\n\r\n const timeList = document.querySelector(\".time-list\");\r\n const noTimeAvailable = document.querySelector(\".no-time-available\");\r\n\r\n timeList.innerHTML = \"\";\r\n\r\n const allSlots = [];\r\n\r\n const unavailableDays = []; \/\/ \u0622\u0631\u0627\u06cc\u0647\u200c\u0627\u06cc \u0628\u0631\u0627\u06cc \u0630\u062e\u06cc\u0631\u0647 \u062a\u0627\u0631\u06cc\u062e\u200c\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0647\u06cc\u0686 \u0622\u06cc\u062a\u0645\u06cc \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0631\u0648\u0632 \u062e\u0627\u0635 \u0648\u062c\u0648\u062f \u0646\u062f\u0627\u0631\u062f\r\n\r\n servicesAPI.categories.forEach((category) => {\r\n category.services.forEach((service) => {\r\n let scheduleForDay;\r\n\r\n ids.forEach((id) => {\r\n if (+service.id === +id) {\r\n if (service.schedule.length === 0) return\r\n\r\n let isHoliday = false\r\n\r\n scheduleForDay = service.schedule.find(\r\n (schedule) => schedule.date === selectedDate\r\n );\r\n\r\n if (service.holidays.length !== 0) {\r\n service.holidays.forEach((holiday) => {\r\n holiday === selectedDate && (isHoliday = true)\r\n })\r\n }\r\n\r\n allSlots.push({\r\n categoryName: category.name,\r\n serviceName: service.name,\r\n slots: isHoliday ? [{time: '00:00', available: true}] : scheduleForDay.slots,\r\n id: service.id,\r\n });\r\n }\r\n });\r\n });\r\n });\r\n\r\n\r\n let isUnavailable = []\r\n\r\n allSlots.forEach((slot) => {\r\n slot.slots[0].time !== \"00:00\" ? isUnavailable.push(false) : ''\r\n })\r\n\r\n if (isUnavailable.length === 0 || isSunday) {\r\n noTimeAvailable.style.display = \"flex\";\r\n timeList.style.display = \"none\";\r\n\r\n \/\/ \u06af\u0631\u0641\u062a\u0646 id \u0633\u0631\u0648\u06cc\u0633 \u0627\u0632 \u06a9\u0648\u06a9\u06cc\r\n const bookedServiceId = parseInt(getCookie(\"bookedServices\"));\r\n\r\n \/\/ \u0648\u0631\u0648\u062f\u06cc \u062a\u0627\u0631\u06cc\u062e \u0627\u0632 input\r\n const selectedDateText = selectedDate;\r\n\r\n \/\/ \u062a\u0628\u062f\u06cc\u0644 \u062a\u0627\u0631\u06cc\u062e \u0648\u0631\u0648\u062f\u06cc \u0628\u0647 \u0634\u06cc\u0621 Date\r\n let selectedDateObj = new Date(selectedDateText);\r\n\r\n \/\/ \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0633\u0631\u0648\u06cc\u0633 \u0628\u0631 \u0627\u0633\u0627\u0633 id\r\n const service = servicesAPI.categories\r\n .flatMap(category => category.services)\r\n .find(service => service.id === bookedServiceId);\r\n\r\n \/\/ \u0686\u06a9 \u06a9\u0631\u062f\u0646 \u0631\u0648\u0632\u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u06a9\u0647 \u0633\u0631\u0648\u06cc\u0633 \u0642\u0627\u0628\u0644 \u0627\u0646\u062a\u062e\u0627\u0628 \u0627\u0633\u062a\r\n if (service && service.schedule) {\r\n let nextAvailableDay = null;\r\n\r\n \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0631\u0648\u0632 \u0628\u0647 \u062a\u0627\u0631\u06cc\u062e \u0641\u0639\u0644\u06cc \u062a\u0627 \u0632\u0645\u0627\u0646\u06cc \u06a9\u0647 \u0631\u0648\u0632\u06cc \u0642\u0627\u0628\u0644 \u062f\u0633\u062a\u0631\u0633 \u067e\u06cc\u062f\u0627 \u0634\u0648\u062f\r\n while (!nextAvailableDay) {\r\n selectedDateObj.setDate(selectedDateObj.getDate() + 1); \/\/ \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u06cc\u06a9 \u0631\u0648\u0632\r\n const formattedDate = selectedDateObj.toISOString().split(\"T\")[0]; \/\/ \u062a\u0628\u062f\u06cc\u0644 \u0628\u0647 \u0641\u0631\u0645\u062a YYYY-MM-DD\r\n\r\n\r\n \/\/ \u067e\u06cc\u062f\u0627 \u06a9\u0631\u062f\u0646 \u0631\u0648\u0632 \u062f\u0631 \u062f\u0633\u062a\u0631\u0633\r\n const daySchedule = service.schedule.find(schedule => {\r\n const scheduleDateObj = new Date(schedule.date);\r\n\r\n return (\r\n scheduleDateObj.getTime() === selectedDateObj.getTime() &&\r\n schedule.slots[0].time\r\n );\r\n });\r\n\r\n \/\/ \u0627\u06af\u0631 \u0631\u0648\u0632\u06cc \u067e\u06cc\u062f\u0627 \u0634\u062f\u060c \u0645\u062a\u0648\u0642\u0641 \u0634\u0648\r\n if (daySchedule) {\r\n nextAvailableDay = daySchedule;\r\n }\r\n\r\n \/\/ \u0627\u06af\u0631 \u0627\u0632 \u062a\u0645\u0627\u0645 \u0631\u0648\u0632\u0647\u0627 \u06af\u0630\u0631 \u06a9\u0631\u062f\u06cc\u0645 \u0648 \u0647\u06cc\u0686 \u0631\u0648\u0632\u06cc \u067e\u06cc\u062f\u0627 \u0646\u0634\u062f\u060c \u0627\u0632 \u062d\u0644\u0642\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\r\n if (selectedDateObj > new Date(service.schedule[service.schedule.length - 1]?.date)) {\r\n break;\r\n }\r\n }\r\n\r\n const inputDate = nextAvailableDay.date;\r\n\r\n \/\/ \u062a\u0628\u062f\u06cc\u0644 \u062a\u0627\u0631\u06cc\u062e \u0628\u0647 \u0634\u06cc\u0621 Date\r\n const date = new Date(inputDate);\r\n\r\n \/\/ \u062a\u0639\u0631\u06cc\u0641 \u0641\u0631\u0645\u062a \u062f\u0644\u062e\u0648\u0627\u0647\r\n const options = {weekday: 'short', month: 'short', day: 'numeric'};\r\n\r\n \/\/ \u0641\u0631\u0645\u062a \u06a9\u0631\u062f\u0646 \u062a\u0627\u0631\u06cc\u062e\r\n const formattedDate = new Intl.DateTimeFormat('en-US', options).format(date);\r\n const goNextDay = document.querySelector('.no-time-available-btn')\r\n const carousels = document.querySelectorAll('.carousel-cell')\r\n\r\n goNextDay.addEventListener('click', () => {\r\n carousels.forEach(carousel => {\r\n const carouselInput = carousel.querySelector('input')\r\n if (carouselInput.value === nextAvailableDay.date) {\r\n document.querySelector('.carousel-cell.active input').checked = false\r\n carousel.checked = true\r\n document.querySelector('.carousel-cell.active').classList.remove('active')\r\n carousel.classList.add('active')\r\n renderTimeSlots(nextAvailableDay.date, ids)\r\n }\r\n })\r\n })\r\n }\r\n return;\r\n }\r\n noTimeAvailable.style.display = \"none\";\r\n timeList.style.display = \"flex\";\r\n\r\n allSlots.forEach(({categoryName, serviceName, slots, id}) => {\r\n\r\n let parentContainer\r\n\r\n const categoryTitle = document.createElement(\"h3\");\r\n categoryTitle.innerText = `${categoryName} - ${serviceName}`;\r\n timeList.appendChild(categoryTitle);\r\n\r\n const serviceContainer = document.createElement(\"ul\");\r\n serviceContainer.classList.add(\"service-container\");\r\n serviceContainer.setAttribute(\"data-service-name\", serviceName);\r\n serviceContainer.setAttribute(\"data-service-id\", id);\r\n\r\n let allSlotsReserved = true; \/\/ \u0641\u0631\u0636 \u06a9\u0646\u06cc\u0645 \u0647\u0645\u0647 \u0631\u0632\u0631\u0648 \u0634\u062f\u0647\u200c\u0627\u0646\u062f\r\n\r\n slots.forEach((slot) => {\r\n let isReserved = false;\r\n\r\n servicesAPI.reservations.forEach(reservation => {\r\n reservation.reserved_times.forEach(reservedTime => {\r\n if (reservedTime.id === id && reservedTime.time === slot.time && reservedTime.time !== \"00:00\") {\r\n isReserved = true; \/\/ \u0632\u0645\u0627\u0646 \u0631\u0632\u0631\u0648 \u0634\u062f\u0647 \u0627\u0633\u062a\r\n }\r\n });\r\n });\r\n\r\n if (!isReserved) {\r\n allSlotsReserved = false; \/\/ \u062d\u062f\u0627\u0642\u0644 \u06cc\u06a9 \u062a\u0627\u06cc\u0645 \u0628\u0627\u0632 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\r\n }\r\n\r\n if (isReserved) {\r\n return; \/\/ \u0627\u0632 \u0627\u062f\u0627\u0645\u0647 \u062d\u0644\u0642\u0647 \u0635\u0631\u0641 \u0646\u0638\u0631 \u0645\u06cc\u200c\u0634\u0648\u062f\r\n }\r\n\r\n const listItem = document.createElement(\"li\");\r\n listItem.classList.add(\"time-list-item\");\r\n\r\n if (!slot.available) {\r\n listItem.classList.add(\"unavailable\");\r\n }\r\n\r\n listItem.innerHTML = `\r\n <input\r\n type=\"radio\"\r\n id=\"${categoryName}-${serviceName}-${slot.time}\"\r\n name=\"${categoryName}-${serviceName}\"\r\n value=\"${slot.time}\"\r\n data-service-name=\"${serviceName}\"\r\n ${!slot.available || slot.time == \"00:00\" ? \"disabled\" : \"\"}\r\n hidden\r\n >\r\n <label for=\"${categoryName}-${serviceName}-${slot.time}\">${\r\n slot.time == \"00:00\" ? \"Unavailable\" : slot.time\r\n }<\/label>\r\n ${!slot.available || slot.time == \"00:00\" ? `<button id=\"${id}\"\r\n data-service-name=\"${serviceName}\"\r\n data-date=\"${selectedDate}\" class=\"remove-service\">\r\n Remove Service\r\n <\/button>` : \"\"}\r\n `;\r\n\r\n serviceContainer.appendChild(listItem);\r\n });\r\n\r\n \/\/ \u0627\u06af\u0631 \u0647\u0645\u0647\u200c\u06cc \u062a\u0627\u06cc\u0645\u200c\u0647\u0627 \u0631\u0632\u0631\u0648 \u0634\u062f\u0647 \u0628\u0627\u0634\u0646\u062f \u06cc\u0627 \u062a\u0627\u06cc\u0645 \"00:00\" \u0648\u062c\u0648\u062f \u062f\u0627\u0634\u062a\u0647 \u0628\u0627\u0634\u062f\u060c \u0648\u06cc\u062a \u0644\u06cc\u0633\u062a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\r\n if (allSlotsReserved) {\r\n if (allSlotsReserved) {\r\n const listItem = document.createElement(\"li\");\r\n listItem.classList.add(\"time-list-item\");\r\n\r\n listItem.innerHTML = `\r\n <input\r\n type=\"radio\"\r\n id=\"${categoryName}-${serviceName}-00:00\"\r\n name=\"${categoryName}-${serviceName}\"\r\n value=\"00:00\"\r\n data-service-name=\"${serviceName}\"\r\n disabled\r\n hidden\r\n >\r\n <label for=\"${categoryName}-${serviceName}-00:00\">\r\n Unavailable\r\n <\/label>\r\n <button id=\"${id}\"\r\n data-service-name=\"${serviceName}\"\r\n data-date=\"${selectedDate}\" class=\"remove-service\">\r\n Remove Service\r\n <\/button>\r\n `;\r\n\r\n serviceContainer.appendChild(listItem);\r\n }\r\n\r\n parentContainer = document.createElement(\"div\");\r\n parentContainer.classList.add(\"slot-parent-container\");\r\n\r\n parentContainer.appendChild(categoryTitle);\r\n parentContainer.appendChild(serviceContainer);\r\n\r\n timeList.appendChild(parentContainer);\r\n }\r\n\r\n\r\n const slotElms = serviceContainer.querySelectorAll(\".time-list-item input\");\r\n const cartItems = document.querySelectorAll('.cart-item')\r\n\r\n slotElms.forEach((input) => {\r\n input.addEventListener(\"change\", (event) => {\r\n \/\/ \u062a\u0627\u0631\u06cc\u062e \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u0631\u0634\u062a\u0647 \u062f\u0631\u06cc\u0627\u0641\u062a \u0645\u06cc\u200c\u06a9\u0646\u06cc\u0645\r\n const inputDate = document.querySelector('.carousel-cell.active input').value;\r\n\r\n \/\/ \u062a\u0628\u062f\u06cc\u0644 \u0631\u0634\u062a\u0647 \u0628\u0647 \u06cc\u06a9 \u0634\u06cc\u0621 Date\r\n const date = new Date(inputDate);\r\n\r\n \/\/ \u0627\u0633\u062a\u062e\u0631\u0627\u062c \u0645\u0642\u0627\u062f\u06cc\u0631 \u0628\u0647 \u0635\u0648\u0631\u062a \u062c\u062f\u0627\u06af\u0627\u0646\u0647\r\n const weekday = new Intl.DateTimeFormat('en-US', {weekday: 'long'}).format(date);\r\n const day = new Intl.DateTimeFormat('en-US', {day: 'numeric'}).format(date);\r\n const month = new Intl.DateTimeFormat('en-US', {month: 'long'}).format(date);\r\n\r\n \/\/ \u062a\u0631\u06a9\u06cc\u0628 \u062f\u0633\u062a\u06cc \u0628\u0631\u0627\u06cc \u0641\u0631\u0645\u062a \u062f\u0644\u062e\u0648\u0627\u0647\r\n const formattedDate = `${weekday} ${day} ${month}`;\r\n\r\n \/\/ \u0627\u0646\u062a\u062e\u0627\u0628 \u0639\u0646\u0635\u0631 \u0647\u062f\u0641\r\n const targetElement = document.querySelector('.cart-salon-pic-and-details');\r\n\r\n if (event.target.checked) {\r\n cartItems.forEach((cartItem) => {\r\n const cartItemId = cartItem.getAttribute(\"data-service-id\")\r\n if (cartItem.getAttribute(\"data-service-id\") == serviceContainer.getAttribute(\"data-service-id\")) {\r\n const existingSpan = cartItem.querySelector('.cart-item-selected-time');\r\n if (existingSpan) {\r\n existingSpan.remove();\r\n }\r\n\r\n cartItem.innerHTML += `<span class=\"cart-item-selected-time\"><svg fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 32 32\"><path fill-rule=\"evenodd\" d=\"M10 2a1 1 0 0 1 1 1v1h10V3a1 1 0 1 1 2 0v1h3a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3V3a1 1 0 0 1 1-1M9 6H6v4h20V6h-3v1a1 1 0 1 1-2 0V6H11v1a1 1 0 1 1-2 0zm17 6H6v14h20z\" clip-rule=\"evenodd\"><\/path><\/svg><span>${formattedDate} \u2022 ${event.target.value}<\/span><button data-service-id=\"${cartItemId}\" class=\"remove-selected-time\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\" \/>\r\n <\/svg>\r\n <\/button><\/span>`\r\n\r\n const input = document.querySelector(`.service-container[data-service-id=\"${cartItemId}\"] input:checked`)\r\n document.querySelector(`.remove-selected-time[data-service-id=\"${cartItemId}\"]`).addEventListener('click', () => {\r\n console.log(input)\r\n removeFromCart(cartItemId);\r\n input.checked = false;\r\n })\r\n }\r\n })\r\n }\r\n });\r\n });\r\n\r\n timeList.appendChild(serviceContainer);\r\n\r\n\r\n });\r\n }\r\n\r\n function removeFromCart(id) {\r\n const cartItems = document.querySelectorAll('.cart-item');\r\n\r\n cartItems.forEach((cartItem) => {\r\n if (cartItem.getAttribute(\"data-service-id\") == id) {\r\n const selectedTimeSpan = cartItem.querySelector('.cart-item-selected-time');\r\n\r\n \/\/ \u0627\u06af\u0631 \u0627\u0644\u0645\u0627\u0646 \u062a\u0627\u0631\u06cc\u062e \u0648 \u0632\u0645\u0627\u0646 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u062d\u0630\u0641\u0634 \u06a9\u0646\r\n if (selectedTimeSpan) {\r\n selectedTimeSpan.remove();\r\n }\r\n\r\n \/\/ \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646 \u0627\u06af\u0631 \u0647\u06cc\u0686 \u0645\u062d\u062a\u0648\u0627\u06cc\u06cc \u062f\u0631 \u0622\u06cc\u062a\u0645 \u0628\u0627\u0642\u06cc \u0646\u0645\u0627\u0646\u062f\u0647\u060c \u06a9\u0644 \u0622\u06cc\u062a\u0645 \u0631\u0627 \u062d\u0630\u0641 \u06a9\u0646\r\n const details = cartItem.querySelector('.cart-item-details');\r\n if (!details || details.children.length === 0) {\r\n cartItem.remove();\r\n console.log(`Cart item with ID ${id} removed.`);\r\n }\r\n }\r\n });\r\n }\r\n\r\n function updateCart(id, date, time) {\r\n const cartItems = document.querySelectorAll('.cart-item')\r\n\r\n cartItems.forEach((cartItem) => {\r\n const cartItemId = cartItem.getAttribute(\"data-service-id\")\r\n if (cartItem.getAttribute(\"data-service-id\") == id) {\r\n const existingSpan = cartItem.querySelector('.cart-item-details .cart-item-selected-time');\r\n if (existingSpan) {\r\n existingSpan.remove();\r\n }\r\n\r\n cartItem.innerHTML += `<span class=\"cart-item-selected-time\"><svg fill=\"currentColor\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 32 32\"><path fill-rule=\"evenodd\" d=\"M10 2a1 1 0 0 1 1 1v1h10V3a1 1 0 1 1 2 0v1h3a2 2 0 0 1 2 2v20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h3V3a1 1 0 0 1 1-1M9 6H6v4h20V6h-3v1a1 1 0 1 1-2 0V6H11v1a1 1 0 1 1-2 0zm17 6H6v14h20z\" clip-rule=\"evenodd\"><\/path><\/svg><span>${date} \u2022 ${time}<\/span>\r\n <button data-service-id=\"${cartItemId}\" class=\"remove-selected-time\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\" class=\"size-6\">\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0\" \/>\r\n <\/svg>\r\n <\/button>\r\n <\/span>`\r\n\r\n const input = document.querySelector(`.service-container[data-service-id=\"${cartItemId}\"] input`)\r\n const removeBtn = document.querySelector(`.remove-selected-time[data-service-id=\"${cartItemId}\"]`)\r\n removeBtn.addEventListener('click', () => {\r\n removeFromCart(cartItemId);\r\n input.checked = false;\r\n })\r\n }\r\n })\r\n }\r\n\r\n document.addEventListener(\"click\", function (event) {\r\n if (event.target.classList.contains(\"remove-service\")) {\r\n const serviceId = event.target.id;\r\n const selectedDate = event.target.getAttribute(\"data-date\")\r\n const cartTotalPrice = document.querySelector(\".cart-total-price\")\r\n const cartItemCount = document.querySelector(\".cart-item-count p\")\r\n let removedPrice = 0\r\n\r\n \/\/ Get the bookedServices cookie\r\n const cookies = document.cookie.split(\"; \");\r\n const bookedServicesCookie = cookies.find((cookie) =>\r\n cookie.startsWith(\"bookedServices=\")\r\n );\r\n\r\n if (bookedServicesCookie) {\r\n let bookedServices = bookedServicesCookie.split(\"=\")[1].split(\",\");\r\n\r\n cartItemCount.innerText = `${bookedServices.length - 1} services selected`\r\n\r\n \/\/ Remove the service with the matching ID\r\n bookedServices = bookedServices.filter((service) => service !== serviceId);\r\n\r\n \/\/ Update the cookie\r\n document.cookie = `bookedServices=${bookedServices.join(\",\")}; path=\/;`;\r\n\r\n const cartItems = document.querySelectorAll(`.cart-item[data-service-id=\"${serviceId}\"]`);\r\n cartItems.forEach((cartItem) => {\r\n cartItem.remove()\r\n removedPrice = cartItem.querySelector('.cart-item-price').innerText.split(' ')[1]\r\n });\r\n\r\n cartTotalPrice.innerText = `${servicesAPI.currency} ${+cartTotalPrice.innerText.split(' ')[1] - +removedPrice}`\r\n\r\n\r\n \/\/ Re-render the time slots\r\n const ids = bookedServices.map(Number); \/\/ Convert IDs to numbers\r\n renderTimeSlots(selectedDate, ids);\r\n }\r\n }\r\n });\r\n\r\n\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-89","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/pages\/89","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=89"}],"version-history":[{"count":4,"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/pages\/89\/revisions"}],"predecessor-version":[{"id":93,"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/pages\/89\/revisions\/93"}],"wp:attachment":[{"href":"https:\/\/chilaibeauty.ae\/book\/wp-json\/wp\/v2\/media?parent=89"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}