<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><?= esc($jc['jc_number']) ?> — <?= esc($settings['company_name']??'FM ERP') ?></title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
<?php
$p=$settings['primary_color']??'#76002b';
$s=$settings['secondary_color']??'#c7ba9a';
function _rgb($h){$h=ltrim($h,'#');if(strlen($h)==3)$h=$h[0].$h[0].$h[1].$h[1].$h[2].$h[2];return hexdec(substr($h,0,2)).','.hexdec(substr($h,2,2)).','.hexdec(substr($h,4,2));}
?>
*{box-sizing:border-box;margin:0;padding:0}body{font-family:'DM Sans',Arial,sans-serif;font-size:13px;color:#1a2332}
.page{max-width:780px;margin:0 auto}
.header{display:flex;justify-content:space-between;padding:20px 28px 14px;border-bottom:3px solid <?= $p ?>}
.logo-text{font-size:1.3rem;font-weight:700;color:<?= $p ?>}
.tagline{font-size:.62rem;color:#9ca3af;text-transform:uppercase;letter-spacing:.8px;margin-top:3px}
.doc-type{font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:<?= $s ?>;margin-bottom:3px;text-align:right}
.doc-num{font-size:1.2rem;font-weight:700;color:<?= $p ?>;text-align:right}
.meta{display:grid;grid-template-columns:repeat(4,1fr);padding:12px 28px;background:#fafafa;border-bottom:1px solid #e8edf3}
.meta-cell{padding:8px 10px}
.meta-label{font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:#9ca3af;margin-bottom:2px}
.meta-value{font-size:.8rem;font-weight:600}
.section{padding:14px 28px}
.section-title{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:<?= $p ?>;margin-bottom:8px;padding-bottom:4px;border-bottom:2px solid rgba(<?= _rgb($p) ?>,.12)}
.desc-box{background:#fafafa;border-radius:6px;padding:12px;font-size:.83rem;line-height:1.6;border-left:3px solid <?= $s ?>}
table{width:100%;border-collapse:collapse}
table th{background:<?= $p ?>;color:#fff;font-size:.65rem;font-weight:700;text-transform:uppercase;padding:8px 14px;text-align:left}
table td{padding:8px 14px;border-bottom:1px solid #f0f4f8;font-size:.8rem}
table tfoot td{font-weight:700;border-top:2px solid <?= $p ?>;background:rgba(<?= _rgb($p) ?>,.06)}
.sig-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:20px 28px}
.sig-block{padding-top:50px;border-top:1.5px solid #bbb;text-align:center;font-size:.72rem;color:#6b7a8d}
.footer{padding:10px 28px;border-top:2px solid <?= $p ?>;background:rgba(<?= _rgb($p) ?>,.05);display:flex;justify-content:space-between}
.footer-brand{font-weight:700;color:<?= $p ?>;font-size:.75rem}
@media print{body{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
</style>
</head>
<body>
<div class="page">
  <div class="header">
    <div>
      <?php if($companyLogoB64): ?><img src="<?= esc($companyLogoB64) ?>" style="max-height:50px;max-width:160px;object-fit:contain;display:block;margin-bottom:4px"><?php else: ?>
      <div class="logo-text"><?= esc($settings['company_name']??'FM ERP') ?></div><?php endif; ?>
      <div class="tagline"><?= esc($settings['company_tagline']??'Facility Management ERP') ?></div>
    </div>
    <div>
      <div class="doc-type">JOB CARD</div>
      <div class="doc-num"><?= esc($jc['jc_number']) ?></div>
      <span style="background:rgba(<?= _rgb($p) ?>,.1);color:<?= $p ?>;font-size:.65rem;font-weight:700;padding:2px 10px;border-radius:12px;display:inline-block;margin-top:4px;text-transform:uppercase"><?= ucfirst($jc['status']) ?></span>
    </div>
  </div>
  <div class="meta">
    <div class="meta-cell"><div class="meta-label">Work Order</div><div class="meta-value"><?= esc($jc['wo_number']??'—') ?></div></div>
    <div class="meta-cell"><div class="meta-label">Facility</div><div class="meta-value"><?= esc($jc['facility_name']??'—') ?></div></div>
    <div class="meta-cell"><div class="meta-label">Assigned To</div><div class="meta-value"><?= esc($jc['assigned_to_name']??'—') ?></div></div>
    <div class="meta-cell"><div class="meta-label">Labor Hours</div><div class="meta-value"><?= number_format($jc['labor_hours'],1) ?>h</div></div>
  </div>
  <div class="section">
    <div class="section-title">Work Description</div>
    <div class="desc-box"><?= nl2br(esc($jc['description'])) ?></div>
  </div>
  <?php if(!empty($materials)): ?>
  <div class="section" style="padding-top:0">
    <div class="section-title">Materials Used</div>
    <table>
      <thead><tr><th>Item</th><th>Qty</th><th>Unit Cost</th><th style="text-align:right">Total</th></tr></thead>
      <tbody>
      <?php $matTotal=0; foreach($materials as $m): $matTotal+=$m['total_cost']; ?>
      <tr><td><?= esc($m['item_name']) ?></td><td><?= $m['quantity'] ?></td><td><?= $currency ?> <?= number_format($m['unit_cost'],2) ?></td><td style="text-align:right;font-weight:600"><?= $currency ?> <?= number_format($m['total_cost'],2) ?></td></tr>
      <?php endforeach; ?>
      </tbody>
      <tfoot><tr><td colspan="3" style="text-align:right">Materials Total</td><td style="text-align:right"><?= $currency ?> <?= number_format($matTotal,2) ?></td></tr></tfoot>
    </table>
  </div>
  <?php endif; ?>
  <?php if($jc['completion_notes']): ?>
  <div class="section" style="padding-top:0">
    <div class="section-title">Completion Notes</div>
    <div class="desc-box"><?= nl2br(esc($jc['completion_notes'])) ?></div>
  </div>
  <?php endif; ?>
  <div class="sig-row">
    <div class="sig-block"><div><?= esc($jc['assigned_to_name']??'Technician') ?></div><div>Technician Signature</div></div>
    <div class="sig-block"><div>Supervisor / FM Manager</div><div>Approval Signature</div></div>
    <div class="sig-block"><div>Client / Tenant</div><div>Acknowledgement</div></div>
  </div>
  <div class="footer">
    <div class="footer-brand"><?= esc($settings['company_name']??'FM ERP') ?></div>
    <div style="font-size:.68rem;color:#9ca3af">Printed: <?= date('d M Y H:i') ?> | <?= esc($jc['jc_number']) ?></div>
  </div>
</div>
<script>window.onload=()=>window.print()</script>
</body>
</html>
