<style>
    .logo1 {
        width: 100%;
        height: 70px;
        object-fit: contain;
    }

    .instru-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        border: 1px solid black;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
    }

    .instru-table td,
    .instru-table th {
        border: 1px solid black;
        padding: 6px;
        text-align: left;
        width: 25%;
    }

    .title {
        text-align: center;
        font-weight: bold;
        font-size: 22px;
        text-transform: uppercase;
        font-family: Arial, Helvetica, sans-serif;
    }

    .data-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 30px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 13px;
    }

    .data-table th,
    .data-table td {
        border: 1px solid black;
        padding: 6px;
        text-align: center;
        width: 14%;
    }
</style>

<% 
function nv(val) { 
    if (val == null || val === "" || val === undefined) return "";
    if (typeof val === "string" && val.trim().toUpperCase() === "NULL") return "";
    return val;
}

const instruData = (instruLogData && instruLogData.length > 0) ? instruLogData[0] : {}; 
%>

<div style="margin: 0 30px;">
    <table style="width: 100%;">
        <tr>
            <td style="width:90%; text-align:center;">
                <p class="title">INSTRUMENT USAGE LOG</p>
            </td>

            <td>
            <% if (logoPath) { %>
                <img src="<%= logoPath %>" class="logo1">
            <% } %>
            </td>
        </tr>
    </table>

    <table class="instru-table">
        <tr>
            <th>Instrument Name</th>
            <td><%= nv(instrumentName) %></td>
            <th rowspan="2">Department</th>
            <td rowspan="2"><%= nv(instruData.department_name) %></td>
        </tr>

        <tr>
            <th><%= config?.lbl_Instrument %></th>
            <td><%= nv(instruData.EqpID) %></td>
        </tr>
    </table>

    <table class="data-table">
        <tr>
            <th>DATE</th>
            <th>FROM</th>
            <th>TO</th>
            <th>PRODUCT</th>
            <th>BATCH</th>
            <th>ACTIVITY</th>
            <th>DONE BY</th>
        </tr>

    <% if (instruLogData.length > 0) { %>
        <% instruLogData.forEach(row => { %>
        <tr>
            <td><%= nv(row.FromDT) ? moment(nv(row.FromDT)).format(dateFormat) : "" %></td>
            <td><%= nv(row.FromTM) ? moment.utc(nv(row.FromTM)).format(timeFormat) : "" %></td>
            <td><%= nv(row.ToTM) ? moment.utc(nv(row.ToTM)).format(timeFormat) : "" %></td>
            <td><%= nv(row.BFGCode) %></td>
            <td><%= nv(row.BatchNo) %></td>
            <td><%= nv(row.Activity) %></td>
            <td><%= nv(row.UserId) %></td>
        </tr>
        <% }) %>

    <% } else { %>
        <tr>
            <% for (let j=0; j < 7; j++) { %>
                <td>&nbsp;</td>
            <% } %>
        </tr>
    <% } %>
    </table>
</div>