<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: "Times New Roman", serif;
      font-size: 14px;
    }

    .info-table {
      width: 100%;
      margin: 20px 0;
    }

    .info-table td {
      padding: 4px 0;
      vertical-align: top;
    }

    .title {
      font-weight: bold;
      margin-top: 20px;
      margin-bottom: 5px;
    }

    .sub-text {
      margin-bottom: 10px;
    }

    table.main-table {
      width: 100%;
      border-collapse: collapse;
    }

    table.main-table th,
    table.main-table td {
      border: 1px solid #000;
      padding: 6px;
      text-align: center;
    }

    table.main-table th {
      font-weight: bold;
    }

    .remark,
    .conclusion {
      margin-top: 10px;
    }

    .bold {
      font-weight: bold;
      width: 35%;
    }

    .main-report {
      height: 100%;
      margin: 0 30px;
    }
    .logo1 {
        width: 100%;
        height: 60px;
        object-fit: contain;
    }

    .heading {
        text-align: center;
        font-weight: bold;
        font-size: 18px;
        text-transform: uppercase;
        width: 100%;
    }

  </style>
</head>
<body>

<%
  function nv(val) {
    if (val == null || val === "" || val === undefined) return "";
    if (typeof val === "string" && val.trim().toUpperCase() === "NULL") return "";
    return val;
  }
%>

<% 
  const M=(verCalData && verCalData.length> 0) ? verCalData[0] : {};
  const D = verWeight || [];
%>

<div class="main-report">
  <table class="info-table">
    <tr>
      <td class="bold">INSTRUMENT CODE</td>
      <td>:</td>
      <td><%= nv(M.Periodic_VerID) %></td>
    </tr>

    <tr>
      <td class="bold">CALIBRATED ON</td>
      <td>:</td>
      <td><%= nv(M.Periodic_CalbDate) ? moment(nv(M.Periodic_CalbDate)).format('DD/MM/yyyy') : "" %></td>
    </tr>

    <tr>
      <td class="bold">NEXT CALIBRATION DUE ON</td>
      <td style="width: 2%;">:</td>
      <td><%= nv(M.Periodic_DueDate) ? moment(nv(M.Periodic_DueDate)).format('DD/MM/yyyy') : "" %></td>
    </tr>
  </table>

  <div class="title">Dimensions of Standard Blocks :</div>

  <div class="sub-text">
    Check the dimensions of the standard blocks of 15, and 25 mm and record the observations in following table.
  </div>

  <table class="main-table">
    <tr>
      <th>Sr. No</th>
      <th>Parameter</th>
      <th>Standard</th>
      <th>Acceptance Criteria</th>
      <th>Observation</th>
      <th>Checked by</th>
    </tr>

  <% if (D.length > 0) { %>
    <% D.forEach(row=> { %>
    <tr>
      <td><%= nv(row.Periodic_RecNo) %></td>
      <td><%= nv(row.Periodic_Block) %></td>
      <td><%= nv(row.Periodic_StdBlock) %></td>
      <td><%= nv(row.Periodic_NegTol) %> <%= nv(row.Periodic_PosTol) %></td>
      <td><%= nv(row.Periodic_ActualWt) %></td>
      <td><%= nv(row.Periodic_CheckByID) %></td>
    </tr>
    <% }) %>

  <% } else { %>
      <tr>
      <% for (let j=0; j < 6; j++) { %>
          <td>&nbsp;</td>
      <% } %>
      </tr>
    <% } %>

  </table>

  <div class="remark">
    <span class="bold">Remark : </span><%= nv(M.Periodic_Remark) %>
  </div>

  <div class="conclusion">
    <span class="bold">CONCLUSION :</span>
    The instrument is calibrated as per written procedure and complies with acceptance criteria.
  </div>

  <div style="display: flex; width: 100%; gap: 20%; margin-top: 20%;">
    <div style="width: 50%;">
      <p><span style="font-weight: bold;">Calibration done by : </span><%= nv(M.Periodic_UserID) %></p>
      <p><span style="font-weight: bold;">Date : </span>
        <%= nv(M.Periodic_UserDate) ? moment(nv(M.Periodic_UserDate)).format('DD/MM/yyyy') : "" %>  
      </p>
    </div>

    <div>
      <p><span style="font-weight: bold;">Check By : </span><%= nv(M.Periodic_VerifyID) %></p>
      <p><span style="font-weight: bold;">Date : </span>
        <%= nv(M.Perodic_VerifyDate) ? moment(nv(M.Perodic_VerifyDate)).format('DD/MM/yyyy') : "" %>
      </p>
    </div>
  </div>

</div>
</body>
</html>