simpo-component-library 3.6.513 → 3.6.517

package/fesm2022/simpo-component-library.mjs

@@ -1902,6 +1902,7 @@ class TextEditorComponent {
                     listEl.style.fontSize = cssSize;
                     listEl.querySelectorAll('li').forEach(li => {
                         li.style.fontSize = cssSize;
+                        li.style.color = this.toolbarData.selectedColor;
                     });
                 }
             }
@@ -2136,9 +2137,10 @@ class TextEditorComponent {
     stripStyles(html) {
         const doc = new DOMParser().parseFromString(html, 'text/html');
         const elements = doc.body.querySelectorAll('*');
-        elements.forEach(el => {
+        elements.forEach((el) => {
             el.removeAttribute('style'); // Remove all inline styles
             el.removeAttribute('class'); // Optional
+            el.setAttribute('style', `color: ${this.toolbarData.selectedColor}`);
         });
         return doc.body.innerHTML;
     }
@@ -12728,14 +12730,17 @@ class AppointmentBookingComponent {
             locationListing: false,
             staffListing: false
         };
-        this.businessName = localStorage.getItem('bName') ?? "24K Bazaar";
-        this.businessId = localStorage.getItem('bId') ?? "1f095216-7c00-6cab-9045-ff9c70e1c641";
+        this.skeletonLoader = false;
+        this.businessName = localStorage.getItem('businessName') ? localStorage.getItem('businessName') : (localStorage.getItem('bName') ? localStorage.getItem('bName') : '');
+        this.businessId = localStorage.getItem('businessId') ? localStorage.getItem('businessId') : (localStorage.getItem('bId') ? localStorage.getItem('bId') : '');
         this.activeButton = false;
         this.selectedTab = '';
         this.barWidth = '';
         this.showCancellationPolicy = false;
         this.showReducingPolicy = false;
         this.selectedService = {};
+        this.homeAddress = '';
+        this.instructions = '';
         this.Object = Object;
         this.showCalendar = false;
         this.selectedDate = null;
@@ -12821,7 +12826,7 @@ class AppointmentBookingComponent {
     }
     selectService(service) {
         service.selected = true;
-        if (this.selectedService) {
+        if (this.selectedService && service.serviceId != this.selectedService.serviceId) {
             this.selectedService.selected = false;
         }
         this.selectedService = service;
@@ -12829,7 +12834,7 @@ class AppointmentBookingComponent {
     }
     selectLocation(location) {
         location.selected = true;
-        if (this.selectedLocation) {
+        if (this.selectedLocation && location.id != this.selectedLocation.id) {
             this.selectedLocation.selected = false;
         }
         this.activeButton = true;
@@ -12837,7 +12842,7 @@ class AppointmentBookingComponent {
     }
     selectStaff(staff) {
         staff.selected = true;
-        if (this.selectedStaff) {
+        if (this.selectedStaff && staff.staffId != this.selectedStaff.staffId) {
             this.selectedStaff.selected = false;
         }
         this.selectedStaff = staff;
@@ -12930,9 +12935,6 @@ class AppointmentBookingComponent {
                 }
             }
             else if (this.selectedTab === 'contactDetails') {
-                this.appointmentPayload.customerDetail.name = '';
-                this.appointmentPayload.customerDetail.email = '';
-                this.appointmentPayload.customerDetail.phoneNumber = '';
                 this.selectedTab = 'dateSelection';
                 this.barWidth = '58.57';
             }
@@ -12943,6 +12945,7 @@ class AppointmentBookingComponent {
         }
     }
     getAllServices() {
+        this.skeletonLoader = true;
         let servicePayload = {
             businessId: this.businessId ?? "",
             pageNo: 0,
@@ -12950,6 +12953,7 @@ class AppointmentBookingComponent {
         };
         this.restService.getAllAppointmentService(servicePayload).subscribe((res) => {
             if (res.content.length > 0) {
+                this.skeletonLoader = false;
                 this.serviceData = res.content.filter((service) => service.active === true);
                 this.serviceData.forEach(service => service.selected = false);
                 // console.log(this.serviceData)
@@ -12992,6 +12996,9 @@ class AppointmentBookingComponent {
                     this.accessedTabs.locationListing = true;
                 }
             }
+            else {
+                this.messageService.add({ severity: 'error', summary: 'Booking Failed', detail: 'Unable to fetch data. Please try again later' });
+            }
         }, (error) => {
             // Handle errors gracefully
         });
@@ -13020,6 +13027,9 @@ class AppointmentBookingComponent {
                     this.accessedTabs.staffListing = true;
                 }
             }
+            else {
+                this.messageService.add({ severity: 'error', summary: 'Booking Failed', detail: 'Unable to fetch data. Please try again later' });
+            }
         }, (error) => {
             // Handle errors gracefully
         });
@@ -13040,6 +13050,7 @@ class AppointmentBookingComponent {
     }
     getAvailableSlots() {
         this.activeButton = false;
+        this.skeletonLoader = true;
         this.loader = false;
         this.locationTiming = [];
         this.slotsPayload.storeId = this.selectedLocation?.id ?? "";
@@ -13055,13 +13066,17 @@ class AppointmentBookingComponent {
             this.slotsPayload.staffId = this.selectedStaff.staffId;
         this.restService.getBookingSlots(this.slotsPayload).subscribe((res) => {
             res.forEach((time) => {
-                this.locationTiming.push({ selected: false, value: this.convertTo24Hour(time) });
+                this.locationTiming.push({ selected: false, value: time });
+                this.skeletonLoader = false;
             });
+            if (res.length <= 0) {
+                this.messageService.add({ severity: 'error', summary: 'Booking Failed', detail: 'Unable to fetch available slots. Please try again later' });
+            }
         });
     }
     selectTimeSlot(time) {
         time.selected = true;
-        if (this.selectedTime) {
+        if (this.selectedTime && time.value != this.selectedTime.value) {
             this.selectedTime.selected = false;
         }
         this.selectedTime = time;
@@ -13101,7 +13116,7 @@ class AppointmentBookingComponent {
         this.appointmentPayload.storeId = this.selectedLocation?.id;
         this.appointmentPayload.serviceDetail.id = this.selectedService?.serviceId;
         this.appointmentPayload.serviceDetail.name = this.selectedService?.name;
-        this.appointmentPayload.startTime = this.selectedTime.value.slice(0, 5);
+        this.appointmentPayload.startTime = this.convertTo24Hour(this.selectedTime.value).slice(0, 5);
         this.appointmentPayload.bookingDate = `${yyyy}-${mm}-${dd}T00:00:00.000Z`;
         this.restService.bookAppointmentV2(this.appointmentPayload).subscribe((res) => {
             this.selectedTab = 'statusTemplate';
@@ -13109,7 +13124,7 @@ class AppointmentBookingComponent {
             this.apiStatus = true;
         }, (error) => {
             this.apiStatus = false;
-            this.messageService.add({ severity: 'error', summary: 'Payment Failed', detail: error.error.message });
+            this.messageService.add({ severity: 'error', summary: 'Booking Failed', detail: error.error.message });
         });
     }
     paymentBookingAppointment() {
@@ -13133,13 +13148,19 @@ class AppointmentBookingComponent {
         });
     }
     goBack() {
+        if (localStorage.getItem("REQUEST_FROM") === 'ECOMMERCE') {
+            this.router.navigate(['/admin/appointments/list-appointments']);
+        }
+        else {
+            this.router.navigate(['/home']);
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, deps: [{ token: RestService }, { token: EventsService }, { token: i2$2.Router }, { token: i6$1.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentBookingComponent, isStandalone: true, selector: "simpo-appointment-booking", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "document:click": "closeOnOutsideClick()" } }, providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to My Bookings</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"complete_booking cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">Complete\r\n                Booking</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_section\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div>\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1>Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <!-- <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p> -->\r\n                                    </div>\r\n                                </div>\r\n                                <!-- <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60 date_section\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1>Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\r\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                    <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                        (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                        time?.value.slice(0,5) : 'N/A'}}</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\">\r\n                                        <div class=\"waitlist-title d-flex align-items-center gap-2\"><span\r\n                                                class=\"waitlist-icon check-icon\"></span>No\r\n                                            slots available?</div>\r\n                                        <div class=\"waitlist-description d-flex align-items-center gap-2\">\r\n                                            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\"\r\n                                                id=\"flexCheckChecked\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60 contact_section overflow-hidden\">\r\n        <div class=\"d-flex h-100\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1>Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div\r\n                            [ngClass]=\"{'w-50' : selectedService?.homeAppointmentAvailable, 'w-100' : !selectedService?.homeAppointmentAvailable}\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control  rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\r\n                                        [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\" *ngIf=\"selectedService?.homeAppointmentAvailable\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\r\n                                (ngModelChange)=\"checkRequiredValues()\">\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <span class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></span>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60 payment_section\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1>Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDateStr ? (selectedDateStr) : 'N/A'}} at\r\n                            {{selectedTime ? selectedTime.value.slice(0,5) : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n                            selectedService?.priceDetails?.price : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,7) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_section{width:60%;overflow:hidden}.location_section .header h1{font-size:20px;font-weight:600;margin:.25rem 0}.location_section .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.main_container{height:85%}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%;outline:none}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:#789;border:none;padding:4%;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.mobile_number{border-color:#dc3545!important;box-shadow:0 0 0 .1rem #ffc3c3}.waitlist-description{color:#fff;font-size:14px;margin-bottom:0;font-weight:500}.waitlist-description .form-check-input{width:17px;height:17px;background-color:transparent}.waitlist-description .form-check-input:checked{background-color:#0d6efd}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:1%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:89%;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:7px;margin-top:8px}.custom-checkbox{width:18px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000;margin:.25rem 0}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#e3fee3;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.complete_booking img{width:30px}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}.datepicker-popover{position:absolute;z-index:1000;margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #0000001f,0 2px 4px #00000014;background:#fff;border:1px solid rgba(0,0,0,.06);width:17vw}::ng-deep .datepicker-calendar{border-radius:16px!important;overflow:hidden!important;font-family:Segoe UI,Roboto,sans-serif!important;width:100%!important}::ng-deep .mat-calendar-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:3px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;border-radius:16px 16px 0 0!important}::ng-deep .mat-calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;margin:2% calc(4.7142857143% - 16px)!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:16px!important;letter-spacing:.5px!important;background:transparent!important;border:none!important;padding:12px 16px!important;border-radius:8px!important;transition:all .3s ease!important;flex-grow:1!important;text-align:left!important;margin:0!important;order:1!important}::ng-deep .mat-calendar-period-button:hover{background:#ffffff26!important;transform:translateY(-1px)!important}::ng-deep .mat-calendar-header .mat-calendar-controls>div{display:flex;order:2!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .3s ease!important;margin:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-calendar-previous-button:hover,::ng-deep .mat-calendar-next-button:hover{background:#ffffff40!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-arrow{fill:#fff!important;width:20px!important;height:20px!important}::ng-deep .mat-calendar-content{padding:10px 16px!important;background:#fff!important}::ng-deep .mat-calendar-table-header th{color:#6b7280!important;font-weight:600!important;font-size:12px!important;text-align:center!important;padding-bottom:12px!important;text-transform:uppercase!important}::ng-deep .mat-calendar-table{border-spacing:0!important;border-collapse:collapse!important;width:100%!important}::ng-deep .mat-calendar-body-cell{height:44px!important;width:44px!important;border-radius:12px!important}::ng-deep .mat-calendar-body-cell-content{width:33px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;font-size:14px!important;color:#374151!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#667eea1a!important;color:#667eea!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-body-selected{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;box-shadow:0 4px 12px #677eea4d!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:none;color:#667eea!important;font-weight:700!important}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:#d1d5db!important}@media screen and (min-width:320px) and (max-width:475px){.back-btn{gap:.25rem!important;margin:0!important}.back-btn span{color:#000;font-size:12px;font-weight:500;white-space:nowrap}.back-btn mat-icon{font-size:16px!important;margin-bottom:0!important}.header-title{display:flex;align-items:center;margin-bottom:0rem!important}.header-title h1{font-size:16px!important}.main_header .header{padding:3%}.date_section,.service_section,.location_section,.contact_section,.payment_section{width:100%!important;padding:0% 5%}.service_section h2{font-size:17px!important;margin-bottom:0!important}.service_section p{font-size:14px!important}.main_section{height:100vh}.services-grid{display:flex;justify-content:center;flex-wrap:wrap}.service-card,.service-card-selected{width:90vw!important}.home-visit{width:40vw!important}.main_body{height:calc(100% - 123px)!important}.back-footer-btn{padding:12px 2px!important}.footer-buttons{padding:0% 3%!important;width:100%!important}.continue-btn{width:22vw!important}.main_container{flex-wrap:wrap;height:100%!important}.date_section{overflow:hidden}.date_section .time_selection{height:60%}.datepicker-popover{width:60vw!important}.details_container{height:90%!important;justify-content:space-around}.complete_booking{width:39vw!important}.booking_confirmation,.details-card{width:100%!important}.datetime-header h1{margin:0!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: LettersOnlyDirective, selector: "[simpoLettersOnly]" }, { kind: "directive", type: NumbersOnlyDirective, selector: "[simpoNumbersOnly]" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: AppointmentBookingComponent, isStandalone: true, selector: "simpo-appointment-booking", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass", nextComponentColor: "nextComponentColor" }, host: { listeners: { "window: resize": "getScreenSize($event)", "document:click": "closeOnOutsideClick()" } }, providers: [MessageService], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngIf=\"!skeletonLoader\">\r\n                <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"\r\n                [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">{{selectedService?.depositAmount?.depositRequired\r\n                ? 'Pay Now' : 'Complete Booking'}}</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_section\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <!-- <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div> -->\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1>Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <!-- <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p> -->\r\n                                    </div>\r\n                                </div>\r\n                                <!-- <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60 date_section\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1>Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\r\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <ng-container *ngIf=\"!skeletonLoader ;else slotsLoader\">\r\n                                    <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                            (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                            time?.value : 'N/A'}}</div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-template #slotsLoader>\r\n                                    <!-- Time Slot Grid Skeleton Loader HTML -->\r\n                                    <div class=\"time-slot-grid\">\r\n                                        <!-- Row 1 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 2 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 3 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 4 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 5 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 6 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                    </div>\r\n\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\">\r\n                                        <div class=\"waitlist-title d-flex align-items-center gap-2\"><span\r\n                                                class=\"waitlist-icon check-icon\"></span>No\r\n                                            slots available?</div>\r\n                                        <div class=\"waitlist-description d-flex align-items-center gap-2\">\r\n                                            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\"\r\n                                                id=\"flexCheckChecked\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60 contact_section overflow-hidden\">\r\n        <div class=\"d-flex h-100\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1>Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div\r\n                            [ngClass]=\"{'w-50' : selectedService?.homeAppointmentAvailable, 'w-100' : !selectedService?.homeAppointmentAvailable}\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control  rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\r\n                                        [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\" *ngIf=\"selectedService?.homeAppointmentAvailable\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\" [(ngModel)]=\"homeAddress\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\" [(ngModel)]=\"instructions\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\r\n                                (ngModelChange)=\"checkRequiredValues()\">\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <span class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></span>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60 payment_section\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1>Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDateStr ? (selectedDateStr) : 'N/A'}} at\r\n                            {{selectedTime ? selectedTime.value : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n                            selectedService?.priceDetails?.price : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,10) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #skeletonLoader *ngIf=\"skeletonLoader\">\r\n    <!-- Service Skeleton Loader HTML -->\r\n    <div class=\"service-grid\">\r\n        <!-- Skeleton Card 1 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 2 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 3 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 4 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 5 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 6 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_section{width:60%;overflow:hidden}.location_section .header h1{font-size:20px;font-weight:600;margin:.25rem 0}.location_section .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.main_container{height:85%}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%;outline:none}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:#789;border:none;padding:4%;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.mobile_number{border-color:#dc3545!important;box-shadow:0 0 0 .1rem #ffc3c3}.waitlist-description{color:#fff;font-size:14px;margin-bottom:0;font-weight:500}.waitlist-description .form-check-input{width:17px;height:17px;background-color:transparent}.waitlist-description .form-check-input:checked{background-color:#0d6efd}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:1%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:89%;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:7px;margin-top:8px}.custom-checkbox{width:18px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000;margin:.25rem 0}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#e3fee3;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.complete_booking img{width:30px}.pay-now-btn{justify-content:unset!important;background:#e3fee3;border:none;padding:.5%;width:8vw!important;font-size:15px!important;font-weight:500;border-radius:4px;gap:.5rem}.pay-now-btn img{width:30px}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}.datepicker-popover{position:absolute;z-index:1000;margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #0000001f,0 2px 4px #00000014;background:#fff;border:1px solid rgba(0,0,0,.06);width:17vw}::ng-deep .datepicker-calendar{border-radius:16px!important;overflow:hidden!important;font-family:Segoe UI,Roboto,sans-serif!important;width:100%!important}::ng-deep .mat-calendar-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:3px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;border-radius:16px 16px 0 0!important}::ng-deep .mat-calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;margin:2% calc(4.7142857143% - 16px)!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:16px!important;letter-spacing:.5px!important;background:transparent!important;border:none!important;padding:12px 16px!important;border-radius:8px!important;transition:all .3s ease!important;flex-grow:1!important;text-align:left!important;margin:0!important;order:1!important}::ng-deep .mat-calendar-period-button:hover{background:#ffffff26!important;transform:translateY(-1px)!important}::ng-deep .mat-calendar-header .mat-calendar-controls>div{display:flex;order:2!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .3s ease!important;margin:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-calendar-previous-button:hover,::ng-deep .mat-calendar-next-button:hover{background:#ffffff40!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-arrow{fill:#fff!important;width:20px!important;height:20px!important}::ng-deep .mat-calendar-content{padding:10px 16px!important;background:#fff!important}::ng-deep .mat-calendar-table-header th{color:#6b7280!important;font-weight:600!important;font-size:12px!important;text-align:center!important;padding-bottom:12px!important;text-transform:uppercase!important}::ng-deep .mat-calendar-table{border-spacing:0!important;border-collapse:collapse!important;width:100%!important}::ng-deep .mat-calendar-body-cell{height:44px!important;width:44px!important;border-radius:12px!important}::ng-deep .mat-calendar-body-cell-content{width:33px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;font-size:14px!important;color:#374151!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#667eea1a!important;color:#667eea!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-body-selected{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;box-shadow:0 4px 12px #677eea4d!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:none;color:#667eea!important;font-weight:700!important}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:#d1d5db!important}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px;width:60%}.service-card{border:1px solid #e5e5e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 2px 4px #0000001a}.service-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.service-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-title{height:20px;width:70%}.skeleton-price{height:18px;width:50%;align-self:flex-end}.skeleton-duration{height:14px;width:40%;align-self:flex-end}.skeleton-category{height:24px;width:25%;border-radius:12px;margin-bottom:10px}.skeleton-description{height:16px;width:85%;margin-bottom:15px}.skeleton-badge{height:32px;width:45%;border-radius:16px;margin-top:10px}@media (max-width: 768px){.service-grid{grid-template-columns:1fr;gap:15px;padding:15px}.service-card{padding:15px}}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;max-width:400px;margin:0 auto}.skeleton-time-slot{height:44px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border:1px solid #e5e5e5;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-time-slot:nth-child(2n){animation:skeleton-pulse 2s infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.time-slot-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.skeleton-time-slot{height:40px}}@media (max-width: 320px){.time-slot-grid{grid-template-columns:1fr}}@media screen and (min-width:320px) and (max-width:475px){.back-btn{gap:.25rem!important;margin:0!important}.back-btn span{color:#000;font-size:12px;font-weight:500;white-space:nowrap}.back-btn mat-icon{font-size:16px!important;margin-bottom:0!important}.header-title{display:flex;align-items:center;margin-bottom:0rem!important}.header-title h1{font-size:16px!important}.main_header .header{padding:3%}.date_section,.service_section,.location_section,.contact_section,.payment_section{width:100%!important;padding:0% 5%}.service_section h2{font-size:17px!important;margin-bottom:0!important}.service_section p{font-size:14px!important}.main_section{height:100vh}.services-grid{display:flex;justify-content:center;flex-wrap:wrap}.service-card,.service-card-selected{width:90vw!important}.home-visit{width:40vw!important}.main_body{height:calc(100% - 123px)!important}.back-footer-btn{padding:12px 2px!important}.footer-buttons{padding:0% 3%!important;width:100%!important}.continue-btn{width:22vw!important}.main_container{flex-wrap:wrap;height:100%!important}.date_section{overflow:hidden}.date_section .time_selection{height:60%}.datepicker-popover{width:60vw!important}.details_container{height:90%!important;justify-content:space-around}.complete_booking{width:39vw!important}.booking_confirmation,.details-card{width:100%!important}.datetime-header h1{margin:0!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i15.MatCalendar, selector: "mat-calendar", inputs: ["headerComponent", "startAt", "startView", "selected", "minDate", "maxDate", "dateFilter", "dateClass", "comparisonStart", "comparisonEnd", "startDateAccessibleName", "endDateAccessibleName"], outputs: ["selectedChange", "yearSelected", "monthSelected", "viewChanged", "_userSelection", "_userDragDrop"], exportAs: ["matCalendar"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: LettersOnlyDirective, selector: "[simpoLettersOnly]" }, { kind: "directive", type: NumbersOnlyDirective, selector: "[simpoNumbersOnly]" }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9$1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: AppointmentBookingComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule, MatNativeDateModule, MatInputModule, LettersOnlyDirective, NumbersOnlyDirective, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to My Bookings</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"complete_booking cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">Complete\r\n                Booking</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_section\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div>\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1>Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <!-- <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p> -->\r\n                                    </div>\r\n                                </div>\r\n                                <!-- <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60 date_section\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1>Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\r\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                    <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                        (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                        time?.value.slice(0,5) : 'N/A'}}</div>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\">\r\n                                        <div class=\"waitlist-title d-flex align-items-center gap-2\"><span\r\n                                                class=\"waitlist-icon check-icon\"></span>No\r\n                                            slots available?</div>\r\n                                        <div class=\"waitlist-description d-flex align-items-center gap-2\">\r\n                                            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\"\r\n                                                id=\"flexCheckChecked\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60 contact_section overflow-hidden\">\r\n        <div class=\"d-flex h-100\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1>Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div\r\n                            [ngClass]=\"{'w-50' : selectedService?.homeAppointmentAvailable, 'w-100' : !selectedService?.homeAppointmentAvailable}\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control  rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\r\n                                        [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\" *ngIf=\"selectedService?.homeAppointmentAvailable\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\r\n                                (ngModelChange)=\"checkRequiredValues()\">\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <span class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></span>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60 payment_section\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1>Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDateStr ? (selectedDateStr) : 'N/A'}} at\r\n                            {{selectedTime ? selectedTime.value.slice(0,5) : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n                            selectedService?.priceDetails?.price : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,7) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_section{width:60%;overflow:hidden}.location_section .header h1{font-size:20px;font-weight:600;margin:.25rem 0}.location_section .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.main_container{height:85%}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%;outline:none}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:#789;border:none;padding:4%;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.mobile_number{border-color:#dc3545!important;box-shadow:0 0 0 .1rem #ffc3c3}.waitlist-description{color:#fff;font-size:14px;margin-bottom:0;font-weight:500}.waitlist-description .form-check-input{width:17px;height:17px;background-color:transparent}.waitlist-description .form-check-input:checked{background-color:#0d6efd}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:1%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:89%;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:7px;margin-top:8px}.custom-checkbox{width:18px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000;margin:.25rem 0}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#e3fee3;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.complete_booking img{width:30px}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}.datepicker-popover{position:absolute;z-index:1000;margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #0000001f,0 2px 4px #00000014;background:#fff;border:1px solid rgba(0,0,0,.06);width:17vw}::ng-deep .datepicker-calendar{border-radius:16px!important;overflow:hidden!important;font-family:Segoe UI,Roboto,sans-serif!important;width:100%!important}::ng-deep .mat-calendar-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:3px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;border-radius:16px 16px 0 0!important}::ng-deep .mat-calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;margin:2% calc(4.7142857143% - 16px)!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:16px!important;letter-spacing:.5px!important;background:transparent!important;border:none!important;padding:12px 16px!important;border-radius:8px!important;transition:all .3s ease!important;flex-grow:1!important;text-align:left!important;margin:0!important;order:1!important}::ng-deep .mat-calendar-period-button:hover{background:#ffffff26!important;transform:translateY(-1px)!important}::ng-deep .mat-calendar-header .mat-calendar-controls>div{display:flex;order:2!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .3s ease!important;margin:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-calendar-previous-button:hover,::ng-deep .mat-calendar-next-button:hover{background:#ffffff40!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-arrow{fill:#fff!important;width:20px!important;height:20px!important}::ng-deep .mat-calendar-content{padding:10px 16px!important;background:#fff!important}::ng-deep .mat-calendar-table-header th{color:#6b7280!important;font-weight:600!important;font-size:12px!important;text-align:center!important;padding-bottom:12px!important;text-transform:uppercase!important}::ng-deep .mat-calendar-table{border-spacing:0!important;border-collapse:collapse!important;width:100%!important}::ng-deep .mat-calendar-body-cell{height:44px!important;width:44px!important;border-radius:12px!important}::ng-deep .mat-calendar-body-cell-content{width:33px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;font-size:14px!important;color:#374151!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#667eea1a!important;color:#667eea!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-body-selected{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;box-shadow:0 4px 12px #677eea4d!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:none;color:#667eea!important;font-weight:700!important}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:#d1d5db!important}@media screen and (min-width:320px) and (max-width:475px){.back-btn{gap:.25rem!important;margin:0!important}.back-btn span{color:#000;font-size:12px;font-weight:500;white-space:nowrap}.back-btn mat-icon{font-size:16px!important;margin-bottom:0!important}.header-title{display:flex;align-items:center;margin-bottom:0rem!important}.header-title h1{font-size:16px!important}.main_header .header{padding:3%}.date_section,.service_section,.location_section,.contact_section,.payment_section{width:100%!important;padding:0% 5%}.service_section h2{font-size:17px!important;margin-bottom:0!important}.service_section p{font-size:14px!important}.main_section{height:100vh}.services-grid{display:flex;justify-content:center;flex-wrap:wrap}.service-card,.service-card-selected{width:90vw!important}.home-visit{width:40vw!important}.main_body{height:calc(100% - 123px)!important}.back-footer-btn{padding:12px 2px!important}.footer-buttons{padding:0% 3%!important;width:100%!important}.continue-btn{width:22vw!important}.main_container{flex-wrap:wrap;height:100%!important}.date_section{overflow:hidden}.date_section .time_selection{height:60%}.datepicker-popover{width:60vw!important}.details_container{height:90%!important;justify-content:space-around}.complete_booking{width:39vw!important}.booking_confirmation,.details-card{width:100%!important}.datetime-header h1{margin:0!important}}\n"] }]
+            args: [{ selector: 'simpo-appointment-booking', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatIcon, MatFormFieldModule, MatDatepickerModule, FormsModule, MatNativeDateModule, MatInputModule, LettersOnlyDirective, NumbersOnlyDirective, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"screenWidth < 475 ? 'translateY(-100%)' : ''\"></p-toast>\r\n<section class=\"main_section\">\r\n    <div class=\"main_header\">\r\n        <div class=\"header d-flex justify-content-between align-items-center\">\r\n            <div class=\"back-btn d-flex justify-content-center align-items-center cursor-pointer gap-2 mb-3\"\r\n                (click)=\"goBack()\">\r\n                <mat-icon>keyboard_backspace</mat-icon><span *ngIf=\"screenWidth > 475\">Back to Home</span>\r\n            </div>\r\n            <div class=\"header-title\">\r\n                <h1>Book New Appointment</h1>\r\n                <p>{{businessName ?? \"N/A\" }}</p>\r\n            </div>\r\n        </div>\r\n\r\n        <div class=\"progress-bar\">\r\n            <div class=\"progress-fill\" [style.width]=\"barWidth + '%'\"></div>\r\n        </div>\r\n    </div>\r\n    <div class=\"main_body w-100 d-flex justify-content-center\"><ng-container *ngIf=\"selectedTab === 'serviceListing'\">\r\n            <ng-container *ngIf=\"!skeletonLoader\">\r\n                <ng-container *ngTemplateOutlet=\"serviceListing\"></ng-container>\r\n            </ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'locationListing'\">\r\n            <ng-container *ngTemplateOutlet=\"locationListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'staffListing'\">\r\n            <ng-container *ngTemplateOutlet=\"staffListing\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab === 'dateSelection'\">\r\n            <ng-container *ngTemplateOutlet=\"dateSelection\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='contactDetails'\">\r\n            <ng-container *ngTemplateOutlet=\"contactDetails\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='paymentTab'\">\r\n            <ng-container *ngTemplateOutlet=\"paymentTab\"></ng-container>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"selectedTab==='statusTemplate'\">\r\n            <ng-container *ngTemplateOutlet=\"statusTemplate\"></ng-container>\r\n        </ng-container>\r\n    </div>\r\n    <div class=\"main_footer d-flex justify-content-center align-items-center\" *ngIf=\"selectedTab!=='statusTemplate'\">\r\n        <div class=\"footer-buttons\">\r\n            <span class=\"back-footer-btn cursor-pointer\" (click)=\"previousStep()\">Back</span>\r\n            <button class=\"continue-btn\" [disabled]=\"!activeButton\" (click)=\"nextStep()\"\r\n                *ngIf=\"selectedTab!='paymentTab'\">{{!loader ? 'Continue' : 'Loading...'}}</button>\r\n            <button class=\"cursor-pointer d-flex justify-content-evenly align-items-center\"\r\n                *ngIf=\"selectedTab==='paymentTab'\" (click)=\"checkPayment()\"\r\n                [ngClass]=\"{'pay-now-btn' : selectedService?.depositAmount?.depositRequired,'complete_booking' : !selectedService?.depositAmount?.depositRequired}\"><img\r\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/304012c1753440087996Background.png\">{{selectedService?.depositAmount?.depositRequired\r\n                ? 'Pay Now' : 'Complete Booking'}}</button>\r\n        </div>\r\n    </div>\r\n</section>\r\n<ng-template #serviceListing>\r\n    <div class=\"w-60 service_section\">\r\n        <div class=\"service-selection\">\r\n            <h2>Select a Service</h2>\r\n            <p>Choose the service you'd like to book</p>\r\n\r\n            <div class=\"services-grid\">\r\n                <ng-container *ngFor=\"let service of serviceData\">\r\n                    <div class=\"\" (click)=\"selectService(service)\"\r\n                        [ngClass]=\"{ 'service-card-selected' : service?.selected, 'service-card': !service?.selected }\">\r\n                        <div class=\" service-header\">\r\n                            <div class=\"service-icon\"><mat-icon>person_outline</mat-icon></div>\r\n                            <div class=\"service-info\">\r\n                                <div class=\"service-title\">{{service?.name ? service?.name : 'N/A'}}</div>\r\n                                <div class=\"service-category\">Wellness</div>\r\n                            </div>\r\n                            <div>\r\n                                <div class=\"service-price\">\u20B9{{service?.priceDetails?.price ?\r\n                                    service?.priceDetails?.price : 'N/A' }}</div>\r\n                                <div class=\"service-duration\">{{service?.duration ? service?.duration : 'N/A'}} min\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"service-description\">\r\n                            {{service?.description ? service?.description : 'N/A'}}\r\n                        </div>\r\n                        <div class=\"home-visit\" *ngIf=\"service?.homeAppointmentAvailable\"><img\r\n                                src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/982126c1758628863129furniture_16406103.png\">Home\r\n                            Visit Available</div>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83D\uDC64</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">General Consultation</div>\r\n                            <div class=\"service-category\">Medical</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B9800</div>\r\n                            <div class=\"service-duration\">30 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Comprehensive health consultation\r\n                    </div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\uD83E\uDDE0</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Mental Health Counseling</div>\r\n                            <div class=\"service-category\">Mental Health</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91500</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional psychological support\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div>\r\n\r\n                <div class=\"service-card\">\r\n                    <div class=\"service-header\">\r\n                        <div class=\"service-icon\">\u2702</div>\r\n                        <div class=\"service-info\">\r\n                            <div class=\"service-title\">Hair Cut & Styling</div>\r\n                            <div class=\"service-category\">Beauty</div>\r\n                        </div>\r\n                        <div>\r\n                            <div class=\"service-price\">\u20B91200</div>\r\n                            <div class=\"service-duration\">45 min</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"service-description\">\r\n                        Professional hair cutting and styling\r\n                    </div>\r\n                    <div class=\"home-visit\">Home Visit Available</div>\r\n                </div> -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #locationListing>\r\n    <div class=\"location_section\">\r\n        <div class=\"header flex-column align-items-start\">\r\n            <h1>Choose Location</h1>\r\n            <p>Select where you'd like to receive the service</p>\r\n        </div>\r\n\r\n        <div class=\"location-list\">\r\n            <ng-container *ngFor=\"let location of locationData\">\r\n                <div (click)=\"selectLocation(location)\"\r\n                    [ngClass]=\"{ 'location-card-selected' : location?.selected, 'location-card': !location?.selected }\">\r\n                    <div class=\"location-content\">\r\n                        <div class=\"location-info\">\r\n                            <div class=\"location-icon\"><img\r\n                                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/427226c1758629157758store_3171510.png\">\r\n                            </div>\r\n                            <div class=\"location-details\">\r\n                                <div class=\"d-flex justify-content-between align-items-center\">\r\n                                    <h3>{{location?.storeName ? location?.storeName : 'N/A'}}</h3>\r\n                                    <!-- <div class=\"distance\"><mat-icon>location_on</mat-icon> 2.3 km</div> -->\r\n                                </div>\r\n                                <p>{{location?.addressDetails?.addressLine}}, {{location?.addressDetails?.city}},\r\n                                    {{location?.addressDetails?.state}} {{location?.pincode}}</p>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </ng-container>\r\n            <!-- <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon branch-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Branch Clinic</h3>\r\n                            <p>456 Care Avenue, Health Zone, Mumbai 400015</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">5.8 km</div>\r\n                </div>\r\n            </div>\r\n\r\n            <div class=\"location-card\">\r\n                <div class=\"location-content\">\r\n                    <div class=\"location-info\">\r\n                        <div class=\"location-icon home-icon\"></div>\r\n                        <div class=\"location-details\">\r\n                            <h3>Home Visit</h3>\r\n                            <p>Your Location</p>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"distance\">0 km</div>\r\n                </div>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #staffListing>\r\n    <div class=\"w-60 overflow-hidden\">\r\n        <div class=\"d-flex w-100 h-100\">\r\n            <div class=\"w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"staff-header mb-3\">\r\n                    <h1>Select Staff Member</h1>\r\n                    <p class=\"staff-subtitle mb-0\">Choose your preferred professional</p>\r\n                </div>\r\n\r\n                <!-- Staff Cards -->\r\n                <div class=\"d-flex flex-column gap-4 staff-list\">\r\n                    <ng-container *ngFor=\"let staff of staffData\">\r\n                        <div class=\"card rounded-3 p-3\" (click)=\"selectStaff(staff)\"\r\n                            [ngClass]=\"{ 'staff-card-selected' : staff?.selected, 'staff-card': !staff?.selected }\">\r\n                            <div class=\"d-flex align-items-start justify-content-between\">\r\n                                <div class=\"d-flex align-items-start flex-grow-1\">\r\n                                    <div\r\n                                        class=\"staff-avatar rounded-circle d-flex align-items-center justify-content-center me-4\">\r\n                                        {{staff?.staffName.slice(0,3).toUpperCase()}}\r\n                                    </div>\r\n                                    <div class=\"staff-details flex-grow-1\">\r\n                                        <h3 class=\"staff-name\">{{staff?.staffName ? staff?.staffName : 'N/A'}}</h3>\r\n                                        <p class=\"staff-specialty\">General Medicine</p>\r\n                                        <!-- <p class=\"staff-description mb-0\">Experienced physician with 10+ years in\r\n                                            general\r\n                                            medicine and wellness care.</p> -->\r\n                                    </div>\r\n                                </div>\r\n                                <!-- <div class=\"rating-section\">\r\n                                    <div class=\"star-rating d-flex align-items-center\">\r\n                                        <span class=\"star-icon\"></span>\r\n                                        <span class=\"rating-number\">4.9</span>\r\n                                    </div>\r\n                                    <div class=\"review-count\">156 reviews</div>\r\n                                </div> -->\r\n                            </div>\r\n                        </div>\r\n                    </ng-container>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #dateSelection>\r\n    <div class=\"w-60 date_section\">\r\n        <div class=\"row justify-content-center h-100\">\r\n            <div class=\"col-12 h-100\">\r\n                <div class=\"datetime-header mb-2\">\r\n                    <h1>Select Date & Time</h1>\r\n                    <p class=\"datetime-subtitle mb-0\">Choose when you'd like your appointment</p>\r\n                </div>\r\n\r\n                <!-- Main Content -->\r\n                <div class=\"d-flex gap-4 main_container\">\r\n                    <!-- Left Column - Date Selection -->\r\n                    <div [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card rounded-3 p-4 h-100\">\r\n                            <h3 class=\"section-title\">Select Date</h3>\r\n\r\n                            <div class=\"date-picker-container d-flex align-items-center justify-content-between\"\r\n                                (click)=\"$event.stopPropagation()\">\r\n                                <input type=\"text\" class=\"date-input border-0 rounded-2\" placeholder=\"dd-mm-yyyy\"\r\n                                    [value]=\"selectedDateStr\" readonly (click)=\"toggleCalendar($event)\">\r\n\r\n                                <mat-icon class=\"ms-2\" (click)=\"toggleCalendar($event)\">calendar_today</mat-icon>\r\n                            </div>\r\n                            <div class=\"position-relative\" (click)=\"$event.stopPropagation()\">\r\n                                <div class=\"datepicker-popover\" *ngIf=\"showCalendar\">\r\n                                    <mat-calendar [(selected)]=\"selectedDate\" [dateFilter]=\"dateFilter\"\r\n                                        (selectedChange)=\"onDateSelected($event)\" class=\"datepicker-calendar\">\r\n                                    </mat-calendar>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Right Column - Time Selection -->\r\n                    <div class=\"time_selection\" [ngClass]=\"{'w-50' : screenWidth > 475 , 'w-100':screenWidth < 475}\">\r\n                        <div class=\"section-card card h-100 rounded-3 p-4\">\r\n                            <h3 class=\"section-title\">Available Times</h3>\r\n\r\n                            <!-- Time Slots Grid -->\r\n                            <div class=\"row g-2 mb-4 overflow-scroll\">\r\n                                <ng-container *ngIf=\"!skeletonLoader ;else slotsLoader\">\r\n                                    <div class=\"col-4\" *ngFor=\"let time of locationTiming\">\r\n                                        <div class=\"time-slot rounded-2\" [class.selected]=\"time.selected\"\r\n                                            (click)=\"selectTimeSlot(time)\">{{time ?\r\n                                            time?.value : 'N/A'}}</div>\r\n                                    </div>\r\n                                </ng-container>\r\n                                <ng-template #slotsLoader>\r\n                                    <!-- Time Slot Grid Skeleton Loader HTML -->\r\n                                    <div class=\"time-slot-grid\">\r\n                                        <!-- Row 1 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 2 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 3 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 4 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 5 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n\r\n                                        <!-- Row 6 -->\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                        <div class=\"skeleton-time-slot\"></div>\r\n                                    </div>\r\n\r\n                                </ng-template>\r\n                            </div>\r\n\r\n                            <!-- Waitlist Section -->\r\n                            <div class=\"waitlist-section rounded-3\">\r\n                                <div class=\"d-flex align-items-start\">\r\n                                    <div class=\"d-flex h-100 justify-content-between flex-column\">\r\n                                        <div class=\"waitlist-title d-flex align-items-center gap-2\"><span\r\n                                                class=\"waitlist-icon check-icon\"></span>No\r\n                                            slots available?</div>\r\n                                        <div class=\"waitlist-description d-flex align-items-center gap-2\">\r\n                                            <input class=\"form-check-input cursor-pointer\" type=\"checkbox\"\r\n                                                id=\"flexCheckChecked\">\r\n                                            Add me to the waitlist for earlier\r\n                                            availability\r\n                                        </div>\r\n                                    </div>\r\n                                    <div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n</ng-template>\r\n<ng-template #contactDetails>\r\n    <div class=\"w-60 contact_section overflow-hidden\">\r\n        <div class=\"d-flex h-100\">\r\n            <div class=\"h-100 w-100\">\r\n                <!-- Header Section -->\r\n                <div class=\"contact-header mb-2\">\r\n                    <h1>Contact Details</h1>\r\n                    <p class=\"contact-subtitle mb-0\">Provide your contact information</p>\r\n                </div>\r\n\r\n                <!-- Form Sections -->\r\n                <div class=\"d-flex gap-3 details_container flex-column w-100\">\r\n                    <!-- Left Column - Personal Information -->\r\n                    <div class=\"d-flex gap-4\">\r\n                        <div\r\n                            [ngClass]=\"{'w-50' : selectedService?.homeAppointmentAvailable, 'w-100' : !selectedService?.homeAppointmentAvailable}\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Personal Information</h3>\r\n\r\n                                <!-- Full Name -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Full Name\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"text\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.name\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoLettersOnly>\r\n                                </div>\r\n\r\n                                <!-- Email Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Email Address\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"email\" class=\"form-control form-input rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.email\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\">\r\n                                </div>\r\n\r\n                                <!-- Phone Number -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Phone Number\r\n                                        <span class=\"required-asterisk\">*</span>\r\n                                    </label>\r\n                                    <input type=\"tel\" class=\"form-control  rounded-2\"\r\n                                        [(ngModel)]=\"appointmentPayload.customerDetail.phoneNumber\"\r\n                                        (ngModelChange)=\"checkRequiredValues()\" simpoNumbersOnly\r\n                                        [ngClass]=\"{'mobile_number' : appointmentPayload.customerDetail.phoneNumber.length != 10}\">\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                        <!-- Right Column - Home Visit Details -->\r\n                        <div class=\"w-50\" *ngIf=\"selectedService?.homeAppointmentAvailable\">\r\n                            <div class=\"form-section card rounded-3 p-4 h-100\">\r\n                                <h3 class=\"section-title\">Home Visit Details</h3>\r\n\r\n                                <!-- Home Address -->\r\n                                <div class=\"mb-4\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Home Address\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Enter your complete address\" [(ngModel)]=\"homeAddress\"></textarea>\r\n                                </div>\r\n\r\n                                <!-- Special Instructions -->\r\n                                <div class=\"mb-0\">\r\n                                    <label class=\"form-label d-flex align-items-center\">\r\n                                        Special Instructions\r\n                                    </label>\r\n                                    <textarea class=\"form-control form-textarea rounded-2\"\r\n                                        placeholder=\"Any special instructions for the professional (optional)\" [(ngModel)]=\"instructions\"></textarea>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"policies-container\">\r\n                        <!-- Header -->\r\n                        <h2 class=\"policies-title\">Policies & Terms</h2>\r\n\r\n                        <!-- Policy Items -->\r\n                        <div class=\"policy-items-container d-flex flex-column gap-3\">\r\n                            <!-- Cancellation Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showCancellationPolicy = !showCancellationPolicy\">\r\n                                <h3 class=\"policy-title\">Cancellation Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showCancellationPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showCancellationPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showCancellationPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n\r\n                            <!-- Rescheduling Policy -->\r\n                            <div class=\"policy-item d-flex justify-content-between align-items-center\"\r\n                                (click)=\"showReducingPolicy = !showReducingPolicy\">\r\n                                <h3 class=\"policy-title\">Rescheduling Policy</h3>\r\n                                <div class=\"policy-arrow d-flex align-items-center justify-content-center\"><mat-icon\r\n                                        *ngIf=\"!showReducingPolicy\">keyboard_arrow_right</mat-icon>\r\n                                    <mat-icon *ngIf=\"showReducingPolicy\">keyboard_arrow_down</mat-icon>\r\n                                </div>\r\n                            </div>\r\n                            <div class=\"cancellation_policies d-flex flex-column gap-2 fw-500\"\r\n                                *ngIf=\"showReducingPolicy\">\r\n                                <span>&#8226; Free cancellation up to 24 hours before appointment</span>\r\n                                <span>&#8226; 50% charge for cancellations within 24 hours</span>\r\n                                <span>&#8226; No refund for no-shows</span>\r\n                                <span>&#8226; Emergency cancellations will be reviewed case by case</span>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <!-- Acceptance Section -->\r\n                        <div class=\"acceptance-section\">\r\n                            <input type=\"checkbox\" class=\"custom-checkbox\" [(ngModel)]=\"termsAndConditions\"\r\n                                (ngModelChange)=\"checkRequiredValues()\">\r\n                            <p class=\"acceptance-text\">\r\n                                I understand and accept the cancellation & rescheduling policies and\r\n                                <span class=\"terms-link\">Terms & Conditions<span\r\n                                        class=\"external-link-icon\"></span></span>\r\n                            </p>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #paymentTab>\r\n    <div class=\"w-60 payment_section\">\r\n        <div class=\"w-100 h-100\">\r\n            <div class=\"w-100 d-flex justify-content-center align-items-center flex-column\">\r\n                <!-- Header Section -->\r\n                <div class=\"payment-header mb-3 w-100\">\r\n                    <h1>Payment & Confirmation</h1>\r\n                    <p class=\"payment-subtitle mb-0\">Review your booking and complete payment</p>\r\n                </div>\r\n\r\n                <!-- Booking Summary Card -->\r\n                <div class=\"booking-summary-card\" [ngClass]=\"{'w-100' : screenWidth < 475,'w-50':screenWidth > 475}\">\r\n                    <h2 class=\"summary-title\">Booking Summary</h2>\r\n\r\n                    <!-- Service -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Service</div>\r\n                        <div class=\"summary-value\">{{selectedService?.name ? selectedService?.name : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Professional -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Professional</div>\r\n                        <div class=\"summary-value\">{{selectedStaff?.staffName ? selectedStaff?.staffName : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Location -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Location</div>\r\n                        <div class=\"summary-value\">{{selectedLocation?.storeName ? selectedLocation?.storeName : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n\r\n                    <!-- Date & Time -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Date & Time</div>\r\n                        <div class=\"summary-value\">{{selectedDateStr ? (selectedDateStr) : 'N/A'}} at\r\n                            {{selectedTime ? selectedTime.value : 'N/A'}}</div>\r\n                    </div>\r\n\r\n                    <!-- Duration -->\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Duration</div>\r\n                        <div class=\"summary-value\">{{selectedService?.duration ? selectedService?.duration : 'N/A'}}\r\n                            minutes</div>\r\n                    </div>\r\n                    <div class=\"summary-row\">\r\n                        <div class=\"summary-label\">Tax Percent</div>\r\n                        <div class=\"summary-value\">{{selectedService?.priceDetails?.taxPercent ?\r\n                            selectedService?.priceDetails?.taxPercent : 'N/A'}}%</div>\r\n                    </div>\r\n                    <!-- Total -->\r\n                    <div class=\"summary-row total-row\">\r\n                        <div class=\"summary-label\">Total</div>\r\n                        <div class=\"summary-value\">\r\n                            <span class=\"currency-symbol\">\u20B9</span>{{selectedService?.priceDetails?.price ?\r\n                            selectedService?.priceDetails?.price : 'N/A'}}\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #statusTemplate>\r\n    <div class=\"booking-confirmation\">\r\n        <!-- Success Icon -->\r\n        <div class=\"success-icon\">\r\n            <div class=\"checkmark-circle\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/881293c1758695578518success.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"apiStatus\">\r\n                <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/325000c1758695564518fail.gif\"\r\n                    class=\"w-100 h-100\" *ngIf=\"!apiStatus\">\r\n            </div>\r\n        </div>\r\n\r\n        <!-- Main Content -->\r\n        <div class=\"confirmation-content\">\r\n            <h1 class=\"confirmation-title\">{{apiStatus ? 'Booking Confirmed!' : 'Booking Failed'}}</h1>\r\n            <p class=\"confirmation-message\">\r\n                {{apiStatus ? 'Your appointment has been successfully booked.':'Failed to book you appointment. Please\r\n                try again later'}}\r\n            </p>\r\n\r\n            <!-- Details Card -->\r\n            <div class=\"d-flex w-100 align-items-center justify-content-center\" *ngIf=\"apiStatus\">\r\n                <div class=\"details-card\">\r\n                    <h3 class=\"details-title\">Appointment Details</h3>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Service</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.serviceDetail?.name ?\r\n                            appointmentPayload.serviceDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Professional</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.staffDetail?.name ?\r\n                            appointmentPayload.staffDetail?.name : 'N/A'}}</span>\r\n                    </div>\r\n                    <div class=\"details-row\">\r\n                        <span class=\"detail-label\">Date & Time</span>\r\n                        <span class=\"detail-value\">{{appointmentPayload.bookingDate ?\r\n                            appointmentPayload.bookingDate.slice(0,10) :\r\n                            'N/A'}} at\r\n                            {{appointmentPayload.startTime ? appointmentPayload.startTime : 'N/A'}}</span>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n\r\n            <!-- Action Buttons -->\r\n            <!-- <div class=\"action-buttons\">\r\n                <button class=\"btn btn-outline\">View My Bookings</button>\r\n                <button class=\"btn btn-primary\">Back to Admin</button>\r\n            </div> -->\r\n        </div>\r\n    </div>\r\n</ng-template>\r\n<ng-template #skeletonLoader *ngIf=\"skeletonLoader\">\r\n    <!-- Service Skeleton Loader HTML -->\r\n    <div class=\"service-grid\">\r\n        <!-- Skeleton Card 1 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 2 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 3 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 4 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 5 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n\r\n        <!-- Skeleton Card 6 -->\r\n        <div class=\"service-card skeleton-card\">\r\n            <div class=\"service-header\">\r\n                <div class=\"skeleton skeleton-icon\"></div>\r\n                <div class=\"service-content\">\r\n                    <div class=\"skeleton skeleton-title\"></div>\r\n                    <div class=\"skeleton skeleton-price\"></div>\r\n                    <div class=\"skeleton skeleton-duration\"></div>\r\n                </div>\r\n            </div>\r\n            <div class=\"skeleton skeleton-category\"></div>\r\n            <div class=\"skeleton skeleton-description\"></div>\r\n            <div class=\"skeleton skeleton-badge\"></div>\r\n        </div>\r\n    </div>\r\n</ng-template>", styles: ["body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;background-color:#fff;color:#000;line-height:1.6}.main_section{position:relative;height:100%}.main_header{padding:1%;width:100%;background:#fff;height:15%}.main_body{height:75%;padding-top:0%;overflow:scroll}.header{display:flex;align-items:center;justify-content:space-between}.back-btn mat-icon{height:16px!important;width:20px!important;font-size:21px!important}.back-btn span{color:#000;font-size:15px;font-weight:500}.back-btn:hover{background-color:#f0f0f0}.header-title{flex-grow:1;margin-left:2rem}.header-title h1{font-size:20px;font-weight:600;margin-bottom:0}.header-title p{color:#666;font-size:14px}.step-indicator{font-size:14px;color:#000;font-weight:700}.progress-bar{width:100%;height:8px;background-color:#e0e0e0;margin-bottom:1rem;border-radius:10px;overflow:hidden}.w-60{width:60%!important}.progress-fill{height:100%;width:14.28%;background-color:#000}.service-selection h2{font-size:20px;font-weight:600;margin:.25rem 0}.service-selection p{color:#666;font-size:16px;margin-bottom:1rem}.main_footer{border-top:1px solid lightgrey;width:100%;background-color:#fff;height:10%}.services-grid{display:grid;grid-template-columns:48% 48%;gap:15px;padding-bottom:5px}.service-card{border:1px solid lightgrey;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-card:hover{background-color:#f9f9f9;box-shadow:0 4px 8px #0000001a}.service-card-selected{border:2px solid black;border-radius:8px;padding:24px;background-color:#fff;cursor:pointer;transition:all .3s ease;position:relative}.service-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:3rem}.service-info{flex-grow:1}.service-icon{width:40px;height:40px;border-radius:8px;background-color:#f0f0f0;display:flex;align-items:center;justify-content:center;margin-right:1rem;font-size:20px;margin-top:.2rem}.service-title{font-size:18px;font-weight:600;margin-bottom:4px}.service-category{background-color:#f0f0f0;color:#000;padding:1% 4%;border-radius:12px;font-size:12px;font-weight:500;display:inline-block}.service-price{font-size:17px;font-weight:700;color:#000}.service-duration{font-size:12px;color:#666;display:flex;justify-content:center;align-items:center}.service-description{color:#666;font-size:15px;margin-bottom:.5rem;line-height:1.5}.home-visit{display:flex;align-items:center;font-size:12px;color:#666;border:1px solid lightgrey;padding:.5% 1%;border-radius:4px;background-color:#fff;width:10vw;height:3vh;white-space:nowrap;justify-content:space-around}.home-visit img{width:18px}.footer-buttons{display:flex;justify-content:space-between;align-items:center;width:60%}.back-footer-btn{color:#000;padding:12px 24px;font-size:16px}.continue-btn{background-color:#000;color:#fff;border:2px solid black;padding:.5%;border-radius:4px;font-size:15px!important;font-weight:600;cursor:pointer;width:6vw!important}.continue-btn:hover{background-color:#333}.continue-btn:disabled{background-color:#ccc;border-color:#ccc;cursor:not-allowed}.location_section{width:60%;overflow:hidden}.location_section .header h1{font-size:20px;font-weight:600;margin:.25rem 0}.location_section .header p{font-size:16px;color:#888;font-weight:400}.location-list{display:flex;flex-direction:column;gap:20px;height:64vh;overflow-x:scroll;padding-bottom:1%}.location-card{border:1px solid lightgrey;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-card:hover{box-shadow:0 4px 8px #0000001a}.location-card-selected{border:1px solid black;border-radius:12px;padding:1.5rem 1.5rem 2rem;cursor:pointer;transition:all .3s ease}.location-content{display:flex;align-items:center;justify-content:space-between}.location-info{display:flex;align-items:center;flex-grow:1}.location-icon{width:40px;height:40px;background-color:#d3d3d3;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:20px}.location-icon img{width:28px}.location-details{width:95%}.location-details h3{font-size:16px;font-weight:600;margin-bottom:0}.location-details p{font-size:14px;color:#aaa;line-height:1.4;margin:0}.distance{display:flex;align-items:center;color:#888;font-size:14px;margin-left:20px}.distance mat-icon{width:18px!important;height:15px!important;font-size:17px}.staff-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.staff-subtitle{font-size:16px;color:#888;font-weight:400}.staff-card{border:1px solid lightgrey;cursor:pointer;transition:all .3s ease}.staff-card:hover{box-shadow:0 4px 8px #0000001a}.staff-card-selected{border-color:#666;cursor:pointer;transition:all .3s ease}.staff-avatar{width:64px;height:64px;background-color:gray;font-size:20px;font-weight:600;color:#fff}.staff-name{font-size:16px;font-weight:600;margin-bottom:0}.staff-specialty{font-size:14px;color:gray;margin-bottom:8px}.staff-description{font-size:14px;color:gray;line-height:1.4}.rating-section{display:flex;flex-direction:column;align-items:flex-end}.star-rating{color:gold;font-size:16px;margin-bottom:4px;width:100%}.rating-number{font-size:18px;font-weight:600;color:#000}.review-count{font-size:12px;color:#888}.star-icon:before{content:\"\\2b50\";margin-right:4px}.staff_section{width:60%;overflow:hidden}.staff-list{height:64vh;overflow-x:scroll;padding-bottom:1%}.datetime-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.main_container{height:85%}.datetime-subtitle{font-size:16px;color:#888;font-weight:400}.section-card{border:1px solid lightgrey}.section-title{font-size:17px;font-weight:600;margin-bottom:20px}.date-picker-container{border:1px solid lightgrey}.date-picker-container mat-icon{height:17px;font-size:18px}.date-input{font-size:16px;padding:2%;width:30%;outline:none}.time-slot{border:1px solid lightgrey;font-size:14px;font-weight:500;padding:6%;cursor:pointer;transition:all .3s ease;text-align:center;min-width:80px}.time-slot:hover{box-shadow:0 4px 8px #0000001a}.time-slot.selected{background-color:#555;border-color:#777;color:#fff}.waitlist-section{background-color:#789;border:none;padding:4%;max-height:13vh}.waitlist-icon{color:#4ade80;font-size:18px}.waitlist-title{color:#fff;font-size:16px;font-weight:500;margin-bottom:8px}.mobile_number{border-color:#dc3545!important;box-shadow:0 0 0 .1rem #ffc3c3}.waitlist-description{color:#fff;font-size:14px;margin-bottom:0;font-weight:500}.waitlist-description .form-check-input{width:17px;height:17px;background-color:transparent}.waitlist-description .form-check-input:checked{background-color:#0d6efd}.check-icon:before{content:\"\\2713\"}.contact-header h1{font-size:20px;font-weight:600;margin:.25rem 0}.contact-subtitle{font-size:16px;color:#888;font-weight:400}.form-section{border:1px solid lightgrey}.section-title{font-size:16px;font-weight:600;margin-bottom:24px}.form-label{font-size:14px;font-weight:500;margin-bottom:8px}.required-asterisk{color:#ff6b6b;margin-left:4px}.form-input{border:1px solid lightgrey;font-size:16px;padding:1%;transition:all .3s ease}.form-input:focus{border-color:#777}.form-input::placeholder{color:#aaa;font-size:14px}.form-textarea{border:1px solid lightgrey;font-size:16px;padding:12px 16px;resize:vertical;max-height:120px;transition:all .3s ease}.form-textarea:focus{border-color:#777}.form-textarea::placeholder{color:#aaa;font-size:14px}.optional-label{color:#888;font-size:12px;font-style:italic}.details_container{height:89%;overflow-x:scroll;padding-bottom:1%}.policies-container{background-color:#fff;border:1px solid lightgrey;padding:2rem;border-radius:12px}.policies-title{font-size:16px;font-weight:600;color:#000;margin-bottom:1rem}.policy-item{background-color:#fff;border:1px solid lightgrey;border-radius:8px;padding:1%;cursor:pointer;transition:all .3s ease}.cancellation_policies{padding:1% .5%;font-weight:500}.policy-item:hover{background-color:#f8f9fa;border-color:#ccc}.policy-item:last-of-type{margin-bottom:32px}.policy-title{font-size:14px;font-weight:500;color:#000;margin:0}.acceptance-section{display:flex;align-items:flex-start;gap:7px;margin-top:8px}.custom-checkbox{width:18px;height:20px;background-color:#fff;border:1px solid lightgrey;border-radius:4px;margin-top:2px;cursor:pointer;position:relative;flex-shrink:0;transition:all .3s ease}.custom-checkbox:hover{border-color:#999;background-color:#f8f9fa}.custom-checkbox.checked{background-color:#007bff;border-color:#007bff}.custom-checkbox.checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}.acceptance-text{font-size:14px;color:#000;line-height:1.5;margin:0}.terms-link{color:#007bff;text-decoration:none;font-weight:500;position:relative}.terms-link:hover{color:#0056b3;text-decoration:underline}.external-link-icon{margin-left:4px;font-size:12px;opacity:.8}.external-link-icon:after{content:\"\\2197\"}.payment-header h1{font-size:20px;font-weight:600;color:#000;margin:.25rem 0}.payment-subtitle{font-size:16px;color:#666;font-weight:400}.booking-summary-card{background-color:#fff;border:1px solid lightgrey;padding:2%;border-radius:12px}.summary-title{font-size:18px;font-weight:600;color:#000;margin-bottom:32px}.summary-row{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.summary-row:last-child{border-bottom:none;padding-bottom:0}.summary-label{font-size:16px;color:#000;font-weight:500}.summary-value{font-size:16px;color:#000;font-weight:400;text-align:right}.total-row{margin-top:16px;padding-top:16px}.total-row .summary-label,.total-row .summary-value{font-size:20px;font-weight:600}.currency-symbol{font-size:18px}.complete_booking{background:#e3fee3;border:none;padding:.5%;width:12vw!important;font-size:15px!important;font-weight:500;border-radius:4px}.complete_booking img{width:30px}.pay-now-btn{justify-content:unset!important;background:#e3fee3;border:none;padding:.5%;width:8vw!important;font-size:15px!important;font-weight:500;border-radius:4px;gap:.5rem}.pay-now-btn img{width:30px}.booking-confirmation{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center;width:60%;border-radius:10px}.success-icon{margin-bottom:1.5rem}.checkmark-circle{width:80px;height:80px;position:relative}.checkmark{width:80px;height:80px;border-radius:50%;display:block;stroke-width:3;stroke:#22c55e;stroke-miterlimit:10;animation:checkmark-fill .4s ease-in-out .4s forwards,checkmark-scale .3s ease-in-out .9s both}.checkmark-circle-path{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:3;stroke-miterlimit:10;stroke:#22c55e;fill:none;animation:checkmark-stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark-check{transform-origin:50% 50%;stroke-dasharray:48;stroke-dashoffset:48;stroke:#22c55e;stroke-width:3;animation:checkmark-stroke .3s cubic-bezier(.65,0,.45,1) .8s forwards}@keyframes checkmark-stroke{to{stroke-dashoffset:0}}@keyframes checkmark-scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes checkmark-fill{to{box-shadow:inset 0 0 0 30px #22c55e}}.confirmation-content{width:100%;height:80%}.confirmation-title{font-size:18px;font-weight:700}.confirmation-message{font-size:1rem;margin-bottom:1rem;line-height:1.6;font-weight:500}.details-card{background:#ffffff1a;border:1px solid lightgrey;border-radius:16px;padding:1.5rem;margin-bottom:2rem;width:35vw}.details-title{font-size:1.25rem;font-weight:600;margin:0 0 1.5rem}.details-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid rgba(255,255,255,.1)}.details-row:last-child{border-bottom:none}.detail-label{font-size:.9rem;font-weight:500}.detail-value{font-weight:600;font-size:1rem}.action-buttons{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}.btn{padding:.75rem 1.5rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;min-width:140px}.btn-outline{background:transparent;border:2px solid rgba(255,255,255,.3);color:#fff}.btn-outline:hover{background:#ffffff1a;border-color:#ffffff80}.btn-primary{background:#fff;color:#1f2937}.btn-primary:hover{background:#f3f4f6;transform:translateY(-1px)}.datepicker-popover{position:absolute;z-index:1000;margin-top:8px;border-radius:16px;overflow:hidden;box-shadow:0 12px 28px #0000001f,0 2px 4px #00000014;background:#fff;border:1px solid rgba(0,0,0,.06);width:17vw}::ng-deep .datepicker-calendar{border-radius:16px!important;overflow:hidden!important;font-family:Segoe UI,Roboto,sans-serif!important;width:100%!important}::ng-deep .mat-calendar-header{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;padding:3px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:60px!important;border-radius:16px 16px 0 0!important}::ng-deep .mat-calendar-controls{display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;margin:2% calc(4.7142857143% - 16px)!important}::ng-deep .mat-calendar-period-button{color:#fff!important;font-weight:700!important;font-size:16px!important;letter-spacing:.5px!important;background:transparent!important;border:none!important;padding:12px 16px!important;border-radius:8px!important;transition:all .3s ease!important;flex-grow:1!important;text-align:left!important;margin:0!important;order:1!important}::ng-deep .mat-calendar-period-button:hover{background:#ffffff26!important;transform:translateY(-1px)!important}::ng-deep .mat-calendar-header .mat-calendar-controls>div{display:flex;order:2!important}::ng-deep .mat-calendar-previous-button,::ng-deep .mat-calendar-next-button{color:#fff!important;width:40px!important;height:40px!important;border-radius:50%!important;background:#ffffff1a!important;border:1px solid rgba(255,255,255,.2)!important;transition:all .3s ease!important;margin:0 4px!important;display:flex!important;align-items:center!important;justify-content:center!important}::ng-deep .mat-calendar-previous-button:hover,::ng-deep .mat-calendar-next-button:hover{background:#ffffff40!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-arrow{fill:#fff!important;width:20px!important;height:20px!important}::ng-deep .mat-calendar-content{padding:10px 16px!important;background:#fff!important}::ng-deep .mat-calendar-table-header th{color:#6b7280!important;font-weight:600!important;font-size:12px!important;text-align:center!important;padding-bottom:12px!important;text-transform:uppercase!important}::ng-deep .mat-calendar-table{border-spacing:0!important;border-collapse:collapse!important;width:100%!important}::ng-deep .mat-calendar-body-cell{height:44px!important;width:44px!important;border-radius:12px!important}::ng-deep .mat-calendar-body-cell-content{width:33px!important;height:32px!important;display:flex!important;align-items:center!important;justify-content:center!important;font-weight:500!important;font-size:14px!important;color:#374151!important;transition:all .3s cubic-bezier(.4,0,.2,1)!important}::ng-deep .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover .mat-calendar-body-cell-content:not(.mat-calendar-body-selected){background:#667eea1a!important;color:#667eea!important;transform:scale(1.05)!important}::ng-deep .mat-calendar-body-selected{background:linear-gradient(135deg,#667eea,#764ba2)!important;color:#fff!important;box-shadow:0 4px 12px #677eea4d!important}::ng-deep .mat-calendar-body-today:not(.mat-calendar-body-selected){border:none;color:#667eea!important;font-weight:700!important}::ng-deep .mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected){color:#d1d5db!important}.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px;width:60%}.service-card{border:1px solid #e5e5e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 2px 4px #0000001a}.service-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:15px}.service-content{flex:1;display:flex;flex-direction:column;gap:8px}.skeleton{background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:4px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-icon{width:40px;height:40px;border-radius:50%;flex-shrink:0}.skeleton-title{height:20px;width:70%}.skeleton-price{height:18px;width:50%;align-self:flex-end}.skeleton-duration{height:14px;width:40%;align-self:flex-end}.skeleton-category{height:24px;width:25%;border-radius:12px;margin-bottom:10px}.skeleton-description{height:16px;width:85%;margin-bottom:15px}.skeleton-badge{height:32px;width:45%;border-radius:16px;margin-top:10px}@media (max-width: 768px){.service-grid{grid-template-columns:1fr;gap:15px;padding:15px}.service-card{padding:15px}}.time-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:16px;max-width:400px;margin:0 auto}.skeleton-time-slot{height:44px;border-radius:8px;background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0,#f0f0f0 75%);background-size:200% 100%;animation:skeleton-shimmer 1.5s infinite;border:1px solid #e5e5e5;position:relative}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.skeleton-time-slot:nth-child(2n){animation:skeleton-pulse 2s infinite}@keyframes skeleton-pulse{0%,to{opacity:1}50%{opacity:.7}}@media (max-width: 480px){.time-slot-grid{grid-template-columns:repeat(2,1fr);gap:10px;padding:12px}.skeleton-time-slot{height:40px}}@media (max-width: 320px){.time-slot-grid{grid-template-columns:1fr}}@media screen and (min-width:320px) and (max-width:475px){.back-btn{gap:.25rem!important;margin:0!important}.back-btn span{color:#000;font-size:12px;font-weight:500;white-space:nowrap}.back-btn mat-icon{font-size:16px!important;margin-bottom:0!important}.header-title{display:flex;align-items:center;margin-bottom:0rem!important}.header-title h1{font-size:16px!important}.main_header .header{padding:3%}.date_section,.service_section,.location_section,.contact_section,.payment_section{width:100%!important;padding:0% 5%}.service_section h2{font-size:17px!important;margin-bottom:0!important}.service_section p{font-size:14px!important}.main_section{height:100vh}.services-grid{display:flex;justify-content:center;flex-wrap:wrap}.service-card,.service-card-selected{width:90vw!important}.home-visit{width:40vw!important}.main_body{height:calc(100% - 123px)!important}.back-footer-btn{padding:12px 2px!important}.footer-buttons{padding:0% 3%!important;width:100%!important}.continue-btn{width:22vw!important}.main_container{flex-wrap:wrap;height:100%!important}.date_section{overflow:hidden}.date_section .time_selection{height:60%}.datepicker-popover{width:60vw!important}.details_container{height:90%!important;justify-content:space-around}.complete_booking{width:39vw!important}.booking_confirmation,.details-card{width:100%!important}.datetime-header h1{margin:0!important}}\n"] }]
         }], ctorParameters: () => [{ type: RestService }, { type: EventsService }, { type: i2$2.Router }, { type: i6$1.MessageService }], propDecorators: { data: [{
                 type: Input
             }], index: [{