const moment = require("moment");

/* eslint-disable no-useless-escape */
module.exports = {
	html: (attendanceRequest) => {
		return `<!DOCTYPE html>
    <html lang="id">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Attendance Request Rejected</title>
      <style>
        body, table, td, a {
          -webkit-text-size-adjust: 100%;
          -ms-text-size-adjust: 100%;
        }
        table, td {
          mso-table-lspace: 0pt;
          mso-table-rspace: 0pt;
        }
        table {
          border-collapse: separate !important;
          border-spacing: 0;
          border-radius: 8px;
        }
        img {
          -ms-interpolation-mode: bicubic;
        }
        .ExternalClass {
          width: 100%;
          line-height: 100%;
        }
        a[x-apple-data-detectors] {
          color: inherit !important;
          text-decoration: none !important;
          font-size: inherit !important;
          font-family: inherit !important;
          font-weight: inherit !important;
          line-height: inherit !important;
        }
      </style>
    </head>
    <body style="margin:0; padding:0; background-color:#f8fafc; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color:#334155;">
      <center>
        <table width="100%" cellpadding="0" cellspacing="0" border="0" bgcolor="#fef2f2" style="padding:20px 0; min-width:320px;">
          <tr>
            <td align="center">
              <table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff" style="border-radius:12px; overflow:hidden; border:1px solid #e2e8f0; max-width:600px;">
                <!-- Header -->
                <tr bgcolor="#7f1d1d">
                  <td style="padding:18px 24px; text-align:left; color:#fff;">
                    <h2 style="margin:0; font-weight:700; font-size:18px; font-family: Arial, sans-serif;">Attendance Request Rejected</h2>
                    <p style="margin:6px 0 0 0; font-weight:400; font-size:14px; color:#fff; font-family: Arial, sans-serif;">
                      Your attendance request has been rejected. Please review the details below.
                    </p>
                  </td>
                </tr>
                
                <tr>
                  <td style="padding:24px 24px 20px 24px;">
                    <table width="100%" cellpadding="10" cellspacing="0" role="presentation" style="background-color:#fef2f2; border-radius:8px; font-size:13px; color:#991b1b; border-left:6px solid #dc2626;">
                      <tr>
                        <td width="50%" valign="top" style="font-weight:500; color:#7f1d1d; padding:12px 12px 12px 16px;">
                          <div style="font-weight:700; color:#7f1d1d; margin-bottom:4px; font-family: Arial, sans-serif;">Submitted Date</div>
                          ${moment(attendanceRequest.submitted_date).format("YYYY-MM-DD")}
                        </td>
                        <td width="50%" valign="top" style="font-weight:500; color:#7f1d1d; padding:12px 16px;">
                          <div style="font-weight:700; color:#7f1d1d; margin-bottom:4px;">Decision Date</div>
                          ${moment(attendanceRequest.approver_date).format("YYYY-MM-DD")}
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
    
                <!-- Details section -->
                <tr>
                  <td style="padding:0 24px 20px 24px;">
                    <table width="100%" cellpadding="10" cellspacing="0" role="presentation" style="background-color:#fef2f2; border-radius:8px; font-size:13px; color:#991b1b; border-left:6px solid #dc2626;">
                      <tr>
                        <td width="50%" valign="top" style="font-weight:600; padding:12px 16px;">
                          <div style="font-weight:700; margin-bottom:6px; font-family: Arial, sans-serif;">In Time</div>
                          ${attendanceRequest?.in_time}
                        </td>
                        <td width="50%" valign="top" style="font-weight:600; padding:12px 16px;">
                          <div style="font-weight:700; margin-bottom:6px;">Out Time</div>
                          ${attendanceRequest.out_time}
                        </td>
                      </tr>
                      <tr>
                        <td width="50%" valign="top" style="font-weight:600; padding:12px 16px;">
                          <div style="font-weight:700; margin-bottom:6px;">Date</div>
                          ${moment(attendanceRequest.date).format("YYYY-MM-DD")}
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
    
                <!-- Reason section -->
          <tr>
                  <td style="padding:0 24px 20px 24px;">
                    <table width="100%" cellpadding="10" cellspacing="0" role="presentation" style="background-color:#fef2f2; border-radius:8px; font-size:13px; color:#991b1b; border-left:6px solid #dc2626;">
                    <tr>
                        <td style="font-weight:500; color:#7f1d1d; padding:12px 16px;">
                          <div style="font-weight:700; color:#7f1d1d; margin-bottom:4px;">Type</div>
                          ${attendanceRequest?.reason_type || "-"}
                        </td>
                      </tr>  
                    <tr>
                        <td style="font-weight:500; color:#7f1d1d; padding:12px 16px;">
                          <div style="font-weight:700; color:#7f1d1d; margin-bottom:4px;">Reason</div>
                          ${attendanceRequest?.reason || "-"}
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
    
                <tr>
                  <td style="padding:0 24px 20px 24px;">
                    <table width="100%" cellpadding="10" cellspacing="0" role="presentation" style="background-color:#fef2f2; border-radius:8px; font-size:13px; color:#991b1b; border-left:6px solid #dc2626;">
                      <tr>
                        <td style="font-weight:500; color:#7f1d1d; padding:12px 16px;">
                          <div style="font-weight:700; color:#7f1d1d; margin-bottom:4px;">Reason for Rejection</div>
                          ${attendanceRequest?.rejection_reason || "-"}
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
               
                <!-- Approver section -->
                <tr>
                  <td style="font-weight: 600; padding:20px 24px 0px; font-family: Arial, sans-serif; color: #991b1b">Rejected by:</td>
                </tr>
                <tr>
                  <td style="padding:20px 24px;">
                    <table width="100%" cellpadding="0" cellspacing="0" role="presentation" style="border-spacing:0;">
                      <tr>
                        <!-- Avatar -->
                        <td width="48" valign="top" style="padding-right:12px;">
                          <div style="width:40px; height:40px; background:#fef2f2; border-radius:50%; text-align:center; line-height:40px; font-size:20px; color:#dc2626;">
                            &#128100;
                          </div>
                        </td>
                        <!-- Name and Department -->
                        <td valign="middle" style="font-family: Arial, sans-serif;">
                          <strong style="font-size:15px; color:#991b1b;">${attendanceRequest?.leave_approver_name}</strong><br />
                          <span style="font-size:13px; color:#991b1b;">${attendanceRequest?.leave_approver_designation_territory || "N/A"}</span>
                        </td>
                      </tr>
                    </table>
                  </td>
                </tr>
    
                <!-- Divider -->
                <tr>
                  <td style="padding:0 24px;">
                    <hr style="border:none; border-top:1px solid #e2e8f0; margin:0;" />
                  </td>
                </tr>
    
                <!-- Footer -->
                <tr>
                  <td align="center" style="padding:12px 24px 20px; font-size:12px; color:#94a3b8; font-family: Arial, sans-serif;">
                   This is an automated notification. Please do not reply.
                  </td>
                </tr>
              </table>
            </td>
          </tr>
        </table>
      </center>
    </body>
    </html>`;
	},
};
