import { Component, HostListener, Input, ViewChild } from '@angular/core';
import { CdkDragPlaceholder } from "@angular/cdk/drag-drop";
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { TextEditorComponent } from '../../elements/text-editor/text-editor.component';
import { SpacingHorizontalDirective } from '../../directive/spacing-horizontal.directive';
import { ButtonEditorDirective } from '../../directive/button-editor.directive';
import { MatIcon } from '@angular/material/icon';
import { MatDialog, MatDialogModule } from '@angular/material/dialog';
import { ButtonDirectiveDirective } from '../../directive/button-directive.directive';
import { MatProgressSpinner } from "@angular/material/progress-spinner";
import { MessageService } from 'primeng/api';
import { ToastModule } from 'primeng/toast';
import { MatSlider } from "@angular/material/slider";
import { MatSliderModule } from '@angular/material/slider';
import * as i0 from "@angular/core";
import * as i1 from "@angular/router";
import * as i2 from "../../services/rest.service";
import * as i3 from "../../services/storage.service";
import * as i4 from "@angular/material/dialog";
import * as i5 from "../../services/events.service";
import * as i6 from "primeng/api";
import * as i7 from "@angular/common";
import * as i8 from "@angular/forms";
import * as i9 from "primeng/toast";
import * as i10 from "@angular/material/slider";
export class SchemeDetailComponent {
    constructor(activeRoute, restService, storageService, matDialog, router, _eventService, messageService) {
        this.activeRoute = activeRoute;
        this.restService = restService;
        this.storageService = storageService;
        this.matDialog = matDialog;
        this.router = router;
        this._eventService = _eventService;
        this.messageService = messageService;
        this.data = null;
        this.edit = true;
        this.scrollToTermsAndCondition = false;
        this.Object = Object;
        this.stores = [];
        this.staffMembers = [];
        this.minAmount = 1000;
        this.maxAmount = 100000;
        this.monthlyAmount = 0;
        this.installmentOptions = [];
        this.maturityCount = 10;
        this.benefitAmount = 0;
        this.purchasedGram = 0;
        this.currentGoldRate = 0;
        this.termsAndCondition = false;
        this.enrollButtonLoader = false;
        this.screenWidth = 0;
        this.faqList = [];
    }
    ngOnInit() {
        this.getScreenSize();
        this.styles = this.data?.styles;
        this.activeRoute.queryParams.subscribe(params => {
            if (params['schemeId']) {
                this.getSchemeDetails(params['schemeId']);
            }
            if (params['termsAndCondition'])
                this.scrollToTermsAndCondition = true;
        });
        // this.getSchemeDetails("9eb57ba2-9083-11f0-98fe-47a63c58fddd")
    }
    getKeys(obj) {
        return Object.keys(obj ?? {});
    }
    get stylesLayout() {
        return { ...this.styles?.layout };
    }
    getButtonData(index) {
        return this.data?.action?.buttons[index]?.content;
    }
    getButtonId(index) {
        return this.data?.action?.buttons[index]?.id ?? "";
    }
    getButtonStyle(index) {
        return this.data?.action?.buttons[index]?.styles;
    }
    get getInputText() {
        return this.data?.content?.inputText?.[0]?.value ?? "";
    }
    getScreenSize(event) {
        this.screenWidth = window.innerWidth;
    }
    getStaffList() {
        this.restService.getAllStaffList().subscribe({
            next: (res) => {
                this.staffMembers = res?.data?.data ? res?.data?.data : [];
                // console.log(this.staffMembers)
            },
            error: (err) => {
                console.log(err);
            }
        });
    }
    onAmountChange() {
        if (Object.keys(this.schemeDetails.jewellerBenefit).length > 0) {
            const values = Object.values(this.schemeDetails.jewellerBenefit);
            const highestValue = Math.max(...Object.values(values));
            if (this.schemeDetails.benefitType === "PERCENT_ON_MONTH") {
                this.benefitAmount = (this.monthlyAmount * highestValue) / 100;
            }
            else if (this.schemeDetails.benefitType === "SCHEME") {
                this.benefitAmount = ((this.monthlyAmount * this.maturityCount) * highestValue) / 100;
            }
            else if (this.schemeDetails.benefitType === "DISCOUNT") {
                this.benefitAmount = ((this.monthlyAmount * this.maturityCount) * highestValue) / 100;
            }
        }
        this.purchasedGram = Number((this.monthlyAmount / this.currentGoldRate).toFixed(2));
    }
    setMonthlyAmount(amount) {
        this.installmentOptions.forEach((option) => {
            if (option.value == amount?.value) {
                option.status = true;
                this.monthlyAmount = amount?.value;
            }
            else {
                option.status = false;
            }
        });
        this.onAmountChange();
    }
    getSchemeDetails(schemeId) {
        this.restService.getSchemeDetails(schemeId).subscribe((res) => {
            if (res && res.data) {
                this.getStaffList();
                this.schemeDetails = res.data;
                // console.log(this.schemeDetails)
                this.minAmount = this.schemeDetails?.minInstallmentValue;
                this.maxAmount = this.schemeDetails?.maxInstallmentValue;
                this.monthlyAmount = this.minAmount;
                this.schemeDetails?.suggestedValues?.forEach((scheme) => this.installmentOptions.push({ status: false, value: scheme }));
                this.maturityCount = this.schemeDetails?.maturityCount ? this.schemeDetails.maturityCount : this.maturityCount;
                this.stores = this.schemeDetails?.storeList ? this.schemeDetails.storeList : [];
                this.getMetalPrice();
                this.onAmountChange();
                this.faqList = this.schemeDetails?.faqs ? this.schemeDetails?.faqs : [];
                this.faqList.forEach(faq => faq.showAnswer = false);
                if (this.scrollToTermsAndCondition)
                    this.scrollDown();
            }
        });
    }
    enrollScheme(scheme) {
        if (!this.termsAndCondition) {
            this.messageService.add({ severity: 'error', summary: 'Terms & Condition', detail: 'Please accept terms & condition' });
            return;
        }
        this.enrollButtonLoader = true;
        const userDetails = this.storageService.getUser();
        let payload = {
            userBasicDetails: {
                customer_id: userDetails?.userId,
                customer_name: userDetails?.contact?.name,
                customer_phone: userDetails?.contact?.mobile,
                customer_email: userDetails?.contact?.email,
            },
            schemeId: scheme?.id,
            schemeName: scheme?.schemeName,
            earlyRedemptionCharge: scheme?.enrollmentFees,
            installmentAmount: this.monthlyAmount,
            storeRefId: scheme?.schemeRepresentativeId,
            storeId: this.stores.length < 2 ? this.stores[0].id : this.selectedStore?.id,
            staffId: this.staffMembers.length < 2 ? this.staffMembers[0].id : this.selectedStaff?.id,
            staffName: this.staffMembers.length < 2 ? this.staffMembers[0].name : this.selectedStaff?.name,
            storeName: this.stores.length < 2 ? this.stores[0].name : this.selectedStore?.name,
            maturityCount: scheme?.maturityCount,
            jewellerBenefit: scheme?.jewellerBenefit,
            dueMonths: scheme?.maturityCount,
            businessId: scheme?.businessId,
            businessName: scheme?.businessName,
            enableEarlyRedemption: scheme?.enableEarlyRedemption,
            redemptionSlabList: scheme?.redemptionSlabList,
            schemeType: scheme?.schemeType,
            metalType: scheme?.metalType,
            karatType: scheme?.karatType,
            customerAccount: ""
        };
        if (userDetails != null) {
            this.restService.enrollScheme(payload, true).subscribe({
                next: (response) => {
                    this.enrollButtonLoader = false;
                    if (response.data.cashfreeResponse != null) {
                        this.continuePayment(payload);
                    }
                    else {
                        this.storeCharges = response.data.cart;
                        this.dialogRef = this.matDialog.open(this.showChargesTemplate, {
                            panelClass: 'show-charges-class'
                        });
                        this.dialogRef.afterClosed().subscribe((res) => {
                            if (res === 'SUCCESS')
                                this.continuePayment(payload);
                        });
                    }
                },
                error: (err) => {
                    this.enrollButtonLoader = false;
                    if (err?.error?.message) {
                    }
                }
            });
        }
        else {
            this.router.navigate(['/login'], { queryParams: { schemeDetail: 'scheme-detail' } });
        }
    }
    closeDialog(action) {
        this.dialogRef.close(action);
    }
    continuePayment(payload) {
        this.restService.enrollScheme(payload, false).subscribe({
            next: (response) => {
                localStorage.setItem('passbookOrderId', response.data.orderId);
                this.openCashfreeSdk(response.data.sessionId);
            },
            error: (error) => { }
        });
    }
    openCashfreeSdk(sessionId) {
        this._eventService.cashFreeEvent.emit({ data: { orderSignature: sessionId } });
    }
    getMetalPrice() {
        let storeId = this.stores.length < 2 ? this.stores[0].id : this.selectedStore?.id;
        if (!storeId)
            return;
        this.restService.getMetalPrice(storeId).subscribe((res) => {
            this.metalPrice = res.data;
            for (let gold of this.metalPrice?.priceData ?? []) {
                if (gold.karats === this.schemeDetails.karatType) {
                    this.currentGoldRate = gold.price;
                    this.purchasedGram = Number((this.monthlyAmount / this.currentGoldRate).toFixed(2));
                    return;
                }
            }
        });
    }
    get isMobile() {
        return window.innerWidth <= 475;
    }
    scrollDown() {
        const el = document.getElementById('termsAndCondition');
        if (el) {
            el.scrollIntoView({ behavior: 'smooth' });
        }
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, deps: [{ token: i1.ActivatedRoute }, { token: i2.RestService }, { token: i3.StorageServiceService }, { token: i4.MatDialog }, { token: i1.Router }, { token: i5.EventsService }, { token: i6.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailComponent, isStandalone: true, selector: "simpo-scheme-detail", inputs: { data: "data", index: "index", edit: "edit" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MatDialog, MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n  <div class=\"plan_desc_section\">\r\n    <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n  </div>\r\n  <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n    <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n  </div>\r\n  <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n    <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n  </div>\r\n  <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n    <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n  </div>\r\n  <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n    <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n  </div>\r\n  <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n    <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n  </div>\r\n  <div class=\"terms_condition_section p-5\"\r\n    *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n    <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n  </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n    <div class=\"faq-container\">\r\n      <h1 class=\"faq-title\">How to redeem?</h1>\r\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n        <div class=\"faq-list\">\r\n          <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n            {{schemeDetails?.redeemDesc || 'N/A'}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n    <div class=\"faq-container\">\r\n      <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n        <div class=\"faq-list\">\r\n          <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n            <div class=\"d-flex  align-items-start gap-3 f-16\">\r\n              <span>{{faq}}</span>\r\n              <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n  <div class=\"hero-section d-flex align-items-center\">\r\n    <div class=\"d-flex w-100\">\r\n      <div class=\"d-flex align-items-center g-5 w-100\">\r\n        <div\r\n          [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n          <div class=\"hero-content\">\r\n            <h1 class=\"hero-title mb-4 d-flex align-items-center\"\r\n              [ngClass]=\"{'justify-content-center':!schemeDetails?.imgUrls[0], 'justify-content-start':schemeDetails?.imgUrls[0]}\">\r\n              <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n            </h1>\r\n            <p class=\"hero-description mb-4\"\r\n              [ngClass]=\"{'text-start':schemeDetails?.imgUrls[0],'text-center':!schemeDetails?.imgUrls[0]}\">\r\n              {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n          <div class=\"hero-image\">\r\n            <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n              class=\"jewellery-img w-100\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n  <div class=\"d-flex flex-column gap-3\">\r\n    <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n      <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"desc_text\">\r\n      {{schemeDetails?.about}}\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n  <div class=\"d-flex flex-column align-items-center\">\r\n    <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n      <span>Calculate Your Returns</span>\r\n      <div class=\"calc_desc\">\r\n        See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n        your potential returns.\r\n      </div>\r\n    </div>\r\n    <div class=\"calculator_section\">\r\n      <div class=\"gold-purity\"\r\n        *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n        <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n            *ngIf=\"gold?.karats === '18_k'\">\r\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n            *ngIf=\"gold?.karats === '24_k'\">\r\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n            *ngIf=\"gold?.karats === '22_k'\">\r\n          <div>\r\n            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n        <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n        <p class=\"enrolled-gram\"\r\n          *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n          {{purchasedGram}} gms</p>\r\n      </div>\r\n\r\n      <div class=\"calculate-slider mb-4 px-3\">\r\n        <div class=\"slider-container position-relative\">\r\n          <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n            [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n            <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n          </mat-slider>\r\n          <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n            [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n          <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n            <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n            <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n          </div>\r\n          <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n            *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n            <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n              [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n              *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n              \u20B9 {{option?.value}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"mt-3\">\r\n          <div class=\"d-flex align-items-center justify-content-center\">\r\n            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n          </div>\r\n          <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"calculator-bottom px-3 mb-5\">\r\n        <div class=\"scheme-results\">\r\n          <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n            <!-- Contribution Card -->\r\n            <div class=\"col-12 col-sm-6\"\r\n              [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n              <div class=\"card text-center h-100\">\r\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                  <div class=\"fw-bold calc_amount fs-md-5\">\r\n                    \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n                  </div>\r\n                  <div class=\"text-muted small\">\r\n                    Your {{maturityCount}}-Month Contribution\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Plus Icon - Hidden on mobile -->\r\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n              <div class=\"fs-3 text-muted\">+</div>\r\n            </div>\r\n\r\n            <!-- Benefit Card -->\r\n            <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n              <div class=\"card text-center h-100\">\r\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                  <div class=\"fw-bold calc_amount fs-md-5\">\r\n                    \u20B9{{benefitAmount | number}}\r\n                  </div>\r\n                  <div class=\"text-muted small\">\r\n                    Scheme Benefit\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Equals Icon - Hidden on mobile -->\r\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n              <div class=\"fs-3 text-muted\">=</div>\r\n            </div>\r\n\r\n            <!-- Total Card -->\r\n            <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n              <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                  <div class=\"fw-bold calc_amount  fs-md-5 text-white\">\r\n                    <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n                      \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n                    </span>\r\n                    <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n                      \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n                    </span>\r\n                  </div>\r\n                  <div class=\"text-white-50 small\">\r\n                    Total Redemption Value\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n              <div class=\"card text-center h-100\">\r\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                  <div class=\"fw-bold calc_amount fs-md-5\">\r\n                    {{purchasedGram}} gms\r\n                  </div>\r\n                  <div class=\"text-muted small\">\r\n                    Gold Allocation Today\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n\r\n          <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n            *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n                  Store : </span></div>\r\n              <div class=\"store-selector\">\r\n                <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n                  (ngModelChange)=\"getMetalPrice()\">\r\n                  <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n                  <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n                    {{store.name}} - {{store.storeRefId}}\r\n                  </option>\r\n                </select>\r\n              </div>\r\n            </div>\r\n            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n                  Staff Member : </span></div>\r\n              <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n                <option value=\"\" disabled>Choose a staff member...</option>\r\n                <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n                  {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div class=\"terms-and-condition\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n              Conditions</a>\r\n          </div>\r\n          <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n            [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n            [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n            <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n            <ng-container *ngIf=\"enrollButtonLoader\">\r\n              <div class=\"d-flex align-items-center justify-content-center\">\r\n                <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n                Loading...\r\n              </div>\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n        <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                <div class=\"d-flex align-items-center mb-3\">\r\n                    \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6\">\r\n                        <div class=\"result-card text-center p-3 border rounded\">\r\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                            <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-6\">\r\n                        <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                            <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                    Enroll in Scheme\r\n                </button>\r\n            </div> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n    <div class=\"faq-container\">\r\n      <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n      <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n        <div class=\"faq-list\">\r\n          <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n            <div class=\"faq-question\">\r\n              <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n              <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n              <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n            </div>\r\n            <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n              <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n  <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n    <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n      <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n      <div class=\"terms-content\">\r\n        <div class=\"term-item d-flex align-items-center\"\r\n          *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n          <div class=\"terms_count\">\r\n            <h3 class=\"term-heading\">{{ key }}.</h3>\r\n          </div>\r\n          <div>\r\n            <p class=\"term-text mb-0\">\r\n              {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n            </p>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- <div class=\"important-note\">\r\n                    <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n                        Participants will be notified of any changes via registered email or SMS. Continued\r\n                        participation after notification constitutes acceptance of revised terms.</p>\r\n                </div> -->\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n  <div class=\"payment-dialog\">\r\n    <div class=\"dialog-header\">\r\n      <h2>Payment Details</h2>\r\n      <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"payment-content\">\r\n      <div class=\"payment-row\">\r\n        <span class=\"label\">Installment Amount:</span>\r\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n          (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n      </div>\r\n\r\n      <div class=\"payment-row\">\r\n        <span class=\"label\">Convenience Fee:</span>\r\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n          (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n      </div>\r\n\r\n      <div class=\"payment-row\">\r\n        <span class=\"label\">Payment Service Charges:</span>\r\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n          (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n      </div>\r\n\r\n      <div class=\"payment-row total-row\">\r\n        <span class=\"label total-label\">Total Amount:</span>\r\n        <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n          (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"dialog-actions\">\r\n      <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.plan_desc_section{padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;text-align:center}.hero-description{font-size:1.1rem;color:#666;line-height:1.6}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i7.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i7.DecimalPipe, name: "number" }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: SpacingHorizontalDirective, selector: "[spacingHorizontal]", inputs: ["spacingHorizontal", "isHeader"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i8.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i8.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: TextEditorComponent, selector: "simpo-text-editor", inputs: ["value", "editable", "isRTE", "sectionId", "label", "type", "inputTextIndex", "itemIndex"], outputs: ["valueChange"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: ButtonEditorDirective, selector: "button[appButtonEditor]", inputs: ["appButtonEditor", "buttonData", "buttonStyle", "backgroundInfo", "sectionId", "buttonId", "itemIndex"] }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: ButtonDirectiveDirective, selector: "[simpoButtonDirective]", inputs: ["buttonStyle", "color", "scrollValue", "backgroundInfo"] }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i9.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "component", type: MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "ngmodule", type: MatSliderModule }, { kind: "directive", type: i10.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-scheme-detail', standalone: true, imports: [CdkDragPlaceholder, CommonModule, MatDialogModule, SpacingHorizontalDirective, FormsModule, TextEditorComponent, MatIcon, ButtonEditorDirective, MatProgressSpinner, ButtonDirectiveDirective, ToastModule, MatSlider, MatSliderModule], providers: [MatDialog, MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\r\n  [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\r\n\r\n\r\n<section class=\"main_section w-100\" [spacingHorizontal]=\"stylesLayout\" [id]=\"data?.id\">\r\n  <div class=\"plan_desc_section\">\r\n    <ng-container *ngTemplateOutlet=\"planDescTemplate\"></ng-container>\r\n  </div>\r\n  <div class=\"about_plan_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n    <ng-container *ngTemplateOutlet=\"aboutUsTemplate\"></ng-container>\r\n  </div>\r\n  <div class=\"scheme_calculator_section p-5 d-flex flex-column align-items-center justify-content-center\">\r\n    <ng-container *ngTemplateOutlet=\"schemeCalculator\"></ng-container>\r\n  </div>\r\n  <div class=\"redeem_ans_section\" *ngIf=\"schemeDetails?.redeemDesc.length > 0\">\r\n    <ng-container *ngTemplateOutlet=\"redeemInfoSection\"></ng-container>\r\n  </div>\r\n  <div class=\"scheme_work_section\" *ngIf=\"schemeDetails?.schemeWorkingDesc != {} && schemeDetails\">\r\n    <ng-container *ngTemplateOutlet=\"schemeWorkSection\"></ng-container>\r\n  </div>\r\n  <div class=\"faq_section p-5\" *ngIf=\"faqList.length > 0\">\r\n    <ng-container *ngTemplateOutlet=\"faqTemplate\"></ng-container>\r\n  </div>\r\n  <div class=\"terms_condition_section p-5\"\r\n    *ngIf=\"schemeDetails?.termsAndConditions && schemeDetails?.termsAndConditions != {}\">\r\n    <ng-container *ngTemplateOutlet=\"termsAndConditions\"></ng-container>\r\n  </div>\r\n</section>\r\n<ng-template #redeemInfoSection>\r\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n    <div class=\"faq-container\">\r\n      <h1 class=\"faq-title\">How to redeem?</h1>\r\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n        <div class=\"faq-list\">\r\n          <div class=\"redeem_info_section\" *ngIf=\"schemeDetails?.redeemDesc\">\r\n            {{schemeDetails?.redeemDesc || 'N/A'}}\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #schemeWorkSection>\r\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n    <div class=\"faq-container\">\r\n      <h1 class=\"faq-title\">How Does this plan work?</h1>\r\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n        <div class=\"faq-list\">\r\n          <div class=\"ans_section\" *ngFor=\"let faq of getKeys(schemeDetails?.schemeWorkingDesc);let i =index\">\r\n            <div class=\"d-flex  align-items-start gap-3 f-16\">\r\n              <span>{{faq}}</span>\r\n              <span>{{ schemeDetails?.schemeWorkingDesc?.[faq]?.replaceAll('\\n',' ') || 'N/A' }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #planDescTemplate>\r\n  <div class=\"hero-section d-flex align-items-center\">\r\n    <div class=\"d-flex w-100\">\r\n      <div class=\"d-flex align-items-center g-5 w-100\">\r\n        <div\r\n          [ngClass]=\"{'col-md-6': schemeDetails?.imgUrls[0], 'col-12 d-flex align-items-center justify-content-center': !schemeDetails?.imgUrls[0]}\">\r\n          <div class=\"hero-content\">\r\n            <h1 class=\"hero-title mb-4 d-flex align-items-center\"\r\n              [ngClass]=\"{'justify-content-center':!schemeDetails?.imgUrls[0], 'justify-content-start':schemeDetails?.imgUrls[0]}\">\r\n              <span class=\"title-highlight\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :'N/A'}}</span>\r\n            </h1>\r\n            <p class=\"hero-description mb-4\"\r\n              [ngClass]=\"{'text-start':schemeDetails?.imgUrls[0],'text-center':!schemeDetails?.imgUrls[0]}\">\r\n              {{schemeDetails?.desc ? schemeDetails?.desc :'N/A'}}\r\n            </p>\r\n          </div>\r\n        </div>\r\n        <div class=\"col-lg-6\" *ngIf=\"schemeDetails?.imgUrls[0]\">\r\n          <div class=\"hero-image\">\r\n            <img [src]=\"schemeDetails?.imgUrls ? schemeDetails?.imgUrls[0] :'N/A'\" alt=\"Pearl Jewelry\"\r\n              class=\"jewellery-img w-100\">\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #aboutUsTemplate>\r\n  <div class=\"d-flex flex-column gap-3\">\r\n    <div class=\"text_header d-flex align-items-center justify-content-center\">\r\n      <simpo-text-editor [(value)]=\"getInputText\" [editable]=\"edit || false\" [sectionId]=\"data?.id\" [inputTextIndex]=\"0\"></simpo-text-editor>\r\n    </div>\r\n    <div class=\"desc_text\">\r\n      {{schemeDetails?.about}}\r\n    </div>\r\n  </div>\r\n</ng-template>\r\n<ng-template #schemeCalculator>\r\n  <div class=\"d-flex flex-column align-items-center\">\r\n    <div class=\"calc_header d-flex flex-column align-items-center justify-content-center\">\r\n      <span>Calculate Your Returns</span>\r\n      <div class=\"calc_desc\">\r\n        See how your savings grow with our smart investment schemes. choose your preferred scheme and discover\r\n        your potential returns.\r\n      </div>\r\n    </div>\r\n    <div class=\"calculator_section\">\r\n      <div class=\"gold-purity\"\r\n        *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n        <div class=\"purity\" *ngFor=\"let gold of metalPrice?.priceData ?? []\">\r\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/18k_gold_pic.svg\" alt=\"\"\r\n            *ngIf=\"gold?.karats === '18_k'\">\r\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/24k_gold_pic.svg\" alt=\"\"\r\n            *ngIf=\"gold?.karats === '24_k'\">\r\n          <img src=\"https://jewellers.stage.passbookapp.in/assets/images/gold-scheme/22k_gold_pic.svg\" alt=\"\"\r\n            *ngIf=\"gold?.karats === '22_k'\">\r\n          <div>\r\n            <div>{{gold?.karats?.replaceAll('_', \"\")}} Gold Purity</div>\r\n            <div class=\"gold-price\">\u20B9{{gold.price}}</div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div class=\"sub-header mb-3 px-3 monthly-scheme\">\r\n        <h6 class=\"mb-0 sub-header-text\">Select Your Monthly Investment Amount</h6>\r\n        <p class=\"enrolled-gram\"\r\n          *ngIf=\"schemeDetails?.schemeType === 'GOLD_PROTECTION' && (stores.length == 1 || selectedStore?.id)\">\r\n          {{purchasedGram}} gms</p>\r\n      </div>\r\n\r\n      <div class=\"calculate-slider mb-4 px-3\">\r\n        <div class=\"slider-container position-relative\">\r\n          <mat-slider [min]=\"minAmount\" [max]=\"maxAmount\" [step]=\"schemeDetails?.valueStep\" class=\"w-100 pale-slider\"\r\n            [style.--mdc-slider-handle-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mdc-slider-focus-handle-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mdc-slider-hover-handle-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mdc-slider-active-track-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mdc-slider-with-tick-marks-active-container-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mat-slider-ripple-color]=\"data?.styles?.background?.accentColor\"\r\n            [style.--mat-slider-value-indicator-color]=\"data?.styles?.background?.accentColor\">\r\n            <input matSliderThumb [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\">\r\n          </mat-slider>\r\n          <!-- <input type=\"range\" class=\"form-range custom-range\" [min]=\"minAmount\" [max]=\"maxAmount\"\r\n            [step]=\"schemeDetails?.valueStep\" [(ngModel)]=\"monthlyAmount\" (ngModelChange)=\"onAmountChange()\"> -->\r\n          <div class=\"slider-labels d-flex justify-content-between mt-2\">\r\n            <span class=\"fw-bold\">\u20B9{{minAmount | number}}</span>\r\n            <span class=\"fw-bold\">\u20B9{{maxAmount | number}}</span>\r\n          </div>\r\n          <div class=\"random_options d-flex justify-content-center gap-3 align-items-center\"\r\n            *ngIf=\"installmentOptions && installmentOptions.length > 0\">\r\n            <div class=\"option cursor-pointer d-flex justify-content-center align-items-center\"\r\n              [ngStyle]=\"option.status ? {'border': '2px solid grey','font-weight':'bold'} : {}\"\r\n              *ngFor=\"let option of installmentOptions\" (click)=\"setMonthlyAmount(option)\">\r\n              \u20B9 {{option?.value}}\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"mt-3\">\r\n          <div class=\"d-flex align-items-center justify-content-center\">\r\n            <span class=\"text-center fw-bold fs-4 monthly-amount\">\u20B9{{monthlyAmount | number}}</span>\r\n          </div>\r\n          <div class=\"text-center text-muted small mt-1\">Monthly Investment</div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"calculator-bottom px-3 mb-5\">\r\n        <div class=\"scheme-results\">\r\n          <div class=\"row align-items-center justify-content-between mb-3 g-2\">\r\n            <!-- Contribution Card -->\r\n            <div class=\"col-12 col-sm-6\"\r\n              [ngClass]=\"{'card-container': this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'}\">\r\n              <div class=\"card text-center h-100\">\r\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                  <div class=\"fw-bold calc_amount fs-md-5\">\r\n                    \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n                  </div>\r\n                  <div class=\"text-muted small\">\r\n                    Your {{maturityCount}}-Month Contribution\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Plus Icon - Hidden on mobile -->\r\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n              <div class=\"fs-3 text-muted\">+</div>\r\n            </div>\r\n\r\n            <!-- Benefit Card -->\r\n            <div class=\"col-12 col-sm-6 card-container\" *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n              <div class=\"card text-center h-100\">\r\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                  <div class=\"fw-bold calc_amount fs-md-5\">\r\n                    \u20B9{{benefitAmount | number}}\r\n                  </div>\r\n                  <div class=\"text-muted small\">\r\n                    Scheme Benefit\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Equals Icon - Hidden on mobile -->\r\n            <div class=\"col-auto d-none d-md-flex justify-content-center\"\r\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n              <div class=\"fs-3 text-muted\">=</div>\r\n            </div>\r\n\r\n            <!-- Total Card -->\r\n            <div class=\"col-12 card-container col-sm-6 mt-2 mt-md-0\"\r\n              *ngIf=\"this.schemeDetails?.schemeType !== 'GOLD_PROTECTION'\">\r\n              <div class=\"card text-center h-100 border-2\" [style.background]=\"styles?.background?.accentColor\">\r\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                  <div class=\"fw-bold calc_amount  fs-md-5 text-white\">\r\n                    <span *ngIf=\"schemeDetails?.benefitType != 'DISCOUNT'\">\r\n                      \u20B9{{((monthlyAmount * maturityCount) + benefitAmount) | number}}\r\n                    </span>\r\n                    <span *ngIf=\"schemeDetails?.benefitType === 'DISCOUNT'\">\r\n                      \u20B9{{(monthlyAmount * maturityCount) | number}}\r\n                    </span>\r\n                  </div>\r\n                  <div class=\"text-white-50 small\">\r\n                    Total Redemption Value\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-12 col-sm-6\" *ngIf=\"this.schemeDetails?.schemeType === 'GOLD_PROTECTION'\">\r\n              <div class=\"card text-center h-100\">\r\n                <div class=\"card-body p-2 p-md-3 d-flex justify-content-center flex-column\">\r\n                  <div class=\"fw-bold calc_amount fs-md-5\">\r\n                    {{purchasedGram}} gms\r\n                  </div>\r\n                  <div class=\"text-muted small\">\r\n                    Gold Allocation Today\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n\r\n          <div class=\"bonus-message text-center mb-3 d-flex justify-content-between align-items-center\"\r\n            *ngIf=\"schemeDetails?.storeList?.length >=2 || staffMembers.length >= 2 \">\r\n            <div class=\"store_selection  w-50 align-items-center gap-1\" *ngIf=\"schemeDetails?.storeList?.length >=2\">\r\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"> <span>Select\r\n                  Store : </span></div>\r\n              <div class=\"store-selector\">\r\n                <select id=\"storeDropdown\" [(ngModel)]=\"selectedStore\" class=\"form-select\"\r\n                  (ngModelChange)=\"getMetalPrice()\">\r\n                  <option [ngValue]=\"null\" disabled>Choose a store...</option>\r\n                  <option *ngFor=\"let store of stores;\" [ngValue]=\"store\">\r\n                    {{store.name}} - {{store.storeRefId}}\r\n                  </option>\r\n                </select>\r\n              </div>\r\n            </div>\r\n            <div class=\"staff-selector w-50  align-items-center gap-1\" *ngIf=\"staffMembers.length >= 2\">\r\n              <div class=\"w-100 h-100 d-flex justify-content-start align-items-center\"><span>Select\r\n                  Staff Member : </span></div>\r\n              <select id=\"staffDropdown\" [(ngModel)]=\"selectedStaff\" class=\"form-select\">\r\n                <option value=\"\" disabled>Choose a staff member...</option>\r\n                <option *ngFor=\"let staff of staffMembers;\" [ngValue]=\"staff\">\r\n                  {{staff.name}} - {{staff.role ? staff.role : 'staff' }}\r\n                </option>\r\n              </select>\r\n            </div>\r\n          </div>\r\n          <div class=\"terms-and-condition\">\r\n            <input type=\"checkbox\" [(ngModel)]=\"termsAndCondition\">I agree to <a (click)=\"scrollDown()\">Terms &\r\n              Conditions</a>\r\n          </div>\r\n          <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\" simpoButtonDirective\r\n            [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\" [sectionId]=\"data?.id\"\r\n            [id]=\"data?.id+getButtonId(0)\" (click)=\"enrollScheme(schemeDetails)\">\r\n            <span *ngIf=\" !enrollButtonLoader\">Enroll in Scheme</span>\r\n            <ng-container *ngIf=\"enrollButtonLoader\">\r\n              <div class=\"d-flex align-items-center justify-content-center\">\r\n                <div class=\"spinner\"><mat-spinner class=\"w-100 h-100\"></mat-spinner></div>\r\n                Loading...\r\n              </div>\r\n            </ng-container>\r\n          </button>\r\n        </div>\r\n        <!-- <div *ngIf=\"selectedScheme === 'group'\" class=\"scheme-results\">\r\n                <div class=\"d-flex align-items-center mb-3\">\r\n                    \u2B50 <h6 class=\"mb-0 group-results-title\">Group Scheme Results</h6>\r\n                </div>\r\n\r\n                <div class=\"row mb-3\">\r\n                    <div class=\"col-6\">\r\n                        <div class=\"result-card text-center p-3 border rounded\">\r\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                            <div class=\"result-label text-muted small\">Your Total 11-Month Contribution</div>\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"col-6\">\r\n                        <div class=\"result-card result-card-group text-center p-3 border rounded\">\r\n                            <div class=\"result-amount fw-bold fs-5\">\u20B9{{(monthlyAmount * 11) | number}}</div>\r\n                            <div class=\"result-label small opacity-75\">Monthly Lucky Draw Amount</div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n\r\n                <button class=\"enroll-btn w-100 py-3 fw-bold mb-2\" [appButtonEditor]=\"edit ?? false\"\r\n                    simpoButtonDirective [buttonStyle]=\"getButtonStyle(0)\" [buttonId]=\"getButtonId(0)\"\r\n                    [sectionId]=\"data?.id\" [id]=\"data?.id+getButtonId(0)\" [buttonData]=\"getButtonData(0)\">\r\n                    Enroll in Scheme\r\n                </button>\r\n            </div> -->\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n</ng-template>\r\n<ng-template #faqTemplate>\r\n  <section class=\"faq-section d-flex align-items-center justify-content-center\">\r\n    <div class=\"faq-container\">\r\n      <h1 class=\"faq-title\">Frequently Asked Questions</h1>\r\n      <p class=\"faq-subtitle\">Everything you need to know about our Group Investment Scheme</p>\r\n      <div class=\"d-flex justify-content-center align-items-center w-100\">\r\n        <div class=\"faq-list\">\r\n          <div class=\"faq-item\" *ngFor=\"let faq of faqList ?? []\" (click)=\"faq.showAnswer = !faq.showAnswer\">\r\n            <div class=\"faq-question\">\r\n              <span>{{faq?.question ? faq?.question : 'N/A'}}</span>\r\n              <mat-icon *ngIf=\"faq.showAnswer\">keyboard_arrow_up</mat-icon>\r\n              <mat-icon *ngIf=\"!faq.showAnswer\">keyboard_arrow_down</mat-icon>\r\n            </div>\r\n            <div class=\"faq-answer\" *ngIf=\"faq.showAnswer\">\r\n              <p>{{faq?.answer ? faq?.answer :'N/A' }}</p>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #termsAndConditions>\r\n  <section class=\"terms-section d-flex align-items-center justify-content-center\" id=\"termsAndCondition\">\r\n    <div class=\"terms-container d-flex align-items-center justify-content-center flex-column\">\r\n      <h1 class=\"terms-title\">Terms and Conditions</h1>\r\n\r\n      <div class=\"terms-content\">\r\n        <div class=\"term-item d-flex align-items-center\"\r\n          *ngFor=\"let key of getKeys(schemeDetails?.termsAndConditions); let i = index\">\r\n          <div class=\"terms_count\">\r\n            <h3 class=\"term-heading\">{{ key }}.</h3>\r\n          </div>\r\n          <div>\r\n            <p class=\"term-text mb-0\">\r\n              {{ schemeDetails?.termsAndConditions?.[key]?.replaceAll('\\n',' ') || 'N/A' }}\r\n            </p>\r\n          </div>\r\n        </div>\r\n\r\n        <!-- <div class=\"important-note\">\r\n                    <p><strong>Important:</strong> These terms and conditions are subject to change with prior notice.\r\n                        Participants will be notified of any changes via registered email or SMS. Continued\r\n                        participation after notification constitutes acceptance of revised terms.</p>\r\n                </div> -->\r\n      </div>\r\n    </div>\r\n  </section>\r\n</ng-template>\r\n<ng-template #showCharges>\r\n  <div class=\"payment-dialog\">\r\n    <div class=\"dialog-header\">\r\n      <h2>Payment Details</h2>\r\n      <button class=\"close-btn\" mat-icon-button (click)=\"closeDialog('FAIL')\">\r\n        <mat-icon>close</mat-icon>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"payment-content\">\r\n      <div class=\"payment-row\">\r\n        <span class=\"label\">Installment Amount:</span>\r\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\r\n          (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\r\n      </div>\r\n\r\n      <div class=\"payment-row\">\r\n        <span class=\"label\">Convenience Fee:</span>\r\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\r\n          (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\r\n      </div>\r\n\r\n      <div class=\"payment-row\">\r\n        <span class=\"label\">Payment Service Charges:</span>\r\n        <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\r\n          (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\r\n      </div>\r\n\r\n      <div class=\"payment-row total-row\">\r\n        <span class=\"label total-label\">Total Amount:</span>\r\n        <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\r\n          (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"dialog-actions\">\r\n      <button class=\"continue-btn\" (click)=\"closeDialog('SUCCESS')\">Continue</button>\r\n    </div>\r\n  </div>\r\n</ng-template>", styles: ["*{font-family:var(--website-font-family)}mat-icon{font-family:Material Icons!important}.p-5{padding:2% 5%!important}.text_header{font-size:50px;font-weight:bolder;color:orange}.calc_header{gap:1rem;padding-bottom:4%}.calc_header span{font-size:23px;font-weight:700}.calc_desc{font-size:17px;text-align:center;padding:0% 23%}.desc_text{font-size:17px;padding:0% 20%;line-height:1.5rem;text-align:center}.sub-header-text{font-weight:500}.slider-container{padding:0 12px}.slider-labels{margin-top:10px;font-size:14px}.random_options{padding:0% 1%}.option{padding:.5% 2%;border:1px solid rgba(227,66,255,.1);border-radius:50px;background:#3a00441a}.calculator_section{padding:2%;width:65vw;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;border-radius:16px}.scheme-results{background:#fff9e9;border-radius:8px;padding:20px}.individual-results-title{color:#d4a574;font-weight:600}.result-card{background:#fff;transition:all .3s ease;border:1px solid #e9ecef!important}.add_icon,.total_icon{padding:.3% 1%;background:#fff;border-radius:50px}.w-15{width:15vw}.result-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.result-card-highlight{color:#fff}.result-card-group{background:#d63384;color:#fff}.result-amount{color:#333;font-size:18px;margin-bottom:8px}.result-card-highlight .result-amount,.result-card-group .result-amount{color:#fff}.result-label{font-size:12px;font-weight:500}.enroll-btn{font-size:16px;border:1px solid}.faq-container{border-radius:16px;padding:40px 0;width:65vw}.faq-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:12px}.faq-subtitle{font-size:1.1rem;color:#718096;text-align:center;margin-bottom:40px;font-weight:400}.faq-list{display:flex;flex-direction:column;gap:12px;width:80%}.faq-item{border:1px solid #e2e8f0;border-radius:12px;background:#fff;overflow:hidden;transition:all .3s ease}.faq-item:hover{border-color:#cbd5e0;box-shadow:0 2px 4px #0000000d}.faq-question{padding:20px 24px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:500;font-size:1.05rem;color:#2d3748;transition:color .2s ease}.faq-item:hover{box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014}.faq-question:hover span{color:#d4a574;text-decoration:underline}.faq-icon{width:20px;height:20px;color:#718096;transition:transform .3s ease;flex-shrink:0}.faq-item.active .faq-icon{transform:rotate(180deg)}.faq-answer{transition:.3s ease,padding .3s ease;padding:0% 2%}.faq-item.active .faq-answer{max-height:200px;padding:0 24px 20px}.faq-answer p{color:#4a5568;font-size:.95rem;line-height:1.6;margin-top:0}.terms-container{width:65vw}.terms-title{font-size:1.8rem;font-weight:700;color:#2d3748;text-align:center;margin-bottom:40px;letter-spacing:-.02em}.terms-content{display:flex;flex-direction:column;gap:32px;box-shadow:0 1px 2px #0000000f,0 4px 12px #00000014;padding:20px;border-radius:16px;width:80%}.term-item{padding-bottom:8px;border-bottom:1px solid #e2e8f0;gap:10px}.term-heading{margin:0!important}.term-item:last-of-type{border-bottom:none;padding-bottom:unset}.term-heading{font-size:1.15rem;font-weight:600;color:#1a202c;letter-spacing:-.01em}.term-text{font-size:.95rem;color:#4a5568}.important-note{background:#f7fafc;border:1px solid #e2e8f0;border-radius:8px;padding:20px;margin-top:16px}.important-note p{font-size:.9rem;color:#2d3748;line-height:1.6;margin:0}.important-note strong{color:#1a202c;font-weight:600}.footer-note{text-align:center;margin-top:24px;padding-top:16px}.footer-note p{font-size:.85rem;color:#718096;font-style:italic}.payment-dialog{background:#fff;border-radius:12px;padding:0;max-width:400px;width:25vw;box-shadow:0 8px 32px #0000001a}.dialog-header{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 16px;border-bottom:1px solid #f0f0f0}.dialog-header h2{margin:0;font-size:20px;font-weight:500;color:#333;white-space:nowrap}.close-btn{background:none;border:none;padding:4px;cursor:pointer;color:#666;display:flex;align-items:center;width:fit-content!important;justify-content:center}.close-btn:hover{background-color:#f5f5f5;border-radius:50%}.payment-content{padding:24px}.payment-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.payment-row .label{color:#000!important;font-size:16px}.bonus-message{border:1px solid #ffeaa7;border-radius:8px;padding:12px;margin:15px 0;gap:25px}.store_selection span{color:#d4a574;font-weight:700}.store-selector{width:100%;margin:5px 0}.store-selector label{display:block;font-weight:600;margin-bottom:8px}.store-selector .form-select{width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease;min-width:315px}.store-selector .form-select:focus{outline:none;border-color:#007bff;box-shadow:0 0 0 3px #007bff1a}.store-selector .form-select:hover{border-color:#bbb}.store-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #007bff}.store-selector .selected-info p{margin:0;font-size:14px;color:#495057}.staff-selector label{display:block;color:#333;white-space:nowrap}.staff-selector span{color:#d4a574;font-weight:700}.staff-selector .form-select{margin:5px 0;width:100%;padding:10px 12px;border:2px solid #ddd;border-radius:6px;font-size:14px;background-color:#fff;cursor:pointer;transition:border-color .3s ease}.staff-selector .form-select:focus{outline:none;border-color:#28a745;box-shadow:0 0 0 3px #28a7451a}.staff-selector .form-select:hover{border-color:#bbb}.staff-selector .selected-info{padding:10px;background-color:#f8f9fa;border-radius:4px;border-left:4px solid #28a745}.staff-selector .selected-info p{margin:0;font-size:14px;color:#495057}.payment-row:last-child{margin-bottom:0}.amount{color:#333;font-size:14px;font-weight:500}.total-row{border-top:1px solid #f0f0f0;padding-top:16px;margin-top:8px}.total-label,.total-amount{color:#333;font-weight:600;font-size:16px}.dialog-actions{padding:0 24px 24px}.continue-btn{width:100%;background-color:#dc3545;color:#fff;border:none;border-radius:8px;padding:12px 24px;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .2s ease}.continue-btn:hover{background-color:#c82333}.continue-btn:active{background-color:#bd2130}@media (min-width :320px) and (max-width : 480px){.calc_desc,.desc_text{padding:0%}.random_options{margin-top:1rem}.hero-section{max-height:unset!important}.hero-section .container{padding:0!important}.p-5{padding:2% 0%!important}.sub-header{margin:.5rem 0px!important}.calculator_section{width:100%}.gold-purity{flex-wrap:wrap}.option{font-size:13px;white-space:nowrap}}@media (max-width: 768px){.terms-section{width:100%}.terms-container{padding:30px 0;width:100%}.terms-title{font-size:1.8rem;margin-bottom:30px}.terms-content{gap:24px;width:100%}.term-heading{font-size:1.1rem}.term-text{font-size:.9rem;text-align:left}.important-note{padding:16px}.faq-container,.faq-section,.faq-list{width:100%}}@media (min-width:475px){.terms-section{padding:0%!important}.card-container{width:31%;height:13vh;align-items:center}.calc_amount{font-size:1.5rem}}.bonus-message{flex-direction:column!important}.bonus-message :is(.staff-selector,.store_selection){width:100%!important}.redeem_info_section{text-align:center}.gold-purity{padding-left:1rem;padding-bottom:15px;display:flex;gap:15px}.gold-purity .purity{display:flex;gap:10px;background:#fff7d0;width:max-content;padding:5px 8px;border-radius:11px;align-items:center}.gold-purity .purity img{height:40px}.gold-purity .purity div{font-size:12px}.gold-purity .purity .gold-price{font-weight:700}.enrolled-gram{margin-bottom:0;font-size:17px;font-weight:600}.monthly-scheme{display:flex;justify-content:space-between}.color-white{color:#fff}.terms-and-condition{display:flex;align-items:center;gap:10px;margin-bottom:10px}.terms-and-condition input{cursor:pointer}.terms-and-condition :is(.store-selector,.form-select){min-width:unset!important}a{color:#0d6efd!important;text-decoration:underline!important;cursor:pointer}.f-16{font-size:16px}a:hover{color:#0a58ca!important}.ans_section{border:none}.plan_desc_section{padding:3% 0%}.hero-title{font-size:4rem;font-weight:900;line-height:1.1;color:#2c3e50}.title-highlight{background:linear-gradient(135deg,#d4a574,#e8c5a0,#f4d2a7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:700;text-align:center}.hero-description{font-size:1.1rem;color:#666;line-height:1.6}.price-highlight{color:#d4a574;font-weight:700}.jewellery-img{border-radius:20px;box-shadow:0 20px 40px #0000001a;object-fit:cover;height:500px}\n"] }]
        }], ctorParameters: () => [{ type: i1.ActivatedRoute }, { type: i2.RestService }, { type: i3.StorageServiceService }, { type: i4.MatDialog }, { type: i1.Router }, { type: i5.EventsService }, { type: i6.MessageService }], propDecorators: { data: [{
                type: Input
            }], index: [{
                type: Input
            }], edit: [{
                type: Input
            }], showChargesTemplate: [{
                type: ViewChild,
                args: ['showCharges', { static: true }]
            }], getScreenSize: [{
                type: HostListener,
                args: ['window:resize', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 