const moment = require("moment");

/* eslint-disable no-useless-escape */
function formatNumber(num) {
  return Number(num || 0).toLocaleString("id-ID");
}

module.exports = {
  html: (param) => {
    const formatNumberWithCommas = (number) => {
      return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    };

      return `<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8" />
      <title>Gimmick Transfer Realization Notification - ${param?.doc_no}</title>

      <style>
        body {
          font-family: Arial, Helvetica, sans-serif;
          font-size: 11px;
          color: #000000;
        }

        .title {
          font-weight: bold;
          margin-bottom: 8px;
        }

        table {
          width: 100%;
          border-collapse: collapse;
          margin-bottom: 12px;
        }

        th,
        td {
          border: 1px solid #000000;
          padding: 5px;
        }

        .section-header th {
          background-color: #0b8f8a;
          color: #ffffff;
          text-align: center;
          font-weight: bold;
        }

        .table-header th {
          background-color: #0b8f8a;
          color: #ffffff;
          text-align: center;
          font-weight: bold;
        }

        .center {
          text-align: center;
        }

        .right {
          text-align: right;
        }

        .footer {
          font-size: 9px;
          text-align: right;
          font-style: italic;
          margin-top: 5px;
        }
      </style>
    </head>

    <body>
      <div class="title">
        Gimmick transfer realization progress of
        <b>${param?.doc_no}</b>
      </div>

      <!-- ================= REQUEST & REALIZATION ================= -->
      <table>
        <tr class="section-header">
          <th colspan="6">Request</th>
          <th colspan="2">Realization</th>
        </tr>

        <tr class="table-header">
          <th>Doc. Date</th>
          <th>Territory</th>
          <th>Client</th>
          <th>Type</th>
          <th>Sub Type</th>
          <th>Amount</th>
          <th>Amount</th>
          <th>Status</th>
        </tr>

        <tr>
          <td class="center">${param?.creation ? moment(param?.creation).format("DD MMMM YYYY") : "-"}</td>
          <td>${param?.territory?.display_name || "-"}</td>
          <td>${param?.client?.display_name || "-"}</td>
          <td class="center">${param?.gimmickrequesttype?.display_name || "-"}</td>
          <td class="center">${param?.gimmickrequestsubtype?.display_name || "-"}</td>
          <td class="right">${formatNumberWithCommas(param?.dpp || 0)}</td>
          <td class="right">${formatNumberWithCommas(param?.dpp || 0)}</td>
          <td class="center">${param?.transfer_status || "-"}</td>
        </tr>
      </table>

      <!-- ================= RECEIVER INFO ================= -->
      <table>
        <tr class="section-header">
          <th colspan="8">Receiver Info</th>
        </tr>

        <tr class="table-header">
          <th>Bank Name</th>
          <th>Account No</th>
          <th>Account Name</th>
          <th>Transfer Date</th>
        </tr>

        <tr>
          ${param?.receiver?.map((receiver) => `
            <td>${receiver?.bankaccount?.bank?.display_name || "-"}</td>
            <td>${receiver?.bankaccount?.account_number || "-"}</td>
            <td>${receiver?.bankaccount?.display_name || "-"}</td>
            <td>${param?.transfer_realization_date ? moment(param?.transfer_realization_date).format("DD MMMM YYYY") : "-"}</td>
          `).join("")}
        </tr>
      </table>

      <div class="footer">Generate on ${moment().format("DD MMMM YYYY")}</div>
    </body>
  </html>
      `;
  },
};
