<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Usage and Cleaning Record</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 10px;
      color: #000;
    }
    .container {
      width: 100%;
      padding: 10px 15px;
    }
    .header {
      width: 100%;
      margin-bottom: 6px;
    }
    .header-table {
      width: 100%;
      border: none;
      border-collapse: collapse;
    }
    .header-table td {
      border: none;
      vertical-align: middle;
      padding: 2px 0;
    }
    .master-copy {
      font-weight: bold;
      font-size: 11px;
      text-align: left;
    }
    .title-cell {
      text-align: center;
      font-weight: bold;
      font-size: 12px;
      text-transform: uppercase;
    }
    .logo-cell {
      text-align: right;
    }
    .logo-cell img {
      width: 100px;
      height: auto;
    }
    .main-table {
      width: 100%;
      border-collapse: collapse;
    }
    .main-table th,
    .main-table td {
      border: 1px solid #000;
      padding: 4px 5px;
      text-align: center;
      font-size: 8px;
      word-wrap: break-word;
      vertical-align: middle;
    }
    .main-table th {
      background-color: #f0f0f0;
      font-weight: bold;
      font-size: 8px;
    }
    .group-header {
      background-color: #d9d9d9;
      font-weight: bold;
      font-size: 9px;
      text-align: center;
    }
    .note {
      margin-top: 6px;
      font-size: 9px;
    }
    .form-no {
      margin-top: 4px;
      font-size: 8px;
      color: #555;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="header">
    <table class="header-table">
      <tr>
        <td style="width: 20%;" class="master-copy">MASTER COPY</td>
        <td style="width: 60%;" class="title-cell">USAGE AND CLEANING RECORD OF SAMPLING / DISPENSING BOOTH AND ROOM</td>
        <td style="width: 20%;" class="logo-cell">
          <img src="{{logo}}" alt="Logo" />
        </td>
      </tr>
    </table>
  </div>

  <table class="main-table">
    <thead>
      <!-- Row 1: Group headers -->
      <tr>
        <th rowspan="2">S.No.</th>
        <th rowspan="2">Date</th>
        <th rowspan="2">Area<br/>(Equipment ID)</th>
        <th rowspan="2">LAF ON<br/>Time</th>
        <th rowspan="2">Product /<br/>Material Name</th>
        <th rowspan="2">Product Batch No. /<br/>In-House Batch No.</th>
        <th colspan="3" class="group-header">Equipment ID</th>
        <th colspan="6" class="group-header">Cleaning Activity</th>
        <th rowspan="2">Remarks (*)</th>
      </tr>
      <!-- Row 2: Sub-headers under groups -->
      <tr>
        <th>Activity Start Time<br/>Sign &amp; Date</th>
        <th>Activity End Time<br/>Sign &amp; Date</th>
        <th>LAF OFF<br/>Time</th>
        <th>Type<br/>A / C</th>
        <th>Start<br/>Time</th>
        <th>End<br/>Time</th>
        <th>Cleaning<br/>Accessories (&#10003;)</th>
        <th>Done By<br/>Sign &amp; Date</th>
        <th>Checked By<br/>Sign &amp; Date</th>
      </tr>
    </thead>
    <tbody>
      {{#each allActivities}}
      <tr>
        <td>{{inc @index}}</td>
        <td>{{this.date_display}}</td>
        <td>{{this.areaDisplay}}</td>
        <td>{{this.laf_on_time_display}}</td>
        <td>{{this.productName}}</td>
        <td>{{this.batchNo}}</td>
        <td>{{this.activity_start_display}}</td>
        <td>{{this.activity_end_display}}</td>
        <td>{{this.laf_off_time_display}}</td>
        <td>{{this.type_of_cleaning}}</td>
        <td>{{this.start_date_display}}</td>
        <td>{{this.end_date_display}}</td>
        <td>{{this.cleaning_accessories}}</td>
        <td>{{this.done_by_display}}</td>
        <td>{{this.verified_by_display}}</td>
        <td>{{this.remarks}}</td>
      </tr>
      {{/each}}
    </tbody>
  </table>

  <p class="note">* Note: Put (&#10003;) wherever applicable, Put N/A wherever not applicable.</p>
  {{!-- Format number moved to the per-page PDF footer (see uacr_pdf.controller.js) --}}
</div>
</body>
</html>
