<style>
    .header-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 30px;
        border: 1px solid black;
    }

    .header-table td,
    .header-table th {
        border: 1px solid black;
        padding: 6px;
        text-align: left;
        font-size: 13px;
        font-family: Arial, Helvetica, sans-serif;
    }

    .logo {
        width: 130px;
        height: 70px;
        object-fit: contain;
    }

    .title {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        text-transform: uppercase;
    }

    .subtitle {
        text-align: center;
        font-weight: bold;
        font-size: 15px;
        margin-top: 20px;
        text-transform: uppercase;
    }

    .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 = printReasonData || [];
const P = rows.length ? rows[0] : {};

let productTypeLabel = "";
if (P.ProductType == 1) productTypeLabel = "- TABLET";
else if (P.ProductType == 2) productTypeLabel = "- CAPSULE";

const reportTitle =
    reportFor === 'BATCH'
        ? 'Batch Summary'
        : 'Product Summary';
%>

<div style="margin: 0 30px;">
    <table class="header-table">
        <tr>
            <td style="width:20%; text-align:center;">
                <% if (logoPath) { %>
                    <img src="<%= logoPath %>" class="logo">
                <% } %>
            </td>
            <td colspan="3">
                <div class="title">Print Reason For Printout</div>
                <div class="subtitle">
                    <%= reportTitle %> <%= productTypeLabel %>
                </div>
            </td>
        </tr>

        <tr>
            <th>Product Name</th>
            <td colspan="3"><%= nv(P.ProductName || P.PrdName) %></td>
        </tr>

        <tr>
            <th>
                <%= reportFor === 'BATCH' ? 'BFG Code No.' : 'MBMR No.' %>
            </th>
            <td <%= reportFor === 'BATCH' ? '' : 'colspan="3"' %>>
                <%= nv(P.ProductId || P.BFGCode) %>
            </td>

            <% if (reportFor === 'BATCH') { %>
                <th style="width: 25%;">Batch No.</th>
                <td style="width: 25%;"><%= nv(P.BatchNo) %></td>
            <% } %>
        </tr>

        <tr>
            <th>Cubicle Type</th>
            <td colspan="3"><%= nv(P.CubType) %></td>
        </tr>
    </table>

    <table class="data-table">
        <tr>
            <th>DATE</th>
            <th>TIME</th>
            <th>USER ID</th>
            <th>USERNAME</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>