<?php
$jobs = $jobs ?? [];
$nOpen = $nProg = $nDone = 0;
foreach ($jobs as $j) {
    $st = (string) ($j['status'] ?? 'open');
    if ($st === 'done') {
        $nDone++;
    } elseif ($st === 'in_progress') {
        $nProg++;
    } elseif ($st !== 'cancelled') {
        $nOpen++;
    }
}
?>
<div class="cpt-head">
  <div>
    <h1 class="cpt-title">Service request</h1>
    <p class="cpt-lead mb-0">Ask for help or book a visit. Your service team sees this in their portal.</p>
  </div>
</div>
<?php if ($jobs): ?>
<div class="cpt-kpis">
  <div class="cpt-kpi" style="--kpi-accent:#2563eb;--kpi-tint:#eff6ff">
    <span class="cpt-kpi-ico"><i class="bi bi-circle"></i></span>
    <span><span class="cpt-kpi-n"><?= (int) $nOpen ?></span><span class="cpt-kpi-l d-block">Open</span></span>
  </div>
  <div class="cpt-kpi" style="--kpi-accent:#ea580c;--kpi-tint:#fff7ed">
    <span class="cpt-kpi-ico"><i class="bi bi-arrow-repeat"></i></span>
    <span><span class="cpt-kpi-n"><?= (int) $nProg ?></span><span class="cpt-kpi-l d-block">In progress</span></span>
  </div>
  <div class="cpt-kpi" style="--kpi-accent:#16a34a;--kpi-tint:#f0fdf4">
    <span class="cpt-kpi-ico"><i class="bi bi-check-circle-fill"></i></span>
    <span><span class="cpt-kpi-n"><?= (int) $nDone ?></span><span class="cpt-kpi-l d-block">Done</span></span>
  </div>
  <div class="cpt-kpi" style="--kpi-accent:#0f766e;--kpi-tint:#f0fdfa">
    <span class="cpt-kpi-ico"><i class="bi bi-clipboard2-check"></i></span>
    <span><span class="cpt-kpi-n"><?= count($jobs) ?></span><span class="cpt-kpi-l d-block">All</span></span>
  </div>
</div>
<?php endif; ?>

<div class="row g-3">
  <div class="col-lg-7">
    <h2 class="h6 mb-3">Your recent requests</h2>
    <?php if (empty($jobs)): ?>
      <div class="cpt-empty"><i class="bi bi-clipboard2-check"></i><h2>None yet</h2><p class="mb-0">After you send a request, status shows here.</p></div>
    <?php else: foreach ($jobs as $j):
        $when = !empty($j['visit_at']) ? $j['visit_at'] : ($j['created_at'] ?? null);
        $st = cpt_status_label((string) $j['status']);
    ?>
      <div class="cpt-item cpt-tone-<?= e($st['tone']) ?>">
        <div class="cpt-item-main">
          <div class="cpt-item-ico"><i class="bi bi-clipboard2-check"></i></div>
          <div class="min-w-0 flex-grow-1">
            <div class="cpt-item-name"><?= e($j['subject']) ?></div>
            <div class="cpt-item-sub">
              <span><i class="bi bi-hash"></i> <?= e($j['number']) ?></span>
              <span><i class="bi bi-calendar3"></i> Visit <?= e(dt_fmt($when, 'M j, Y g:i A')) ?></span>
            </div>
          </div>
          <span class="<?= e($st['pill']) ?>"><?= e($st['text']) ?></span>
        </div>
      </div>
    <?php endforeach; endif; ?>
  </div>
  <div class="col-lg-5">
    <form class="cpt-compose" method="post" action="<?= e(url('service')) ?>">
      <?= csrf_field() ?>
      <div class="cpt-compose-head">
        <span class="cpt-compose-ico"><i class="bi bi-tools"></i></span>
        <div>
          <div class="cpt-compose-kicker">New request</div>
          <h2>What do you need?</h2>
          <p>Pick a visit date and tell us the problem. It becomes a job for your assigned person.</p>
        </div>
      </div>
      <div class="cpt-compose-body">
        <label class="form-label" for="cpt-subject">Subject *</label>
        <input class="form-control mb-2" id="cpt-subject" name="subject" required maxlength="180" placeholder="Paper jam, toner, install…">
        <label class="form-label" for="cpt-visit-at">Visit date *</label>
        <input class="form-control mb-2" id="cpt-visit-at" type="datetime-local" name="visit_at" value="<?= e(date('Y-m-d\TH:i')) ?>" required>
        <label class="form-label" for="cpt-body">Details *</label>
        <textarea class="form-control mb-3" id="cpt-body" name="body" rows="4" required placeholder="What is wrong and what should happen next."></textarea>
        <div class="cpt-compose-foot">
          <div></div>
          <button class="btn btn-primary" type="submit"><i class="bi bi-send"></i> Send request</button>
        </div>
      </div>
    </form>
  </div>
</div>
