<html lang='en'>

  <head>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Audit Time Justification Plan</title>
    <style
    >
    @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;500;600;700&display=swap');


    body {
      font-family: 'Source Sans Pro', Arial, sans-serif;
      font-size: 14pt;
      color: #343232;
      padding: 20px;
      /* remove uppercase to preserve normal case */
      text-transform: none;
      background-color: #ffffff;
      margin: 0;
      line-height: 1.5;
      /* ensure default weight is normal (not bold) */
      font-weight: 400;
    }

    .document-container {
      max-width: 1100px;
      /* wider page */
      margin: 0 auto;
      background-color: #ffffff;
      padding: 15px;
    }

    /* Table and Border Styling */
    .doc-table {
      border-collapse: collapse;
      width: 100%;
      border: 1px solid #000;
      margin-bottom: 8px;
      font-size: 10pt;
      font-weight: 400;
    }

    .doc-table th,
    .doc-table td {
      border: 1px solid #000;
      padding: 6px 8px;
      vertical-align: top;
    }

    /* Header Row */
    .header-title-row td {
      padding: 10px 8px;
      background-color: #f0f0f0;
      font-weight: 700;
      text-align: center;
      font-size: 14pt;
    }

    .section-header {
      background-color: #e3f2fd;
      font-weight: 600;
      padding: 4px 6px;
      white-space: nowrap;
      font-size: 11pt;
    }

    .section-header.smaller-w {
      width: 12%;
    }

    /* Logos and Titles */
    .logo {
      width: 100px;
      /* slightly bigger */
      height: auto;
    }

    .logo-container {
      display: flex;
      align-items: center;
      gap: 50px;
      padding: 4px;
    }

    .quality-registrar-text {
      font-weight: 800;
      font-size: 24pt;
      text-transform: uppercase;
      text-align: center;
      letter-spacing: 0.05em;
      color: #0d0c0c;
    }

      {
        {
        ! .form-container {
          width: 210mm;
          /* A4 width */
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
          background-color: white;
          padding: 5px;
          box-sizing: border-box;
        }
      }
    }

    /* --- Main Table Structure --- */
    .main-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
      border-color: black;
      font-weight: 400;
    }

    .main-table td {
      border: 1px solid black;
      padding: 3px;
      vertical-align: middle;
      height: 18px;
      text-align: left;
      /* Default text alignment */
    }

    /* Define specific column widths (7 columns) for precise alignment */
    /* Total width is 100%. Column widths adjusted to match the image's vertical lines. */
    .col-1 {
      width: 14%;
    }

    .col-2 {
      width: 15%;
    }

    .col-3 {
      width: 9%;
    }

    .col-4 {
      width: 22%;
    }

    .col-5 {
      width: 13%;
    }

    .col-6 {
      width: 8%;
    }

    .col-7 {
      width: 19%;
    }

    .header-title {
      font-size: 14pt;
      font-weight: bold;
      text-align: center;
      border-bottom: 2px solid black !important;
      vertical-align: middle;
    }

    .audit-title-cell {
      font-size: 11pt;
      font-weight: bold;
      text-align: center;
      background-color: #f0f0f0;
      vertical-align: middle;
    }

    .form-id,
    .page-info {
      font-weight: bold;
      text-align: center;
      font-size: 8pt;
      vertical-align: middle;
    }

    .page-info {
      text-align: right;
      padding-right: 5px;
    }

    /* --- Detail and Content Cells --- */
    .label-cell {
        {
          {
          ! background-color: #d3d3d3;
        }
      }

      font-weight: bold;
      padding-left: 5px;
    }

    .detail-content {
        {
          {
          ! font-weight: bold;
        }
      }

      padding-left: 5px;
    }

    /* Contact Details Row */
    .contact-detail-cell {
      padding-left: 5px;
      font-weight: bold;
    }

    /* Scope Details */
    .scope-list-item {
      padding-left: 10px;
      font-size: 8.5pt;
      line-height: 1.1;
      vertical-align: top;
      border-bottom: none;
    }

    .last-scope-item td {
      border-bottom: 1px solid black !important;
    }

    /* Checkbox group styling */
    .checkbox-group {
      padding-left: 5px;
      font-weight: normal;
    }

    .checkbox-group label {
      margin-right: 8px;
      white-space: nowrap;
      font-weight: bold;
    }

    .checkbox-group input {
      /* Remove default spacing on checkbox */
      margin: 0 3px 0 0;
      padding: 0;
    }

    /* EAC/Risk Row */
    .eac-content {
      font-weight: bold;
      text-align: center;
    }

    .risk-label {
        {
          {
          ! background-color: #d3d3d3;
        }
      }

      font-weight: bold;
      text-align: center;
    }

    .inner-risk-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 8pt;
      margin: 0 auto;
      /* centered horizontally */
      text-align: center;
    }

    .inner-risk-table td {
      border: 1px solid #000;
      /* full visible border */
      padding: 0;
      /* no padding */
      margin: 0;
      /* no margin */
      text-align: center;
      -ms-text-combine-horizontal: middle;

        {
          {
          ! height: 22px;
          /* optional: controls cell height */
        }
      }
    }

    .risk-item {
      display: inline-block;
      text-align: center;
      line-height: 1.1;
      margin: 0;
      padding: 0;
    }

    .risk-label-top {
      font-weight: 700;
      /* bold for label */
      display: block;
      margin: 0;
      padding: 0;
    }

    .risk-value {
      font-weight: 400;
      /* normal for value */
      display: block;
      margin: 0;
      padding: 0;
    }


    /* --- Audit Plan Table Styles --- */
    .table-header-row .main-table-header {
      background-color: #d3eeeb;
      font-weight: bold;
      text-align: center !important;
      padding: 4px;
    }

    .data-row td {
      text-align: center;
    }

    .data-row td:nth-child(1) {
      text-align: left;
      padding-left: 5px;
      font-weight: bold;
    }

    .bottom-separator-row td {
      border-bottom: 1px double black !important;
    }

    /* Proposed Team Header */
    .proposed-team-header {
      background-color: #d3eeeb;
      font-weight: bold;
      text-align: center;
      font-size: 10pt;
      padding: 4px;
    }

    /* --- Scheme Office Use Only Section --- */
    .scheme-label {
      vertical-align: middle;
      text-align: center;
      background-color: #d3eeeb;
      font-weight: bold;
      line-height: 1.2;
    }

    .scheme-content {
      font-weight: bold;
      vertical-align: top;
      padding-left: 5px;
      line-height: 1.5;
      height: 45px;
    }

    .approval-label {
      background-color: #d3eeeb;
      font-weight: bold;
      text-align: center;
      vertical-align: middle;
      border-bottom: 1px solid black !important;
      /* Single line for separation */
    }

    .signature-cell {
      text-align: center;
      vertical-align: bottom;
      height: 45px;
    }

    .signature-text {
      font-size: 7pt;
      text-align: center;
    }

    /* --- Footer Section Styles --- */
    .footer-row td {
      border: 1px solid black !important;
      padding: 3px;
      font-size: 8pt;
      text-align: center;
      vertical-align: middle;
    }

    .footer-label {
      background-color: #d3d3d3;
      font-weight: bold;
    }
  </style>

  </head>

  <body>

    <div class='document-container'>

      <table class='doc-table'>

        <tr>
          <td style='border-right: none;' colspan='3'>
            <div class='logo-container'>
              <img
                src='http://localhost:3000/static/logo.png'
                class='logo'
                alt='logo'
              />
              <div>
                <div class='quality-registrar-text'>QUALITY REGISTRAR
                  <br />SYSTEMS
                </div>
              </div>
            </div>
          </td>
          <td
            style='border-left: 1px solid #000; text-align: right; vertical-align: middle;'
            class='w-20'
          >
            Page 1 of 2
          </td>

        </tr>
        <!-- Row 2: Audit Plan Title and Form Number -->
        <tr class='header-title-row'>
          <td colspan='3'>
            Audit Time Justification Plan
          </td>
          <td
            style='text-align: right; font-size: 10px; font-weight: normal; background-color: white;'
          >Form 04-1</td>
        </tr>
      </table>

      <div class='form-container'>
        <table class='main-table'>
          <tbody>
            <tr>
              <td class='label-cell col-1'>Name:</td>
              <td
                colspan='6'
                class='detail-content'
              >{{job.companySnapshot.companyName}}</td>
            </tr>
            <tr>
              <td class='label-cell col-1'>Address:</td>
              <td
                colspan='6'
                class='detail-content'
              >{{job.companySnapshot.companyAddress}}</td>
            </tr>
            <tr>
              <td class='label-cell col-1'>Contact Detail:</td>
              <td
                colspan='2'
                class='contact-detail-cell col-2 col-3'
              >{{job.companySnapshot.companytelephone}}</td>
              <td class='contact-detail-cell col-4'>Fax: NIL</td>
              <td
                colspan='3'
                class='contact-detail-cell col-5 col-6 col-7'
              >Email: {{job.companySnapshot.companyemail}}</td>
            </tr>
            <tr>
              <td class='label-cell scope-label col-1' rowspan='3'>Scope
                Details:</td>
              <td colspan='6' class='scope-list-item'>
                {{{smartScope job.companySnapshot.companyScope 'auto'}}}
              </td>
            </tr>
            {{! <tr>
              <td colspan='6' class='scope-list-item'>
                &gt; HEAVY EQUIPMENT AND MACHINERY SPARE PARTS TRADING
              </td>
            </tr>
            <tr class='last-scope-item'>
              <td colspan='6' class='scope-list-item'>
                &gt; OILFIELD AND NATURAL GAS EQUIPMENT & SPARE PARTS TRADING
              </td>
            </tr> }}
            <tr>
              <td class='label-cell col-1'>Standard:</td>
              <td colspan='4' class='checkbox-group'>
                <label><input type='checkbox' checked />
                  {{#if standards}}
                    {{#each standards}}
                      {{name}}{{#unless @last}}, {{/unless}}
                    {{/each}}
                  {{else}}
                    N/A
                  {{/if}}</label>
                {{! <label><input type='checkbox' /> ISO 14001</label>
              <label><input type='checkbox' checked /> ISO 45001</label>
              <label><input type='checkbox' /> ISO 22000</label> }}
                <label><input type='checkbox' /> Others:</label>
              </td>
              <td colspan='2' class='risk-label'>No. of Full-Time Employee:
                {{job.numEmployees}}</td>
            </tr>
            <tr>
              <td class='label-cell col-1'>EAC/NACE/Food Category</td>
              <td colspan='4' class='eac-content'>{{job.naceEacCodes}}</td>
              <td colspan='2' class='risk-label'>
                Risk
                <table class='inner-risk-table'>
                  <tr>
                    <td>
                      <div class='risk-item'>
                        <span class='risk-label-top'>G:</span><br />
                        <span class='risk-value'>MED</span>
                      </div>
                    </td>
                    <td>
                      <div class='risk-item'>
                        <span class='risk-label-top'>E:</span><br />
                        <span class='risk-value'>MED</span>
                      </div>
                    </td>
                    <td>
                      <div class='risk-item'>
                        <span class='risk-label-top'>OH&amp;S:</span><br />
                        <span class='risk-value'>MED</span>
                      </div>
                    </td>
                    <td>
                      <div class='risk-item'>
                        <span class='risk-label-top'>Others:</span><br />
                        <span class='risk-value'>–</span>
                      </div>
                    </td>
                  </tr>
                </table>

              </td>
            </tr>
            <tr class='table-header-row'>
              <td class='main-table-header' colspan='2'>Audit Type</td>
              <td class='main-table-header col-3'>{M/D}</td>
              <td class='main-table-header col-4'>Audit Man days</td>
              <td class='main-table-header col-5'>Audit Date</td>
              <td class='main-table-header' colspan='2'>Audit Team</td>
            </tr>

            {{! Stage 1 }}
            {{#each stages}}
              <tr class='data-row'>
                <td colspan='2'>{{this.stageName}}</td>
                <td>.5</td>
                <td>{{job.md}}</td>
                <td>{{auditDate}}</td>
                <td colspan='2'>
                  {{this.auditBy.firstName}}
                  {{this.auditBy.lastName}}
                  (L/A)
                </td>
              </tr>
            {{/each}}
            {{! Future / Empty stages }}
            <tr class='data-row'>
              <td colspan='2'>1<sup>st</sup> Surveillance</td>
              <td></td>
              <td></td>
              <td></td>
              <td colspan='2'></td>
            </tr>

            <tr class='data-row'>
              <td colspan='2'>2<sup>nd</sup> Surveillance</td>
              <td></td>
              <td></td>
              <td></td>
              <td colspan='2'></td>
            </tr>

            <tr class='data-row'>
              <td colspan='2'>Triennial</td>
              <td></td>
              <td></td>
              <td></td>
              <td colspan='2'></td>
            </tr>

            <tr class='data-row bottom-separator-row'>
              <td colspan='2'>Special/Other</td>
              <td></td>
              <td></td>
              <td></td>
              <td colspan='2'></td>
            </tr>

            <tr class='table-header-row'>
              <td colspan='7' class='proposed-team-header'>
                Proposed Audit Team for Surveillance/Triennial/Special/Other
              </td>
            </tr>
            <tr class='table-header-row sub-header-row'>
              <td class='main-table-header' colspan='2'>Audit Type</td>
              <td class='main-table-header'>M/D</td>
              <td class='main-table-header'>Audit Man days</td>
              <td class='main-table-header'>Audit Date</td>
              <td class='main-table-header' colspan='2'>Audit Team</td>
            </tr>
            <tr class='data-row'>
              <td colspan='2'>1<sup>st</sup> Surveillance</td>
              <td>.5</td>
              <td></td>
              <td>{{formatDate expectedSurveillanceDate}}</td>
              <td colspan='2'>
                {{stages.[0].auditBy.firstName}}
                {{stages.[0].auditBy.lastName}}
                (L/A)
              </td>
            </tr>

            <tr class='data-row'>
              <td colspan='2'>2<sup>nd</sup> Surveillance</td>
              <td></td>
              <td></td>
              <td></td>
              <td colspan='2'></td>
            </tr>
            <tr class='data-row'>
              <td colspan='2'>Triennial</td>
              <td></td>
              <td></td>
              <td></td>
              <td colspan='2'></td>
            </tr>
            <tr class='data-row bottom-separator-row'>
              <td colspan='2'>Special/Other</td>
              <td></td>
              <td></td>
              <td></td>
              <td colspan='2'></td>
            </tr>
            <tr>
              <td class='scheme-label col-1' rowspan='2'>Scheme Office Use Only</td>
              <td colspan='4' rowspan='2' class='scheme-content'>
                {{#if job.jobCode}}{{job.jobCode}}{{else}}N/A{{/if}}
                <br />

              </td>
              <td colspan='2' class='approval-label'>Approved By: Ms. Khola
                Sajid</td>
            </tr>
            <tr>
              <td colspan='2' class='signature-cell'>
                <div class='signature-text'>
                  (Signature)
                </div>
              </td>
            </tr>

            <tr class='footer-row'>
              <td class='footer-label col-1'>Issue</td>
              <td class='footer-content col-2'>2</td>
              <td class='footer-label col-3'>Revision</td>
              <td class='footer-content col-4'>01</td>
              <td class='footer-label' colspan='2'>Date</td>
              <td class='footer-content col-7'>01.05.2024</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>

  </body>

</html>