cbsnexora/src/app/shares/shares-account-view/share-certificate-dialog/share-certificate-dialog.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->
<h2 mat-dialog-title class="dialog-header no-print">
  <span>Share Certificate View</span>
  <span class="flex-auto"></span>
</h2>

<div mat-dialog-content class="dialog-content-container">
  <!-- Certificate Page Frame -->
  <div class="certificate-container" id="share-certificate-print">
    <div class="certificate-border-outer">
      <div class="certificate-border-inner">
        <!-- Certificate Watermark Icon/Seal -->
        <div class="certificate-watermark">
          <mat-icon class="watermark-icon">verified_user</mat-icon>
        </div>

        <div class="certificate-header">
          <div class="bank-name">{{ bankName }}</div>
          @if (bankLocation) {
            <div class="bank-sub">{{ bankLocation }}</div>
          }
          <div class="cert-title">SHARE CERTIFICATE</div>
          <div class="cert-subtitle">Issued under the Common Seal of the Bank</div>
        </div>

        <div class="cert-meta-row">
          <div class="meta-item">
            <span class="meta-label">Certificate No.</span>
            <span class="meta-value">{{ certificateNo }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">Folio No.</span>
            <span class="meta-value">{{ folioNo }}</span>
          </div>
          <div class="meta-item">
            <span class="meta-label">Date of Issue</span>
            <span class="meta-value">{{ issueDate | dateFormat }}</span>
          </div>
        </div>

        <div class="cert-body-section">
          <p class="cert-main-text">
            This is to certify that <strong class="highlight-text">{{ sharesAccountData.clientName }}</strong> is the
            registered holder of
            <strong class="highlight-text">{{ sharesAccountData.summary?.totalApprovedShares | formatNumber }}</strong>
            ({{ sharesAccountData.productName || 'Ordinary' }}) shares of
            <strong class="highlight-text">{{
              sharesAccountData.currentMarketPrice | currency: sharesAccountData.currency.code : 'symbol-narrow'
            }}</strong>
            each, fully paid up, in <strong class="highlight-text">{{ bankName }}</strong
            >, subject to the memorandum, articles of association, and bye-laws of the bank.
          </p>

          <div class="issued-to-details">
            <div class="issued-to-title">ISSUED TO:</div>
            <div class="client-name-details">{{ sharesAccountData.clientName }}</div>
            <div class="client-ids">
              <span *ngIf="memberId"><strong>Member ID:</strong> {{ memberId }}</span>
              <span *ngIf="panNumber && panNumber !== 'Not Available'">
                &middot; <strong>PAN:</strong> {{ panNumber }}</span
              >
            </div>
            <div class="client-address" *ngIf="clientAddress">
              {{ clientAddress }}
            </div>
          </div>
        </div>

        <!-- Details Grid -->
        <table class="certificate-details-table">
          <tbody>
            <tr>
              <td class="lbl-col">Branch</td>
              <td class="val-col">{{ clientData?.officeName || 'Head Office' }}</td>
              <td class="lbl-col">Member Since</td>
              <td class="val-col">
                {{
                  (clientData?.activationDate
                    ? (clientData.activationDate | dateFormat)
                    : (clientData?.timeline?.submittedOnDate | dateFormat)) || 'N/A'
                }}
              </td>
            </tr>
            <tr>
              <td class="lbl-col">Share Class</td>
              <td class="val-col">{{ sharesAccountData.productName || 'Ordinary' }}</td>
              <td class="lbl-col">Date of Issue</td>
              <td class="val-col">{{ issueDate | dateFormat }}</td>
            </tr>
            <tr>
              <td class="lbl-col">Share Numbers</td>
              <td class="val-col">{{ shareNumbersRange }}</td>
              <td class="lbl-col">Dividend Paid (Cumulative)</td>
              <td class="val-col">
                {{ cumulativeDividend | currency: sharesAccountData.currency.code : 'symbol-narrow' }}
              </td>
            </tr>
          </tbody>
        </table>

        <!-- The allotments this certificate covers, one row each. A holding is built up over time —
             the opening subscription, then each further tranche under its own board resolution — and
             a certificate has to show when each block was allotted, not just the total. -->
        @if (allotments.length > 0) {
          <table class="allotment-table">
            <thead>
              <tr>
                <th class="ta-left">Date of Allotment</th>
                <th class="ta-right">Shares</th>
                <th class="ta-right">Face Value</th>
                <th class="ta-left">Share Numbers</th>
                <th class="ta-left">Resolution No. / Meeting Date</th>
              </tr>
            </thead>
            <tbody>
              @for (row of allotments; track $index) {
                <tr>
                  <td class="ta-left">{{ row.date | dateFormat }}</td>
                  <td class="ta-right">{{ row.shares }}</td>
                  <td class="ta-right">
                    {{ row.faceValue | currency: sharesAccountData.currency.code : 'symbol-narrow' }}
                  </td>
                  <td class="ta-left">
                    {{ row.shareNumbersFrom.toLocaleString() }} – {{ row.shareNumbersTo.toLocaleString() }}
                  </td>
                  <td class="ta-left">
                    {{ row.resolutionNumber || '—' }}
                    @if (row.meetingDate) {
                      <span class="allotment-meeting">({{ row.meetingDate | dateFormat }})</span>
                    }
                  </td>
                </tr>
              }
            </tbody>
          </table>
        }

        <table class="certificate-details-table">
          <tbody>
            <tr class="highlight-row">
              <td colspan="2" class="lbl-col-highlight">TOTAL FACE VALUE</td>
              <td colspan="2" class="val-col-highlight">
                {{ totalFaceValue | currency: sharesAccountData.currency.code : 'symbol-narrow' }}
              </td>
            </tr>
          </tbody>
        </table>

        <div class="cert-footer">
          <div class="seal-container">
            <div class="seal-ring">
              <div class="seal-text">COMMON SEAL</div>
            </div>
          </div>
          <div class="closing-text">
            Given under the common seal of the bank this {{ todayDate | date: 'd' }} day of
            {{ todayDate | date: 'MMMM yyyy' }}.
          </div>
          <div class="signatures-container">
            <div class="signature-block">
              <div class="signature-line"></div>
              <div class="signatory-title">Authorised Signatory</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<mat-dialog-actions align="end" class="no-print">
  <button mat-button mat-dialog-close>{{ 'labels.buttons.Close' | translate }}</button>
  <button mat-raised-button color="primary" (click)="printCertificate()">
    <mat-icon class="m-r-5">print</mat-icon>
    Print Certificate
  </button>
</mat-dialog-actions>