import { CommonModule } from '@angular/common';
import { Component, Input } from '@angular/core';
import { FormsModule } from '@angular/forms';
import BaseSection from '../../../sections/BaseSection';
import { AnimationDirective } from '../../../directive/animation-directive';
import { HoverDirective } from '../../../directive/hover-element-directive';
import { ImageEditorDirective } from '../../../directive/image-editor.directive';
import { SpacingHorizontalDirective } from '../../../directive/spacing-horizontal.directive';
import { ButtonEditorDirective } from '../../../directive/button-editor.directive';
import { ButtonDirectiveDirective } from '../../../directive/button-directive.directive';
import { BackgroundDirective } from '../../../directive/background-directive';
import { MessageService } from 'primeng/api';
import { ToastModule } from 'primeng/toast';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { HoverElementsComponent } from '../../../components/hover-elements/hover-elements.component';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/storage.service";
import * as i2 from "../../../services/rest.service";
import * as i3 from "@angular/router";
import * as i4 from "primeng/api";
import * as i5 from "@angular/common";
import * as i6 from "@angular/forms";
import * as i7 from "primeng/toast";
import * as i8 from "@angular/material/progress-spinner";
export class BookAppointmentComponent extends BaseSection {
    constructor(storageService, restService, router, messageService) {
        super();
        this.storageService = storageService;
        this.restService = restService;
        this.router = router;
        this.messageService = messageService;
        this.timeSlots = ['10:00 AM', '11:00 AM', '12:00 PM', '01:00 PM', '02:00 PM', '03:00 PM', '04:00 PM', '05:00 PM', '06:00 PM'];
        this.customerDetails = {
            date: '',
            time: '',
            addressDetails: {
                receiverName: '',
                receiverPhone: '',
                receiverEmail: '',
                addressLine1: '',
                stateName: '',
                cityName: '',
                zipCode: ''
            },
            userId: '',
            businessId: localStorage.getItem('bId') ?? localStorage.getItem('businessId')
        };
        this.designs = [
            { id: 1, name: 'Design 1', price: '$100', selected: false },
            { id: 2, name: 'Design 2', price: '$150', selected: false }
        ];
        this.weekDays = [];
        this.trialCartItem = [];
        this.loader = false;
    }
    ngOnInit() {
        const user = this.storageService.getUser();
        this.customerDetails.addressDetails.receiverName = (user?.addressDetailsList[0]?.receiverName || user?.contact?.name) ?? '';
        this.customerDetails.addressDetails.receiverPhone = (user?.addressDetailsList[0]?.receiverPhone || user?.contact?.mobile) ?? '';
        this.customerDetails.addressDetails.receiverEmail = (user?.addressDetailsList[0]?.receiverEmail || user?.contact?.email) ?? '';
        this.customerDetails.addressDetails.addressLine1 = user?.addressDetailsList[0]?.addressLine1 ?? '';
        this.customerDetails.addressDetails.stateName = user?.addressDetailsList[0]?.stateName ?? '';
        this.customerDetails.addressDetails.cityName = user?.addressDetailsList[0]?.cityName ?? '';
        this.customerDetails.addressDetails.zipCode = user?.addressDetailsList[0]?.zipCode ?? '';
        this.customerDetails.userId = user?.userId ?? '';
        this.styles = this.data?.styles;
        this.getNextSevenDays();
        this.getTrialCart();
    }
    checkAvailability(day) {
        this.customerDetails.date = day.dateWithMonth;
        let selectedDate = new Date(this.customerDetails.date);
        const today = new Date();
        const tempSelectedDate = new Date(selectedDate);
        const tempToday = new Date(today);
        tempSelectedDate.setHours(0, 0, 0, 0);
        tempToday.setHours(0, 0, 0, 0);
        if (tempSelectedDate.getTime() === tempToday.getTime()) {
            const currentHour = today.getHours();
            const currentMinutes = today.getMinutes();
            this.timeSlots = this.timeSlots.filter(slot => {
                const [time, period] = slot.split(' ');
                const [hours, minutes] = time.split(':').map(Number);
                let slotHour = hours;
                if (period === 'PM' && hours !== 12) {
                    slotHour += 12;
                }
                else if (period === 'AM' && hours === 12) {
                    slotHour = 0;
                }
                // Check if slot time is in the future
                return slotHour > currentHour ||
                    (slotHour === currentHour && minutes > currentMinutes);
            });
        }
        else {
            // Reset to all time slots for future dates
            this.timeSlots = ['10:00 AM', '11:00 AM', '12:00 PM', '01:00 PM', '02:00 PM', '03:00 PM', '04:00 PM', '05:00 PM', '06:00 PM'];
        }
    }
    getTrialCart() {
        let user = this.storageService.getUser();
        if (user) {
            this.restService.getUserItems(user.userId, 'TRIAL_CART').subscribe((res) => {
                this.trialCartItem = res?.data?.[0]?.orderedItems ?? [];
            });
        }
        else {
            this.getTrialCartIndexDBData();
        }
    }
    getTrialCartIndexDBData() {
        this.storageService.getTrialCart().then((response) => {
            response.onsuccess = (userTrialCartResponse) => {
                this.trialCartItem = userTrialCartResponse.target.result;
            };
        });
    }
    getNextSevenDays() {
        const today = new Date();
        for (let i = 0; i < 7; i++) {
            const date = new Date(today);
            date.setDate(today.getDate() + i);
            const formattedDate = date.toISOString().split('T')[0]; // YYYY-MM-DD
            const dayName = date.toLocaleDateString('en-US', { weekday: 'long' }); // e.g., Monday
            this.weekDays.push({ dateWithMonth: formattedDate, day: dayName, date: date.getDate() });
        }
    }
    toggleDesign(id) {
        const design = this.designs.find(d => d.id === id);
        if (design) {
            if (!design.selected && this.getSelectedDesigns().length >= 4)
                return;
            design.selected = !design.selected;
        }
    }
    getSelectedDesigns() {
        return this.designs.filter(d => d.selected);
    }
    get isValid() {
        return !this.customerDetails?.addressDetails?.receiverName || !this.customerDetails?.addressDetails?.receiverPhone ||
            !this.customerDetails?.addressDetails?.receiverEmail || !this.customerDetails?.addressDetails?.stateName ||
            !this.customerDetails?.addressDetails?.cityName || !this.customerDetails?.addressDetails?.zipCode ||
            !this.customerDetails?.addressDetails?.addressLine1 || !this.customerDetails?.date || !this.customerDetails?.time;
    }
    bookAppointment() {
        this.loader = true;
        this.restService.bookAppointment(this.customerDetails).subscribe((res) => {
            this.loader = false;
            this.messageService.add({ severity: 'success', summary: 'Appointment', detail: 'Appointment Booked successfully' });
            this.router.navigate(['/profile'], { queryParams: { tab: 'try_at_home' } });
        }, () => {
            this.messageService.add({ severity: 'error', summary: 'Appointment', detail: 'Appointment not booked' });
            this.loader = false;
        });
    }
    selectTime(time) {
        this.customerDetails.time = time;
    }
    getKeys(object) {
        if (object)
            return Object.keys(object);
        return [];
    }
    addMoreDesign() {
        this.router.navigate(['/list']);
    }
    get isMobile() {
        return window.innerWidth <= 475;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, deps: [{ token: i1.StorageServiceService }, { token: i2.RestService }, { token: i3.Router }, { token: i4.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: BookAppointmentComponent, isStandalone: true, selector: "simpo-book-appointment", inputs: { data: "data", index: "index", edit: "edit", delete: "delete", customClass: "customClass" }, providers: [MessageService], usesInheritance: true, ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"container\">\r\n    <div class=\"content-grid\">\r\n      <!-- Left Form Section -->\r\n      <div class=\"form-section\">\r\n        <!-- Service Description -->\r\n        <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <h2 class=\"section-title\">Try at Home Service</h2>\r\n          <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\r\n        </div>\r\n\r\n        <!-- Pincode Section -->\r\n        <!-- <div class=\"card\">\r\n          <h3 class=\"section-title\">\r\n            <svg class=\"icon\" viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\r\n            </svg>\r\n            Service Location\r\n          </h3>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Enter your pincode</label>\r\n            <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\r\n              maxlength=\"6\" />\r\n            <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\r\n              \u2713 Service available in your area\r\n            </div>\r\n          </div>\r\n        </div> -->\r\n\r\n        <!-- Date Selection -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Select a Date</h3>\r\n          <div class=\"date-grid\">\r\n            <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\r\n              [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\r\n              <div class=\"time\">\r\n                <div class=\"day\">{{day.day.substring(0,3)}}</div>\r\n                <div class=\"date\">{{day.date}}</div>\r\n              </div>\r\n              <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\r\n                Designs</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Time Selection -->\r\n        <div class=\"card\" *ngIf=\"customerDetails.date\">\r\n          <div class=\"section\">\r\n            <h2 class=\"section-title\">Select a Time</h2>\r\n            <div class=\"time-grid\">\r\n              <div class=\"time-slot\" *ngFor=\"let time of timeSlots ?? []\" (click)=\"selectTime(time)\"\r\n                [ngClass]=\"{'selected': time === customerDetails.time}\">\r\n                <div class=\"more-slot-badge\">More Slot Left</div>\r\n                <div class=\"time-text\">{{time}}</div>\r\n              </div>\r\n              <div *ngIf=\"timeSlots?.length == 0\">No slots available</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Customer Details -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Contact Details</h3>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Full Name *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Phone Number *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\r\n                placeholder=\"Enter your phone number\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Email *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\r\n                placeholder=\"Enter your valid mail\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">City *</label>\r\n              <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\r\n                placeholder=\"Enter your city\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">State *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\r\n                placeholder=\"Enter your state\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Pincode *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\r\n                placeholder=\"Enter your pincode\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Complete Address *</label>\r\n            <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\r\n              placeholder=\"Enter your complete address\"></textarea>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Sidebar -->\r\n      <div class=\"sidebar\">\r\n        <div class=\"card\">\r\n          <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\r\n          <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\r\n\r\n          <div class=\"design-parent\">\r\n            <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\r\n              <div class=\"design-content\">\r\n                <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  alt=\"\">\r\n                <!-- <div class=\"\">Design Image</div> -->\r\n\r\n                <div class=\"design-info\">\r\n                  <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n                  <div class=\"item-price\">\r\n                    <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n                    <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\r\n                      number:\r\n                      '1.0-2'}}</span>\r\n                  </div>\r\n                  <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n                    <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n                      item.itemVariant.properties[varient] | uppercase }}</span>\r\n                  </div>\r\n                </div>\r\n                <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\r\n                {{ design.selected ? 'Selected' : 'Select' }}\r\n              </button> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"add-design\" (click)=\"addMoreDesign()\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n            </svg>\r\n            Add More Designs\r\n          </button>\r\n\r\n          <div class=\"summary\">\r\n            <!-- <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Selected Designs:</span>\r\n              <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\r\n            </div> -->\r\n            <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Service:</span>\r\n              <span class=\"summary-value free-service\">FREE</span>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\r\n            [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n            {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\r\n          </button>\r\n          <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\r\n            [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\r\n          <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isEcommerce]=\"true\"></simpo-hover-elements>\r\n  </div>\r\n</main>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i5.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i5.DecimalPipe, name: "number" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i6.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: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: BackgroundDirective, selector: "[simpoBackground]", inputs: ["simpoBackground", "scrollValue"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i7.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i8.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: BookAppointmentComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-book-appointment', standalone: true, imports: [CommonModule, FormsModule,
                        ButtonDirectiveDirective,
                        AnimationDirective,
                        HoverDirective,
                        ImageEditorDirective,
                        SpacingHorizontalDirective,
                        ButtonEditorDirective,
                        BackgroundDirective,
                        ToastModule,
                        MatProgressSpinnerModule,
                        HoverElementsComponent
                    ], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n<main class=\"main-content\" simpoHover (hovering)=\"showEditTabs($event)\">\r\n  <div class=\"container\">\r\n    <div class=\"content-grid\">\r\n      <!-- Left Form Section -->\r\n      <div class=\"form-section\">\r\n        <!-- Service Description -->\r\n        <div class=\"card service-description\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">\r\n          <h2 class=\"section-title\">Try at Home Service</h2>\r\n          <p>Our Try at Home consultant will visit your location to show you the designs at your convenience.</p>\r\n        </div>\r\n\r\n        <!-- Pincode Section -->\r\n        <!-- <div class=\"card\">\r\n          <h3 class=\"section-title\">\r\n            <svg class=\"icon\" viewBox=\"0 0 24 24\">\r\n              <path\r\n                d=\"M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z\" />\r\n            </svg>\r\n            Service Location\r\n          </h3>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Enter your pincode</label>\r\n            <input type=\"text\" class=\"form-input\" placeholder=\"Enter 6-digit pincode\"\r\n              maxlength=\"6\" />\r\n            <div class=\"pincode-success\" *ngIf=\"pincode.length === 6\">\r\n              \u2713 Service available in your area\r\n            </div>\r\n          </div>\r\n        </div> -->\r\n\r\n        <!-- Date Selection -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Select a Date</h3>\r\n          <div class=\"date-grid\">\r\n            <div class=\"single-date\" *ngFor=\"let day of weekDays\" (click)=\"checkAvailability(day)\"\r\n              [style.border]=\"day.dateWithMonth === customerDetails.date ? '2px solid ' + styles?.background?.accentColor : 'none'\">\r\n              <div class=\"time\">\r\n                <div class=\"day\">{{day.day.substring(0,3)}}</div>\r\n                <div class=\"date\">{{day.date}}</div>\r\n              </div>\r\n              <div class=\"design\" [id]=\"data?.id\" [simpoBackground]=\"styles?.background\">{{trialCartItem?.length ?? 0}}\r\n                Designs</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Time Selection -->\r\n        <div class=\"card\" *ngIf=\"customerDetails.date\">\r\n          <div class=\"section\">\r\n            <h2 class=\"section-title\">Select a Time</h2>\r\n            <div class=\"time-grid\">\r\n              <div class=\"time-slot\" *ngFor=\"let time of timeSlots ?? []\" (click)=\"selectTime(time)\"\r\n                [ngClass]=\"{'selected': time === customerDetails.time}\">\r\n                <div class=\"more-slot-badge\">More Slot Left</div>\r\n                <div class=\"time-text\">{{time}}</div>\r\n              </div>\r\n              <div *ngIf=\"timeSlots?.length == 0\">No slots available</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- Customer Details -->\r\n        <div class=\"card\">\r\n          <h3 class=\"section-title\">Contact Details</h3>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Full Name *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverName\"\r\n                placeholder=\"Enter your full name\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Phone Number *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverPhone\"\r\n                placeholder=\"Enter your phone number\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Email *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.receiverEmail\"\r\n                placeholder=\"Enter your valid mail\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">City *</label>\r\n              <input type=\"city\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.cityName\"\r\n                placeholder=\"Enter your city\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-row\">\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">State *</label>\r\n              <input type=\"text\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.stateName\"\r\n                placeholder=\"Enter your state\" />\r\n            </div>\r\n            <div class=\"form-group\">\r\n              <label class=\"form-label\">Pincode *</label>\r\n              <input type=\"tel\" class=\"form-input\" [(ngModel)]=\"customerDetails.addressDetails.zipCode\"\r\n                placeholder=\"Enter your pincode\" />\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group\">\r\n            <label class=\"form-label\">Complete Address *</label>\r\n            <textarea class=\"form-input form-textarea\" [(ngModel)]=\"customerDetails.addressDetails.addressLine1\"\r\n              placeholder=\"Enter your complete address\"></textarea>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Sidebar -->\r\n      <div class=\"sidebar\">\r\n        <div class=\"card\">\r\n          <h3 class=\"designs-header\">Your Shortlisted Designs</h3>\r\n          <!-- <div class=\"designs-count\">{{ getSelectedDesigns().length }}/4 SELECTED</div> -->\r\n\r\n          <div class=\"design-parent\">\r\n            <div class=\"design-item\" *ngFor=\"let item of trialCartItem\">\r\n              <div class=\"design-content\">\r\n                <img class=\"design-image\" [src]=\"item.imgUrl ?? 'https://i.postimg.cc/hPS2JpV0/no-image-available.jpg'\"\r\n                  alt=\"\">\r\n                <!-- <div class=\"\">Design Image</div> -->\r\n\r\n                <div class=\"design-info\">\r\n                  <h3 class=\"item-title\">{{item.itemName}}</h3>\r\n                  <div class=\"item-price\">\r\n                    <span class=\"current-price\">\u20B9{{item.discountedPrice | number: '1.0-2'}}</span>\r\n                    <span class=\"original-price\" *ngIf=\"item.sellingPrice > item.discountedPrice\">\u20B9{{item.sellingPrice |\r\n                      number:\r\n                      '1.0-2'}}</span>\r\n                  </div>\r\n                  <div class=\"item-options\" *ngIf=\"item.itemVariant\">\r\n                    <span *ngFor=\"let varient of getKeys(item.itemVariant.properties)\">{{ varient }}: {{\r\n                      item.itemVariant.properties[varient] | uppercase }}</span>\r\n                  </div>\r\n                </div>\r\n                <!-- <button class=\"design-select\" [class.selected]=\"design.selected\" (click)=\"toggleDesign(design.id)\">\r\n                {{ design.selected ? 'Selected' : 'Select' }}\r\n              </button> -->\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"add-design\" (click)=\"addMoreDesign()\">\r\n            <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n              <path d=\"M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z\" />\r\n            </svg>\r\n            Add More Designs\r\n          </button>\r\n\r\n          <div class=\"summary\">\r\n            <!-- <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Selected Designs:</span>\r\n              <span class=\"summary-value\">{{ getSelectedDesigns().length }}</span>\r\n            </div> -->\r\n            <div class=\"summary-row\">\r\n              <span class=\"summary-label\">Service:</span>\r\n              <span class=\"summary-value free-service\">FREE</span>\r\n            </div>\r\n          </div>\r\n\r\n          <button class=\"book-button\" (click)=\"bookAppointment()\" simpoButtonDirective *ngIf=\"!loader\"\r\n            [disabled]=\"isValid\" [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" [backgroundInfo]=\"styles?.background\">\r\n            {{data?.action?.buttons?.[1]?.content?.label ?? 'Book Try at Home Appointment'}}\r\n          </button>\r\n          <button class=\"book-button loader-btn\" simpoButtonDirective [buttonStyle]=\"data?.action?.buttons?.[0]?.styles\"\r\n            [color]=\"data?.styles?.background?.accentColor\" *ngIf=\"loader\"\r\n            [backgroundInfo]=\"styles?.background\"><mat-spinner></mat-spinner> Booking</button>\r\n          <p class=\"disclaimer\">Our consultant will contact you to confirm the appointment</p>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\r\n    <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"\r\n      [isEcommerce]=\"true\"></simpo-hover-elements>\r\n  </div>\r\n</main>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.main-content{padding:32px 0;position:relative}.content-grid{display:grid;grid-template-columns:2fr 1fr;gap:32px}.form-section{display:flex;flex-direction:column;gap:24px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0}.section-title{font-size:18px;font-weight:600;margin-bottom:16px;display:flex;align-items:center;gap:12px}.icon{width:20px;height:20px;fill:#7c3aed}.service-description p{line-height:1.6}.form-group{margin-bottom:16px}.form-label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-input{width:100%;padding:12px 16px;border:1px solid #d1d5db;border-radius:8px;font-size:14px;transition:all .2s}.form-input:focus{outline:none;border-color:#7c3aed;box-shadow:0 0 0 3px #7c3aed1a}.form-textarea{resize:vertical;height:80px}.pincode-success{background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;padding:12px;border-radius:8px;font-size:14px;font-weight:500;margin-top:8px}.date-grid{display:flex;gap:12px}.date-button,.time-button{padding:16px 12px;border:1px solid #d1d5db;border-radius:8px;background:#fff;cursor:pointer;text-align:center;transition:all .2s;font-size:14px}.date-button:hover,.time-button:hover{border-color:#7c3aed;background:#faf5ff}.date-button.selected,.time-button.selected{border-color:#7c3aed;background:#f3e8ff;color:#7c3aed;font-weight:600}.time-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}.sidebar{position:sticky;top:24px;height:fit-content}.designs-header{font-size:18px;font-weight:600;color:#1e293b;margin-bottom:16px}.designs-count{font-size:14px;color:#64748b;margin-bottom:16px}.design-item{border:1px solid #e2e8f0;border-radius:8px;padding:16px;margin-bottom:12px;transition:all .2s}.design-item:hover{border-color:#7c3aed}.design-content{display:flex;gap:12px;align-items:flex-start}.design-image{width:80px;height:80px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;color:#64748b;flex-shrink:0}.design-info{flex:1}.design-name{font-weight:500;color:#1e293b;margin-bottom:4px;font-size:14px}.design-price{color:#7c3aed;font-weight:600;font-size:14px}.design-select{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s;border:1px solid;background:#fff}.design-select.selected{background:#f3e8ff;color:#7c3aed;border-color:#7c3aed}.design-select:not(.selected){color:#64748b;border-color:#d1d5db}.add-design{width:100%;padding:5px 3px;border:2px dashed #d1d5db;border-radius:8px;background:#fff;color:#64748b;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:1rem!important}.add-design:hover{border-color:#7c3aed;color:#7c3aed}.summary{margin-top:24px;padding-top:24px;border-top:1px solid #e2e8f0}.summary-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.summary-label{color:#64748b}.summary-value{font-weight:500}.free-service{color:#059669}.book-button{width:100%;padding:6px 10px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;margin-top:24px;transition:all .2s;font-size:1rem!important}.book-button:hover:not(:disabled){background:linear-gradient(135deg,#6d28d9,#db2777)}.book-button:disabled{opacity:.5;cursor:not-allowed}.disclaimer{font-size:12px;color:#64748b;text-align:center;margin-top:12px}.slide-in{animation:slideIn .3s ease-out}.time-grid{display:flex;gap:16px;flex-wrap:wrap}.time-slot{position:relative;background:#fff;border:2px solid #e5e7eb;border-radius:10px;padding:5px 4px;cursor:pointer;transition:all .2s ease;min-width:120px;text-align:center}.time-slot:hover{border-color:#d1d5db;transform:translateY(-2px)}.time-slot.selected{border-color:#8b5cf6;background:#f3f4f6}.time-slot .time-text{font-size:14px;font-weight:600;color:#374151}.time-slot.selected .time-text{color:#8b5cf6}.more-slot-badge{position:absolute;top:-8px;left:50%;transform:translate(-50%);background:#f97316;color:#fff;font-size:9px;font-weight:600;padding:1px 8px;border-radius:12px;white-space:nowrap}.single-date{text-align:center;width:9%;background:#f6f3f9;cursor:pointer;border-radius:15px}.single-date .time{padding:10px 6px}.single-date .day{font-size:.8rem}.single-date .date{font-size:1rem;font-weight:700}.single-date .design{font-size:.7rem;padding:5px 6px;font-weight:700;border-bottom-left-radius:15px;border-bottom-right-radius:15px}.item-title{font-size:.9rem;font-weight:500;color:#111827;margin-bottom:8px}.item-price{display:flex;align-items:center;gap:8px;margin-bottom:8px}.current-price{font-size:1rem;font-weight:600;color:#111827}.original-price{font-size:1rem;color:#9ca3af;text-decoration:line-through}.discount{background:#fef3c7;color:#d97706;padding:2px 6px;border-radius:4px;font-size:12px;font-weight:500}.item-options{display:flex;gap:10px;font-size:14px;color:#6b7280;margin-bottom:12px}.design-parent{height:250px;overflow:scroll}.loader-btn{display:flex;align-items:center;justify-content:center;gap:15px}.loader-btn mat-spinner{height:20px!important;width:20px!important}@keyframes slideIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.content-grid,.form-row,.time-grid{grid-template-columns:1fr}}@media screen and (max-width: 475px){.date-grid{overflow-x:scroll;max-width:274px;width:100%}.single-date{width:50%}}\n"] }]
        }], ctorParameters: () => [{ type: i1.StorageServiceService }, { type: i2.RestService }, { type: i3.Router }, { type: i4.MessageService }], propDecorators: { data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], delete: [{
                type: Input
            }], customClass: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 