<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transaction Record</title>
  <style>
    @page {
      size: A5 portrait;
      margin: 10mm;
    }

    body {
      font-family: "Segoe UI", Arial, sans-serif;
      background: #fff;
      margin: 0;
      padding: 0;
      color: #000;
    }

    .container {
      width: 100%;
      padding: 10px 20px;
      box-sizing: border-box;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 5px;
    }

    .tr-type {
      font-weight: bold;
    }

    .info-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 10px;
    }

    .info-table td {
      padding: 4px 6px;
      font-size: 13px;
    }

    .info-table td:first-child {
      width: 25%;
      font-weight: bold;
    }

    table.data-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
      margin-top: 5px;
    }

    table.data-table th,
    table.data-table td {
      border: 1px solid #000;
      padding: 5px;
    }

    table.data-table th {
      background-color: #f0f0f0;
      font-weight: bold;
    }

    table.data-table td.amount {
      text-align: right;
    }

    .row-label {
      font-weight: bold;
    }

    .footer-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      font-size: 13px;
    }

    .checkbox {
      border: 1.5px solid #000;
      width: 25px;
      height: 18px;
      display: inline-block;
      vertical-align: middle;
    }

    .entry-box {
      border: 1.5px solid #000;
      padding: 5px 25px;
      min-width: 80px;
      text-align: right;
    }

    .footer {
      display: flex;
      justify-content: space-between;
      margin-top: 25px;
    }

    .sig {
      width: 30%;
      border-top: 1px dotted #333;
      text-align: center;
      font-size: 12px;
      padding-top: 4px;
    }

    .no-border {
      border: none !important;
      background-color: #fff !important;
    }
    .no-border-right {
      border-right: none !important;
      background-color: #fff !important;
    }
    .no-border-top {
      border-top: none !important;
      background-color: #fff !important;
    }
    .no-border-left {
      border-left: none !important;
      background-color: #fff !important;
    }
    .no-border-bottom {
      border-bottom: none !important;
      background-color: #fff !important;
    }
  </style>
</head>

<body>
  <div class="container">

    <div class="header">
      <div class="tr-type">TR Type - <u>DC</u></div>
      
    </div>

    <table class="info-table">
      <tr>
        <td>Customer</td>
        <td><?= $customer_details->business_name; ?> &nbsp;&nbsp; Code No: <u><?= $loan_details->loan_ref ?></u></td>
      </tr>
      <tr>
        <td>Date</td>
        <td><?= date('d-M-y', strtotime($loan_details->loan_date)); ?></td>
      </tr>
      <tr>
        <td>Percentage (%)</td>
        <td><?= $loan_details->loan_interest; ?></td>
      </tr>
    </table>

    <table style="width: 85%;" class="data-table">
      <thead>
        <tr>
          <th>Date</th>
          <th>Realization Date</th>
          <th>Amount</th>
          <th>Days</th>
          <th>Charges</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td></td>
          <td><?= date('d-M-y', strtotime($loan_details->loan_close_date)); ?></td>
          <td class="amount"><?= number_format($loan_details->loan_tot_amount, 2); ?></td>
          <td class="amount"><?= $loan_details->loan_no_of_days; ?></td>
          <td class="amount"><?= number_format($loan_details->loan_tot_amount - $loan_details->loan_payable_total_amount, 2); ?></td>
        </tr>
        <tr>
          <td class="row-label">Total Amount</td>
          <td class="no-border"></td>
          <td class="amount no-border-bottom no-border-left"><?= number_format($loan_details->loan_tot_amount, 2); ?></td>
          <td class="no-border"></td>
          <td class="amount no-border-left no-border-right no-border-bottom"><?= number_format($loan_details->loan_tot_amount - $loan_details->loan_payable_total_amount, 2); ?></td>
        </tr>

        <tr>
          <td class="row-label no-border-right no-border-bottom">Total Charges</td>
          <td class="no-border "></td>
          <td class="amount no-border-bottom no-border-left no-border-top">-<?= number_format($loan_details->loan_tot_amount - $loan_details->loan_payable_total_amount, 2); ?></td>
          <td class="no-border-right no-border-top no-border-left no-border-bottom"></td>
          <td class="no-border-right no-border-top no-border-left no-border-bottom" ></td>
        </tr>
        <tr>
          <td class="row-label no-border-right no-border-top">Pay Amount</td>
          <td class="no-border-right no-border-top no-border-left"></td>
          <td class="amount no-border-left no-border-top"><?= number_format($loan_details->loan_payable_total_amount, 2); ?></td>
          <td class="no-border-right no-border-top no-border-left no-border-bottom"></td>
          <td class="no-border-right no-border-top no-border-left no-border-bottom"></td>
        </tr>
      </tbody>
    </table>

    <div class="footer-section">
      <div>
        <span>Received Chq</span>
        <div class="checkbox"></div>
      </div>
      <div>
        <span>Book Entry (B)</span>
        <div class="entry-box"><?= number_format($loan_details->loan_tot_amount - $loan_details->loan_payable_total_amount, 0); ?>/-</div>
      </div>
      <div>
        <span>Bank Entry (B)</span>
        <div class="entry-box"><?= number_format($loan_details->loan_payable_total_amount, 0); ?>/-</div>
      </div>
    </div>

    <div class="footer">
      <div class="sig">Prepared by</div>
      <div class="sig">Checked by</div>
    </div>

  </div>
</body>

</html>