<!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,
      .order-breakdown-table {
        padding: 0 20px;
        margin-top: 20px;
      }
      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 10px;
      }
      th,
      td {
        padding: 10px;
        font-size: 10px;
        border-bottom: 1px solid #ddd;
        text-align: left;
      }
      th {
        background-color: #d32f2f; /* Red color */
        color: white;
        font-size: 10px;
      }
      tr:nth-child(even) {
        background-color: #f9f9f9;
      }
      .order-breakdown-table {
        page-break-before: always;
      }

      table tr {
        page-break-inside: avoid;
      }
      @page {
        margin: 20mm;
      }
      body {
        margin: 0;
      }
      table {
        table-layout: fixed;
        word-wrap: break-word;
      }
      th,
      td {
        padding: 5px;
      }
    </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</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>
            <th>Available Line Plus PDC (SAP)</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>{{companyName}}</td>
            <td>{{buildcreditStatus}}</td>
            <td>{{creditTerms}}</td>
            <td>{{creditLimit}}</td>
            <td>{{accountBalance}}</td>
            <td>{{availableLine}}</td>
            <td>{{pdcSent}}</td>
            <td>{{abLessPdc}}</td>
            <td>{{alPlusPdc}}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="order-breakdown-table titles">
      <div class="main-content">
        <h4>Statement Breakdown</h4>
      </div>
      <table>
        <thead>
          <tr>
            <th>Reference Number</th>
            <th>Order Total Amount</th>
            <th>Total Payments Made</th>
            <th>Unpaid Balance</th>
            <th>Date</th>
            <th>Remarks</th>
          </tr>
        </thead>
        <tbody>
          {{#each statementBreakdown}}
          <tr>
            <td>{{this.order_reference_no}}</td>
            <td>{{this.order_total_amount}}</td>
            <td>{{this.payments_total}}</td>
            <td>{{this.unpaid_balance}}</td>
            <td>{{this.date}}</td>
            <td>{{this.remarks}}</td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </div>
  </body>
</html>
