import { Component, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';
import { MatIcon } from '@angular/material/icon';
import { CommonModule } from '@angular/common';
import { MatProgressSpinner } from "@angular/material/progress-spinner";
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MessageService } from 'primeng/api';
import { ToastModule } from 'primeng/toast';
import * as i0 from "@angular/core";
import * as i1 from ".././../../services/storage.service";
import * as i2 from ".././../../services/rest.service";
import * as i3 from "@angular/material/dialog";
import * as i4 from ".././../../services/events.service";
import * as i5 from "@angular/router";
import * as i6 from "primeng/api";
import * as i7 from "@angular/common";
import * as i8 from "primeng/toast";
export class SchemeDetailsComponent {
    constructor(storageService, restService, matDialog, _eventService, router, messageService) {
        this.storageService = storageService;
        this.restService = restService;
        this.matDialog = matDialog;
        this._eventService = _eventService;
        this.router = router;
        this.messageService = messageService;
        this.gotoSchemeOverview = new EventEmitter();
        this.redeemRequestLoader = false;
        this.paidMonth = 0;
        this.goldDeducted = 0;
        this.paymentData = [];
        this.paymentLoader = false;
        this.confirmBtnLoader = false;
        this.slabDetails = [];
    }
    ngOnInit() {
        this.styles = this.data?.styles;
        this.getPaymentScheme();
        this.getScreenSize();
        this.calculateEnrollmentFee();
    }
    getScreenSize(event) {
        this.screenWidth = window.innerWidth;
    }
    getPaymentScheme() {
        this.schemeDetails.schemePayments.forEach((payment) => {
            this.paymentData.push(payment);
            // if (payment.paymentStatus != 'PAID') {
            //   this.paymentData.push(payment);
            // }
        });
        console.log(this.paymentData);
    }
    getDueDate(paymentDate) {
        if (!paymentDate)
            return null;
        const dueDate = new Date(paymentDate); // Add 2 days to get due date
        const today = new Date();
        // Strip time for accurate day comparison
        dueDate.setHours(0, 0, 0, 0);
        today.setHours(0, 0, 0, 0);
        // Calculate difference in milliseconds, then convert to days
        const diffTime = dueDate.getTime() - today.getTime();
        const diffDays = Math.round(diffTime / (1000 * 60 * 60 * 24));
        return diffDays;
    }
    closeDialog() {
        this.matDialog.closeAll();
    }
    payDuePayment(passBook) {
        if (this.schemeDetails?.passBookStatus == 'REDEEMED') {
            this.messageService.add({ severity: 'error', summary: 'Redeemed', detail: 'Scheme Plan already redeemed you cannot pay' });
            return;
        }
        this.paymentLoader = 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: this.schemeDetails?.schemeId,
            schemeName: this.schemeDetails?.schemeName,
            earlyRedemptionCharge: this.schemeDetails?.enrollmentFees,
            installmentAmount: this.schemeDetails?.installmentAmount,
            storeRefId: this.schemeDetails?.schemeRepresentativeId,
            storeId: this.schemeDetails?.storeId,
            storeName: this.schemeDetails?.storeName,
            maturityCount: this.schemeDetails?.maturityCount,
            jewellerBenefit: this.schemeDetails?.jewellerBenefit,
            dueMonths: this.schemeDetails?.maturityCount,
            businessId: this.schemeDetails?.businessId,
            businessName: this.schemeDetails?.businessName,
            enableEarlyRedemption: this.schemeDetails?.enableEarlyRedemption,
            redemptionSlabList: this.schemeDetails?.redemptionSlabList,
            schemeType: this.schemeDetails?.schemeType,
            metalType: this.schemeDetails?.metalType,
            karatType: this.schemeDetails?.karatType,
            passBookId: this.schemeDetails?.id,
            passBookTransactionId: passBook?.transactionId,
            customerAccount: ""
        };
        this.restService.enrollScheme(payload, true).subscribe({
            next: (response) => {
                if (response.data.cashfreeResponse != null) {
                    this.continuePayment(payload);
                }
                else {
                    this.storeCharges = response.data.cart;
                    let dialog = this.matDialog.open(this.showChargesTemplate, {
                        panelClass: 'show-charges-class'
                    });
                    dialog.afterClosed().subscribe(() => {
                        this.continuePayment(payload);
                    });
                }
            },
            error: (err) => {
                if (err?.error === 'Forbidden' && err?.status === 403) {
                    this.restService.generateToken(localStorage.getItem('businessId'), userDetails?.userId).subscribe({
                        next: (res) => {
                            this.storageService.setToken(res.data.refreshToken);
                            this.continuePayment(payload);
                        },
                        error: (error) => {
                        }
                    });
                }
            }
        });
    }
    continuePayment(payload) {
        this.restService.enrollScheme(payload, false).subscribe({
            next: (response) => {
                this.paymentLoader = false;
                localStorage.setItem('passbookOrderId', response.data.orderId);
                this.openCashfreeSdk(response.data.sessionId);
            },
            error: (error) => {
                this.paymentLoader = false;
                console.log(error);
            }
        });
    }
    openCashfreeSdk(sessionId) {
        this._eventService.cashFreeEvent.emit({ data: { orderSignature: sessionId } });
    }
    showBenefitSlab() {
        let dialog = this.matDialog.open(this.slabListTemplate, {
            panelClass: 'show-charges-class'
        });
        if (this.schemeDetails?.redemptionSlabList) {
            this.getvalidSlabList();
        }
        dialog.afterClosed().subscribe((res) => {
            this.getAllSchemes();
        });
    }
    getAllSchemes() {
        let userDetails = this.storageService.getUser();
        let userId = userDetails?.userId;
        this.restService.getAllSchemes(userId, this.schemeDetails?.storeId).subscribe((response) => {
            const scheme = response?.data?.filter((scheme) => scheme.id === this.schemeDetails?.id);
            if (scheme) {
                this.schemeDetails = scheme[0];
            }
        });
    }
    confirmRequest() {
        this.redeemRequestLoader = true;
        this.restService.requestRedeemption(this.schemeDetails?.id).subscribe({
            next: (response) => {
                if (response) {
                    this.redeemRequestLoader = false;
                    this.schemeDetails.passBookStatus = 'REDEEM_REQUESTED';
                    this.closeDialog();
                }
            },
            error: (error) => {
                this.redeemRequestLoader = false;
                console.error("Error fetching benefit slabs:", error);
            }
        });
    }
    getvalidSlabList() {
        this.restService.getBenefitSlab(this.schemeDetails?.id).subscribe({
            next: (response) => {
                if (response) {
                    this.slabDetails = response.data;
                }
            },
            error: (error) => {
                console.error("Error fetching benefit slabs:", error);
            }
        });
    }
    goBack() {
        this.gotoSchemeOverview.emit();
    }
    calculateGoldDeduction() {
        this.goldDeducted = Number((this.schemeDetails?.earlyRedemptionCharge / this.metalPrice?.price).toFixed(2));
    }
    calculateEnrollmentFee() {
        let lastPaid;
        for (let payment of this.schemeDetails?.schemePayments ?? []) {
            if (payment.paymentStatus === 'PAID') {
                this.paidMonth++;
                lastPaid = payment;
            }
        }
        let todayDate = new Date();
        let lastPaidDate = new Date(lastPaid.paidDate);
        let enrollmentDate = new Date(this.schemeDetails.enrollmentDate);
        if (lastPaidDate.getMonth() == todayDate.getMonth() && todayDate.getDate() < enrollmentDate.getDate()) {
            lastPaid--;
        }
    }
    get isMobile() {
        return window.innerWidth <= 475;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, deps: [{ token: i1.StorageServiceService }, { token: i2.RestService }, { token: i3.MatDialog }, { token: i4.EventsService }, { token: i5.Router }, { token: i6.MessageService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: SchemeDetailsComponent, isStandalone: true, selector: "simpo-scheme-details", inputs: { schemeDetails: "schemeDetails", data: "data", metalPrice: "metalPrice" }, outputs: { gotoSchemeOverview: "gotoSchemeOverview" }, host: { listeners: { "window:resize": "getScreenSize($event)" } }, providers: [MessageService], viewQueries: [{ propertyName: "showChargesTemplate", first: true, predicate: ["showCharges"], descendants: true, static: true }, { propertyName: "slabListTemplate", first: true, predicate: ["showSlab"], descendants: true, static: true }], ngImport: i0, template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"w-100 h-100\">\n    <!-- Header -->\n    <div class=\"header\">\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\n            </div>\n            <h1>Passbook Details</h1>\n        </div>\n        <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\n            [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\n            *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\n    </div>\n\n    <!-- Amount Card -->\n    <div class=\"d-flex justify-content-between amount-card-section\">\n        <div class=\"w-100\">\n            <div class=\"amount-card\">\n                <div class=\"top-dashboard\">\n                  <div class=\"amount-info\">\n                    <div class=\"coin-icon\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                    </div>\n                    <div class=\"amount-details\">\n                        <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\n                        <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\n                    </div>\n                  </div>\n                  <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                      <div class=\"coin-icon\"><img\n                              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                      </div>\n                      <div class=\"amount-details\">\n                          <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\n                          <p>Accumulated Gold</p>\n                      </div>\n                  </div>\n                </div>\n            </div>\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\n                <div class=\"details_tab\">\n                    <div class=\"section-header\">\n                        <h3>Passbook Details</h3>\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\n                            schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\n                    </div>\n\n                    <div class=\"scheme-info\">\n                        <div class=\"scheme-name\">\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</span>\n                        </div>\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\n                            'N/A'}}\n                            Monthly</div>\n                    </div>\n\n                    <div class=\"dates-grid\">\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Scheme started on</span>\n                                <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\n                                    (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Maturity Date</span>\n                                <span class=\"date-value\">{{schemeDetails?.maturityDate ?\n                                    (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"completion-info\">\n                            <span class=\"completion-label\">Completed EMIs</span>\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ?\n                                (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\n                                0}} out\n                                of {{schemeDetails?.schemePayments?.length}}</span>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div class=\"enrollment-card\">\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Name</span>\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\n                            schemeDetails?.schemeName :'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Code</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Maturity Date</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\n                    </div>\n                 <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Enrollment Id</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\n                    </div>\n                </div> -->\n            </div>\n        </div>\n        <!-- <div class=\"quick-actions\">\n            <h3>Quick Actions</h3>\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\n                </div>\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\n            </div>\n\n            <button class=\"enroll-btn\"><img\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\n                New Scheme</button>\n        </div> -->\n    </div>\n\n    <!-- Scheme Details Section -->\n    <div class=\"scheme-details\">\n        <div class=\"section d-flex-flex-column gap-2\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Installments</h2>\n            </div>\n            <div class=\"payment-list d-flex flex-column gap-2\">\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\n                        <div class=\"payment-item\">\n                            <div class=\"payment-info\">\n                                <div class=\"payment-icon upcoming\"><img\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\n                                </div>\n                                <div class=\"payment-details\">\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\n                                        'N/A'}}</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\n                                    <!-- |\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\n                                </div>\n                            </div>\n                            <div class=\"payment-amount\">\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\n                                    payment.dueAmount :\n                                    'N/A'}}</div>\n                                <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\n                                    *ngIf=\"payment?.paymentStatus != 'DUE'\">\n                                    Paid\n                                </div>\n                                <div class=\"payment-status pay-now-btn cursor-pointer\"\n                                    *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\n                                    <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\n                                    <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-template #showCharges>\n                    <div class=\"payment-dialog\">\n                        <div class=\"dialog-header\">\n                            <h2>Payment Details</h2>\n                            <button class=\"close-btn\" mat-icon-button>\n                                <mat-icon>close</mat-icon>\n                            </button>\n                        </div>\n\n                        <div class=\"payment-content\">\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Installment Amount:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n                                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Convenience Fee:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n                                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Payment Service Charges:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n                                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Gold Allocate:</span>\n                                <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\n                            </div>\n\n                            <div class=\"payment-row total-row\">\n                                <span class=\"label total-label\">Total Amount:</span>\n                                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n                                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n                            </div>\n                        </div>\n\n                        <div class=\"dialog-actions\">\n                            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #showSlab>\n                    <div class=\"main_section\">\n                        <div class=\"slab_header d-flex justify-content-between align-items-center\">\n                            Confirm Redeem Request\n                            <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n                        </div>\n                        <div class=\"main_body\">\n                            <div class=\"container\">\n                                <div class=\"card\">\n                                    <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</div>\n                                    <div class=\"info-row\">\n                                        <span>Plan started on</span>\n                                        <span class=\"value\">{{schemeDetails.createdTimestamp ?\n                                            (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Monthly Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\n                                            schemeDetails?.installmentAmount : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Enrollment Fee</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Gold Deducted</span>\n                                        <span class=\"value\">{{goldDeducted}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold after Deduction</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Redeem Amount</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\n                                    </div>\n                                </div>\n\n                                <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\n                                    <div class=\"card-title center\">Benefits You Will Get</div>\n                                    <div class=\"info-row\">\n                                        <span>Installments Paid:</span>\n                                        <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\n                                            (schemeDetails?.schemePayments?.length -\n                                            schemeDetails?.dueMonths) : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Slab:</span>\n                                        <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\n                                            :\n                                            'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\n                                            months</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Percentage:</span>\n                                        <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\n                                            slabDetails[0].benefitPercentage : 'N/A'}}%</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Amount:</span>\n                                        <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\n                                            slabDetails[0]?.benefitAmount : 'N/A'}}</span>\n                                    </div>\n                                </div>\n\n                                <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\n                                    *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\n                                <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\n                                    <mat-spinner></mat-spinner>\n                                    Requesting..\n                                </button>\n                            </div>\n\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #noPayments>\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\n                        <span>No Upcoming Payments</span>\n                    </div>\n                </ng-template>\n            </div>\n        </div>\n        <div class=\"tabs\">\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\n        </div>\n        <div class=\"transactions\">\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\n                    <div class=\"transaction-status paid\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\n                    </div>\n                    <div class=\"transaction-details\">\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\n                        </h4>\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\n                            'N/A'}}\n                        </p>\n                    </div>\n                    <div class=\"transaction-amount\">\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.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}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.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}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i7.DecimalPipe, name: "number" }, { kind: "pipe", type: i7.DatePipe, name: "date" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "ngmodule", type: ToastModule }, { kind: "component", type: i8.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SchemeDetailsComponent, decorators: [{
            type: Component,
            args: [{ selector: 'simpo-scheme-details', standalone: true, imports: [MatIcon, CommonModule, MatProgressSpinner, MatProgressSpinnerModule, ToastModule], providers: [MessageService], template: "<p-toast position=\"bottom-right\" [baseZIndex]=\"10000000000\" [autoZIndex]=\"true\"\n    [showTransformOptions]=\"isMobile ? 'translateY(-100%)' : ''\"></p-toast>\n\n<div class=\"w-100 h-100\">\n    <!-- Header -->\n    <div class=\"header\">\n        <div class=\"header_left d-flex justify-content-between align-items-center\">\n            <div class=\"back-btn d-flex align-items-center\" (click)=\"goBack()\"><mat-icon>keyboard_backspace</mat-icon>\n            </div>\n            <h1>Passbook Details</h1>\n        </div>\n        <div class=\"redeem_request cursor-pointer\" [style.borderColor]=\"styles?.background?.accentColor\"\n            [style.color]=\"styles?.background?.accentColor\" (click)=\"showBenefitSlab()\"\n            *ngIf=\"schemeDetails?.passBookStatus == 'ACTIVE'\">Raise Redeem Request</div>\n    </div>\n\n    <!-- Amount Card -->\n    <div class=\"d-flex justify-content-between amount-card-section\">\n        <div class=\"w-100\">\n            <div class=\"amount-card\">\n                <div class=\"top-dashboard\">\n                  <div class=\"amount-info\">\n                    <div class=\"coin-icon\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                    </div>\n                    <div class=\"amount-details\">\n                        <h2>\u20B9{{schemeDetails?.totalPaidAmount ? schemeDetails?.totalPaidAmount : '0'}}</h2>\n                        <p>{{schemeDetails.schemeType === 'GOLD_PROTECTION' ? 'Deposited Amount' : 'Total Available Scheme Amount'}}</p>\n                    </div>\n                  </div>\n                  <div class=\"amount-info\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                      <div class=\"coin-icon\"><img\n                              src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/133984c1753444589570Group 1707483606.svg\">\n                      </div>\n                      <div class=\"amount-details\">\n                          <h2>{{schemeDetails?.totalInvestedMetal}} gms</h2>\n                          <p>Accumulated Gold</p>\n                      </div>\n                  </div>\n                </div>\n            </div>\n            <div class=\"d-flex align-items-start justify-content-around scheme-section\">\n                <div class=\"details_tab\">\n                    <div class=\"section-header\">\n                        <h3>Passbook Details</h3>\n                        <span class=\"redeem-requested\">{{schemeDetails?.passBookStatus ?\n                            schemeDetails?.passBookStatus?.replaceAll('_', ' ') : 'N/A'}}</span>\n                    </div>\n\n                    <div class=\"scheme-info\">\n                        <div class=\"scheme-name\">\n                            <span class=\"label\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</span>\n                        </div>\n                        <div class=\"scheme-id\">\u20B9{{schemeDetails?.installmentAmount ? schemeDetails?.installmentAmount :\n                            'N/A'}}\n                            Monthly</div>\n                    </div>\n\n                    <div class=\"dates-grid\">\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Scheme started on</span>\n                                <span class=\"date-value\">{{schemeDetails?.createdTimestamp ?\n                                    (schemeDetails?.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"date-item\">\n                            <div class=\"date-icon\">\uD83D\uDCC5</div>\n                            <div class=\"date-info\">\n                                <span class=\"date-label\">Maturity Date</span>\n                                <span class=\"date-value\">{{schemeDetails?.maturityDate ?\n                                    (schemeDetails?.maturityDate | date:'mediumDate') : 'N/A' }}</span>\n                            </div>\n                        </div>\n                        <div class=\"completion-info\">\n                            <span class=\"completion-label\">Completed EMIs</span>\n                            <span class=\"completion-value\">{{schemeDetails.dueMonths ?\n                                (schemeDetails?.schemePayments?.length-schemeDetails.dueMonths) :\n                                0}} out\n                                of {{schemeDetails?.schemePayments?.length}}</span>\n                        </div>\n                    </div>\n                </div>\n                <!-- <div class=\"enrollment-card\">\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Name</span>\n                        <span class=\"enrollment-value\">{{schemeDetails?.schemeName ?\n                            schemeDetails?.schemeName :'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Group Code</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentGroup?.pwcGroupId ?\n                            schemeDetails.enrollmentGroup.pwcGroupId : 'N/A' }}</span>\n                    </div>\n\n                    <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Maturity Date</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.maturityDate ? (schemeDetails.maturityDate | date\n                            : 'dd-MM-yyyy') : 'N/A'}}</span>\n                    </div>\n                 <div class=\"enrollment-row\">\n                        <span class=\"enrollment-label\">Enrollment Id</span>\n                        <span class=\"enrollment-value\">{{schemeDetails.enrollmentId ? schemeDetails.enrollmentId : 'N/A'}}</span>\n                    </div>\n                </div> -->\n            </div>\n        </div>\n        <!-- <div class=\"quick-actions\">\n            <h3>Quick Actions</h3>\n            <div class=\"actions d-flex flex-column justify-content-evenly\">\n                <div class=\"action-item d-flex align-items-center mb-2\">Make Due Payments\n                </div>\n                <div class=\"action-item d-flex align-items-center\">Add Nominee</div>\n                <div class=\"action-item d-flex align-items-center\">Download SOA</div>\n            </div>\n\n            <button class=\"enroll-btn\"><img\n                    src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/782673c1753434311903SVG (1).png\"> Enroll\n                New Scheme</button>\n        </div> -->\n    </div>\n\n    <!-- Scheme Details Section -->\n    <div class=\"scheme-details\">\n        <div class=\"section d-flex-flex-column gap-2\">\n            <div class=\"section-header\">\n                <h2 class=\"section-title\">Installments</h2>\n            </div>\n            <div class=\"payment-list d-flex flex-column gap-2\">\n                <ng-container *ngIf=\"paymentData.length;else noPayments\">\n                    <ng-container *ngFor=\"let payment of paymentData;let i = index\">\n                        <div class=\"payment-item\">\n                            <div class=\"payment-info\">\n                                <div class=\"payment-icon upcoming\"><img\n                                        src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/655969c1753438284565Background.svg\">\n                                </div>\n                                <div class=\"payment-details\">\n                                    <h4>{{schemeDetails?.schemeName ? schemeDetails?.schemeName : 'N/A'}}</h4>\n                                    <p>Due Date : {{payment?.dueDate ? (payment?.dueDate | date : 'dd-MM-yyyy') :\n                                        'N/A'}}</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && payment.paymentStatus === 'PAID'\">Gold Allocated : {{payment?.totalInvestedMetal}} gms</p>\n                                    <p *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\">Gold Allocate today : {{payment?.dueAmount / metalPrice?.price}} gms</p>\n                                    <!-- |\n                                        Due by: {{getDueDate(payment?.dueDate)}} days</p> -->\n                                </div>\n                            </div>\n                            <div class=\"payment-amount\">\n                                <div class=\"amount-value\" *ngIf=\"payment?.dueAmount\">\u20B9{{payment?.dueAmount ?\n                                    payment.dueAmount :\n                                    'N/A'}}</div>\n                                <div class=\"paid-btn payment-status d-flex align-items-center justify-content-center\"\n                                    *ngIf=\"payment?.paymentStatus != 'DUE'\">\n                                    Paid\n                                </div>\n                                <div class=\"payment-status pay-now-btn cursor-pointer\"\n                                    *ngIf=\"paymentData[i-1]?.paymentStatus === 'PAID' && payment?.paymentStatus === 'DUE'\" (click)=\"payDuePayment(payment)\">\n                                    <ng-container *ngIf=\"!paymentLoader\">Pay Now</ng-container>\n                                    <ng-container *ngIf=\"paymentLoader\">Loading...</ng-container>\n                                </div>\n                            </div>\n                        </div>\n                    </ng-container>\n                </ng-container>\n                <ng-template #showCharges>\n                    <div class=\"payment-dialog\">\n                        <div class=\"dialog-header\">\n                            <h2>Payment Details</h2>\n                            <button class=\"close-btn\" mat-icon-button>\n                                <mat-icon>close</mat-icon>\n                            </button>\n                        </div>\n\n                        <div class=\"payment-content\">\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Installment Amount:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.installmentAmount ?\n                                    (storeCharges?.breakdown?.installmentAmount | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Convenience Fee:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.convenienceFee?.value ?\n                                    (storeCharges?.breakdown?.convenienceFee?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Payment Service Charges:</span>\n                                <span class=\"amount\">\u20B9{{storeCharges?.breakdown?.paymentServiceCharges?.value ?\n                                    (storeCharges?.breakdown?.paymentServiceCharges?.value | number) : 0 }}</span>\n                            </div>\n\n                            <div class=\"payment-row\">\n                                <span class=\"label\">Gold Allocate:</span>\n                                <span class=\"amount\">{{storeCharges?.breakdown?.installmentAmount / metalPrice?.price}} gms</span>\n                            </div>\n\n                            <div class=\"payment-row total-row\">\n                                <span class=\"label total-label\">Total Amount:</span>\n                                <span class=\"amount total-amount\">\u20B9{{storeCharges?.breakdown?.totalAmount ?\n                                    (storeCharges?.breakdown?.totalAmount | number) : 0 }}</span>\n                            </div>\n                        </div>\n\n                        <div class=\"dialog-actions\">\n                            <button class=\"continue-btn\" (click)=\"closeDialog()\">Continue</button>\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #showSlab>\n                    <div class=\"main_section\">\n                        <div class=\"slab_header d-flex justify-content-between align-items-center\">\n                            Confirm Redeem Request\n                            <mat-icon (click)=\"closeDialog()\">close</mat-icon>\n                        </div>\n                        <div class=\"main_body\">\n                            <div class=\"container\">\n                                <div class=\"card\">\n                                    <div class=\"card-title\">{{schemeDetails?.schemeName ? schemeDetails?.schemeName :\n                                'N/A'}}</div>\n                                    <div class=\"info-row\">\n                                        <span>Plan started on</span>\n                                        <span class=\"value\">{{schemeDetails.createdTimestamp ?\n                                            (schemeDetails.createdTimestamp | date:'mediumDate') : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Monthly Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.installmentAmount ?\n                                            schemeDetails?.installmentAmount : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Amount Paid</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount ?\n                                            schemeDetails?.totalPaidAmount : 'N/A' }}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType !== 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Enrollment Fee</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.earlyRedemptionCharge}}</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION' && paidMonth < schemeDetails?.minRedemptionMonth && schemeDetails?.earlyRedemptionCharge\">\n                                        <span>Gold Deducted</span>\n                                        <span class=\"value\">{{goldDeducted}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\" *ngIf=\"schemeDetails.schemeType === 'GOLD_PROTECTION'\">\n                                        <span>Accumulated gold after Deduction</span>\n                                        <span class=\"value\">{{schemeDetails?.totalInvestedMetal - (paidMonth < schemeDetails?.minRedemptionMonth ? goldDeducted : 0)}} gms</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Total Redeem Amount</span>\n                                        <span class=\"value\">\u20B9{{schemeDetails?.totalPaidAmount - (paidMonth < schemeDetails?.minRedemptionMonth ? schemeDetails?.earlyRedemptionCharge ?? 0 : 0)}}</span>\n                                    </div>\n                                </div>\n\n                                <div class=\"card\" *ngIf=\"slabDetails && slabDetails.length > 0\">\n                                    <div class=\"card-title center\">Benefits You Will Get</div>\n                                    <div class=\"info-row\">\n                                        <span>Installments Paid:</span>\n                                        <span class=\"value\">{{ schemeDetails?.schemePayments?.length ?\n                                            (schemeDetails?.schemePayments?.length -\n                                            schemeDetails?.dueMonths) : 'N/A'}}</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Slab:</span>\n                                        <span class=\"value\">{{slabDetails[0]?.minMonths >= 0 ? slabDetails[0]?.minMonths\n                                            :\n                                            'N/A'}} - {{slabDetails[0]?.maxMonths ? slabDetails[0]?.maxMonths : 'N/A'}}\n                                            months</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Percentage:</span>\n                                        <span class=\"value\">{{slabDetails[0].benefitPercentage >= 0 ?\n                                            slabDetails[0].benefitPercentage : 'N/A'}}%</span>\n                                    </div>\n                                    <div class=\"info-row\">\n                                        <span>Benefit Amount:</span>\n                                        <span class=\"value highlight\">\u20B9{{slabDetails[0]?.benefitAmount >= 0 ?\n                                            slabDetails[0]?.benefitAmount : 'N/A'}}</span>\n                                    </div>\n                                </div>\n\n                                <button class=\"confirm-btn\" (click)=\"confirmRequest()\"\n                                    *ngIf=\"!redeemRequestLoader\">Confirm Request</button>\n                                <button class=\"confirm-btn redeem-request-btn\" *ngIf=\"redeemRequestLoader\">\n                                    <mat-spinner></mat-spinner>\n                                    Requesting..\n                                </button>\n                            </div>\n\n                        </div>\n                    </div>\n                </ng-template>\n                <ng-template #noPayments>\n                    <div class=\"d-flex justify-content-center align-items-center w-100 h-100\">\n                        <span>No Upcoming Payments</span>\n                    </div>\n                </ng-template>\n            </div>\n        </div>\n        <div class=\"tabs\">\n            <button class=\"tab d-flex justify-content-center align-items-center active\">Transactions</button>\n        </div>\n        <div class=\"transactions\">\n            <ng-container *ngFor=\"let transaction of schemeDetails.schemePayments\">\n                <div class=\"transaction-item\" *ngIf=\"transaction.paymentStatus === 'PAID'\">\n                    <div class=\"transaction-status paid\"><img\n                            src=\"https://d2z9497xp8xb12.cloudfront.net/prod-images/484102c1753446573473Group 1707484906.png\">\n                    </div>\n                    <div class=\"transaction-details\">\n                        <h4>{{transaction.emiMonthCount ? transaction.emiMonthCount : 'N/A' }}st Instalment Paid\n                        </h4>\n                        <p>Payment Date : {{transaction.paidDate ? (transaction.paidDate | date : 'dd-MM-yyyy') :\n                            'N/A'}}\n                        </p>\n                    </div>\n                    <div class=\"transaction-amount\">\n                        {{transaction.paidAmount ? ('\u20B9'+transaction.paidAmount) : 'N/A' }}</div>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:#f5f5f5;color:#333}.header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;background-color:#fff;border-bottom:1px solid #e0e0e0}.back-btn{background:none;border:none;font-size:20px;cursor:pointer;padding:7px}.header_left h1{font-size:18px;font-weight:600;flex-grow:1;text-align:center;margin:0 16px}.header-actions{display:flex;gap:8px}.share-btn,.download-btn{font-size:16px;cursor:pointer;padding:9px;border:1px solid lightgrey;border-radius:5px}.details_tab{border:1px solid lightgrey;padding:3%;border-radius:7px;width:62%}.amount-card{background:linear-gradient(90deg,#fffbeb,#fff7ed);margin:16px;padding:20px;border-radius:12px}.amount-info{display:flex;align-items:center;gap:16px}.coin-icon{font-size:32px}.amount-details h2{font-size:24px;font-weight:700;color:#333;margin-bottom:4px}.amount-details p{font-size:14px;color:#666}.scheme-details{padding:0 16px}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.section-title{font-size:18px;font-weight:600}.payment-item{display:flex;align-items:center;justify-content:space-between;padding:16px;border:1px solid #f1f3f4;border-radius:10px;background:#f9fafb}.payment-info{display:flex;align-items:center;gap:12px}.payment-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px}.payment-details h4{font-size:14px;font-weight:600;margin:0}.payment-details span{font-size:12px;color:#666}.payment-amount{text-align:right}.quick-actions{background:#fff;padding:20px;border-radius:12px;border:1px solid #e9ecef;margin:12px 0}.quick-actions h3{font-size:16px;font-weight:600;margin-bottom:16px}.action-item{padding:8px;font-size:14px;color:#666;border:1px solid #f1f3f4;border-radius:9px;white-space:nowrap}.pay-now-btn{background:#10f464}.paid-btn{color:#10f464}.payment-status{font-size:12px;padding:6px;border-radius:4px}.amount-value{font-size:16px;font-weight:600;margin-bottom:4px}.section-header h3{font-size:18px;font-weight:600}.redeem-requested{background-color:#fff3e0;color:#e65100;padding:4px 12px;border-radius:16px;font-size:12px;font-weight:500}.scheme-info{margin-bottom:24px}.scheme-name{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.scheme-name .label{font-size:16px;font-weight:600}.scheme-name .redeem-status{background-color:#e8f5e8;color:#2e7d32;padding:4px 12px;border-radius:16px;font-size:12px}.scheme-id{color:#666;font-size:14px}.dates-grid{display:flex;gap:16px;border-top:1px solid lightgrey;justify-content:space-between;padding-top:11px}.date-item{display:flex;align-items:center;gap:8px}.date-icon{font-size:16px}.date-info{display:flex;flex-direction:column}.date-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.date-value{font-size:11px;font-weight:500}.completion-info{display:flex;flex-direction:column;align-items:flex-start;grid-column:span 2}.completion-label{font-size:10px;color:#666;margin-bottom:2px;white-space:nowrap}.completion-value{font-size:11px;font-weight:500}.tabs{display:flex;border-bottom:1px solid #e0e0e0;margin:20px 0;height:5vh;background:#d3d3d3;align-items:center;padding:0 1%;width:fit-content;border-radius:30px}.tab{background:none;border:none;font-size:10px!important;cursor:pointer;border-bottom:2px solid transparent;color:#666;width:6vw!important;height:80%!important}.tab.active{color:#333;border-radius:30px;font-weight:500;background-color:#fff}.transactions{display:flex;flex-direction:column;gap:16px;padding-bottom:20px}.transaction-item{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid lightgrey;border-radius:8px}.transaction-status{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px}.underline{text-decoration:underline}.transaction-status img{width:100%}.transaction-status.paid{background-color:#4caf50;color:#fff}.transaction-status.due{background-color:#e0e0e0;border:2px solid #bdbdbd}.transaction-details{flex-grow:1}.transaction-details h4{font-size:14px;font-weight:500;margin-bottom:2px}.transaction-details p{font-size:12px;color:#666}.transaction-amount{font-size:16px;font-weight:600}@media (max-width: 480px){.dates-grid{grid-template-columns:1fr}.amount-info{justify-content:space-between}.top-dashboard{flex-direction:column}.completion-info{grid-column:span 1;align-items:flex-start}.header{padding:20px 0}.redeem_request{white-space:nowrap;font-size:.7rem!important}.header_left h1{white-space:nowrap;margin:0 6px}}.scheme-section{flex-direction:column;gap:1rem}.details_tab{width:100%;border-radius:12px}.redeem_request{padding:.3rem .6rem;border-radius:4px;font-weight:700;font-size:14px;border:2px solid}.section{padding:12px!important;max-height:75vh;overflow-y:scroll}.upcoming-status{display:flex;justify-content:center;align-items:center;height:35px;white-space:nowrap}.payment-details p{font-size:12px}.tab{width:22vw!important}.scheme-details{padding:0}.enrollment-card{width:100%!important}.amount-card{margin:0 0 12px}.amount-card-section{flex-direction:column}.actions{height:70%}.enroll-btn{background:#3a0044;color:#fff;padding:12px 24px;border:none;border-radius:8px;cursor:pointer;margin-top:12px;font-size:12px!important;white-space:nowrap;align-items:center}.enrollment-card{background:#fff;border-radius:12px;padding:0 24px;border:1px solid lightgrey;width:30%}.section{background:#fff;border-radius:12px;padding:24px;margin:24px 0;border:1px solid #e9ecef}.enrollment-row{display:flex;justify-content:space-between;align-items:center;padding:10.5px 0;border-bottom:1px solid #f0f0f0}.enrollment-row:last-child{border-bottom:none}.enrollment-label{color:#666;font-size:14px;font-weight:500}.enrollment-value{color:#333;font-size:14px;font-weight:600}.enrollment-value.zero{color:#ef4444}.container{max-width:400px;margin:32px auto;padding:0 16px}.card{background:#fff;border-radius:16px;box-shadow:0 2px 10px #00000012;padding:22px 18px 14px;margin-bottom:18px}.card-title{font-weight:600;color:#222;font-size:1.18rem;margin-bottom:10px}.card-title.center{text-align:center;font-size:1.09rem;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;align-items:center;font-size:.99rem;margin-top:7px;margin-bottom:0}.info-row .value{font-weight:500;color:#212121}.main_section{min-width:35vw}.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}.amount{color:#333;font-size:14px;font-weight:500}.label{color:#666;font-size:14px;font-weight:400}.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}.slab_header{padding:2% 3%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:700;font-size:19px;border-bottom:1px solid lightgrey}.info-row .highlight{border-radius:3px;padding:2px 7px;font-weight:600}.confirm-btn{width:100%;display:block;background:#e22d2f;color:#fff;border:none;outline:none;font-size:1.04rem;font-weight:600;padding:8px 0;border-radius:8px;box-shadow:0 1px 4px #e22d2f33;cursor:pointer;margin-top:18px;letter-spacing:.03em;transition:background .2s}.confirm-btn:hover{background:#c31113}.redeem-request-btn{justify-content:center;display:flex;align-items:center;gap:10px}.redeem-request-btn mat-spinner{height:25px!important;width:25px!important}.top-dashboard{display:flex;justify-content:space-between}\n"] }]
        }], ctorParameters: () => [{ type: i1.StorageServiceService }, { type: i2.RestService }, { type: i3.MatDialog }, { type: i4.EventsService }, { type: i5.Router }, { type: i6.MessageService }], propDecorators: { schemeDetails: [{
                type: Input,
                args: ["schemeDetails"]
            }], data: [{
                type: Input,
                args: ["data"]
            }], metalPrice: [{
                type: Input,
                args: ["metalPrice"]
            }], gotoSchemeOverview: [{
                type: Output
            }], showChargesTemplate: [{
                type: ViewChild,
                args: ['showCharges', { static: true }]
            }], slabListTemplate: [{
                type: ViewChild,
                args: ['showSlab', { static: true }]
            }], getScreenSize: [{
                type: HostListener,
                args: ['window:resize', ['$event']]
            }] } });
//# sourceMappingURL=data:application/json;base64, 