<html lang='en'>
  <head>
    <style>
      @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600&display=swap');
    </style>
    <meta charset='UTF-8' />
    <meta name='viewport' content='width=device-width, initial-scale=1.0' />
    <title>Scope Summary Report</title>

    <style
    >
      body {
  font-family: 'Source Sans Pro', Arial, sans-serif;
  background-color: #ffffff;
  margin: 6px;
  padding: 1.5mm;
  font-size: 12.5pt;
  font-weight: 400;
  color: #000;
}

 @media print {
      .certificate::before {
          {
            {
            content: "DRAFT";

          }
        }

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-30deg);
        font-size: 150px;
        color: rgba(150, 150, 150, 0.15);
        font-weight: 700;
        z-index: 1;
        pointer-events: none;
        white-space: nowrap;
      }
    }
    .page-border {
  border: 3px solid #2d3e8e;
  padding: 2px;
  height: 287mm;
  box-sizing: border-box;
  overflow: hidden;
}

.inner-border {
  border: 1px solid #2d3e8e;
  height: 100%;
  padding: 6mm;
  box-sizing: border-box;
}

{{!-- 
      .page {
        width: 100%;
        {{! max-width: 750px; }}
        margin: auto;
        background: white;
        padding: 20px;
        border: 3px solid #0c2a72;
        box-sizing: border-box;
      } --}}

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
      }

      .logo {
        width: 100px;
        height: auto;
      }

      .title-box {
        padding: 6px 25px;
        font-weight: 600; /* SemiBold instead of 1000 */
        text-transform: uppercase;
        font-size: 18px; /* slightly smaller */
        text-align: center;
      }

      .empty-box {
  border: 1px solid #c10808;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  min-width: 160px;
}

.empty-box .job-code {
  font-weight: 500;
}

.scope-list {
  list-style: none;       /* remove default bullets */
  padding-left: 0;
  margin: 0 0 10px 0;
}

.scope-list li {
  margin: 5px 0;
  line-height: 1.4;
}



      table {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px; /* smaller table text */
        margin-top: 5px;
      }

      /* Table headers */
      th {
        border: 1.6px solid black;
        padding: 5px;
        font-weight: 600; /* bold headers */
        color: black;
      }

      /* Table cells */
      td {
        border: 1.6px solid black;
        padding: 5px;
        font-weight: 400; /* normal weight */
        color: #333333; /* different color */
      }

      /* Ensure <strong> inside td stays normal weight */
      td strong {
        font-weight: 400;
        color: #333333;
      }

      .section-title {
        font-size: 13px; /* smaller headings */
        font-weight: 600; /* SemiBold */
        margin-top: 20px;
        margin-bottom: 5px;
      }

      .remarks {
        height: 100px; /* slightly smaller */
        border: 1.6px solid black;
        margin-top: 5px;
        font-size: 11px;
        padding: 5px;
      }

      .footer {
        text-align: center;
        font-size: 10pt; /* smaller footer */
        margin-top: 15px;
      }
    </style>
  </head>

  <body>
    <div class='page-border'>
      <div class='inner-border'>
        <div class='page'>
          <!-- HEADER TOP AREA -->
          <div class='header'>
            <img
              src='http://localhost:3000/static/logo.png'
              class='logo'
              alt='logo'
            />
            <div class='title-box'>SCOPE SUMMARY REPORT</div>

            <!-- ✅ FIX: jobCodes instead of jobCode -->
            <div class='empty-box'>
              <strong>Job id:</strong>
              {{job.id}}<br />

              <strong>Job NO:</strong>
              {{#if job.jobCode}}{{job.jobCode}}{{else}}N/A{{/if}}
            </div>

          </div>

          <!-- MAIN DETAILS TABLE -->
          <table>
            <tr>
              <td><strong>Company Name</strong></td>
              <td colspan='3'>{{job.companySnapshot.companyName}}</td>
            </tr>
            <tr>
              <td><strong>Company Address</strong></td>
              <td colspan='3'>{{job.companySnapshot.companyAddress}}</td>
            </tr>
            {{!-- <tr>
    <td><strong>Scope of Work</strong></td>
    <td colspan='3'>{{job.companySnapshot.companyScope}}</td>
  </tr> --}}
            <tr>
              <td><strong>Contact Person</strong></td>
              <td>{{job.companySnapshot.companycontact_person}}</td>
              <td><strong>Designation</strong></td>
              <td>{{job.companySnapshot.companydesignation}}</td>
            </tr>
            <tr>
              <td><strong>Email Address</strong></td>
              <td>{{job.companySnapshot.companyemail}}</td>
              <td><strong>Mobile No.</strong></td>
              <td>{{job.companySnapshot.companymobile}}</td>
            </tr>
            <tr>
              <td><strong>Telephone</strong></td>
              <td>{{job.companySnapshot.companytelephone}}</td>
              <td><strong>Fax No.</strong></td>
              <td>{{job.companySnapshot.fax}}</td>
            </tr>

            <!-- Standards -->
            <tr>
              <td><strong>STANDARDS</strong></td>
              <td>
                {{#if standards}}
                  {{#each standards}}
                    {{name}}{{#unless @last}}, {{/unless}}
                  {{/each}}
                {{else}}
                  N/A
                {{/if}}
              </td>
              <td><strong>Validity</strong></td>
              <td>
                ☑ yearly surveillance<br />
                □ 3 years
              </td>
            </tr>

            <tr>
              <td><strong>Certification Body</strong></td>
              <td>{{job.companySnapshot.companycertification_body}}</td>
              <td><strong>Accreditation</strong></td>
              <td>{{job.companySnapshot.companyaccreditation}}</td>
            </tr>
          </table>

          <!-- SCOPE OF WORK -->
          <div class='section-title'>Scope of Work:</div>
          <p style='margin: 0 0 10px 0;'>{{{smartScope
              job.companySnapshot.companyScope
              'auto'
            }}}</p>

          <!-- TABLE 2 -->
          <table>
            <tr>
              <th></th>
              <th>Audit Date</th>
              <th>ANZIC Code</th>
              <th>Auditor</th>
              <th>Technical Expert</th>
            </tr>

            {{#each stages}}
              <tr>
                <td>{{stageName}}</td>
                <td>{{auditDate}}</td>
                <td></td>

                <!-- ✅ FIX: leadAuditor is ROOT level -->
                <td>
                  {{#if auditBy}}
                    {{auditBy.firstName}}
                    {{auditBy.lastName}}
                  {{else}}
                    N/A
                  {{/if}}
                </td>

                <td></td>
              </tr>
            {{/each}}
          </table>

          <!-- REMARKS -->
          <div class='section-title'>Remarks:</div>
          <div class='remarks'></div>

          <!-- FOOTER -->
          <div class='footer'>
            P.O. BOX 26826 Abu Dhabi, UAE, Tel No.: +971-26712161, Fax No.:
            +971-2-6713982
          </div>
        </div>
      </div>
    </div>

  </body>
</html>