const moment = require("moment");

/* eslint-disable no-useless-escape */
module.exports = {
  html: (param) => {
    const duration = moment(param.to_date).diff(moment(param.from_date), "days") + 1;
    return `<!DOCTYPE html>
<html lang="id">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Request Akomodasi - Tim GA</title>
    <style>
      body {
        font-family: "Open Sans", Arial, sans-serif;
        background-color: #f5f5f5;
        margin: 0;
        padding: 0;
        color: #333;
      }

      .email-container {
        max-width: 600px;
        margin: 30px auto;
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      }

      .email-header {
        background-color: #ffd54f;
        padding: 20px;
        text-align: center;
      }

      .email-header h1 {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
        color: #333;
      }

      .email-body {
        padding: 20px;
      }

      .email-body p {
        margin-top: 0;
        font-size: 14px;
        color: #555;
      }

      .requester {
        margin-top: 2px;
        font-size: 14px;
      }

      .table-wrapper {
        width: 100%;
        overflow-x: auto;
      }

      .table-wrapper table {
        width: 100%;
        border-collapse: collapse;
        min-width: 800px; /* Supaya scroll muncul kalau ruangnya sempit */
      }

      table {
        width: 50%;
        border-collapse: collapse;
        margin-top: 20px;
        font-size: 13px;
      }

      table th,
      table td {
        padding: 10px;
        overflow: auto;
        border: 1px solid #e0e0e0;
        text-align: left;
        vertical-align: top;
      }

      table th {
        background-color: #f1f1f1;
        font-weight: 600;
        color: #333;
      }

      table tr:nth-child(even) {
        background-color: #fafafa;
      }

      .email-footer {
        background-color: #fafafa;
        padding: 15px 20px;
        text-align: center;
        font-size: 12px;
        color: #777;
        border-top: 1px solid #e0e0e0;
      }

      .note {
        font-weight: 600;
        color: #444;
        margin-bottom: 5px;
      }

      @media (max-width: 600px) {
        .email-body,
        .email-header,
        .email-footer {
          padding: 15px;
        }

        table th,
        table td {
          font-size: 12px;
          padding: 8px;
        }
      }
    </style>
  </head>
  <body>
    <div class="email-container">
      <div class="email-header">
        <h1>Request Akomodasi - Tim GA</h1>
      </div>

      <div class="email-body">
        <p>Berikut permintaan akomodasi dari karyawan untuk keperluan perjalanan dinas (UC).</p>

        <div class="requester"><strong>Diajukan oleh:</strong> ${
          param?.employee_name ? param?.employee_name : "-"
        }</div>
        <div class="requester"><strong>Nomor Dokumen:</strong> ${param?.doc_no ? param?.doc_no : "-"}</div>
        <div>
          <p><strong>Periode UC :</strong> ${moment(param.from_date).format("DD MMMM YYYY")} - ${moment(
      param.to_date
    ).format("DD MMMM YYYY")}</p>
        </div>

        <div class="table-wrapper">
          <table>
            <thead>
              <tr>
                <th>No</th>
                <th>Nama</th>
                <th>Jenis Akomodasi</th>
                <th>Dari</th>
                <th>Ke</th>
                <th>Tanggal Berangkat</th>
                <th>Tanggal Kembali</th>
                <th>Keperluan</th>
              </tr>
            </thead>
            <tbody>
            ${param?.accommodation_requests
              ?.map(
                (item, index) => `<tr>
                <td>${index + 1}</td>
                <td>${item?.who_requested ? item?.who_requested : "-"}</td>
                <td>${item?.accommodation_type ? item?.accommodation_type : "-"}</td>
                <td>${item?.from ? item?.from : "-"}</td>
                <td>${item?.to ? item?.to : "-"}</td>
                <td>${item?.from_date ? moment(item?.from_date).format("DD MMMM YYYY") : "-"}</td>
                <td>${item?.to_date ? moment(item?.to_date).format("DD MMMM YYYY") : "-"}</td>
                <td>${item?.purpose ? item?.purpose : "-"}</td>
              </tr>`
              )
              .join("")}
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="email-footer">
        <div class="note">Dimohon tim GA untuk segera memproses permintaan ini.</div>
        Email ini dikirim otomatis oleh sistem SAPPS.
      </div>
    </div>
  </body>
</html>
`;
  },
};
