<style>
    .logo {
        width: 130px;
        height: 70px;
        object-fit: contain;
    }

    .title {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
    }

    .subtitle {
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        margin-top: 20px;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
    }
    .miniHeading {
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        margin-top: 20px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .data-table {
        width: 100%;
        border-collapse: collapse;
         margin-top: 30px;
        page-break-inside: auto;
    }

    .data-table tr {
        page-break-inside: avoid;
        page-break-after: auto;
    }

    .data-table th,
    .data-table td {
        border: 1px solid black;
        padding: 6px;
        text-align: center;
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
        page-break-inside: avoid;
    }
</style>

<%
function nv(val) { 
    if (val == null || val === "" || val === undefined) return "";
    if (typeof val === "string" && val.trim().toUpperCase() === "NULL") return "";
    return val;
}
%>

<% const rows = printReason || []; %>

<div style="margin: 0 30px;">
    <table>
        <tr>
            <% if(!["Label Generation", "Container/Bin Summary"].includes(reportOption)){ %>
            <td style="width:20%; text-align:center;">
            <% if (logoPath) { %>
                <img src="<%= logoPath %>" class="logo">
            <% } %>
            </td>
            <% } %>
           <% let col = (reportOption !== "Label Generation" && reportOption !== "Container/Bin Summary") ? '3' : ''; %>
            <td colspan="<%= col %>">
                <div class="title">Print Reason For Printout
                    <%= report == "Daily" || report == "Periodic" || report == "VernierDaily" || report == "VernierPeriodic"
                     ? '' : ` - ${reportOption}` %>
                </div>
                <div class="subtitle">
                    <%= report === "Periodic" 
                            ? "BALANCE - PERIODIC CALIBRATION"
                        : report === "Daily" 
                            ? "BALANCE - DAILY/MONTHLY CALIBRATION"
                        : report === "VernierPeriodic" 
                            ? "VERNIER - PERIODIC CALIBRATION"
                        : report === "VernierDaily" 
                            ? "VERNIER - DAILY CALIBRATION"
                        : reportType
                    %>
                </div>
            </td>
            <% if(reportOption =="Label Generation" ||  reportOption == "Container/Bin Summary") { %>
                    <style>
                    .reason-table {
                        width: 100%;
                        border-collapse: collapse;
                        font-family: Arial, sans-serif;
                        font-size: 14px;
                    }

                    .reason-table td {
                        border: 2px solid #000;
                        padding: 8px;
                        vertical-align: top;
                    }

                    .label {
                        font-weight: bold;
                        width: 20%;
                    }

                    .product-name {
                        height: 75px;
                        vertical-align: top;
                    }
                </style>
                    <table class="reason-table">
                    <tr>
                        <td class="label">Product Name</td>
                        <td colspan="3" class="product-name">
                            <%= rows[0].PrdName %>
                        </td>
                    </tr>

                    <tr>
                        <td class="label">Product Code No.</td>
                        <td><%= rows[0].BFGCode %></td>

                        <td class="label">Batch No.</td>
                        <td><%= rows[0].BatchNo %></td>
                    </tr>

                    <tr>
                        <td class="label">Cubicle Type</td>
                        <td><%= rows[0].CubType %></td>

                        <td colspan="2"></td>
                    </tr>
                </table>
                <% } %>           
        </tr>
    </table>
    <% if(report == "Daily" || report == "Periodic" || report == "VernierDaily" || report == "VernierPeriodic") {%>
        <h3 class="miniHeading"><%= rows[0]?.Incomplete == 1  ? "Complete" : "Incomplete" %></h3>
    <% } %>
    <table class="data-table">
        <tr>
            <th>DATE</th>
            <th>TIME</th>
            <th>USER ID</th>
            <th>USER NAME</th>
            <th>PRINT NO.</th>
            <th>REASON</th>
        </tr>
        
    <% if (rows.length > 0) { %>
        <% rows.forEach(r => { %>
        <tr>
            <td><%= moment(nv(r.Print_Dt)).format(dateFormat) %></td>
            <td><%= moment.utc(nv(r.Print_Tm)).format(timeFormat) %></td>
            <td><%= nv(r.UserID) %></td>
            <td><%= nv(r.UserName) %></td>
            <td><%= nv(r.PrintNo) %></td>
            <td><%= nv(r.Reason) || '-' %></td>
        </tr>
        <% }) %>

    <% } else { %>
        <tr>
        <% for (let j=0; j < 6; j++) { %>
            <td>&nbsp;</td>
        <% } %>
        </tr>
    <% } %>
    </table>
</div>