import { Component, Input } from '@angular/core';
import BaseSection from '../../../sections/BaseSection';
import { CommonModule } from '@angular/common';
import { AnimationDirective } from '../../../directive/animation-directive';
import { BackgroundDirective } from '../../../directive/background-directive';
import { CornerDirective } from '../../../directive/corner-directive';
import { SimpoComponentModule } from '../../../components/index';
import { HoverDirective } from '../../../directive/hover-element-directive';
import { ButtonDirectiveDirective } from '../../../directive/button-directive.directive';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatIcon } from '@angular/material/icon';
import { ContentFitDirective } from '../../../directive/content-fit-directive';
import { SpacingHorizontalDirective } from '../../../directive/spacing-horizontal.directive';
import { ButtonEditorDirective } from '../../../directive/button-editor.directive';
import * as i0 from "@angular/core";
import * as i1 from "../../../services/rest.service";
import * as i2 from "@angular/router";
import * as i3 from "../../../services/storage.service";
import * as i4 from "@angular/common";
import * as i5 from "@angular/forms";
import * as i6 from "../../../components/hover-elements/hover-elements.component";
import * as i7 from "../../../components/delete-hover-element/delete-hover-element.component";
export class EnrollmentFormComponent extends BaseSection {
    constructor(restService, activeRoute, storageService, router) {
        super();
        this.restService = restService;
        this.activeRoute = activeRoute;
        this.storageService = storageService;
        this.router = router;
        this.edit = true;
        this.page = 'ENROLLMENT';
        this.enrollementPayload = {
            name: "",
            mailId: "",
            mobileNumber: "",
            dateOfBirth: "",
            schemeDetails: {
                schemeId: "",
                schemeName: "",
                schemeType: "",
                pwcSchemeCode: ""
            },
            pwcUserCode: "",
            addressDetails: {
                state: {
                    id: "",
                    name: ""
                },
                city: {
                    id: "",
                    name: ""
                },
                addressLine: "",
                pinCode: localStorage.getItem('pincode') || 0,
            },
            bankDetails: {
                bankName: "",
                accountNumber: 0,
                ifscCode: "",
                accountHolderName: ""
            },
            nomineeDetails: {
                nomineeName: "",
                mobile: "",
                relationShip: "Father",
            },
            custodian: {
                staffId: "",
                staffName: "",
                mobileNumber: "",
                email: "",
                staffCode: "",
                profileImgUrl: ""
            },
            storeDetails: {},
            enrolledGroup: {},
            monthlyInstallmentAmount: 0,
            pwcStoreCode: "",
            subscriptionChargeDate: new Date().getDate()
        };
        this.schemesData = [];
        this.storeData = [];
        this.staffData = [];
        this.stateData = [];
        this.cityData = [];
        this.storeSlabs = [];
        this.validator = false;
        this.showResult = true;
        this.isProcessing = false;
        this.validObject = {
            NAME: true,
            EMAIL: true,
            MOBILE: true,
            DOB: true,
            SCHEME: true,
            MONTHLY_AMOUNT: true,
            STORE: true,
            ADDRESS: true,
            STATE: true,
            CITY: true,
            PINCODE: true,
            NOMINEE_NAME: true,
            NOMINEE_MOBILE: true,
            NOMINEE_RELATIONSHIP: true,
            BANK_NAME: true,
            ACCOUNT_NUMBER: true,
            IFSC_CODE: true,
            ACCOUNT_HOLDER_NAME: true,
        };
    }
    ngOnInit() {
        this.checkUserLoggedIn();
        this.getSchemes();
        this.getAllStores();
        this.getAllState();
    }
    checkUserLoggedIn() {
        if (!this.storageService.getUser()) {
            this.router.navigate(['/login'], { queryParams: { schemes: true } });
        }
        else {
            let user = this.storageService?.getUser();
            this.enrollementPayload.name = user?.contact?.name;
            this.enrollementPayload.mailId = user?.contact?.email;
            this.enrollementPayload.mobileNumber = user?.contact?.mobile;
            this.enrollementPayload.pwcUserCode = user?.pwcUserCode;
        }
    }
    getSchemes() {
        this.restService.getAllScheme().subscribe((res) => {
            this.schemesData = res?.data || [];
            this.selectedScheme = this.schemesData[0];
            this.setMonthlyInstallmentAmount();
        }, (error) => {
            console.error("Error fetching schemes: ", error);
        });
    }
    getAllStores() {
        this.restService.getAllStoresOrra(0, 10000).subscribe((res) => {
            this.storeData = res?.data?.data || [];
            this.enrollementPayload.storeDetails = this.storeData[0];
            this.getStaffById();
        }, (error) => {
            console.error("Error fetching stores: ", error);
        });
    }
    getStaffById() {
        this.restService.getstaffByStoreId(this.enrollementPayload.storeDetails.storeId).subscribe((res) => {
            this.staffData = res?.data || [];
            this.enrollementPayload.custodian = this.staffData[0] || {};
        }, (error) => {
            console.error("Error fetching staff: ", error);
        });
    }
    getAllState() {
        this.restService.getAllState().subscribe((res) => {
            this.stateData = res?.data || [];
            this.enrollementPayload.addressDetails.state = this.stateData[0] || {};
            this.getCityByStateId();
        }, (error) => {
            console.error("Error fetching states: ", error);
        });
    }
    getCityByStateId() {
        this.restService.getCityByStateBypaginated(this.enrollementPayload.addressDetails.state.id, 0, 10000).subscribe((res) => {
            this.cityData = res?.data.data || [];
            this.enrollementPayload.addressDetails.city = this.cityData[0] || {};
        }, (error) => {
            console.error("Error fetching Cities: ", error);
        });
    }
    setMonthlyInstallmentAmount() {
        if (this.selectedScheme.schemeType == 'INDIVIDUAL' && this.selectedScheme.minInstallmentAmount) {
            this.enrollementPayload.monthlyInstallmentAmount = this.selectedScheme.minInstallmentAmount;
        }
        else {
            this.getStoreSlabs();
        }
    }
    getStoreSlabs() {
        this.restService.getStoreBySlab({ storesList: this.selectedScheme.schemeSlabs[0].slabStores }).subscribe((res) => {
            this.storeSlabs = res?.data || [];
        }, (error) => {
            console.error("Error fetching store slabs: ", error);
        });
    }
    createEnrollment() {
        for (let ele of Object.keys(this.validObject)) {
            this.validater(ele);
        }
        if (Object.values(this.validObject).some(value => !value)) {
            this.validator = true;
            return;
        }
        this.enrollementPayload.pwcStoreCode = this.enrollementPayload.storeDetails?.pwcStoreCode || this.selectedScheme?.pwcStoreCode;
        this.enrollementPayload.schemeDetails = ['schemeId', 'schemeName', 'schemeType', 'pwcSchemeCode'].reduce((acc, key) => {
            if (this.selectedScheme[key] !== undefined) {
                acc[key] = this.selectedScheme[key];
            }
            if (key == 'pwcSchemeCode') {
                acc[key] = this.selectedScheme?.pwcIndividualSchemeCode;
            }
            return acc;
        }, {});
        if (this.selectedScheme.schemeType == 'GROUP') {
            this.enrollementPayload.enrolledGroup.schemeId = this.selectedScheme?.schemeId;
            this.enrollementPayload.enrolledGroup.schemeName = this.selectedScheme?.schemeName;
            this.enrollementPayload.enrolledGroup.storeId = this.enrollementPayload?.storeDetails?.storeId;
            this.enrollementPayload.enrolledGroup.storeName = this.enrollementPayload?.storeDetails?.storeName;
            this.enrollementPayload.monthlyInstallmentAmount = this.enrollementPayload?.enrolledGroup?.schemeSlab?.monthlyInstallmentAmount;
        }
        this.enrollementPayload.addressDetails.state = ['id', 'name'].reduce((acc, key) => {
            if (this.enrollementPayload.addressDetails.state?.[key] !== undefined) {
                acc[key] = this.enrollementPayload.addressDetails.state[key];
            }
            return acc;
        }, {});
        this.enrollementPayload.addressDetails.city = ['id', 'name'].reduce((acc, key) => {
            if (this.enrollementPayload.addressDetails.city?.[key] !== undefined) {
                acc[key] = this.enrollementPayload.addressDetails.city[key];
            }
            return acc;
        }, {});
        this.enrollementPayload.custodian = [
            'staffId', 'staffName', 'mobileNumber', 'email', 'staffCode', 'profileImgUrl'
        ].reduce((acc, key) => {
            if (this.enrollementPayload.custodian?.[key] !== undefined) {
                acc[key] = this.enrollementPayload.custodian[key];
            }
            if (key == 'staffName')
                acc[key] = this.enrollementPayload.custodian?.personalInfo?.name;
            if (key == 'mobileNumber')
                acc[key] = this.enrollementPayload.custodian?.contactDetails?.mobile;
            if (key == 'email')
                acc[key] = this.enrollementPayload.custodian?.contactDetails?.email;
            if (key == 'profileImgUrl')
                acc[key] = this.enrollementPayload.custodian?.personalInfo?.profileImage;
            if (key == 'staffCode')
                acc[key] = this.enrollementPayload.custodian?.staffWorkInfo?.staffCode;
            return acc;
        }, {});
        this.page = 'PAYMENT';
    }
    success() {
        this.restService.createEnrollmentScheme(this.enrollementPayload).subscribe((res) => {
            this.router.navigate(['/profile']);
        }, (error) => {
            this.simulatePayment('failure');
        });
    }
    simulatePayment(type) {
        this.isProcessing = true;
        this.showResult = false;
        this.result = {};
        setTimeout(() => {
            this.isProcessing = false;
            if (type === 'success') {
                this.result = {
                    type: 'success',
                    title: 'Payment Successful!',
                    message: 'Your transaction has been processed successfully.',
                    iconClass: 'fas fa-check-circle'
                };
                this.success();
            }
            else {
                this.result = {
                    type: 'failure',
                    title: 'Payment Failed!',
                    message: 'There was an error processing your payment. Please try again.',
                    iconClass: 'fas fa-exclamation-triangle'
                };
            }
            setTimeout(() => {
                this.showResult = true;
            }, 100);
        }, 2000);
    }
    getButtonId(index) {
        return this.data?.action?.buttons[index]?.id ?? "";
    }
    getButtonStyle(index) {
        return this.data?.action?.buttons[index]?.styles;
    }
    getButtonContent(index) {
        return this.data?.action?.buttons[index]?.content;
    }
    validateForm(fieldType) {
        clearTimeout(this.debounceTimer);
        this.debounceTimer = setTimeout(() => {
            this.validater(fieldType);
        }, 300);
    }
    validater(fieldType) {
        switch (fieldType) {
            case 'NAME': {
                this.validObject.NAME = this.enrollementPayload.name.trim().length > 0;
                break;
            }
            case 'EMAIL': {
                this.validObject.EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.enrollementPayload.mailId);
                break;
            }
            case 'MOBILE': {
                this.validObject.MOBILE = /^\d{10}$/.test(this.enrollementPayload.mobileNumber);
                break;
            }
            case 'DOB': {
                this.validObject.DOB = !!this.enrollementPayload.dateOfBirth;
                break;
            }
            case 'SCHEME': {
                this.validObject.SCHEME = !!this.selectedScheme;
                break;
            }
            case 'MONTHLY_AMOUNT': {
                this.validObject.MONTHLY_AMOUNT = this.enrollementPayload?.monthlyInstallmentAmount > 0;
                break;
            }
            case 'STORE': {
                this.validObject.STORE = !!this.enrollementPayload?.storeDetails?.storeId;
                break;
            }
            case 'ADDRESS': {
                this.validObject.ADDRESS = !!this.enrollementPayload?.addressDetails?.addressLine.trim();
                break;
            }
            case 'STATE': {
                this.validObject.STATE = !!this.enrollementPayload?.addressDetails?.state?.id;
                break;
            }
            case 'CITY': {
                this.validObject.CITY = !!this.enrollementPayload?.addressDetails?.city?.id;
                break;
            }
            case 'PINCODE': {
                this.validObject.PINCODE = /^\d{6}$/.test(this.enrollementPayload?.addressDetails?.pinCode?.toString());
                break;
            }
            case 'NOMINEE_NAME': {
                this.validObject.NOMINEE_NAME = this.enrollementPayload?.nomineeDetails?.nomineeName?.trim()?.length > 0;
                break;
            }
            case 'NOMINEE_MOBILE': {
                this.validObject.NOMINEE_MOBILE = /^\d{10}$/.test(this.enrollementPayload?.nomineeDetails?.mobile);
                break;
            }
            case 'NOMINEE_RELATIONSHIP': {
                this.validObject.NOMINEE_RELATIONSHIP = !!this.enrollementPayload?.nomineeDetails?.relationShip?.trim();
                break;
            }
            case 'BANK_NAME': {
                this.validObject.BANK_NAME = !!this.enrollementPayload?.bankDetails?.bankName.trim();
                break;
            }
            case 'ACCOUNT_NUMBER': {
                this.validObject.ACCOUNT_NUMBER = /^\d+$/.test(this.enrollementPayload?.bankDetails?.accountNumber?.toString());
                break;
            }
            case 'IFSC_CODE': {
                this.validObject.IFSC_CODE = !!this.enrollementPayload?.bankDetails?.ifscCode?.trim();
                break;
            }
            case 'ACCOUNT_HOLDER_NAME': {
                this.validObject.ACCOUNT_HOLDER_NAME = this.enrollementPayload?.bankDetails?.accountHolderName?.trim().length > 0;
                break;
            }
            default: {
                break;
            }
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EnrollmentFormComponent, deps: [{ token: i1.RestService }, { token: i2.ActivatedRoute }, { token: i3.StorageServiceService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EnrollmentFormComponent, isStandalone: true, selector: "simpo-enrollment-form", inputs: { data: "data", edit: "edit", customClass: "customClass", delete: "delete", index: "index" }, usesInheritance: true, ngImport: i0, template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"container py-5\" *ngIf=\"page === 'ENROLLMENT'\">\n        <div class=\"form-container\">\n            <div class=\"section-title\">Customer Information</div>\n\n            <div class=\"mb-3\">\n                <label for=\"fullName\" class=\"form-label\">Full Name <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"fullName\" required\n                    [(ngModel)]=\"enrollementPayload.name\" (ngModelChange)=\"validateForm('NAME')\"\n                    [class.error-border]=\"!validObject['NAME']\">\n            </div>\n\n            <div class=\"mb-3\">\n                <label for=\"email\" class=\"form-label\">Email Address <span class=\"required\">*</span></label>\n                <input type=\"email\" class=\"form-control custom-form-control\" id=\"email\" required\n                    [(ngModel)]=\"enrollementPayload.mailId\" (ngModelChange)=\"validateForm('EMAIL')\"\n                    [class.error-border]=\"!validObject['EMAIL']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"mobile\" class=\"form-label\">Mobile <span class=\"required\">*</span></label>\n                    <input type=\"tel\" class=\"form-control custom-form-control\" id=\"mobile\" required\n                        [(ngModel)]=\"enrollementPayload.mobileNumber\" (ngModelChange)=\"validateForm('MOBILE')\"\n                        [class.error-border]=\"!validObject['MOBILE']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"dateOfBirth\" class=\"form-label\">Date of Birth <span class=\"required\">*</span></label>\n                    <input type=\"date\" class=\"form-control custom-form-control\" id=\"dateOfBirth\" required\n                        [(ngModel)]=\"enrollementPayload.dateOfBirth\" (ngModelChange)=\"validateForm('DOB')\"\n                        [class.error-border]=\"!validObject['DOB']\">\n                </div>\n            </div>\n\n            <!-- Scheme Information -->\n            <div class=\"section-title\">Scheme Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"scheme\" class=\"form-label\">Scheme <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"scheme\" required [(ngModel)]=\"selectedScheme\"\n                        (ngModelChange)=\"setMonthlyInstallmentAmount()\">\n                        <option [ngValue]=\"\">Select Scheme</option>\n                        <ng-container *ngFor=\"let scheme of schemesData\">\n                            <option [ngValue]=\"scheme\">{{scheme.schemeName ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"monthlyAmount\" class=\"form-label\">Monthly Amount <span class=\"required\">*</span></label>\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"monthlyAmount\" required disabled\n                        *ngIf=\"selectedScheme?.schemeType == 'INDIVIDUAL'\"\n                        [(ngModel)]=\"enrollementPayload.monthlyInstallmentAmount\">\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\n                        *ngIf=\"selectedScheme?.schemeType == 'GROUP'\"\n                        [(ngModel)]=\"enrollementPayload.enrolledGroup.schemeSlab\">\n                        <option [ngValue]=\"\">Select Amount Plan</option>\n                        <ng-container *ngFor=\"let slab of selectedScheme.schemeSlabs\">\n                            <option [ngValue]=\"slab\">{{slab.monthlyInstallmentAmount ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Store Information -->\n            <div class=\"section-title\">Store Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"storeName\" class=\"form-label\">Store Name <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\n                        [(ngModel)]=\"enrollementPayload.storeDetails\" (ngModelChange)=\"getStaffById()\">\n                        <option [ngValue]=\"\">Select Store</option>\n                        <ng-container *ngFor=\"let store of storeData\">\n                            <option [ngValue]=\"store\">{{store.storeName ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"subdivision\" class=\"form-label\">Custodian</label>\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\"\n                        [(ngModel)]=\"enrollementPayload.custodian\">\n                        <option [ngValue]=\"\">Select Custodian</option>\n                        <ng-container *ngFor=\"let staff of staffData\">\n                            <option [ngValue]=\"staff\">{{staff.personalInfo.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Enter Your Address -->\n            <div class=\"section-title\">Enter Your Address</div>\n\n            <div class=\"mb-3\">\n                <label for=\"address\" class=\"form-label\">Address <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"address\" required\n                    [(ngModel)]=\"enrollementPayload.addressDetails.addressLine\"\n                    (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validObject['ADDRESS']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"state\" class=\"form-label\">State <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.state\"\n                        (ngModelChange)=\"getCityByStateId()\">\n                        <option [ngValue]=\"\">Select State</option>\n                        <ng-container *ngFor=\"let state of stateData\">\n                            <option [ngValue]=\"state\">{{state.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"city\" class=\"form-label\">City <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.city\">\n                        <option [ngValue]=\"\">Select City</option>\n                        <ng-container *ngFor=\"let city of cityData\">\n                            <option [ngValue]=\"city\">{{city.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"pincode\" class=\"form-label\">Pincode <span class=\"required\">*</span></label>\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"pincode\" required\n                        [(ngModel)]=\"enrollementPayload.addressDetails.pinCode\"\n                        (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validObject['PINCODE']\">\n                </div>\n            </div>\n\n            <div class=\"section-title\">Enter Nominee Details</div>\n\n            <div class=\"mb-3\">\n                <label for=\"nomineeName\" class=\"form-label\">Full Name of Nominee <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"nomineeName\" required\n                    [(ngModel)]=\"enrollementPayload.nomineeDetails.nomineeName\"\n                    (ngModelChange)=\"validateForm('NOMINEE_NAME')\" [class.error-border]=\"!validObject['NOMINEE_NAME']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"relationship\" class=\"form-label\">Select Relationship <span\n                            class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"relationship\" required\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.relationShip\">\n                        <!-- <option value=\"\">Select Relationship</option> -->\n                        <option value=\"Spouse\">Spouse</option>\n                        <option value=\"Child\">Child</option>\n                        <option value=\"Mother\">Mother</option>\n                        <option value=\"Father\">Father</option>\n                        <option value=\"Sibling\">Sibling</option>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"nomineePhone\" class=\"form-label\">Mobile Number <span class=\"required\">*</span></label>\n\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"nomineePhone\" required\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.mobile\"\n                        (ngModelChange)=\"validateForm('NOMINEE_MOBILE')\"\n                        [class.error-border]=\"!validObject['NOMINEE_MOBILE']\">\n                </div>\n            </div>\n\n            <div class=\"section-title\">Account Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"accountHolder\" class=\"form-label\">Account Holder Name <span\n                            class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountHolder\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountHolderName\"\n                        (ngModelChange)=\"validateForm('ACCOUNT_HOLDER_NAME')\"\n                        [class.error-border]=\"!validObject['ACCOUNT_HOLDER_NAME']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"accountNumber\" class=\"form-label\">Account Number <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountNumber\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountNumber\"\n                        (ngModelChange)=\"validateForm('ACCOUNT_NUMBER')\"\n                        [class.error-border]=\"!validObject['ACCOUNT_NUMBER']\">\n                </div>\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"bankName\" class=\"form-label\">Bank Name <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"bankName\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.bankName\"\n                        (ngModelChange)=\"validateForm('BANK_NAME')\" [class.error-border]=\"!validObject['BANK_NAME']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"ifscCode\" class=\"form-label\">IFSC Code <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"ifscCode\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.ifscCode\"\n                        (ngModelChange)=\"validateForm('IFSC_CODE')\" [class.error-border]=\"!validObject['IFSC_CODE']\">\n                </div>\n            </div>\n            <div class=\"d-grid mt-4\">\n                <button type=\"submit\" class=\"btn btn-submit\" (click)=\"createEnrollment()\"\n                    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n                    [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n                    [buttonData]=\"getButtonContent(0)\">Submit\n                    Enrollment</button>\n            </div>\n            <div *ngIf=\"validator\" [class.error-color]=\"validator\">Fill all mandatory fields to proceed*</div>\n        </div>\n    </div>\n\n    <!-- Add this block in your Angular payment step (page === 'PAYMENT') -->\n    <!-- payment-simulation.component.html -->\n    <div class=\"container-fluid min-vh-100 d-flex align-items-center justify-content-center bg-light\"\n        *ngIf=\"page === 'PAYMENT'\">\n        <div class=\"payment-container\">\n\n            <!-- Header -->\n            <div class=\"payment-header mb-4\">\n                <div class=\"d-flex align-items-center justify-content-between\">\n                    <h1 class=\"payment-title\">Payment Method</h1>\n                    <span class=\"badge bg-success rounded-pill px-3 py-2\">Credit Card</span>\n                </div>\n            </div>\n\n            <!-- Credit Card -->\n            <div class=\"credit-card mb-4\">\n                <div class=\"card-inner\">\n                    <div class=\"card-shine\"></div>\n                    <div class=\"card-content\">\n                        <div class=\"d-flex align-items-center justify-content-between mb-4\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <div class=\"visa-logo\"></div>\n                                <span class=\"visa-text\">VISA</span>\n                            </div>\n                        </div>\n\n                        <div class=\"cardholder-name mb-4\">\n                            turquoisecoyote\n                        </div>\n\n                        <div class=\"d-flex align-items-center justify-content-between\">\n                            <div class=\"card-dots\">\n                                <span class=\"dot\" *ngFor=\"let dot of [1,2,3,4,5,6,7,8,9,10,11,12]\"></span>\n                            </div>\n                            <span class=\"card-number\">1111</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- OTP Section -->\n            <div class=\"otp-section mb-4\">\n                <p class=\"otp-label\">Enter OTP sent to your xxx xxx 4839</p>\n                <input type=\"text\" class=\"form-control otp-input\" placeholder=\"Enter OTP\">\n                <small class=\"text-muted mt-2 d-block\">Hint: OTP is 111000</small>\n            </div>\n\n            <!-- Simulation Buttons -->\n            <div class=\"row g-3 mb-4\">\n                <div class=\"col-6\">\n                    <button class=\"btn btn-danger btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('failure')\"\n                        [disabled]=\"isProcessing\">\n                        Simulate failure\n                    </button>\n                </div>\n                <div class=\"col-6\">\n                    <button class=\"btn btn-success btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('success')\"\n                        [disabled]=\"isProcessing\">\n                        Simulate success\n                    </button>\n                </div>\n            </div>\n\n            <!-- Processing State -->\n            <div *ngIf=\"isProcessing\" class=\"d-flex align-items-center justify-content-center py-3\">\n                <div class=\"spinner-border text-primary me-3\" role=\"status\" style=\"width: 1.5rem; height: 1.5rem;\">\n                </div>\n                <span class=\"text-muted\">Processing payment...</span>\n            </div>\n\n            <!-- Result Alert -->\n            <div *ngIf=\"result && showResult\" class=\"alert text-center result-alert\" [ngClass]=\"{\n             'alert-success': result.type === 'success',\n             'alert-danger': result.type === 'failure'\n           }\">\n                <strong>{{ result.title }}</strong> {{ result.message }}\n            </div>\n\n            <!-- Footer -->\n            <div class=\"text-center mt-4\">\n                <small class=\"text-muted\">\n                    Click buttons to simulate payment scenarios\n                </small>\n            </div>\n\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{width:60%;border-radius:12px;padding:30px;margin:0 auto;box-shadow:0 2px 10px #0000001a}.section-title{font-size:18px;font-weight:600;margin-bottom:20px;margin-top:30px}.section-title:first-child{margin-top:0}.custom-form-control{border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;transition:all .2s}.custom-form-control:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-control::placeholder{color:#a0aec0;font-weight:400}.custom-form-control.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.custom-form-select{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;appearance:none}.custom-form-select:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-select.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.form-label{font-size:14px;font-weight:500;color:#718096;margin-bottom:8px}.required{color:#e53e3e}.phone-input-group{display:flex;gap:0}.phone-code{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px 0 0 8px;border-right:none;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:14px;color:#4a5568;font-weight:500}.phone-code:after{content:\"\\25bc\";color:#a0aec0;font-size:12px}.error-border{border:2px solid #e53e3e!important}.error-color{color:#e53e3e!important;font-weight:600;font-size:13px}.phone-input-group .custom-form-control{border-radius:0 8px 8px 0;border-left:none}.radio-group{display:flex;gap:12px;margin-top:12px}.radio-option{flex:1;background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px;cursor:pointer;transition:all .2s;position:relative}.radio-option:hover{background-color:#edf2f7}.radio-option.selected{background-color:#e6fffa;border-color:#38b2ac}.radio-option input[type=radio]{position:absolute;opacity:0;cursor:pointer}.radio-option .radio-circle{width:20px;height:20px;border:2px solid #cbd5e0;border-radius:50%;position:absolute;top:16px;right:16px;background:#fff}.radio-option.selected .radio-circle{border-color:#38b2ac}.radio-option.selected .radio-circle:after{content:\"\";width:10px;height:10px;background:#38b2ac;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio-option label{font-size:14px;font-weight:500;color:#4a5568;cursor:pointer;display:block;margin-bottom:0;padding-right:30px}.btn-submit{border:none;padding:14px 30px;border-radius:8px;font-weight:600;font-size:16px;transition:transform .2s}.btn-submit:hover{transform:translateY(-1px);color:#fff}.mb-3{margin-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.payment-card{max-width:500px;width:100%;border-radius:15px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2}.card-header{background:linear-gradient(135deg,#007bff,#0056b3)!important;border-bottom:none}.payment-btn{position:relative;overflow:hidden;border:none;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;box-shadow:0 4px 15px #0003}.payment-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.payment-btn:active:not(:disabled){transform:translateY(0)}.payment-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-overlay{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.payment-btn:hover:not(:disabled) .btn-overlay{left:100%}.btn-success{background:linear-gradient(45deg,#28a745,#20c997);border-color:#28a745}.btn-success:hover:not(:disabled){background:linear-gradient(45deg,#218838,#1aa085);border-color:#1e7e34}.btn-danger{background:linear-gradient(45deg,#dc3545,#e74c3c);border-color:#dc3545}.btn-danger:hover:not(:disabled){background:linear-gradient(45deg,#c82333,#d62c1a);border-color:#bd2130}.alert{border:none;border-radius:10px;font-weight:500;box-shadow:0 4px 15px #0000001a}.alert-success{background:linear-gradient(45deg,#d4edda,#c3e6cb);color:#155724}.alert-danger{background:linear-gradient(45deg,#f8d7da,#f5c6cb);color:#721c24}.min-vh-100{min-height:100vh}.card-footer{background:#f8f9facc!important;border-top:1px solid rgba(0,0,0,.125)}body{background:linear-gradient(135deg,#667eea,#764ba2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.alert.show{animation:fadeInUp .3s ease-out}.spinner-border{width:1.5rem;height:1.5rem}.payment-container{width:100%;max-width:430px;padding:20px}.payment-title{font-size:2rem;font-weight:700;color:#333;margin:0}.credit-card{perspective:1000px}.card-inner{background:linear-gradient(135deg,#2d3748,#1a202c);border-radius:20px;padding:30px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000004d;color:#fff;min-height:200px}.card-shine{position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 55%,transparent 100%);pointer-events:none}.card-content{position:relative;z-index:2}.visa-logo{width:32px;height:20px;background:#fff;border-radius:3px}.visa-text{font-weight:700;font-size:1.2rem;letter-spacing:2px}.cardholder-name{font-size:1.1rem;letter-spacing:1px;text-transform:lowercase}.card-dots{display:flex;gap:4px}.dot{width:8px;height:8px;background:#fff;border-radius:50%;display:inline-block}.card-number{font-family:Courier New,monospace;font-size:1.3rem;font-weight:700;letter-spacing:3px}.otp-section{margin:30px 0}.otp-label{color:#6c757d;margin-bottom:12px;font-size:.95rem}.otp-input{padding:16px 20px;border-radius:12px;border:2px solid #e9ecef;font-size:1.1rem;transition:all .3s ease}.otp-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem #007bff40}.simulation-btn{padding:16px 20px;border-radius:12px;font-weight:700;font-size:1rem;transition:all .3s ease;border:none;white-space:nowrap}.simulation-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.simulation-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-danger.simulation-btn{background:linear-gradient(135deg,#dc3545,#c82333)}.btn-success.simulation-btn{background:linear-gradient(135deg,#28a745,#20c997)}.result-alert{border-radius:12px;padding:16px 20px;border:none;font-weight:500;animation:slideInUp .3s ease-out}.alert-success{background:linear-gradient(135deg,#d4edda,#c3e6cb);color:#155724;border-left:4px solid #28a745}.alert-danger{background:linear-gradient(135deg,#f8d7da,#f5c6cb);color:#721c24;border-left:4px solid #dc3545}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.payment-container{padding:15px}.payment-title{font-size:1.5rem}.card-inner{padding:25px;min-height:180px}.simulation-btn{padding:14px 16px;font-size:.9rem}.form-container{width:100%!important}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\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: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.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: i5.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SimpoComponentModule }, { kind: "component", type: i6.HoverElementsComponent, selector: "simpo-hover-elements", inputs: ["data", "index", "editOptions", "isMerged", "isEcommerce"], outputs: ["edit"] }, { kind: "component", type: i7.DeleteHoverElementComponent, selector: "simpo-delete-hover-element", inputs: ["index", "data"], outputs: ["edit"] }, { kind: "directive", type: HoverDirective, selector: "[simpoHover]", outputs: ["hovering"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EnrollmentFormComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-enrollment-form', standalone: true, imports: [
                        CommonModule,
                        FormsModule,
                        ReactiveFormsModule,
                        MatIcon,
                        SimpoComponentModule,
                        AnimationDirective,
                        BackgroundDirective,
                        CornerDirective,
                        HoverDirective,
                        ButtonDirectiveDirective,
                        ContentFitDirective,
                        SpacingHorizontalDirective,
                        ButtonEditorDirective,
                        MatIcon
                    ], template: "<div class=\"total-container position-relative\" simpoHover (hovering)=\"showEditTabs($event)\" [id]=\"data?.id\">\n    <div class=\"container py-5\" *ngIf=\"page === 'ENROLLMENT'\">\n        <div class=\"form-container\">\n            <div class=\"section-title\">Customer Information</div>\n\n            <div class=\"mb-3\">\n                <label for=\"fullName\" class=\"form-label\">Full Name <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"fullName\" required\n                    [(ngModel)]=\"enrollementPayload.name\" (ngModelChange)=\"validateForm('NAME')\"\n                    [class.error-border]=\"!validObject['NAME']\">\n            </div>\n\n            <div class=\"mb-3\">\n                <label for=\"email\" class=\"form-label\">Email Address <span class=\"required\">*</span></label>\n                <input type=\"email\" class=\"form-control custom-form-control\" id=\"email\" required\n                    [(ngModel)]=\"enrollementPayload.mailId\" (ngModelChange)=\"validateForm('EMAIL')\"\n                    [class.error-border]=\"!validObject['EMAIL']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"mobile\" class=\"form-label\">Mobile <span class=\"required\">*</span></label>\n                    <input type=\"tel\" class=\"form-control custom-form-control\" id=\"mobile\" required\n                        [(ngModel)]=\"enrollementPayload.mobileNumber\" (ngModelChange)=\"validateForm('MOBILE')\"\n                        [class.error-border]=\"!validObject['MOBILE']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"dateOfBirth\" class=\"form-label\">Date of Birth <span class=\"required\">*</span></label>\n                    <input type=\"date\" class=\"form-control custom-form-control\" id=\"dateOfBirth\" required\n                        [(ngModel)]=\"enrollementPayload.dateOfBirth\" (ngModelChange)=\"validateForm('DOB')\"\n                        [class.error-border]=\"!validObject['DOB']\">\n                </div>\n            </div>\n\n            <!-- Scheme Information -->\n            <div class=\"section-title\">Scheme Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"scheme\" class=\"form-label\">Scheme <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"scheme\" required [(ngModel)]=\"selectedScheme\"\n                        (ngModelChange)=\"setMonthlyInstallmentAmount()\">\n                        <option [ngValue]=\"\">Select Scheme</option>\n                        <ng-container *ngFor=\"let scheme of schemesData\">\n                            <option [ngValue]=\"scheme\">{{scheme.schemeName ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"monthlyAmount\" class=\"form-label\">Monthly Amount <span class=\"required\">*</span></label>\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"monthlyAmount\" required disabled\n                        *ngIf=\"selectedScheme?.schemeType == 'INDIVIDUAL'\"\n                        [(ngModel)]=\"enrollementPayload.monthlyInstallmentAmount\">\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\n                        *ngIf=\"selectedScheme?.schemeType == 'GROUP'\"\n                        [(ngModel)]=\"enrollementPayload.enrolledGroup.schemeSlab\">\n                        <option [ngValue]=\"\">Select Amount Plan</option>\n                        <ng-container *ngFor=\"let slab of selectedScheme.schemeSlabs\">\n                            <option [ngValue]=\"slab\">{{slab.monthlyInstallmentAmount ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Store Information -->\n            <div class=\"section-title\">Store Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"storeName\" class=\"form-label\">Store Name <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\" required\n                        [(ngModel)]=\"enrollementPayload.storeDetails\" (ngModelChange)=\"getStaffById()\">\n                        <option [ngValue]=\"\">Select Store</option>\n                        <ng-container *ngFor=\"let store of storeData\">\n                            <option [ngValue]=\"store\">{{store.storeName ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"subdivision\" class=\"form-label\">Custodian</label>\n                    <select class=\"form-select custom-form-select\" id=\"subdivision\"\n                        [(ngModel)]=\"enrollementPayload.custodian\">\n                        <option [ngValue]=\"\">Select Custodian</option>\n                        <ng-container *ngFor=\"let staff of staffData\">\n                            <option [ngValue]=\"staff\">{{staff.personalInfo.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <!-- Enter Your Address -->\n            <div class=\"section-title\">Enter Your Address</div>\n\n            <div class=\"mb-3\">\n                <label for=\"address\" class=\"form-label\">Address <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"address\" required\n                    [(ngModel)]=\"enrollementPayload.addressDetails.addressLine\"\n                    (ngModelChange)=\"validateForm('ADDRESS')\" [class.error-border]=\"!validObject['ADDRESS']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"state\" class=\"form-label\">State <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.state\"\n                        (ngModelChange)=\"getCityByStateId()\">\n                        <option [ngValue]=\"\">Select State</option>\n                        <ng-container *ngFor=\"let state of stateData\">\n                            <option [ngValue]=\"state\">{{state.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"city\" class=\"form-label\">City <span class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" [(ngModel)]=\"enrollementPayload.addressDetails.city\">\n                        <option [ngValue]=\"\">Select City</option>\n                        <ng-container *ngFor=\"let city of cityData\">\n                            <option [ngValue]=\"city\">{{city.name ?? \"-\"}}</option>\n                        </ng-container>\n                    </select>\n                </div>\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"pincode\" class=\"form-label\">Pincode <span class=\"required\">*</span></label>\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"pincode\" required\n                        [(ngModel)]=\"enrollementPayload.addressDetails.pinCode\"\n                        (ngModelChange)=\"validateForm('PINCODE')\" [class.error-border]=\"!validObject['PINCODE']\">\n                </div>\n            </div>\n\n            <div class=\"section-title\">Enter Nominee Details</div>\n\n            <div class=\"mb-3\">\n                <label for=\"nomineeName\" class=\"form-label\">Full Name of Nominee <span class=\"required\">*</span></label>\n                <input type=\"text\" class=\"form-control custom-form-control\" id=\"nomineeName\" required\n                    [(ngModel)]=\"enrollementPayload.nomineeDetails.nomineeName\"\n                    (ngModelChange)=\"validateForm('NOMINEE_NAME')\" [class.error-border]=\"!validObject['NOMINEE_NAME']\">\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"relationship\" class=\"form-label\">Select Relationship <span\n                            class=\"required\">*</span></label>\n                    <select class=\"form-select custom-form-select\" id=\"relationship\" required\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.relationShip\">\n                        <!-- <option value=\"\">Select Relationship</option> -->\n                        <option value=\"Spouse\">Spouse</option>\n                        <option value=\"Child\">Child</option>\n                        <option value=\"Mother\">Mother</option>\n                        <option value=\"Father\">Father</option>\n                        <option value=\"Sibling\">Sibling</option>\n                    </select>\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"nomineePhone\" class=\"form-label\">Mobile Number <span class=\"required\">*</span></label>\n\n                    <input type=\"number\" class=\"form-control custom-form-control\" id=\"nomineePhone\" required\n                        [(ngModel)]=\"enrollementPayload.nomineeDetails.mobile\"\n                        (ngModelChange)=\"validateForm('NOMINEE_MOBILE')\"\n                        [class.error-border]=\"!validObject['NOMINEE_MOBILE']\">\n                </div>\n            </div>\n\n            <div class=\"section-title\">Account Information</div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"accountHolder\" class=\"form-label\">Account Holder Name <span\n                            class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountHolder\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountHolderName\"\n                        (ngModelChange)=\"validateForm('ACCOUNT_HOLDER_NAME')\"\n                        [class.error-border]=\"!validObject['ACCOUNT_HOLDER_NAME']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"accountNumber\" class=\"form-label\">Account Number <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"accountNumber\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.accountNumber\"\n                        (ngModelChange)=\"validateForm('ACCOUNT_NUMBER')\"\n                        [class.error-border]=\"!validObject['ACCOUNT_NUMBER']\">\n                </div>\n            </div>\n\n            <div class=\"row mb-3\">\n                <div class=\"col-md-6\">\n                    <label for=\"bankName\" class=\"form-label\">Bank Name <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"bankName\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.bankName\"\n                        (ngModelChange)=\"validateForm('BANK_NAME')\" [class.error-border]=\"!validObject['BANK_NAME']\">\n                </div>\n                <div class=\"col-md-6\">\n                    <label for=\"ifscCode\" class=\"form-label\">IFSC Code <span class=\"required\">*</span></label>\n                    <input type=\"text\" class=\"form-control custom-form-control\" id=\"ifscCode\" required\n                        [(ngModel)]=\"enrollementPayload.bankDetails.ifscCode\"\n                        (ngModelChange)=\"validateForm('IFSC_CODE')\" [class.error-border]=\"!validObject['IFSC_CODE']\">\n                </div>\n            </div>\n            <div class=\"d-grid mt-4\">\n                <button type=\"submit\" class=\"btn btn-submit\" (click)=\"createEnrollment()\"\n                    [appButtonEditor]=\"edit ?? false\" simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\"\n                    [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\"\n                    [buttonData]=\"getButtonContent(0)\">Submit\n                    Enrollment</button>\n            </div>\n            <div *ngIf=\"validator\" [class.error-color]=\"validator\">Fill all mandatory fields to proceed*</div>\n        </div>\n    </div>\n\n    <!-- Add this block in your Angular payment step (page === 'PAYMENT') -->\n    <!-- payment-simulation.component.html -->\n    <div class=\"container-fluid min-vh-100 d-flex align-items-center justify-content-center bg-light\"\n        *ngIf=\"page === 'PAYMENT'\">\n        <div class=\"payment-container\">\n\n            <!-- Header -->\n            <div class=\"payment-header mb-4\">\n                <div class=\"d-flex align-items-center justify-content-between\">\n                    <h1 class=\"payment-title\">Payment Method</h1>\n                    <span class=\"badge bg-success rounded-pill px-3 py-2\">Credit Card</span>\n                </div>\n            </div>\n\n            <!-- Credit Card -->\n            <div class=\"credit-card mb-4\">\n                <div class=\"card-inner\">\n                    <div class=\"card-shine\"></div>\n                    <div class=\"card-content\">\n                        <div class=\"d-flex align-items-center justify-content-between mb-4\">\n                            <div class=\"d-flex align-items-center gap-2\">\n                                <div class=\"visa-logo\"></div>\n                                <span class=\"visa-text\">VISA</span>\n                            </div>\n                        </div>\n\n                        <div class=\"cardholder-name mb-4\">\n                            turquoisecoyote\n                        </div>\n\n                        <div class=\"d-flex align-items-center justify-content-between\">\n                            <div class=\"card-dots\">\n                                <span class=\"dot\" *ngFor=\"let dot of [1,2,3,4,5,6,7,8,9,10,11,12]\"></span>\n                            </div>\n                            <span class=\"card-number\">1111</span>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- OTP Section -->\n            <div class=\"otp-section mb-4\">\n                <p class=\"otp-label\">Enter OTP sent to your xxx xxx 4839</p>\n                <input type=\"text\" class=\"form-control otp-input\" placeholder=\"Enter OTP\">\n                <small class=\"text-muted mt-2 d-block\">Hint: OTP is 111000</small>\n            </div>\n\n            <!-- Simulation Buttons -->\n            <div class=\"row g-3 mb-4\">\n                <div class=\"col-6\">\n                    <button class=\"btn btn-danger btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('failure')\"\n                        [disabled]=\"isProcessing\">\n                        Simulate failure\n                    </button>\n                </div>\n                <div class=\"col-6\">\n                    <button class=\"btn btn-success btn-lg w-100 simulation-btn\" (click)=\"simulatePayment('success')\"\n                        [disabled]=\"isProcessing\">\n                        Simulate success\n                    </button>\n                </div>\n            </div>\n\n            <!-- Processing State -->\n            <div *ngIf=\"isProcessing\" class=\"d-flex align-items-center justify-content-center py-3\">\n                <div class=\"spinner-border text-primary me-3\" role=\"status\" style=\"width: 1.5rem; height: 1.5rem;\">\n                </div>\n                <span class=\"text-muted\">Processing payment...</span>\n            </div>\n\n            <!-- Result Alert -->\n            <div *ngIf=\"result && showResult\" class=\"alert text-center result-alert\" [ngClass]=\"{\n             'alert-success': result.type === 'success',\n             'alert-danger': result.type === 'failure'\n           }\">\n                <strong>{{ result.title }}</strong> {{ result.message }}\n            </div>\n\n            <!-- Footer -->\n            <div class=\"text-center mt-4\">\n                <small class=\"text-muted\">\n                    Click buttons to simulate payment scenarios\n                </small>\n            </div>\n\n        </div>\n    </div>\n\n    <div [ngClass]=\"{'hover_effect': edit}\" *ngIf=\"showEditors\">\n        <simpo-hover-elements [data]=\"data\" [index]=\"index\" [editOptions]=\"edit\"></simpo-hover-elements>\n    </div>\n\n    <div *ngIf=\"showDelete\" [ngClass]=\"{'hover_effect': delete}\">\n        <simpo-delete-hover-element [data]=\"data\" [index]=\"index\"></simpo-delete-hover-element>\n    </div>\n</div>", styles: [".hover_effect{position:unset;width:100%;top:0;left:0;height:100%}*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.form-container{width:60%;border-radius:12px;padding:30px;margin:0 auto;box-shadow:0 2px 10px #0000001a}.section-title{font-size:18px;font-weight:600;margin-bottom:20px;margin-top:30px}.section-title:first-child{margin-top:0}.custom-form-control{border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;transition:all .2s}.custom-form-control:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-control::placeholder{color:#a0aec0;font-weight:400}.custom-form-control.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.custom-form-select{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:12px 16px;font-size:14px;color:#2d3748;font-weight:500;background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;appearance:none}.custom-form-select:focus{background-color:#f7fafc;border-color:#667eea;box-shadow:0 0 0 .2rem #667eea40}.custom-form-select.filled{background-color:#edf2f7;border-color:#cbd5e0;font-weight:600}.form-label{font-size:14px;font-weight:500;color:#718096;margin-bottom:8px}.required{color:#e53e3e}.phone-input-group{display:flex;gap:0}.phone-code{background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px 0 0 8px;border-right:none;padding:12px 16px;display:flex;align-items:center;gap:8px;font-size:14px;color:#4a5568;font-weight:500}.phone-code:after{content:\"\\25bc\";color:#a0aec0;font-size:12px}.error-border{border:2px solid #e53e3e!important}.error-color{color:#e53e3e!important;font-weight:600;font-size:13px}.phone-input-group .custom-form-control{border-radius:0 8px 8px 0;border-left:none}.radio-group{display:flex;gap:12px;margin-top:12px}.radio-option{flex:1;background-color:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:16px;cursor:pointer;transition:all .2s;position:relative}.radio-option:hover{background-color:#edf2f7}.radio-option.selected{background-color:#e6fffa;border-color:#38b2ac}.radio-option input[type=radio]{position:absolute;opacity:0;cursor:pointer}.radio-option .radio-circle{width:20px;height:20px;border:2px solid #cbd5e0;border-radius:50%;position:absolute;top:16px;right:16px;background:#fff}.radio-option.selected .radio-circle{border-color:#38b2ac}.radio-option.selected .radio-circle:after{content:\"\";width:10px;height:10px;background:#38b2ac;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.radio-option label{font-size:14px;font-weight:500;color:#4a5568;cursor:pointer;display:block;margin-bottom:0;padding-right:30px}.btn-submit{border:none;padding:14px 30px;border-radius:8px;font-weight:600;font-size:16px;transition:transform .2s}.btn-submit:hover{transform:translateY(-1px);color:#fff}.mb-3{margin-bottom:1rem!important}.mt-4{margin-top:1.5rem!important}.payment-card{max-width:500px;width:100%;border-radius:15px;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffffff2}.card-header{background:linear-gradient(135deg,#007bff,#0056b3)!important;border-bottom:none}.payment-btn{position:relative;overflow:hidden;border:none;border-radius:10px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;transition:all .3s ease;box-shadow:0 4px 15px #0003}.payment-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #0000004d}.payment-btn:active:not(:disabled){transform:translateY(0)}.payment-btn:disabled{opacity:.6;cursor:not-allowed;transform:none!important}.btn-overlay{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s}.payment-btn:hover:not(:disabled) .btn-overlay{left:100%}.btn-success{background:linear-gradient(45deg,#28a745,#20c997);border-color:#28a745}.btn-success:hover:not(:disabled){background:linear-gradient(45deg,#218838,#1aa085);border-color:#1e7e34}.btn-danger{background:linear-gradient(45deg,#dc3545,#e74c3c);border-color:#dc3545}.btn-danger:hover:not(:disabled){background:linear-gradient(45deg,#c82333,#d62c1a);border-color:#bd2130}.alert{border:none;border-radius:10px;font-weight:500;box-shadow:0 4px 15px #0000001a}.alert-success{background:linear-gradient(45deg,#d4edda,#c3e6cb);color:#155724}.alert-danger{background:linear-gradient(45deg,#f8d7da,#f5c6cb);color:#721c24}.min-vh-100{min-height:100vh}.card-footer{background:#f8f9facc!important;border-top:1px solid rgba(0,0,0,.125)}body{background:linear-gradient(135deg,#667eea,#764ba2);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.alert.show{animation:fadeInUp .3s ease-out}.spinner-border{width:1.5rem;height:1.5rem}.payment-container{width:100%;max-width:430px;padding:20px}.payment-title{font-size:2rem;font-weight:700;color:#333;margin:0}.credit-card{perspective:1000px}.card-inner{background:linear-gradient(135deg,#2d3748,#1a202c);border-radius:20px;padding:30px;position:relative;overflow:hidden;box-shadow:0 20px 40px #0000004d;color:#fff;min-height:200px}.card-shine{position:absolute;inset:0;background:linear-gradient(135deg,transparent 0%,rgba(255,255,255,.1) 45%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.1) 55%,transparent 100%);pointer-events:none}.card-content{position:relative;z-index:2}.visa-logo{width:32px;height:20px;background:#fff;border-radius:3px}.visa-text{font-weight:700;font-size:1.2rem;letter-spacing:2px}.cardholder-name{font-size:1.1rem;letter-spacing:1px;text-transform:lowercase}.card-dots{display:flex;gap:4px}.dot{width:8px;height:8px;background:#fff;border-radius:50%;display:inline-block}.card-number{font-family:Courier New,monospace;font-size:1.3rem;font-weight:700;letter-spacing:3px}.otp-section{margin:30px 0}.otp-label{color:#6c757d;margin-bottom:12px;font-size:.95rem}.otp-input{padding:16px 20px;border-radius:12px;border:2px solid #e9ecef;font-size:1.1rem;transition:all .3s ease}.otp-input:focus{border-color:#007bff;box-shadow:0 0 0 .2rem #007bff40}.simulation-btn{padding:16px 20px;border-radius:12px;font-weight:700;font-size:1rem;transition:all .3s ease;border:none;white-space:nowrap}.simulation-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px #00000026}.simulation-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-danger.simulation-btn{background:linear-gradient(135deg,#dc3545,#c82333)}.btn-success.simulation-btn{background:linear-gradient(135deg,#28a745,#20c997)}.result-alert{border-radius:12px;padding:16px 20px;border:none;font-weight:500;animation:slideInUp .3s ease-out}.alert-success{background:linear-gradient(135deg,#d4edda,#c3e6cb);color:#155724;border-left:4px solid #28a745}.alert-danger{background:linear-gradient(135deg,#f8d7da,#f5c6cb);color:#721c24;border-left:4px solid #dc3545}@keyframes slideInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 768px){.payment-container{padding:15px}.payment-title{font-size:1.5rem}.card-inner{padding:25px;min-height:180px}.simulation-btn{padding:14px 16px;font-size:.9rem}.form-container{width:100%!important}}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}\n"] }]
        }], ctorParameters: () => [{ type: i1.RestService }, { type: i2.ActivatedRoute }, { type: i3.StorageServiceService }, { type: i2.Router }], propDecorators: { data: [{
                type: Input
            }], edit: [{
                type: Input
            }], customClass: [{
                type: Input
            }], delete: [{
                type: Input
            }], index: [{
                type: Input
            }] } });
//# sourceMappingURL=data:application/json;base64, 