import { CommonModule } from '@angular/common';
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { FormsModule } from '@angular/forms';
import { MessageService } from 'primeng/api';
import { ColorDirective } from '../../directive/color.directive';
import { ToastModule } from 'primeng/toast';
import * as i0 from "@angular/core";
import * as i1 from "@angular/material/dialog";
import * as i2 from "primeng/api";
import * as i3 from "../../services/rest.service";
import * as i4 from "@angular/common";
import * as i5 from "@angular/material/icon";
import * as i6 from "@angular/forms";
import * as i7 from "primeng/toast";
export class ScheduleVideoCallComponent {
    constructor(dialogRef, matDialog, messageService, restService, responseData) {
        this.dialogRef = dialogRef;
        this.matDialog = matDialog;
        this.messageService = messageService;
        this.restService = restService;
        this.responseData = responseData;
        this.selectedProducts = [];
        this.languages = ["English", "Telugu", "Hindi", "Tamil", "Kannada", "Malayalam", "Others"];
        this.selectedLang = this.languages[0];
        this.otherLanguage = '';
        this.orderedItems = [];
        this.isSubmitting = false;
        this.validationErrors = {
            username: false,
            mobileNumber: false,
            pincode: false,
            email: false
        };
        this.videoCallPayload = {
            businessId: localStorage.getItem('businessId') ?? "",
            mobileNumber: "",
            // pincode: "",
            username: "",
            // email: "",
            message: ``,
        };
        this.scheduled = false;
    }
    ngOnInit() {
        this.orderedItems = this.responseData?.orderItems || [];
        this.orderedItems.forEach((item) => {
            item.selected = false;
        });
    }
    goBack() {
        this.dialogRef.close();
    }
    openScheduleCall(template) {
        if (this.selectedProducts.length == 0) {
            this.messageService.add({
                severity: 'warn',
                summary: 'Video Call Schedule',
                detail: 'Please select at least one product',
                key: 'Video Call Schedule'
            });
            return;
        }
        this.matDialog.open(template, 
        //  {width:'500px'}
        {
            panelClass: 'video-call-dialog'
        });
    }
    closeDialog() {
        this.matDialog.closeAll();
    }
    get isMobile() {
        return window.innerWidth <= 475;
    }
    onInputChange(field) {
        if (this.validationErrors[field]) {
            this.validationErrors[field] = false;
        }
    }
    resetValidationErrors() {
        this.validationErrors = {
            username: false,
            mobileNumber: false,
            // pincode: false
        };
    }
    scheduleVideoCall() {
        if (this.isSubmitting) {
            return;
        }
        this.resetValidationErrors();
        let hasErrors = false;
        if (!this.videoCallPayload.username?.trim()) {
            this.validationErrors.username = true;
            hasErrors = true;
        }
        if (!this.videoCallPayload.mobileNumber) {
            this.validationErrors.mobileNumber = true;
            hasErrors = true;
        }
        else if (this.videoCallPayload.mobileNumber.toString().length !== 10) {
            this.validationErrors.mobileNumber = true;
            hasErrors = true;
        }
        // if (!this.videoCallPayload.pincode) {
        //   this.validationErrors.pincode = true;
        //   hasErrors = true;
        // } else if (this.videoCallPayload.pincode.toString().length !== 6) {
        //   this.validationErrors.pincode = true;
        //   hasErrors = true;
        // }
        // if (!this.videoCallPayload.email?.trim()) {
        //   this.validationErrors.email = true;
        //   hasErrors = true;
        // } else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.videoCallPayload.email)) {
        //   this.validationErrors.email = true;
        //   hasErrors = true;
        // }
        if (hasErrors) {
            if (!this.videoCallPayload.username?.trim() || !this.videoCallPayload.mobileNumber) {
                this.messageService.add({
                    severity: 'warn',
                    summary: 'Video Call Schedule',
                    detail: 'Please fill all the required details',
                    key: 'Video Call Schedule'
                });
            }
            else if (this.videoCallPayload.mobileNumber.toString().length !== 10) {
                this.messageService.add({
                    severity: 'warn',
                    summary: 'Video Call Schedule',
                    detail: 'Please enter a valid 10-digit mobile number',
                    key: 'Video Call Schedule'
                });
                // } else if (this.videoCallPayload.pincode.toString().length !== 6) {
                //   this.messageService.add({
                //     severity: 'warn',
                //     summary: 'Video Call Schedule',
                //     detail: 'Please enter a valid 6-digit pincode',
                //     key: 'Video Call Schedule'
                //   });
                // }
                // else if (!this.videoCallPayload.email?.trim() || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(this.videoCallPayload.email)) {
                //   this.messageService.add({
                //     severity: 'warn',
                //     summary: 'Video Call Schedule',
                //     detail: 'Please enter a valid email address',
                //     key: 'Video Call Schedule'
                //   });
                // }
            }
            return;
        }
        let prdNames = "";
        for (let i = 0; i < this.selectedProducts.length; i++) {
            prdNames += this.selectedProducts[i].itemName + ", ";
        }
        this.isSubmitting = true;
        this.videoCallPayload.message = this.videoCallPayload.message + `Hi, I've just scheduled a video call with you for this product ${prdNames}. It's important and I'd appreciate your time — looking forward to connecting as soon as possible  in ${this.selectedLang == 'Others' ? this.otherLanguage : this.selectedLang} language`;
        this.restService.postVideoCallDetails(this.videoCallPayload).subscribe((res) => {
            this.messageService.add({
                severity: 'success',
                summary: 'Video Call Schedule',
                detail: 'Your Video Call is Scheduled Successfully',
                key: 'Video Scheduling'
            });
            this.isSubmitting = false;
            this.scheduled = true;
        }, (err) => {
            this.isSubmitting = false;
            this.messageService.add({
                severity: 'error',
                summary: 'Error',
                detail: err?.error?.message,
                key: 'Video Call Schedule'
            });
        });
    }
    selectedItems(item) {
        item.selected = !item.selected;
        if (item.selected) {
            this.selectedProducts.push(item);
        }
        else {
            this.selectedProducts = this.selectedProducts.filter(selectedItem => selectedItem.itemName !== item.itemName);
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScheduleVideoCallComponent, deps: [{ token: i1.MatDialogRef }, { token: i1.MatDialog }, { token: i2.MessageService }, { token: i3.RestService }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ScheduleVideoCallComponent, isStandalone: true, selector: "simpo-schedule-video-call", providers: [MessageService], ngImport: i0, template: "<section class=\"main-section\">\r\n  <p-toast key=\"Video Call Schedule\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\" class=\"bottom-right\" />\r\n  <div class=\"header\">\r\n    <div class=\"header-text\">See it Live on Video Call</div>\r\n    <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n  </div>\r\n  <div class=\"content\">\r\n    <div class=\"selection-header\">\r\n      <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n      <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n        responseData.orderItems.length : 0}}</span>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n        <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n        <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n        <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n        <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"footer\">\r\n    <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n  </div>\r\n  <ng-template #dialogBox>\r\n    <div class=\"modal-content\">\r\n      <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"closeDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"modal-body h-100 p-0\">\r\n        <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n          <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n              class=\"w-100\">\r\n          </div>\r\n          <div class=\"col-6 position-relative h-100 call-details width-100\">\r\n            <!-- Name Input with Validation -->\r\n            <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n              <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n                (input)=\"onInputChange('username')\">\r\n            </div>\r\n\r\n            <!-- <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n              <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n                (input)=\"onInputChange('email')\">\r\n            </div> -->\r\n\r\n            <!-- Mobile Number Input with Validation -->\r\n            <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n              <div class=\"sub-text-call\">IN +91</div>\r\n              <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n                (input)=\"onInputChange('mobileNumber')\" (keydown.arrowUp)=\"$event.preventDefault()\"\r\n                (keydown.arrowDown)=\"$event.preventDefault()\" (wheel)=\"$event.preventDefault()\">\r\n            </div>\r\n\r\n\r\n            <!-- Pincode Input with Validation -->\r\n            <!-- <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n              <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n                <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n              </div>\r\n              <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n                (input)=\"onInputChange('pincode')\">\r\n            </div> -->\r\n            <div class=\"language my-3\">\r\n              <div class=\"mini-text mb-2\">Language Preference</div>\r\n              <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n                <ng-container *ngFor=\"let lang of languages\">\r\n                  <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                    [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n                    (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n                    {{lang}}\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n              <div class=\"input-field my-3\">\r\n                <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n              </div>\r\n            </ng-container>\r\n            <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n              (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n              <ng-container *ngIf=\"isSubmitting\">\r\n                <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                  <span class=\"visually-hidden\">Loading...</span>\r\n                </div>\r\n                SCHEDULING...\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n                <mat-icon>video_call</mat-icon>&nbsp;\r\n                SCHEDULE A VIDEO CALL\r\n              </ng-container>\r\n              <ng-container *ngIf=\"scheduled\">\r\n                <mat-icon>check_circle</mat-icon>&nbsp;\r\n                SCHEDULED SUCCESSFULLY\r\n              </ng-container>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid #a8aaab}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.error-border{border:2px solid red!important}@media screen and (max-width:475px){.width-100{width:100%!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: ColorDirective, selector: "[simpoColor]", inputs: ["simpoColor"] }, { 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"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ScheduleVideoCallComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-schedule-video-call', standalone: true, imports: [CommonModule, MatIconModule, FormsModule, ColorDirective, ToastModule], providers: [MessageService], template: "<section class=\"main-section\">\r\n  <p-toast key=\"Video Call Schedule\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\" class=\"bottom-right\" />\r\n  <div class=\"header\">\r\n    <div class=\"header-text\">See it Live on Video Call</div>\r\n    <mat-icon (click)=\"goBack()\">close</mat-icon>\r\n  </div>\r\n  <div class=\"content\">\r\n    <div class=\"selection-header\">\r\n      <h2 class=\"selection-title\">Choose Designs for Live Video Call</h2>\r\n      <span class=\"selection-counter\">{{selectedProducts.length}}/{{responseData?.orderItems?.length ?\r\n        responseData.orderItems.length : 0}}</span>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"product-card col-md-6 col-12\" *ngFor=\"let data of orderedItems; let i = index\">\r\n        <img [src]=\"data?.imgUrl\" alt=\"product_img\">\r\n        <input type=\"checkbox\" [checked]=\"data.selected\" (click)=\"selectedItems(data)\">\r\n        <div class=\"product-price\">\u20B9{{data?.discountedPrice ? data?.discountedPrice : 'N/A'}}</div>\r\n        <div class=\"product-name\">{{data?.itemName ? data?.itemName : 'N/A'}}</div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"footer\">\r\n    <button (click)=\"openScheduleCall(dialogBox)\">Schedule video call</button>\r\n  </div>\r\n  <ng-template #dialogBox>\r\n    <div class=\"modal-content\">\r\n      <div class=\"schedule-header w-100 d-flex align-items-center justify-content-end p-2\">\r\n        <mat-icon (click)=\"closeDialog()\"\r\n          class=\"cursor-pointer d-flex align-items-center justify-content-center f-18\">close</mat-icon>\r\n      </div>\r\n      <div class=\"heading-video w-100 py-2 text-center\">Live Video call at your convenience!</div>\r\n      <div class=\"modal-body h-100 p-0\">\r\n        <div class=\"row h-100 w-100 mt-3 video-call-container\">\r\n          <div class=\"col-6\" *ngIf=\"!isMobile\">\r\n            <img src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/897651c1751980487170Vdo Call.gif\" alt=\"\"\r\n              class=\"w-100\">\r\n          </div>\r\n          <div class=\"col-6 position-relative h-100 call-details width-100\">\r\n            <!-- Name Input with Validation -->\r\n            <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.username\">\r\n              <input type=\"text\" placeholder=\"Enter Name*\" [(ngModel)]=\"videoCallPayload.username\"\r\n                (input)=\"onInputChange('username')\">\r\n            </div>\r\n\r\n            <!-- <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.email\">\r\n              <input type=\"email\" placeholder=\"Enter Email*\" [(ngModel)]=\"videoCallPayload.email\"\r\n                (input)=\"onInputChange('email')\">\r\n            </div> -->\r\n\r\n            <!-- Mobile Number Input with Validation -->\r\n            <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.mobileNumber\">\r\n              <div class=\"sub-text-call\">IN +91</div>\r\n              <input type=\"number\" placeholder=\"Enter Mobile*\" [(ngModel)]=\"videoCallPayload.mobileNumber\"\r\n                (input)=\"onInputChange('mobileNumber')\" (keydown.arrowUp)=\"$event.preventDefault()\"\r\n                (keydown.arrowDown)=\"$event.preventDefault()\" (wheel)=\"$event.preventDefault()\">\r\n            </div>\r\n\r\n\r\n            <!-- Pincode Input with Validation -->\r\n            <!-- <div class=\"input-field my-3\" [class.error-border]=\"validationErrors.pincode\">\r\n              <div class=\"sub-text-call d-flex justify-content-center w-12 border-unset\">\r\n                <mat-icon class=\"f-18 d-flex align-items-center justify-content-center\">gps_fixed</mat-icon>\r\n              </div>\r\n              <input type=\"number\" placeholder=\"Enter Pin Code*\" class=\"w-88\" [(ngModel)]=\"videoCallPayload.pincode\"\r\n                (input)=\"onInputChange('pincode')\">\r\n            </div> -->\r\n            <div class=\"language my-3\">\r\n              <div class=\"mini-text mb-2\">Language Preference</div>\r\n              <div class=\"language-container d-flex gap-2 flex-wrap mt-1\">\r\n                <ng-container *ngFor=\"let lang of languages\">\r\n                  <div class=\"lang px-2 py-1 rounded cursor-pointer\"\r\n                    [style.background]=\"lang == selectedLang ? responseData.data?.styles?.background?.accentColor : ''\"\r\n                    (click)=\"selectedLang = lang\" [simpoColor]=\"responseData.data?.styles?.background?.accentColor\">\r\n                    {{lang}}\r\n                  </div>\r\n                </ng-container>\r\n              </div>\r\n            </div>\r\n            <ng-container *ngIf=\"selectedLang == 'Others'\">\r\n              <div class=\"input-field my-3\">\r\n                <input type=\"text\" placeholder=\"Enter Other Language\" [(ngModel)]=\"otherLanguage\">\r\n              </div>\r\n            </ng-container>\r\n            <button class=\"video-btn mt-2 d-flex align-items-center justify-content-center\"\r\n              (click)=\"scheduleVideoCall()\" [disabled]=\"isSubmitting\">\r\n              <ng-container *ngIf=\"isSubmitting\">\r\n                <div class=\"spinner-border spinner-border-sm me-2\" role=\"status\">\r\n                  <span class=\"visually-hidden\">Loading...</span>\r\n                </div>\r\n                SCHEDULING...\r\n              </ng-container>\r\n              <ng-container *ngIf=\"!isSubmitting && !scheduled\">\r\n                <mat-icon>video_call</mat-icon>&nbsp;\r\n                SCHEDULE A VIDEO CALL\r\n              </ng-container>\r\n              <ng-container *ngIf=\"scheduled\">\r\n                <mat-icon>check_circle</mat-icon>&nbsp;\r\n                SCHEDULED SUCCESSFULLY\r\n              </ng-container>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </ng-template>\r\n</section>", styles: ["*{font-family:var(--primary-font-family)}mat-icon{font-family:Material Icons!important}.main-section{width:30vw;position:relative;height:100%}@media screen and (max-width:475px){.main-section{width:100vw!important}}.header{display:flex;justify-content:space-between;padding:0 15px;height:45px;align-items:center;border-bottom:1px solid #a8aaab}.content{height:calc(100vh - 90px);overflow:scroll;padding:15px}.footer{position:absolute;bottom:0;width:100%;height:45px;align-items:center;display:flex;padding:0 25px}.footer button{background:linear-gradient(90deg,#8c6,#26b324);border:none;font-size:1rem!important;color:#fff;padding-top:7px;padding-bottom:7px;border-radius:5px;font-weight:600}.selection-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.selection-title{font-size:16px;color:#495057;font-weight:400}.selection-counter{font-size:16px;color:#6c757d;font-weight:500}.product-card{position:relative}.product-card img{width:100%;height:29vh}.product-card input{position:absolute;top:10px;right:20px}.product-price{font-size:16px;font-weight:600;color:#000;margin-bottom:4px;margin-top:10px}.product-original-price{font-size:12px;color:#6c757d;text-decoration:line-through;margin-left:8px}.product-name{font-size:14px;color:#6c757d;line-height:1.3}.row{row-gap:15px}.header-text{font-size:1rem;font-weight:700}.modal-content{height:100%;border:none;border-radius:0!important}.schedule-header{border-radius:18px 18px 0 0}.heading-video{font-size:17px;font-weight:600}.heading-video,.schedule-header{background:#f6f3f9}.video-call-container{margin:0!important}.call-details{padding:3%!important}.input-field{display:flex;border-radius:12px;padding:12px;font-size:13px;background:#f6f3f9}.input-field .sub-text-call{width:20%;text-align:center;align-content:center;border-right:1px solid #bfbfbf;color:#0000008a;font-weight:700}.input-field input{width:80%;border:none;outline:none;appearance:none;margin-left:5px;background:#f6f3f9}.mini-text{font-size:13px}.lang{font-size:12px;align-content:center;background:#f6f3f9}.video-btn:disabled{opacity:.7;cursor:not-allowed}.video-btn:disabled:hover{cursor:not-allowed}.video-btn{border:unset;padding:8px;border-radius:12px;font-weight:600;color:#fff;background:#05a702;position:absolute;bottom:20px;left:10px;width:95%!important}input[type=checkbox]{appearance:none;-webkit-appearance:none;-moz-appearance:none;width:20px;height:20px;border:2px solid #ccc;border-radius:4px;outline:none;cursor:pointer;position:relative;background-color:#fff;transition:all .3s ease}input[type=checkbox]:checked{background-color:#007bff;border-color:#007bff}input[type=checkbox]:checked:after{content:\"\\2713\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:14px;font-weight:700}input[type=checkbox]:hover{border-color:#007bff;box-shadow:0 0 5px #007bff4d}.error-border{border:2px solid red!important}@media screen and (max-width:475px){.width-100{width:100%!important}}\n"] }]
        }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: i1.MatDialog }, { type: i2.MessageService }, { type: i3.RestService }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }] });
//# sourceMappingURL=data:application/json;base64, 