<?php
$progress     = 50;
$label        = 'Repair of CRD3 ECU in progress';
$unit         = 'CRD3 ECU';
$technician   = 'TECH-07';
$started_at   = '2026-05-02 09:14:00';
$status       = 'ACTIVE';

$elapsed_secs = time() - strtotime($started_at);
$elapsed_min  = floor($elapsed_secs / 60);
$elapsed_sec  = $elapsed_secs % 60;
$elapsed_fmt  = sprintf('%02d:%02d', $elapsed_min, $elapsed_sec);

$steps = [
    ['name' => 'Fault code scan',           'done' => true],
    ['name' => 'EEPROM read & backup',      'done' => true],
    ['name' => 'Driver stage diagnostics',  'done' => true],
    ['name' => 'Firmware flash',            'done' => false],
    ['name' => 'Calibration & verification','done' => false],
    ['name' => 'Final bench test',          'done' => false],
];

$done_steps  = array_filter($steps, fn($s) => $s['done']);
$total_steps = count($steps);
$done_count  = count($done_steps);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECU REPAIR MONITOR — <?= htmlspecialchars($unit) ?></title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@400;600;700&display=swap" rel="stylesheet">
<style>
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  :root {
    --bg:        #0a0c0e;
    --surface:   #111416;
    --border:    #1e2428;
    --border2:   #2a3038;
    --accent:    #00e5a0;
    --accent2:   #00b87a;
    --warn:      #f5a623;
    --danger:    #e03e3e;
    --text:      #c8d4dc;
    --muted:     #4a5a66;
    --mono:      'Share Tech Mono', monospace;
    --cond:      'Barlow Condensed', sans-serif;
  }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--mono);
    font-size: 14px;
    min-height: 100vh;
    padding: 2rem;
    background-image:
      repeating-linear-gradient(0deg, transparent, transparent 39px, #0f1215 39px, #0f1215 40px),
      repeating-linear-gradient(90deg, transparent, transparent 39px, #0f1215 39px, #0f1215 40px);
  }

  .wrapper {
    max-width: 760px;
    margin: 0 auto;
  }

  /* ── Header bar ── */
  .topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border2);
    padding-bottom: 0.75rem;
    margin-bottom: 2rem;
  }
  .topbar-logo {
    font-family: var(--cond);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.25em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .topbar-logo span { color: var(--accent); }
  .topbar-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--accent);
    letter-spacing: 0.1em;
  }
  .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent);
    animation: blink 1.2s ease-in-out infinite;
  }
  @keyframes blink { 0%,100% { opacity:1; } 50% { opacity: 0.2; } }

  /* ── Main card ── */
  .card {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-top: 3px solid var(--accent2);
    padding: 1.75rem 2rem;
    margin-bottom: 1.25rem;
  }

  .job-id {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.15em;
    margin-bottom: 0.4rem;
  }
  .job-title {
    font-family: var(--cond);
    font-size: 26px;
    font-weight: 700;
    color: #e8f0f5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    line-height: 1.15;
  }

  /* ── Progress bar ── */
  .progress-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.6rem;
  }
  .progress-label-text {
    font-size: 11px;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-transform: uppercase;
  }
  .progress-pct {
    font-family: var(--cond);
    font-size: 36px;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
  }

  .track {
    height: 18px;
    background: var(--border);
    border: 1px solid var(--border2);
    position: relative;
    overflow: hidden;
    margin-bottom: 0.35rem;
  }
  .fill {
    height: 100%;
    width: <?= $progress ?>%;
    background: repeating-linear-gradient(
      90deg,
      var(--accent2) 0px,
      var(--accent2) 14px,
      var(--accent)  14px,
      var(--accent)  16px
    );
    position: relative;
    transition: width 1s ease;
  }
  .fill::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 2px;
    background: #fff;
    opacity: 0.6;
    box-shadow: 0 0 8px var(--accent);
  }
  .scan-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(0,229,160,0.5) 50%, transparent 100%);
    animation: scan 2s linear infinite;
  }
  @keyframes scan {
    from { transform: translateX(-100%); }
    to   { transform: translateX(200%); }
  }
  .track-markers {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--muted);
    padding: 0 2px;
  }

  /* ── Meta grid ── */
  .meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    margin-top: 1.75rem;
  }
  .meta-cell {
    background: var(--surface);
    padding: 0.75rem 1rem;
  }
  .meta-cell-label {
    font-size: 10px;
    letter-spacing: 0.15em;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 5px;
  }
  .meta-cell-value {
    font-family: var(--cond);
    font-size: 16px;
    font-weight: 600;
    color: #ddeaf0;
    letter-spacing: 0.04em;
  }
  .meta-cell-value.accent { color: var(--accent); }
  .meta-cell-value.warn   { color: var(--warn); }

  /* ── Steps ── */
  .steps-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    padding: 1.5rem 2rem;
    margin-bottom: 1.25rem;
  }
  .steps-header {
    font-size: 11px;
    letter-spacing: 0.2em;
    color: var(--muted);
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }
  .step-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
  }
  .step-row:last-child { border-bottom: none; }
  .step-num {
    font-size: 10px;
    color: var(--muted);
    width: 18px;
    text-align: right;
    flex-shrink: 0;
  }
  .step-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
  }
  .step-icon.done  { color: var(--accent); }
  .step-icon.todo  { color: var(--muted); }
  .step-name {
    flex: 1;
  }
  .step-name.done { color: var(--text); }
  .step-name.todo { color: var(--muted); }
  .step-badge {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid;
  }
  .step-badge.done    { color: var(--accent2); border-color: var(--accent2); }
  .step-badge.todo    { color: var(--muted);   border-color: var(--border2); }
  .step-badge.current { color: var(--warn);    border-color: var(--warn);   animation: blink 1s ease-in-out infinite; }

  /* ── Footer ── */
  .footer {
    font-size: 11px;
    color: var(--muted);
    letter-spacing: 0.08em;
    display: flex;
    justify-content: space-between;
    padding-top: 0.5rem;
  }
  .footer span { color: var(--accent); }
</style>
</head>
<body>
<div class="wrapper">

  <div class="topbar">
    <div class="topbar-logo">ECU<span>//</span>DIAGNOSTICS &nbsp;v2.4.1</div>
    <div class="topbar-status">
      <div class="dot"></div>
      <?= htmlspecialchars($status) ?>
    </div>
  </div>

  <div class="card">
    <div class="job-id">JOB #ECU-<?= date('Ymd') ?>-<?= rand(1000,9999) ?> &nbsp;/&nbsp; UNIT: <?= htmlspecialchars($unit) ?></div>
    <div class="job-title"><?= htmlspecialchars($label) ?></div>

    <div class="progress-label">
      <div class="progress-label-text">Overall progress</div>
      <div class="progress-pct"><?= $progress ?>%</div>
    </div>

    <div class="track">
      <div class="fill"></div>
      <div class="scan-line"></div>
    </div>
    <div class="track-markers">
      <?php for ($i = 0; $i <= 10; $i++): ?>
        <span><?= $i * 10 ?></span>
      <?php endfor; ?>
    </div>

    <div class="meta-grid">
      <div class="meta-cell">
        <div class="meta-cell-label">Technician</div>
        <div class="meta-cell-value"><?= htmlspecialchars($technician) ?></div>
      </div>
      <div class="meta-cell">
        <div class="meta-cell-label">Elapsed</div>
        <div class="meta-cell-value warn" id="elapsed"><?= $elapsed_fmt ?></div>
      </div>
      <div class="meta-cell">
        <div class="meta-cell-label">Steps done</div>
        <div class="meta-cell-value accent"><?= $done_count ?> / <?= $total_steps ?></div>
      </div>
      <div class="meta-cell">
        <div class="meta-cell-label">Started</div>
        <div class="meta-cell-value"><?= date('H:i', strtotime($started_at)) ?></div>
      </div>
    </div>
  </div>

  <div class="steps-card">
    <div class="steps-header">Repair sequence — <?= $done_count ?> of <?= $total_steps ?> complete</div>
    <?php foreach ($steps as $i => $step):
      $is_current = !$step['done'] && ($i === $done_count);
    ?>
    <div class="step-row">
      <div class="step-num"><?= str_pad($i + 1, 2, '0', STR_PAD_LEFT) ?></div>
      <div class="step-icon <?= $step['done'] ? 'done' : 'todo' ?>">
        <?php if ($step['done']): ?>
          <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
            <polyline points="2,7 5.5,10.5 12,3" stroke="currentColor" stroke-width="1.5" stroke-linecap="square"/>
          </svg>
        <?php elseif ($is_current): ?>
          <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
            <polygon points="0,0 12,6 0,12" fill="#f5a623"/>
          </svg>
        <?php else: ?>
          <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
            <rect x="1" y="1" width="8" height="8" stroke="currentColor" stroke-width="1"/>
          </svg>
        <?php endif; ?>
      </div>
      <div class="step-name <?= $step['done'] ? 'done' : 'todo' ?>"><?= htmlspecialchars($step['name']) ?></div>
      <div class="step-badge <?= $step['done'] ? 'done' : ($is_current ? 'current' : 'todo') ?>">
        <?= $step['done'] ? 'OK' : ($is_current ? 'RUNNING' : 'WAIT') ?>
      </div>
    </div>
    <?php endforeach; ?>
  </div>

  <div class="footer">
    <span>ECU//DIAGNOSTICS SYSTEM</span>
    <span><?= date('Y-m-d H:i:s') ?></span>
  </div>

</div>
<script>
  // Live elapsed counter (client-side tick)
  let secs = <?= $elapsed_secs ?>;
  const el = document.getElementById('elapsed');
  setInterval(() => {
    secs++;
    const m = String(Math.floor(secs / 60)).padStart(2, '0');
    const s = String(secs % 60).padStart(2, '0');
    el.textContent = m + ':' + s;
  }, 1000);
</script>
</body>
</html>