{"id":42222,"date":"2024-12-11T15:05:39","date_gmt":"2024-12-11T15:05:39","guid":{"rendered":"https:\/\/theme-dev.cmsmasters.net\/la-diva\/?page_id=42222"},"modified":"2026-09-16T22:32:13","modified_gmt":"2026-09-16T22:32:13","slug":"appointment","status":"publish","type":"page","link":"https:\/\/fablook.co.uk\/?page_id=42222","title":{"rendered":"Appointment"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\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 Fablook - Book Your Appointment<\/title>\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap');\r\n\r\n * {\r\n margin: 0;\r\n padding: 0;\r\n box-sizing: border-box;\r\n }\r\n\r\n body {\r\n font-family: Poppins, sans-serif;\r\n background: #fefdfb;\r\n }\r\n\r\n \/* Hero Banner *\/\r\n .hero-banner {\r\n background: #fefdfb;\r\n padding: 70px 40px;\r\n text-align: center;\r\n width: 100vw;\r\n margin-left: calc(-50vw + 50%);\r\n position: relative;\r\n }\r\n\r\n .hero-title {\r\n font-family: \"Cormorant Garamond\", sans-serif;\r\n font-weight: 400;\r\n font-size: 52px;\r\n color: #98145f;\r\n margin: 0 0 15px 0;\r\n letter-spacing: 1px;\r\n }\r\n\r\n .hero-subtitle {\r\n font-family: Poppins, sans-serif;\r\n font-weight: 400;\r\n font-size: 16px;\r\n color: #000000;\r\n margin: 0;\r\n }\r\n\r\n \/* Form Container *\/\r\n .form-container {\r\n max-width: 1200px;\r\n margin: 0 auto;\r\n padding: 60px 40px;\r\n }\r\n\r\n .form-card {\r\n background: #ffffff;\r\n padding: 50px;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 4px;\r\n }\r\n\r\n \/* Form Section *\/\r\n .form-section {\r\n margin-bottom: 40px;\r\n }\r\n\r\n .form-section:last-child {\r\n margin-bottom: 0;\r\n }\r\n\r\n .section-title {\r\n font-family: \"Cormorant Garamond\", sans-serif;\r\n font-weight: 400;\r\n font-size: 20px;\r\n color: #fe66cb;\r\n margin: 0 0 20px 0;\r\n padding-bottom: 12px;\r\n border-bottom: 1px solid #fe66cb;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* Form Group *\/\r\n .form-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n .form-label {\r\n font-family: Poppins, sans-serif;\r\n font-weight: 600;\r\n font-size: 12px;\r\n color: #333333;\r\n margin-bottom: 10px;\r\n display: block;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n .form-label .required {\r\n color: #fe66cb;\r\n }\r\n\r\n .form-input,\r\n .form-select,\r\n .form-date {\r\n width: 100%;\r\n padding: 12px 14px;\r\n border: 1px solid #d0d0d0;\r\n border-radius: 4px;\r\n font-family: Poppins, sans-serif;\r\n font-size: 14px;\r\n color: #333333;\r\n background: #ffffff;\r\n cursor: pointer;\r\n }\r\n\r\n .form-input::placeholder,\r\n .form-date::placeholder {\r\n color: #999999;\r\n font-style: italic;\r\n }\r\n\r\n .form-input:focus,\r\n .form-select:focus,\r\n .form-date:focus {\r\n outline: none;\r\n border-color: #fe66cb;\r\n }\r\n\r\n .form-date {\r\n cursor: pointer !important;\r\n }\r\n\r\n .form-date::-webkit-calendar-picker-indicator {\r\n cursor: pointer;\r\n }\r\n\r\n \/* Radio Group *\/\r\n .radio-group {\r\n display: flex;\r\n gap: 40px;\r\n margin-top: 12px;\r\n }\r\n\r\n .radio-wrapper {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n cursor: pointer;\r\n }\r\n\r\n .radio-wrapper input[type=\"radio\"] {\r\n width: 18px;\r\n height: 18px;\r\n cursor: pointer;\r\n accent-color: #fe66cb;\r\n }\r\n\r\n .radio-wrapper label {\r\n font-family: Poppins, sans-serif;\r\n font-weight: 500;\r\n font-size: 14px;\r\n color: #333333;\r\n cursor: pointer;\r\n }\r\n\r\n \/* Contact Fields *\/\r\n .contact-fields {\r\n margin-top: 15px;\r\n }\r\n\r\n .contact-field {\r\n display: none;\r\n }\r\n\r\n .contact-field.active {\r\n display: block;\r\n }\r\n\r\n \/* Services Grid *\/\r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(3, 1fr);\r\n gap: 12px;\r\n margin-top: 15px;\r\n }\r\n\r\n .service-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 12px 14px;\r\n border: 1px solid #d0d0d0;\r\n border-radius: 4px;\r\n background: #ffffff;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .service-item:hover {\r\n border-color: #fe66cb;\r\n background: #fffbfd;\r\n }\r\n\r\n .service-item input[type=\"checkbox\"] {\r\n width: 18px;\r\n height: 18px;\r\n cursor: pointer;\r\n accent-color: #fe66cb;\r\n flex-shrink: 0;\r\n }\r\n\r\n .service-item label {\r\n font-family: Poppins, sans-serif;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #333333;\r\n cursor: pointer;\r\n flex: 1;\r\n margin: 0;\r\n }\r\n\r\n \/* Subservices Section *\/\r\n .subservices-section {\r\n background: #f9f9f9;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 4px;\r\n padding: 18px;\r\n margin-top: 15px;\r\n margin-bottom: 20px;\r\n display: none;\r\n }\r\n\r\n .subservices-section.show {\r\n display: block;\r\n }\r\n\r\n .subservices-title {\r\n font-family: \"Cormorant Garamond\", sans-serif;\r\n font-weight: 400;\r\n font-size: 14px;\r\n color: #d59999;\r\n margin: 0 0 15px 0;\r\n padding-bottom: 10px;\r\n border-bottom: 1px solid #d59999;\r\n }\r\n\r\n .subservices-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 10px;\r\n }\r\n\r\n .subservice-item {\r\n display: flex;\r\n align-items: center;\r\n gap: 10px;\r\n padding: 10px 12px;\r\n border: 1px solid #d0d0d0;\r\n border-radius: 4px;\r\n background: #ffffff;\r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .subservice-item:hover {\r\n border-color: #fe66cb;\r\n }\r\n\r\n .subservice-item input[type=\"radio\"] {\r\n width: 16px;\r\n height: 16px;\r\n cursor: pointer;\r\n accent-color: #fe66cb;\r\n flex-shrink: 0;\r\n }\r\n\r\n .subservice-label {\r\n font-family: Poppins, sans-serif;\r\n font-weight: 500;\r\n font-size: 12px;\r\n color: #333333;\r\n cursor: pointer;\r\n flex: 1;\r\n margin: 0;\r\n }\r\n\r\n .subservice-price {\r\n font-family: \"Cormorant Garamond\", sans-serif;\r\n font-weight: 400;\r\n font-size: 13px;\r\n color: #fe66cb;\r\n font-weight: 600;\r\n flex-shrink: 0;\r\n }\r\n\r\n \/* DateTime Row *\/\r\n .datetime-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: 20px;\r\n margin-bottom: 20px;\r\n }\r\n\r\n \/* Total Box *\/\r\n .total-box {\r\n background: #d59999;\r\n padding: 25px;\r\n border-radius: 4px;\r\n text-align: center;\r\n margin: 30px 0;\r\n }\r\n\r\n .total-label {\r\n font-family: Poppins, sans-serif;\r\n font-weight: 500;\r\n font-size: 11px;\r\n color: rgba(255, 255, 255, 0.9);\r\n text-transform: uppercase;\r\n letter-spacing: 1px;\r\n margin-bottom: 8px;\r\n }\r\n\r\n .total-amount {\r\n font-family: \"Cormorant Garamond\", sans-serif;\r\n font-weight: 400;\r\n font-size: 40px;\r\n color: #ffffff;\r\n margin: 0;\r\n }\r\n\r\n \/* Button *\/\r\n .form-button {\r\n background: transparent !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n color: #d59999 !important;\r\n border: 1.5px solid #d59999 !important;\r\n border-radius: 4px !important;\r\n box-shadow: none !important;\r\n padding: 14px 40px;\r\n font-family: Poppins, sans-serif !important;\r\n font-weight: 600 !important;\r\n font-size: 12px !important;\r\n text-transform: uppercase !important;\r\n cursor: pointer;\r\n letter-spacing: 1.5px !important;\r\n margin-top: 15px;\r\n transition: all 0.3s ease !important;\r\n }\r\n\r\n .form-button::before,\r\n .form-button::after {\r\n display: none !important;\r\n content: none !important;\r\n background: none !important;\r\n }\r\n\r\n .form-button:hover {\r\n background: #ffffff !important;\r\n background-color: #ffffff !important;\r\n color: #fe66cb !important;\r\n }\r\n\r\n .form-button:disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n }\r\n\r\n \/* Policy *\/\r\n .policy-box {\r\n background: rgba(254, 102, 203, 0.06);\r\n border-left: 3px solid #fe66cb;\r\n border-radius: 4px;\r\n padding: 18px;\r\n margin-top: 30px;\r\n }\r\n\r\n .policy-text {\r\n font-family: Poppins, sans-serif;\r\n font-weight: 400;\r\n font-size: 11px;\r\n color: #fe66cb;\r\n font-style: italic;\r\n margin: 0;\r\n line-height: 1.7;\r\n }\r\n\r\n \/* Policy Agreement Checkbox *\/\r\n .policy-agree {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: 10px;\r\n margin-top: 18px;\r\n }\r\n\r\n .policy-agree input[type=\"checkbox\"] {\r\n width: 18px;\r\n height: 18px;\r\n margin-top: 2px;\r\n cursor: pointer;\r\n accent-color: #fe66cb;\r\n flex-shrink: 0;\r\n }\r\n\r\n .policy-agree label {\r\n font-family: Poppins, sans-serif;\r\n font-weight: 500;\r\n font-size: 13px;\r\n color: #333333;\r\n cursor: pointer;\r\n line-height: 1.5;\r\n }\r\n\r\n .policy-agree label .required {\r\n color: #fe66cb;\r\n }\r\n\r\n \/* Alert Messages *\/\r\n .alert {\r\n padding: 15px 18px;\r\n border-radius: 4px;\r\n margin-bottom: 20px;\r\n font-family: Poppins, sans-serif;\r\n font-size: 13px;\r\n display: none;\r\n }\r\n\r\n .alert.success {\r\n background: #d4edda;\r\n color: #155724;\r\n border: 1px solid #c3e6cb;\r\n display: block;\r\n }\r\n\r\n .alert.error {\r\n background: #f8d7da;\r\n color: #721c24;\r\n border: 1px solid #f5c6cb;\r\n display: block;\r\n }\r\n\r\n .alert.loading {\r\n background: #d1ecf1;\r\n color: #0c5460;\r\n border: 1px solid #bee5eb;\r\n display: block;\r\n }\r\n\r\n \/* Responsive *\/\r\n @media (max-width: 768px) {\r\n .hero-title {\r\n font-size: 32px;\r\n }\r\n\r\n .form-container {\r\n padding: 40px 20px;\r\n }\r\n\r\n .form-card {\r\n padding: 30px 20px;\r\n }\r\n\r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .subservices-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .datetime-row {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .radio-group {\r\n flex-direction: column;\r\n gap: 15px;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .hero-banner {\r\n padding: 50px 20px;\r\n }\r\n\r\n .hero-title {\r\n font-size: 24px;\r\n }\r\n\r\n .form-container {\r\n padding: 30px 15px;\r\n }\r\n\r\n .form-card {\r\n padding: 20px 15px;\r\n }\r\n\r\n .form-input,\r\n .form-select,\r\n .form-date {\r\n font-size: 13px;\r\n padding: 11px 12px;\r\n }\r\n\r\n .services-grid {\r\n grid-template-columns: 1fr;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- Hero Banner -->\r\n<div class=\"hero-banner\">\r\n <h1 class=\"hero-title\">BOOK YOUR PERFECT APPOINTMENT<\/h1>\r\n <p class=\"hero-subtitle\">Personalized beauty treatments crafted just for you<\/p>\r\n<\/div>\r\n\r\n<!-- Form Container -->\r\n<div class=\"form-container\">\r\n <div class=\"form-card\">\r\n <div id=\"alertMessage\" class=\"alert\"><\/div>\r\n\r\n <form id=\"appointmentForm\">\r\n\r\n <!-- Your Information -->\r\n <div class=\"form-section\">\r\n <h2 class=\"section-title\">Your Information<\/h2>\r\n\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Full Name <span class=\"required\">*<\/span><\/label>\r\n <input type=\"text\" id=\"fullName\" class=\"form-input\" placeholder=\"e.g. Jane Doe\" required>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Preferred Contact Method <span class=\"required\">*<\/span><\/label>\r\n <div class=\"radio-group\">\r\n <div class=\"radio-wrapper\">\r\n <input type=\"radio\" id=\"phone-method\" name=\"contactMethod\" value=\"phone\" checked onchange=\"toggleContactField()\">\r\n <label for=\"phone-method\">Phone<\/label>\r\n <\/div>\r\n <div class=\"radio-wrapper\">\r\n <input type=\"radio\" id=\"email-method\" name=\"contactMethod\" value=\"email\" onchange=\"toggleContactField()\">\r\n <label for=\"email-method\">Email<\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-fields\">\r\n <div class=\"contact-field active\" id=\"phoneField\">\r\n <label class=\"form-label\" style=\"margin-top: 15px;\">Phone Number <span class=\"required\">*<\/span><\/label>\r\n <input type=\"tel\" class=\"form-input\" id=\"phoneInput\" placeholder=\"e.g. 020 7123 4567\" required>\r\n <\/div>\r\n <div class=\"contact-field\" id=\"emailField\">\r\n <label class=\"form-label\" style=\"margin-top: 15px;\">Email Address <span class=\"required\">*<\/span><\/label>\r\n <input type=\"email\" class=\"form-input\" id=\"emailInput\" placeholder=\"e.g. jane@example.com\">\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Select Services -->\r\n <div class=\"form-section\">\r\n <h2 class=\"section-title\">Select Your Services<\/h2>\r\n\r\n <div class=\"services-grid\">\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"sig\" name=\"service\" value=\"signature\" onchange=\"toggleSubservices('signature')\">\r\n <label for=\"sig\">Signature Fab Look<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"threading\" name=\"service\" value=\"threading\" onchange=\"toggleSubservices('threading')\">\r\n <label for=\"threading\">Threading<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"waxing\" name=\"service\" value=\"waxing\" onchange=\"toggleSubservices('waxing')\">\r\n <label for=\"waxing\">Waxing<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"bodywax\" name=\"service\" value=\"bodywax\" onchange=\"toggleSubservices('bodywax')\">\r\n <label for=\"bodywax\">Body Waxing<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"tinting\" name=\"service\" value=\"tinting\" onchange=\"toggleSubservices('tinting')\">\r\n <label for=\"tinting\">Tinting<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"tintpkg\" name=\"service\" value=\"tintpkg\" onchange=\"toggleSubservices('tintpkg')\">\r\n <label for=\"tintpkg\">Tinting (Packages)<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"lashext\" name=\"service\" value=\"lashext\" onchange=\"toggleSubservices('lashext')\">\r\n <label for=\"lashext\">Lash Extensions<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"facial\" name=\"service\" value=\"facial\" onchange=\"toggleSubservices('facial')\">\r\n <label for=\"facial\">Facial Lab<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"derma\" name=\"service\" value=\"derma\" onchange=\"toggleSubservices('derma')\">\r\n <label for=\"derma\">Dermalogica Facials<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"makeup\" name=\"service\" value=\"makeup\" onchange=\"toggleSubservices('makeup')\">\r\n <label for=\"makeup\">Makeup<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"manicure\" name=\"service\" value=\"manicure\" onchange=\"toggleSubservices('manicure')\">\r\n <label for=\"manicure\">Manicure \/ Pedicure<\/label>\r\n <\/div>\r\n <div class=\"service-item\">\r\n <input type=\"checkbox\" id=\"bridal\" name=\"service\" value=\"bridal\" onchange=\"toggleSubservices('bridal')\">\r\n <label for=\"bridal\">Bridal Makeup<\/label>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Subservices Container -->\r\n <div id=\"subservicesContainer\"><\/div>\r\n <\/div>\r\n\r\n <!-- Schedule Appointment -->\r\n <div class=\"form-section\">\r\n <h2 class=\"section-title\">Schedule Your Appointment<\/h2>\r\n\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Appointment Date <span class=\"required\">*<\/span><\/label>\r\n <input type=\"date\" class=\"form-date\" id=\"appointmentDate\" required>\r\n <\/div>\r\n\r\n <div class=\"datetime-row\">\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Hours <span class=\"required\">*<\/span><\/label>\r\n <select class=\"form-select\" id=\"appointmentHour\" required>\r\n <option>-- Select Hour --<\/option>\r\n <option>09:00<\/option>\r\n <option>10:00<\/option>\r\n <option>11:00<\/option>\r\n <option>12:00<\/option>\r\n <option>13:00<\/option>\r\n <option>14:00<\/option>\r\n <option>15:00<\/option>\r\n <option>16:00<\/option>\r\n <option>17:00<\/option>\r\n <option>18:00<\/option>\r\n <\/select>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label class=\"form-label\">Minutes <span class=\"required\">*<\/span><\/label>\r\n <select class=\"form-select\" id=\"appointmentMinutes\" required>\r\n <option>-- Select Minutes --<\/option>\r\n <option>00<\/option>\r\n <option>15<\/option>\r\n <option>30<\/option>\r\n <option>45<\/option>\r\n <\/select>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Total -->\r\n <div class=\"total-box\">\r\n <div class=\"total-label\">Total Amount<\/div>\r\n <p class=\"total-amount\" id=\"totalAmount\">\u00a3 0.00<\/p>\r\n <\/div>\r\n\r\n <!-- Policy -->\r\n <div class=\"policy-box\">\r\n <p class=\"policy-text\">\r\n We provide a reminder service via text or email. A minimum of 24hrs is required for cancellation, or a 50% charge will apply. If you do not attend your appointment without notice or cancel on the day, a 100% charge will be applied.\r\n <\/p>\r\n <\/div>\r\n\r\n <!-- Cancellation Policy Agreement -->\r\n <div class=\"policy-agree\">\r\n <input type=\"checkbox\" id=\"policyAgree\" required>\r\n <label for=\"policyAgree\">I have read and agree to the cancellation policy above <span class=\"required\">*<\/span><\/label>\r\n <\/div>\r\n\r\n <!-- Button -->\r\n <button type=\"submit\" class=\"form-button\" id=\"submitBtn\">Book Appointment<\/button>\r\n <\/form>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n \/\/ Pricing Database\r\n const pricingData = {\r\n signature: {\r\n name: \"Signature Fab Look\",\r\n services: [\r\n { name: \"Henna Brows\", price: 25 },\r\n { name: \"Brow Lamination\", price: 30 },\r\n { name: \"Lash Lift (LVL)\", price: 35 },\r\n { name: \"Lash Lift & Brow Lamination with Tint\", price: 70 }\r\n ]\r\n },\r\n threading: {\r\n name: \"Threading\",\r\n services: [\r\n { name: \"Upper Lip\", price: 4 },\r\n { name: \"Chin\", price: 4 },\r\n { name: \"Forehead\", price: 5 },\r\n { name: \"Lower Lip & Chin\", price: 5 },\r\n { name: \"Eyebrows\", price: 7 },\r\n { name: \"Sides\", price: 8 },\r\n { name: \"Neck\", price: 8 },\r\n { name: \"Full Face (Excluding Eyebrows)\", price: 25 },\r\n { name: \"Full Face (Including Eyebrows)\", price: 28 },\r\n { name: \"Full Face (Including Eyebrows & Neck)\", price: 33 }\r\n ]\r\n },\r\n waxing: {\r\n name: \"Waxing\",\r\n services: [\r\n { name: \"Upper Lip\", price: 5 },\r\n { name: \"Chin\", price: 5 },\r\n { name: \"Forehead\", price: 6 },\r\n { name: \"Lower Lip & Chin\", price: 7 },\r\n { name: \"Eyebrows\", price: 8 },\r\n { name: \"Sides\", price: 8 },\r\n { name: \"Neck\", price: 8 },\r\n { name: \"Full Face (Excluding Eyebrows)\", price: 28 },\r\n { name: \"Full Face (Including Eyebrows)\", price: 33 },\r\n { name: \"Full Face (Including Eyebrows & Neck)\", price: 35 }\r\n ]\r\n },\r\n bodywax: {\r\n name: \"Body Waxing\",\r\n services: [\r\n { name: \"Underarms\", price: 10 },\r\n { name: \"Back Wax\", price: 10 },\r\n { name: \"Bikini Line\", price: 10 },\r\n { name: \"Stomach\", price: 10 },\r\n { name: \"Full Arms\", price: 15 },\r\n { name: \"Half Legs\", price: 15 },\r\n { name: \"Full Legs\", price: 25 },\r\n { name: \"Hollywood Wax\", price: 25 },\r\n { name: \"Full Legs + Bikini Line\", price: 30 },\r\n { name: \"Full Body Wax Excluding Hollywood\", price: 70 },\r\n { name: \"Full Body Wax Including Hollywood\", price: 90 }\r\n ]\r\n },\r\n tinting: {\r\n name: \"Tinting\",\r\n services: [\r\n { name: \"Eyebrow Tint\", price: 10 },\r\n { name: \"Eyelash Tint\", price: 12 }\r\n ]\r\n },\r\n tintpkg: {\r\n name: \"Tinting (Packages)\",\r\n services: [\r\n { name: \"Eyebrow Thread + Brow Tint\", price: 17 },\r\n { name: \"Eyebrow Wax + Brow Tint\", price: 17 },\r\n { name: \"Tint Special (Brows & Lashes)\", price: 20 },\r\n { name: \"HD Fab Look (E.B. Thread\/Wax, Brows & Lash Tint)\", price: 26 }\r\n ]\r\n },\r\n lashext: {\r\n name: \"Lash Extensions\",\r\n services: [\r\n { name: \"Strip Lashes\", price: 10 }\r\n ]\r\n },\r\n facial: {\r\n name: \"Facial Lab\",\r\n services: [\r\n { name: \"Mini Facial \/ Face Clean-up\", price: 30 },\r\n { name: \"Fruit Facial\", price: 38 },\r\n { name: \"Herbal Facial\", price: 38 },\r\n { name: \"Gold Glow\", price: 38 },\r\n { name: \"Brightning & Glow\", price: 38 }\r\n ]\r\n },\r\n derma: {\r\n name: \"Dermalogica Facials\",\r\n services: [\r\n { name: \"Teen & Glow\", price: 45 },\r\n { name: \"Face Cleanup & Glow\", price: 45 },\r\n { name: \"Pro Brightening\", price: 65 },\r\n { name: \"Pro Calm\", price: 65 },\r\n { name: \"Pro Clear\", price: 65 },\r\n { name: \"Pro Firm\", price: 65 }\r\n ]\r\n },\r\n makeup: {\r\n name: \"Makeup\",\r\n services: [\r\n { name: \"Day Makeup\", price: 50 },\r\n { name: \"Evening Makeup\", price: 50 },\r\n { name: \"Teen Makeup\", price: 50 },\r\n { name: \"Photoshoot Makeup\", price: 50 }\r\n ]\r\n },\r\n manicure: {\r\n name: \"Manicure \/ Pedicure\",\r\n services: [\r\n { name: \"Express Russian Manicure\", price: 20 },\r\n { name: \"Classic Manicure\", price: 25 },\r\n { name: \"Basic Pedicure complementary polish\", price: 25 },\r\n { name: \"Deluxe Pedicure complementary polish\", price: 30 },\r\n { name: \"Gel Toes\", price: 30 },\r\n { name: \"Builder Gel (BIAB Hand)\", price: 40 },\r\n { name: \"Gel Spa Pedicure\", price: 42 },\r\n { name: \"Gel Spa Manicure\", price: 45 },\r\n { name: \"Nail Art\", price: 5 },\r\n { name: \"French Tips\", price: 7 },\r\n { name: \"Gel\", price: 10 },\r\n { name: \"Signature Combo Pack (Hands & Feet)\", price: 47 },\r\n { name: \"Spa Hand & Toes Gel Package\", price: 85 }\r\n ]\r\n },\r\n bridal: {\r\n name: \"Bridal Makeup\",\r\n services: [\r\n { name: \"Bridal Makeup (Bride)\", price: 80 },\r\n { name: \"Bridal Makeup (Bridal Party)\", price: 70 },\r\n { name: \"Bridal Makeup Trial\", price: 50 }\r\n ]\r\n }\r\n };\r\n\r\n \/\/ Set minimum date to today\r\n function setMinDate() {\r\n const dateInput = document.getElementById('appointmentDate');\r\n const today = new Date();\r\n const year = today.getFullYear();\r\n const month = String(today.getMonth() + 1).padStart(2, '0');\r\n const day = String(today.getDate()).padStart(2, '0');\r\n const minDate = `${year}-${month}-${day}`;\r\n dateInput.min = minDate;\r\n }\r\n\r\n document.addEventListener('DOMContentLoaded', setMinDate);\r\n\r\n \/\/ Salon closed days: Monday (1) and Saturday (6)\r\n const closedDays = [1, 6];\r\n\r\n function isDateBlocked(dateStr) {\r\n const date = new Date(dateStr + 'T00:00:00');\r\n return closedDays.includes(date.getDay());\r\n }\r\n\r\n document.getElementById('appointmentDate').addEventListener('change', function() {\r\n if (this.value && isDateBlocked(this.value)) {\r\n showAlert('We are closed on Saturdays and Mondays. Please choose another date.', 'error');\r\n this.value = '';\r\n }\r\n });\r\n\r\n function toggleContactField() {\r\n const phoneMethod = document.getElementById('phone-method').checked;\r\n const phoneField = document.getElementById('phoneField');\r\n const emailField = document.getElementById('emailField');\r\n \r\n if (phoneMethod) {\r\n phoneField.classList.add('active');\r\n emailField.classList.remove('active');\r\n document.getElementById('phoneInput').required = true;\r\n document.getElementById('emailInput').required = false;\r\n } else {\r\n phoneField.classList.remove('active');\r\n emailField.classList.add('active');\r\n document.getElementById('phoneInput').required = false;\r\n document.getElementById('emailInput').required = true;\r\n }\r\n }\r\n\r\n function toggleSubservices(serviceKey) {\r\n renderSubservices();\r\n updateTotal();\r\n \r\n setTimeout(() => {\r\n const subservicesContainer = document.getElementById('subservicesContainer');\r\n if (subservicesContainer && subservicesContainer.children.length > 0) {\r\n subservicesContainer.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n }\r\n }, 100);\r\n }\r\n\r\n function renderSubservices() {\r\n const container = document.getElementById('subservicesContainer');\r\n if (!container) return;\r\n \r\n const checkedServices = Array.from(document.querySelectorAll('input[name=\"service\"]:checked')).map(cb => cb.value);\r\n \r\n let html = '';\r\n checkedServices.forEach(serviceKey => {\r\n const service = pricingData[serviceKey];\r\n if (!service) return;\r\n \r\n html += `\r\n <div class=\"subservices-section show\">\r\n <div class=\"subservices-title\">${service.name}<\/div>\r\n <div class=\"subservices-grid\">\r\n `;\r\n \r\n service.services.forEach((sub, idx) => {\r\n const subId = `${serviceKey}_${idx}`;\r\n html += `\r\n <div class=\"subservice-item\">\r\n <input type=\"checkbox\" id=\"${subId}\" name=\"subservice\" value=\"${sub.price}\" onchange=\"updateTotal()\">\r\n <label for=\"${subId}\" class=\"subservice-label\">${sub.name}<\/label>\r\n <span class=\"subservice-price\">\u00a3${sub.price}<\/span>\r\n <\/div>\r\n `;\r\n });\r\n \r\n html += `\r\n <\/div>\r\n <\/div>\r\n `;\r\n });\r\n\r\n container.innerHTML = html;\r\n }\r\n\r\n function updateTotal() {\r\n let total = 0;\r\n const allSelectedSubs = Array.from(document.querySelectorAll('input[name=\"subservice\"]:checked'));\r\n \r\n allSelectedSubs.forEach(checkbox => {\r\n total += parseFloat(checkbox.value);\r\n });\r\n\r\n const totalElement = document.getElementById('totalAmount');\r\n if (totalElement) {\r\n totalElement.textContent = `\u00a3 ${total.toFixed(2)}`;\r\n }\r\n }\r\n\r\n \/\/ ==========================================\r\n \/\/ FORM SUBMISSION - WORDPRESS EMAIL INTEGRATION\r\n \/\/ ==========================================\r\n document.getElementById('appointmentForm').addEventListener('submit', async function(e) {\r\n e.preventDefault();\r\n\r\n const fullName = document.getElementById('fullName').value;\r\n const contactMethod = document.querySelector('input[name=\"contactMethod\"]:checked').value;\r\n const contact = contactMethod === 'phone' \r\n ? document.getElementById('phoneInput').value \r\n : document.getElementById('emailInput').value;\r\n const appointmentDate = document.getElementById('appointmentDate').value;\r\n const appointmentHour = document.getElementById('appointmentHour').value;\r\n const appointmentMinutes = document.getElementById('appointmentMinutes').value;\r\n\r\n \/\/ Validate\r\n if (!appointmentHour || appointmentHour === '-- Select Hour --' || \r\n !appointmentMinutes || appointmentMinutes === '-- Select Minutes --') {\r\n showAlert('Please select both hour and minutes for your appointment', 'error');\r\n return;\r\n }\r\n\r\n if (appointmentDate && isDateBlocked(appointmentDate)) {\r\n showAlert('We are closed on Saturdays and Mondays. Please choose another date.', 'error');\r\n return;\r\n }\r\n\r\n if (!document.getElementById('policyAgree').checked) {\r\n showAlert('Please tick the box to confirm you agree to the cancellation policy.', 'error');\r\n return;\r\n }\r\n\r\n const appointmentTime = `${appointmentHour}:${appointmentMinutes}`;\r\n\r\n \/\/ Collect services\r\n const services = [];\r\n const selectedServices = Array.from(document.querySelectorAll('input[name=\"service\"]:checked'));\r\n \r\n selectedServices.forEach(serviceCheckbox => {\r\n const serviceKey = serviceCheckbox.value;\r\n const service = pricingData[serviceKey];\r\n \r\n const selectedSubservices = Array.from(\r\n document.querySelectorAll(`input[name=\"subservice\"]:checked`)\r\n ).filter(sub => {\r\n const subId = sub.id;\r\n return subId.startsWith(serviceKey);\r\n });\r\n\r\n selectedSubservices.forEach(subCheckbox => {\r\n const subId = subCheckbox.id;\r\n const [, idx] = subId.split('_');\r\n const subservice = service.services[idx];\r\n \r\n services.push({\r\n serviceName: service.name,\r\n subserviceName: subservice.name,\r\n price: subservice.price\r\n });\r\n });\r\n });\r\n\r\n if (services.length === 0) {\r\n showAlert('Please select at least one service', 'error');\r\n return;\r\n }\r\n\r\n const total = services.reduce((sum, s) => sum + s.price, 0);\r\n\r\n showAlert('Processing your booking...', 'loading');\r\n const submitBtn = document.getElementById('submitBtn');\r\n submitBtn.disabled = true;\r\n\r\n try {\r\n \/\/ Create Stripe Checkout session via WordPress\r\n const formData = new FormData();\r\n formData.append('action', 'fablook_create_stripe_session');\r\n formData.append('fullName', fullName);\r\n formData.append('contact', contact);\r\n formData.append('contactMethod', contactMethod);\r\n formData.append('date', appointmentDate);\r\n formData.append('time', appointmentTime);\r\n formData.append('services', JSON.stringify(services));\r\n formData.append('total', total.toFixed(2));\r\n\r\n const response = await fetch(window.location.origin + '\/wp-admin\/admin-ajax.php', {\r\n method: 'POST',\r\n body: formData\r\n });\r\n\r\n const result = await response.json();\r\n\r\n if (result.success && result.data.checkout_url) {\r\n \/\/ Redirect to Stripe's secure payment page\r\n window.location.href = result.data.checkout_url;\r\n } else {\r\n showAlert((result.data && result.data.message) || 'Error setting up payment. Please try again or contact us at info@fablook.co.uk', 'error');\r\n submitBtn.disabled = false;\r\n }\r\n } catch (error) {\r\n console.error('Booking error:', error);\r\n showAlert('Error processing booking. Please try again or contact us at info@fablook.co.uk', 'error');\r\n submitBtn.disabled = false;\r\n }\r\n });\r\n\r\n \/\/ Show status message if returning from Stripe Checkout\r\n (function checkStripeReturnStatus() {\r\n const params = new URLSearchParams(window.location.search);\r\n const status = params.get('stripe_status');\r\n if (status === 'success') {\r\n showAlert('\u2713 Payment successful! Your appointment is confirmed. A confirmation email is on its way.', 'success');\r\n } else if (status === 'cancelled') {\r\n showAlert('Payment was cancelled. Your booking was not confirmed \u2014 feel free to try again.', 'error');\r\n }\r\n })();\r\n\r\n function showAlert(message, type) {\r\n const alertDiv = document.getElementById('alertMessage');\r\n alertDiv.textContent = message;\r\n alertDiv.className = `alert ${type}`;\r\n \r\n if (type === 'success') {\r\n setTimeout(() => {\r\n alertDiv.className = 'alert';\r\n }, 5000);\r\n }\r\n }\r\n\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Fablook – Book Your Appointment BOOK YOUR PERFECT APPOINTMENT Personalized beauty treatments crafted just for you Your Information Full Name * Preferred Contact Method * Phone Email Phone Number * Email Address * Select Your Services Signature Fab Look Threading Waxing Body Waxing Tinting Tinting (Packages) Lash Extensions Facial Lab Dermalogica Facials Makeup Manicure \/…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-42222","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/42222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fablook.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=42222"}],"version-history":[{"count":45,"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/42222\/revisions"}],"predecessor-version":[{"id":43943,"href":"https:\/\/fablook.co.uk\/index.php?rest_route=\/wp\/v2\/pages\/42222\/revisions\/43943"}],"wp:attachment":[{"href":"https:\/\/fablook.co.uk\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=42222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}