Untitled

mail@pastecode.io avatar
unknown
plain_text
7 months ago
68 kB
0
Indexable
Never
        <!-- Financial Information Input Fields -->
        <div class="table-container-2" style="overflow: hidden;" *ngIf="activeSubTabName === 'Financial Information'">
            <div class="content-container-2">
                <mat-tab-group [selectedIndex]="activeStepIndex" (selectedTabChange)="onStepSelectionChange($event)">
                    <mat-tab label="{{matHead.name}}" *ngFor="let matHead of matTabHeader">
                        <ng-template mat-tab-label>
                            <span [class.tabColor]="activeTabName === matHead.name"
                                style="font-weight: 600;text-shadow:2px 2px rgb(223, 223, 223)">
                                {{matHead.name}}</span>
                        </ng-template>
                    </mat-tab>
                </mat-tab-group>
            </div>
            <div class="btn_content">
                <input prohibitedChars hidden type="file" accept=".pdf" (change)="onFinancialFile($event)" #fileuploads
                    style="display: none;">
                <button style="margin:1rem;float:right;position: absolute;right: 1rem;cursor: pointer;"
                    class="clos-submit-btn" mat-raised-button (click)="fileuploads.click()">
                    <mat-icon>upload</mat-icon>
                    <span>Upload Financial Report</span>
                </button>
            </div>
            <div class="table-container" style="overflow: auto;margin: -4px;float:right;position: absolute;right: 26rem;cursor: pointer;">
                <table>
                    <tr>
                        <td>
                            <mat-select class="min-select" [(ngModel)]="selectedOption" (ngModelChange)="calculateYears();" >
                                <mat-option *ngFor="let range of yearrange" [value]="range">
                                    {{range}}
                                </mat-option>
                            </mat-select>
                        </td>
                        </tr>
                        </table>
                        </div>
            <div style="margin-top: 6.5rem;">
            <!-- Financial Information - Statement SubTab Input Fields  -->
            <ng-container *ngIf="option == 0">
                <div class="flex-container m-3" style="overflow: auto;">
                    <!-- Revenue Expansion Panel -->
                    <div class="flex-item">
                        <mat-expansion-panel expanded="true">
                            <mat-expansion-panel-header style="background-color: whitesmoke;">
                                <mat-panel-title class="header-banner">
                                    <b>Revenue (In Million)</b>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <!-- <div class="scrollable-content"> -->
                            <table>
                                <tr>
                                    <td>Proxy Company</td>
                                    <td>:</td>
                                    <td>
                                        <mat-select [(ngModel)]="applicationDetails.financialProxyCompany" (ngModelChange)="saveApplicationData('financialProxyCompany','string');onProxyCompanyChange($event)" class="min-select" [value]="'No'">
                                            <mat-option value="No">No</mat-option>
                                            <mat-option value="Yes">Yes</mat-option>
                                        </mat-select>
                                    </td>
                                </tr>
                                <!-- Latest Interim Financial Statement -->
                                <tr>
                                    <td>Latest Interim Financial Statement <span style="color:red;">*</span></td>
                                    <td>:
                                        <label for="latestInterimFinancialStatementFileInput">
                                            <input prohibitedChars hidden type="file" #uploadFile1
                                                accept=".xlsx, .xls, .csv, .pdf, .txt, .doc, .docx, .jpg, .jpeg, .png"
                                                (change)="onFilesSelected($event, 'latestInterimFinancialStatement')"
                                                multiple />
                                            <mat-icon (click)="uploadFile1.click();" class="inverted-icon">attach_file
                                            </mat-icon>
                                        </label>
                                    </td>
                                    <td>
                                        <div class="scrollable-content">
                                            <div class="selected-files-container">
                                                <div *ngFor="let fileName of applicationDetails.latestInterimFinancialStatement; let i = index"
                                                    class="selected-file">
                                                    <u (click)="getAttachementFileDownload(fileName.attachmentId)"
                                                        style="color:blue;margin:1rem;">{{fileName.attachmentName}}</u>
                                                    <button mat-icon-button>
                                                        <mat-icon
                                                            (click)="removeAttachment('latestInterimFinancialStatement',i)"
                                                            class="remove-icon">clear</mat-icon>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <textarea placeholder="Remarks" class="min-select"
                                            [(ngModel)]="applicationDetails.latestInterimFinancialStatementUploadsRemarks"
                                            (ngModelChange)="saveApplicationData('latestInterimFinancialStatementUploadsRemarks','string')"></textarea>
                                    </td>
                                </tr>

                                <!-- Financial Statement of Past 5 years -->
                                <tr>
                                    <td style="vertical-align: middle;">Financial Statement of Past 5 years <span
                                            style="color:red;">*</span></td>
                                    <td>:
                                        <label for="financialStatementOfPast5YearsFileInput">
                                            <input prohibitedChars hidden type="file" #uploadFile2
                                                accept=".xlsx, .xls, .csv, .pdf, .txt, .doc, .docx, .jpg, .jpeg, .png"
                                                (change)="onFilesSelected($event, 'financialStatementOfPast5Years')"
                                                multiple />
                                            <mat-icon (click)="uploadFile2.click();" class="inverted-icon">attach_file
                                            </mat-icon>
                                        </label>
                                    </td>
                                    <td>
                                        <div class="scrollable-content">
                                            <div class="selected-files-container">
                                                <div *ngFor="let fileName of applicationDetails.financialStatementOfPast5Years; let i = index"
                                                    class="selected-file">
                                                    <u (click)="getAttachementFileDownload(fileName.attachmentId)"
                                                        style="color:blue;margin:1rem;">{{ fileName.attachmentName
                                                        }}</u>
                                                    <button mat-icon-button>
                                                        <mat-icon
                                                            (click)="removeAttachment('financialStatementOfPast5Years',i)"
                                                            class="remove-icon">clear</mat-icon>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <textarea placeholder="Remarks" class="min-select"
                                            [(ngModel)]="applicationDetails.financialStatementOfPast5YearsUploadsRemarks"
                                            (ngModelChange)="saveApplicationData('financialStatementOfPast5YearsUploadsRemarks','string')"></textarea>
                                    </td>
                                </tr>
                                <!-- Tax returns for the last 3 years -->
                                <tr>
                                    <td>Tax returns for the last 3 years <span style="color:red;">*</span> </td>
                                    <td>:
                                        <label for="taxReturnsForTheLast3YearsFileInput">
                                            <input prohibitedChars hidden type="file" #uploadFile3
                                                accept=".xlsx, .xls, .csv, .pdf, .txt, .doc, .docx, .jpg, .jpeg, .png"
                                                (change)="onFilesSelected($event, 'taxReturnsForTheLast3Years')"
                                                multiple />
                                            <mat-icon (click)="uploadFile3.click();" class="inverted-icon">attach_file
                                            </mat-icon>
                                        </label>
                                    </td>
                                    <td>
                                        <div class="scrollable-content">
                                            <div class="selected-files-container">
                                                <div *ngFor="let fileName of applicationDetails.taxReturnsForTheLast3Years; let i = index"
                                                    class="selected-file">
                                                    <u (click)="getAttachementFileDownload(fileName.attachmentId)"
                                                        style="color:blue;margin:1rem;">{{ fileName.attachmentName
                                                        }}</u>
                                                    <button mat-icon-button>
                                                        <mat-icon
                                                            (click)="removeAttachment('taxReturnsForTheLast3Years',i)"
                                                            class="remove-icon">clear</mat-icon>
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <textarea placeholder="Remarks" class="min-select"
                                            [(ngModel)]="applicationDetails.taxReturnsForTheLast3YearsUploadsRemarks"
                                            (ngModelChange)="saveApplicationData('taxReturnsForTheLast3YearsUploadsRemarks','string')"></textarea>
                                    </td>
                                </tr>
                                <!-- <tr>
                                    <td>Retained Earnings
                                    </td>
                                    <td>:</td>
                                    <td>
                                        <input type="text" class="min-select" [(ngModel)]="applicationDetails.revenueRetainedEarnings"
                                            (ngModelChange)="saveApplicationData('revenueRetainedEarnings','number')" appCommaSeparatedInput (keydown)="preventLetterE($event)">
                                    </td>
                                </tr> -->
                            </table>
                                    <div class="table-responsive mt-5 mb-4 mr-3 ">
                                        <table class="table collateral_table">
                                            <thead>
                                                <tr>
                                                    <th>Revenue (In Million)</th>
                                                    <th style="text-align: center;" *ngFor="let year of statement">{{ year.year }}</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>Common Stock</td> 
                                                    <ng-container *ngFor="let year of statement;let i=index">
                                                        <td style="text-align: center; vertical-align: middle;">
                                                            <input type="number" [(ngModel)]="year.commonStock" (ngModelChange)="calculateRatio('commonStock', i, year.commonStock)">
                                                        </td>
                                                    </ng-container>
                                                </tr>
                                                <tr>
                                                    <td>Treasury Stock</td>
                                                    <ng-container *ngFor="let year of statement;let i=index">
                                                        <td style="text-align: center; vertical-align: middle;">
                                                            <input type="number" [(ngModel)]="year.treasuryStock" (ngModelChange)="fieldbinding()">
                                                        </td>
                                                    </ng-container>
                                                </tr>
                                                <tr>
                                                    <td>Other Comprehensive Income</td>
                                                    <ng-container *ngFor="let year of statement;let i=index">
                                                        <td style="text-align: center; vertical-align: middle;">
                                                            <input type="number" [(ngModel)]="year.otherComprehensiveIncome" (ngModelChange)="fieldbinding()">
                                                        </td>
                                                    </ng-container>
                                                </tr>
                                                <tr>
                                                    <td>Total Equity</td>
                                                    <ng-container *ngFor="let year of statement;let i=index">
                                                        <td style="text-align: center; vertical-align: middle;">
                                                            <input type="number" [(ngModel)]="year.totalEquity" (ngModelChange)="fieldbinding()">
                                                        </td>
                                                    </ng-container>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                    </mat-expansion-panel>
                                    </div>
                    <!-- Debts Expansion Panel -->
                    <div class="flex-item">
                        <mat-expansion-panel>
                            <mat-expansion-panel-header style="background-color: whitesmoke;">
                                <mat-panel-title class="header-banner">
                                    <b>Debts  (In Million)</b>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div class="table-responsive mt-5 mb-4 mr-3 ">
                                <table class="table collateral_table">
                                    <thead>
                                        <tr>
                                            <th>Debts (In Millions)</th>
                                            <th style="text-align: center;" *ngFor="let year of statement">{{ year.year }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Debts</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.debts" (ngModelChange)="calculateRatio('debts', i, year.debts);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr><td>Long Term Debt</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="text" [(ngModel)]="year.longTermDebt" (ngModelChange)="calculateRatio('longTermDebt', i, year.longTermDebt);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr><td>Debt Period</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="text" [(ngModel)]="year.debtPeriod" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </mat-expansion-panel>
                    </div>
                    <!-- Liabilities Expansion Panel -->
                    <div class="flex-item">
                        <mat-expansion-panel>
                            <mat-expansion-panel-header style="background-color: whitesmoke;">
                                <mat-panel-title class="header-banner">
                                    <b>Liabilities  (In Million)</b>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div class="table-responsive mt-5 mb-4 mr-3 ">
                                <table class="table collateral_table">
                                    <thead>
                                        <tr>
                                            <th>Liabilities  (In Million)</th>
                                            <th style="text-align: center;" *ngFor="let year of statement">{{ year.year }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Total Liabilities</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input  type="number" [(ngModel)]="year.totalLiabilities" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr><td>Term Liabilities</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input  type="number" [(ngModel)]="year.termLiabilities" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr><td>Current Liabilities</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input  type="number" [(ngModel)]="year.currentLiabilities" (ngModelChange)="calculateRatio('currentLiabilities', i, year.currentLiabilities);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </mat-expansion-panel>
                    </div>
                    <!-- Assets Expansion Panel -->
                    <div class="flex-item">
                        <mat-expansion-panel>
                            <mat-expansion-panel-header style="background-color: whitesmoke;">
                                <mat-panel-title class="header-banner">
                                    <b>Assets  (In Million)</b>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div class="table-responsive mt-5 mb-4 mr-3 ">
                                <table class="table collateral_table">
                                    <thead>
                                        <tr>
                                            <th>Assets  (In Million)</th>
                                            <th style="text-align: center;" *ngFor="let year of statement">{{ year.year }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Total Assets</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.totalAssets" (ngModelChange)="calculateRatio('totalAssets', i, year.totalAssets);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Fixed Assets</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.fixedAssets" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Current Assets</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.currentAssets" (ngModelChange)="calculateRatio('currentAssets', i, year.currentAssets);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Non-Current Assets</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.nonCurrentAssets" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Tangible Assets</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.tangibleAssets" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Intangible Assets</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.intangibleAssets" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </mat-expansion-panel>
                    </div>
                    <!-- Capital Expansion Panel -->
                    <div class="flex-item">
                        <mat-expansion-panel>
                            <mat-expansion-panel-header style="background-color: whitesmoke;">
                                <mat-panel-title class="header-banner">
                                    <b>Capital  (In Million)</b>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div class="table-responsive mt-5 mb-4 mr-3 ">
                                <table class="table collateral_table">
                                    <thead>
                                        <tr>
                                            <th>Capital  (In Million)</th>
                                            <th style="text-align: center;" *ngFor="let year of statement">{{ year.year }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Issued Capital</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.issuedCapital" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Paid-up Capital</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.paidUpCapital" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Additional Paid-In Capital</td> 
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.additionalPaidInCapital" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>General Reserves</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.generalReserves" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </mat-expansion-panel>
                    </div>
                    <!-- Surplus Expansion Panel  -->
                    <div class="flex-item">
                        <mat-expansion-panel>
                            <mat-expansion-panel-header style="background-color: whitesmoke;">
                                <mat-panel-title class="header-banner">
                                    <b>Surplus  (In Million)</b>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div class="table-responsive mt-5 mb-4 mr-3 ">
                                <table class="table collateral_table">
                                    <thead>
                                        <tr>
                                            <th>Surplus  (In Million)</th>
                                            <th style="text-align: center;" *ngFor="let year of statement">{{ year.year }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Credit Balance</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.creditBalance" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </mat-expansion-panel>
                        
                    </div>
                    <!-- Additional Financial Information Expansion Panel  -->
                    <div class="flex-item">
                        <mat-expansion-panel>
                            <mat-expansion-panel-header style="background-color: whitesmoke;">
                                <mat-panel-title class="header-banner">
                                    <b>Additional Financial Information  (In Million)</b>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <div class="table-responsive mt-5 mb-4 mr-3 ">
                                <table class="table collateral_table">
                                    <thead>
                                        <tr>
                                            <th>Additional Financial Information  (In Million)</th>
                                            <th style="text-align: center;" *ngFor="let year of statement">{{ year.year }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Inventory</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.inventory" (ngModelChange)="calculateRatio('inventory', i, year.inventory);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Shareholders equity</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.financialShareholdersEquity" (ngModelChange)="calculateRatio('financialShareholdersEquity', i, year.financialShareholdersEquity);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>EBIT</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.ebit" (ngModelChange)="calculateRatio('ebit', i, year.ebit);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>EBITDA</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.ebitda" (ngModelChange)="calculateRatio('ebitda', i, year.ebitda);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Interest Expense</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.interestExpense" (ngModelChange)="calculateRatio('interestExpense', i, year.interestExpense);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Gross Profit</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.grossProfit" (ngModelChange)="calculateRatio('grossProfit', i, year.grossProfit);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Total revenue</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.totalRevenue" (ngModelChange)="calculateRatio('totalRevenue', i, year.totalRevenue);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Operating Income</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.operatingIncome" (ngModelChange)="calculateRatio('operatingIncome', i, year.operatingIncome);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Net Income</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.netIncome" (ngModelChange)="calculateRatio('netIncome', i, year.netIncome);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Interest Payable</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.interestPayable" (ngModelChange)="calculateRatio('interestPayable', i, year.interestPayable);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Net Sales</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.netSales" (ngModelChange)="calculateRatio('netSales', i, year.netSales);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Average total assets</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.averageTotalAssets" (ngModelChange)="calculateRatio('averageTotalAssets', i, year.averageTotalAssets);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Cost of goods sold</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.costOfGoodsSold" (ngModelChange)="calculateRatio('costOfGoodsSold', i, year.costOfGoodsSold);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Average inventory</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.averageInventory" (ngModelChange)="calculateRatio('averageInventory', i, year.averageInventory);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Average accounts receivable</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.averageAccountsReceivable" (ngModelChange)="calculateRatio('averageAccountsReceivable', i, year.averageAccountsReceivable);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Purchases</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.purchases" (ngModelChange)="calculateRatio('purchases', i, year.purchases);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Average accounts payable</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.averageAccountsPayable" (ngModelChange)="calculateRatio('averageAccountsPayable', i, year.averageAccountsPayable);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Lease payments</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.leasePayments" (ngModelChange)="calculateRatio('leasePayments', i, year.leasePayments);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Principal repayments</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.principalRepayments" (ngModelChange)="calculateRatio('principalRepayments', i, year.principalRepayments);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Market price per share</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.marketPricePerShare" (ngModelChange)="calculateRatio('marketPricePerShare', i, year.marketPricePerShare);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Earnings per share</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.earningsPerShare" (ngModelChange)="calculateRatio('earningsPerShare', i, year.earningsPerShare);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Book value per share</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.bookValuePerShare" (ngModelChange)="calculateRatio('bookValuePerShare', i, year.bookValuePerShare);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Working capital</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.workingCapital" (ngModelChange)="calculateRatio('workingCapital', i, year.workingCapital);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Retained earnings</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.financialRetainedEarnings" (ngModelChange)="calculateRatio('financialRetainedEarnings', i, year.financialRetainedEarnings);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Market value of equity</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.marketValueOfEquity" (ngModelChange)="calculateRatio('marketValueOfEquity', i, year.marketValueOfEquity);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        
                                        <tr>
                                            <td>Sales</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.sales"  (ngModelChange)="calculateRatio('sales', i, year.sales);fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </mat-expansion-panel>
                    </div>
                    <!-- Cashflows Expansion Panel -->
                    <div class="flex-item" style="min-height: 350px;">
                        <mat-expansion-panel>
                            <mat-expansion-panel-header style="background-color: whitesmoke;">
                                <mat-panel-title class="header-banner">
                                    <b>Cashflows  (In Million)</b>
                                </mat-panel-title>
                            </mat-expansion-panel-header>
                            <span style="display: inline-block; white-space: nowrap; font-size: 1.8rem; text-align: left; padding: 1.5rem; color: #0e2954;">
                                            <span style="text-decoration: underline;">Operation
                                                Activities</span>&nbsp;:&nbsp;-
                                        </span>
                            <div class="table-responsive mt-5 mb-4 mr-3 ">
                                <table class="table collateral_table">
                                    <thead>
                                        <tr>
                                            <th>Operation Activities</th>
                                            <th style="text-align: center;" *ngFor="let year of statement">{{ year.year }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>Net Cash</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.operationActivitiesNetCash" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Depreciation and Amortization</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.depreciationAndAmortization" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Changes in Working Capital </td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.changesInWorkingCapital" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        </tbody>
                                </table>
                                </div>
                                        <span
                                                style="display: inline-block; white-space: nowrap; font-size: 1.8rem; text-align: left; padding: 1.5rem; color: #0e2954;">
                                                <span style="text-decoration: underline;">Investing
                                                    Activities</span>&nbsp;:&nbsp;-
                                            </span>
                                        <div class="table-responsive mt-5 mb-4 mr-3 ">
                                            <table class="table collateral_table">
                                                <thead>
                                                    <tr>
                                                        <th>Investing Activities</th>
                                                        <th style="text-align: center;" *ngFor="let year of statement">{{ year.year }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr>
                                                        <td>Net Cash </td>
                                                        <ng-container *ngFor="let year of statement;let i=index">
                                                            <td style="text-align: center; vertical-align: middle;">
                                                                <input type="number" [(ngModel)]="year.investingActivitiesNetCash" (ngModelChange)="fieldbinding()">
                                                            </td>
                                                        </ng-container>
                                                    </tr>
                                                </tbody>
                                            </table>
                                            </div>
                                        <span
                                                style="display: inline-block; white-space: nowrap; font-size: 1.8rem; text-align: left; padding: 1.5rem; color: #0e2954;">
                                                <span style="text-decoration: underline;">Financing
                                                    Activities</span>&nbsp;:&nbsp;-
                                            </span>
                                        <div class="table-responsive mt-5 mb-4 mr-3 ">
                                            <table class="table collateral_table">
                                                <thead>
                                                    <tr>
                                                        <th>Financing Activities</th>
                                                        <th style="text-align: center;" *ngFor="let year of statement">{{ year.year }}</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                        <tr>
                                            <td>Net Cash</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.financingActivitiesNetCash" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Proceeds from Borrowings </td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.proceedsFromBorrowings" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Repayment of Borrowings</td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.repaymentOfBorrowings" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                        <tr>
                                            <td>Dividends Paid </td>
                                            <ng-container *ngFor="let year of statement;let i=index">
                                                <td style="text-align: center; vertical-align: middle;">
                                                    <input type="number" [(ngModel)]="year.dividendsPaid" (ngModelChange)="fieldbinding()">
                                                </td>
                                            </ng-container>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </mat-expansion-panel>
                        <div class="table-container" style="height: 20rem;">
                            <mat-expansion-panel [expanded]="true">
                                <mat-expansion-panel-header style="background-color: whitesmoke;">
                                    <mat-panel-title class="header-banner">
                                        <b>
                                            User Defined Fields
                                        </b>
                                    </mat-panel-title>
                                </mat-expansion-panel-header>
                                <table>
                                    <thead>
                                        <tr>
                                            <td>User Defined fields</td>
                                            <td>:</td>
                                            <td>
                                                <mat-select class="min-select" [(ngModel)]="selectedUdfFinInfo" style="width: 50rem;" (ngModelChange)="fieldValuechecking();">
                                                    <mat-option *ngFor="let udfFieldName of selectedField4" [value]="udfFieldName">{{ udfFieldName }}</mat-option>
                                                </mat-select>
                                            </td>
                                            <td>
                                                <button mat-raised-button (click)="addInputFinInfo(index)" matTooltip="Add Fields" style="background-color:#0e2954;color: white;">
                                                <mat-icon>add</mat-icon></button></td>
                                        </tr>
                                    </thead>
                                </table>
                                <table>
                                    <tr>
                                        <div *ngFor="let fieldName of selectedFieldFinInfo;let i=index">
                                        <td style="max-width: 20rem; word-wrap: break-word;overflow-wrap: break-word;">{{ fieldName }}</td>
                                        <td>:</td>
                                        <td>
                                            <ng-container [ngSwitch]="getFieldType4(fieldName)">
                                                <input *ngSwitchCase="'ALPHA_NUMERIC'" [(ngModel)]="userCustomFinInfo[i].fieldValue" (ngModelChange)="fieldValuechecking();" type="text" class="udf-input">
                                                <input *ngSwitchCase="'DATE'" [(ngModel)]="userCustomFinInfo[i].fieldValue" (ngModelChange)="fieldValuechecking();" type="date" class="udf-input">
                                                <input *ngSwitchCase="'NUMERIC'" [(ngModel)]="userCustomFinInfo[i].fieldValue" (ngModelChange)="fieldValuechecking();" type="number" class="udf-input">
                                                <input *ngSwitchCase="'DATE_TIME'" [(ngModel)]="userCustomFinInfo[i].fieldValue" (ngModelChange)="fieldValuechecking();" type="datetime-local" class="udf-input">
                                                <input *ngSwitchCase="'DECIMAL'" [(ngModel)]="userCustomFinInfo[i].fieldValue" (ngModelChange)="fieldValuechecking();" type="datetime-local" class="udf-input">
                                            </ng-container>
                                        </td>
                                        <td>
                                            <button style="border-radius: 44%;background-color: aliceblue;border: none;" matTooltip="Remove">
                                                <mat-icon (click)="removeInputFinInfo(i)" style="color: red;">remove</mat-icon>
                                            </button>
                                        </td>
                                    </div>
                                    </tr>
                                </table>
                           </mat-expansion-panel>
                        </div>
  
                    </div>
                </div>
            </ng-container>
            <!-- Financial Information - Ratio SubTab Input Fields -->
            <ng-container *ngIf="option == 1">
                <div style="height: 80%; overflow-y: auto;">
                    <mat-expansion-panel [expanded]="true">
                        <mat-expansion-panel-header style="background-color: whitesmoke;">
                            <mat-panel-title class="header-banner">
                                <b>
                                    Loan Type : {{applicationDetails.typesOfLoan}}
                                </b>
                            </mat-panel-title>
                        </mat-expansion-panel-header>
                        <ng-container>
                            <div class="scrollable-content" style="max-height:300px">
                                <div class="table-responsive mt-5 mb-4 mr-3 ">
                                    <table class="table collateral_table">
                                        <thead>
                                          <tr>
                                            <th>{{applicationDetails.typesOfLoan}}</th>
                                            <th style="text-align: center;" *ngFor="let year of yearsList">{{ year }}</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr *ngFor="let ratio of ratioList">
                                            <td>{{ratio}}</td>
                                            <ng-container *ngFor="let year of yearsList;let i=index">
                                              <td style="text-align: center; vertical-align: middle;">
                                                <input type="text" readonly appCommaSeparatedInput [ngModel]="ratioDetails[i]?.[getPropertyBasedOnRatio(ratio)]"
                                                (ngModelChange)="updateCheckValue(i, getPropertyBasedOnRatio(ratio), $event)">                                              </td>
                                            </ng-container>
                                          </tr>
                                        </tbody>
                                      </table>
                                </div>
                            </div>
                        </ng-container>
                    </mat-expansion-panel>
                </div>
            </ng-container>
        </div>