<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>BuildCredit Statement of Account</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        color: #333;
      }
      .header {
        display: flex;
        justify-content: space-between;
        padding: 20px;
        border-bottom: 3px solid #d32f2f; /* Red color */
      }
      .header-logo img {
        width: 150px;
        height: auto;
      }
      .header-detail {
        text-align: right;
        font-size: 12px;
      }
      .main-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        border-bottom: 2px solid #ddd;
      }
      .titles h3,
      .titles h4 {
        margin: 0;
      }
      .titles h3 {
        color: #d32f2f; /* Red color */
        margin-bottom: 8px;
      }
      .titles h4 {
        color: #555;
      }
      .date-time {
        text-align: right;
        padding: 0 20px 20px;
        font-size: 12px;
      }
      .main-table {
        padding: 0 20px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 8px;
      }
      th,
      td {
        padding: 6px;
        font-size: 8px;
        border-bottom: 1px solid #ddd;
        text-align: left;
        white-space: nowrap; /* Prevent text from wrapping to a new line */
        overflow: hidden; /* Hide the overflowing text */
        text-overflow: ellipsis; /* Add ellipsis if the text is too long */
      }
      th {
        background-color: #d32f2f;
        color: white;
        font-size: 8px;
      }
      tr:nth-child(even) {
        background-color: #f9f9f9;
      }
      thead {
        display: table-header-group;
      }
      tbody {
        display: table-row-group;
      }
      tr {
        page-break-inside: avoid;
      }
    </style>
  </head>
  <body>
    <header class="header">
      <div class="header-logo">
        <img src="data:image/jpeg;base64,{{buildhubLogo}}" alt="BuildCredit Logo" />
      </div>
      <div class="header-detail">
        <p>Branch Office: 1501 The Centerpoint</p>
        <p>Condo., Julia Vargas Ave., Ortigas Center,</p>
        <p>Pasig, Metro Manila</p>
      </div>
    </header>

    <div class="main-content">
      <div class="titles">
        <h3>BUILDCREDIT</h3>
        <h4>STATEMENT OF ACCOUNT SUMMARY</h4>
      </div>
    </div>

    <div class="date-time">
      <p>Date and Time: {{dateNTime}}</p>
    </div>

    <div class="main-table">
      <table>
        <thead>
          <tr>
            <th>Company Name</th>
            <th>Status</th>
            <th>Credit Terms</th>
            <th>Build Credit Limit</th>
            <th>Account Balance</th>
            <th>Available Line</th>
            <th>PDC Sent & Received</th>
            <th>Account Balance Less PDC</th>
          </tr>
        </thead>
        <tbody>
          {{#each buildCreditCustomerBalances}}
          <tr>
            <td>{{this.companyName}}</td>
            <td>{{this.buildcreditStatus}}</td>
            <td>{{this.creditTerms}}</td>
            <td>{{this.creditLimit}}</td>
            <td>{{this.accountBalance}}</td>
            <td>{{this.availableLine}}</td>
            <td>{{this.pdcSent}}</td>
            <td>{{this.abLessPdc}}</td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </div>
  </body>
</html>
