const moment = require("moment");

/* eslint-disable no-useless-escape */
module.exports = {
	html: (permitEase, website) => {
		const halfDayInfo = permitEase.half_day && permitEase.half_day_date
			? `
			<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;">Half Day Date</div>
					${moment(permitEase.half_day_date).format("YYYY-MM-DD")}
				</td>
				<td width="50%" valign="top" style="font-weight:600; padding:12px 16px;">
					<div style="font-weight:700; margin-bottom:6px;">Half Day Type</div>
					${permitEase.half_day_type || "N/A"}
				</td>
			</tr>
			`
			: "";

		return `<!DOCTYPE html>
        <html lang="id">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>Permit Ease Need Approval</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="#F0F4FB" 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="#2A3F5F">
                      <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;">Permit Ease Need Approval</h2>
                        <p style="margin:6px 0 0 0; font-weight:400; font-size:14px; color:#dbeafe; font-family: Arial, sans-serif;">
                          Please review and take action on this request
                        </p>
                      </td>
                    </tr>
        
                    <!-- Profile section -->
                    <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:#F0F4FB; border-radius:50%; text-align:center; line-height:40px; font-size:20px; color:#2A3F5F; font-family: Arial, sans-serif;">
                                &#128100;
                              </div>
                            </td>
                            <!-- Name and Department -->
                            <td valign="middle" style="font-family: Arial, sans-serif;">
                              <strong style="font-size:15px; color:#2A3F5F;">${permitEase?.employee_name || permitEase?.employee?.employee_name || "Employee"}</strong><br />
                              <span style="font-size:13px; color:#2A3F5F;">${permitEase?.employee_designation_territory || "N/A"}</span>
                            </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:#F0F4FB; border-radius:8px; font-size:13px; color:#0369a1; border-left:6px solid #2A3F5F;">
                          <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;">From Date</div>
                              ${moment(permitEase.from_date).format("YYYY-MM-DD")}
                            </td>
                            <td width="50%" valign="top" style="font-weight:600; padding:12px 16px;">
                              <div style="font-weight:700; margin-bottom:6px;">To Date</div>
                              ${moment(permitEase.to_date).format("YYYY-MM-DD")}
                            </td>
                          </tr>
                          ${halfDayInfo}
                          <tr>
                            <td width="50%" valign="top" style="font-weight:600; padding:12px 16px;">
                              <div style="font-weight:700; margin-bottom:6px;">Half Day</div>
                              ${permitEase.half_day ? "Yes" : "No"}
                            </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:#F0F4FB; border-radius:8px; font-size:13px; color:#a16207; border-left:6px solid #2A3F5F;">
                          <tr>
                            <td style="font-weight:500; color:#2A3F5F; padding:12px 16px;">
                              <div style="font-weight:700; color:#2A3F5F; margin-bottom:4px;">Reason</div>
                              ${permitEase?.reason || "-"}
                            </td>
                          </tr>
                          ${permitEase?.explanation ? `
                          <tr>
                            <td style="font-weight:500; color:#2A3F5F; padding:12px 16px;">
                              <div style="font-weight:700; color:#2A3F5F; margin-bottom:4px;">Explanation</div>
                              ${permitEase.explanation}
                            </td>
                          </tr>
                          ` : ""}
                          ${permitEase?.notes ? `
                          <tr>
                            <td style="font-weight:500; color:#2A3F5F; padding:12px 16px;">
                              <div style="font-weight:700; color:#2A3F5F; margin-bottom:4px;">Notes</div>
                              ${permitEase.notes}
                            </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>
        
                    <tr>
                        <td style="padding:24px 24px 24px 24px;">
                            <!-- Action Buttons -->
                            <table width="100%" cellpadding="0" cellspacing="0" border="0" style="text-align:center;">
                                    <tr>
                                      <td width="33%" style="padding:0 4px 0 0;">
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-radius:6px; background-color:#059669;">
                                          <tr>
                                            <td align="center" valign="middle" height="40" style="font-family: Arial, sans-serif; font-weight:600; font-size:14px; color:#fff; cursor:pointer;">
                                              <a href=${`https://${website}/approval?doctype=Permit%20Ease&status=Approved&id=${permitEase?.id}${permitEase?.workflow_id ? `&workflow_id=${permitEase.workflow_id}` : ""}`} target="_blank" style="color:#fff; text-decoration:none; display:block; width:100%; line-height:40px; mso-line-height-rule:exactly;">
                                                Approve
                                              </a>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                      <td width="33%" style="padding:0 4px;">
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-radius:6px; background-color:#dc2626;">
                                          <tr>
                                            <td align="center" valign="middle" height="40" style="font-family: Arial, sans-serif; font-weight:600; font-size:14px; color:#fff; cursor:pointer;">
                                              <a href=${`https://${website}/approval?doctype=Permit%20Ease&status=Rejected&id=${permitEase?.id}${permitEase?.workflow_id ? `&workflow_id=${permitEase.workflow_id}` : ""}`} target="_blank" style="color:#fff; text-decoration:none; display:block; width:100%; line-height:40px; mso-line-height-rule:exactly;">
                                                Reject
                                              </a>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                      <td width="33%" style="padding:0 0 0 4px;">
                                        <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-radius:6px; background-color:#f59e0b;">
                                          <tr>
                                            <td align="center" valign="middle" height="40" style="font-family: Arial, sans-serif; font-weight:600; font-size:14px; color:#fff; cursor:pointer;">
                                              <a href=${`https://${website}/approval?doctype=Permit%20Ease&status=Revised&id=${permitEase?.id}${permitEase?.workflow_id ? `&workflow_id=${permitEase.workflow_id}` : ""}`} target="_blank" style="color:#fff; text-decoration:none; display:block; width:100%; line-height:40px; mso-line-height-rule:exactly;">
                                                Revise
                                              </a>
                                            </td>
                                          </tr>
                                        </table>
                                      </td>
                                    </tr>
                            </table>
                        </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>`;
	},
};
