const moment = require("moment");

/* eslint-disable no-useless-escape */
module.exports = {
	html: (leaveApplication) => {
		return `<!DOCTYPE html>
        <html lang="id">
        <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Leave Application Revision</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; /* penting untuk border radius */
            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="#fff7ed" 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="#fbbf24"> <!-- orange muda -->
                    <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;">Leave Application Revision</h2>
                        <p style="margin:6px 0 0 0; font-weight:400; font-size:14px; color:#fff; font-family: Arial, sans-serif;">
                        Please review the revised details of this request
                        </p>
                    </td>
                    </tr>
                    
                    <tr>
                    <td style="padding:24px 24px 20px 24px;">
                        <table width="100%" cellpadding="10" cellspacing="0" role="presentation" style="background-color:#fff7ed; border-radius:8px; font-size:13px; color:#92400e; border-left:6px solid #fbbf24;">
                        <tr>
                            <td width="50%" valign="top" style="font-weight:500; color:#78350f; padding:12px 12px 12px 16px;">
                            <div style="font-weight:700; color:#78350f; margin-bottom:4px;">Submitted Date</div>
                            ${moment(leaveApplication.submitted_date).format(
															"YYYY-MM-DD"
														)}
                            </td>
                            <td width="50%" valign="top" style="font-weight:500; color:#78350f; padding:12px 16px;">
                            <div style="font-weight:700; color:#78350f; margin-bottom:4px;">Approver Date</div>
                            ${moment(leaveApplication.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:#fff7ed; border-radius:8px; font-size:13px; color:#92400e; border-left:6px solid #fbbf24;">
                        <tr>
                            <td width="50%" valign="top" style="font-weight:500; color:#78350f; padding:12px 12px 12px 16px;">
                            <div style="font-weight:700; color:#78350f; margin-bottom:4px; font-family: Arial, sans-serif;">Leave Type</div>
                            ${leaveApplication?.leavetype_name}
                            </td>
                            <td width="50%" valign="top" style="font-weight:500; color:#78350f; padding:12px 16px;">
                            <div style="font-weight:700; color:#78350f; margin-bottom:4px;">Duration</div>
                            ${
															leaveApplication.total_leave_days > 1
																? `${leaveApplication.total_leave_days} days`
																: `${leaveApplication.total_leave_days} day`
														}
                            </td>
                        </tr>
                        <tr>
                            <td width="50%" valign="top" style="font-weight:500; color:#78350f; padding:12px 12px 12px 16px;">
                            <div style="font-weight:700; color:#78350f; margin-bottom:4px;">From</div>
                            ${moment(leaveApplication.from_date).format(
															"YYYY-MM-DD"
														)}
                            </td>
                            <td width="50%" valign="top" style="font-weight:500; color:#78350f; padding:12px 16px;">
                            <div style="font-weight:700; color:#78350f; margin-bottom:4px;">To</div>
                            ${moment(leaveApplication.to_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:#fff7ed; border-radius:8px; font-size:13px; color:#a16207; border-left:6px solid #fbbf24;">
                        <tr>
                            <td style="font-weight:500; color:#854d0e; padding:12px 16px;">
                            <div style="font-weight:700; color:#854d0e; margin-bottom:4px;">Reason</div>
                            ${leaveApplication?.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:#fff7ed; border-radius:8px; font-size:13px; color:#a16207; border-left:6px solid #fbbf24;">
                        <tr>
                            <td style="font-weight:500; color:#854d0e; padding:12px 16px;">
                            <div style="font-weight:700; color:#854d0e; margin-bottom:4px;">Revision Notes</div>
                            ${leaveApplication?.revision_notes || "-"}
                            </td>
                        </tr>
                        </table>
                    </td>
                    </tr>
                
                    <!-- Profile section -->
                    <tr>
                    <td style="font-weight: 600; padding:20px 24px 0px; color: #92400e">Revision requested 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:#fbbf24; border-radius:50%; text-align:center; line-height:40px; font-size:20px; color:#fff7ed; 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:#92400e;">${
															leaveApplication?.leave_approver_name
														}</strong><br />
                            <span style="font-size:13px; color:#78350f;">${
															leaveApplication?.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 #fde68a; margin:0;" />
                    </td>
                    </tr>

                    <!-- Footer -->
                    <tr>
                    <td align="center" style="padding:12px 24px 20px; font-size:12px; color:#a16207; font-family: Arial, sans-serif;">
                    This is an automated notification. Please do not reply.
                    </td>
                    </tr>
                </table>
                </td>
            </tr>
            </table>
        </center>
        </body>
        </html>`;
	},
};
