<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Riwayat — {{ $customer->name }} — OKE Laundry</title>
  @include('partials.favicon')
  @include('partials.brand-fonts')
  <style>
    :root{
      --brand-deep:#1f7fb7;--brand-main:#3aa5e6;--brand-accent:#4BB8FA;
      --text:#0F172A;--muted:#5B6B80;--line:#D9E6F2;--bg:#F4F9FE;--card:#FFFFFF;
      --shadow:0 14px 30px rgba(31,127,183,.10);
      font-family:'Plus Jakarta Sans',Inter,Segoe UI,Roboto,system-ui,sans-serif
    }
    *{box-sizing:border-box}
    body{margin:0;background:linear-gradient(180deg,#F4F9FE 0%,#E5F2FB 100%);color:var(--text)}
    .page-wrap{max-width:1100px;margin:0 auto;padding:24px}
    .screen{background:var(--card);border:1px solid #D9E6F2;border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
    .strip{background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0) 45%),linear-gradient(90deg,var(--brand-deep),var(--brand-main),var(--brand-accent));color:#fff;padding:18px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
    .strip a{color:#fff;text-decoration:none;font-weight:700;opacity:.95;font-size:14px}
    .strip a:hover{text-decoration:underline}
    .body{padding:28px 28px 32px;background:var(--bg)}
    .meta{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 22px;margin-bottom:18px}
    .meta h1{margin:0 0 4px;font-size:24px;letter-spacing:-0.02em;color:var(--brand-deep)}
    .meta .sub{color:var(--muted);font-size:13px}
    .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
    .stat-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px}
    .stat-label{font-size:12px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
    .stat-value{font-size:22px;font-weight:800;color:var(--brand-deep);margin-top:6px;letter-spacing:-0.02em}
    table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
    th,td{padding:12px 14px;border-bottom:1px solid #E5F2FB;font-size:14px;text-align:left;vertical-align:top}
    th{background:#E5F2FB;color:var(--brand-deep);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
    tr:last-child td{border-bottom:none}
    .badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;text-transform:capitalize}
    .badge.jemput{background:#E5F2FB;color:#1f7fb7}
    .badge.proses{background:#fff8e6;color:#a06b00}
    .badge.antar{background:#dbeafe;color:#1d4ed8}
    .badge.selesai{background:#dcfce7;color:#15803d}
    .badge.ditolak{background:#fee2e2;color:#dc2626}
    .empty{padding:36px;text-align:center;color:var(--muted)}
    @media (max-width:780px){
      .stats{grid-template-columns:repeat(2,1fr)}
      th.col-hide,td.col-hide{display:none}
    }
    @media print{
      body{background:#fff}.strip a{display:none}
    }
  </style>
</head>
<body>
  <div class="page-wrap">
    <section class="screen">
      <div class="strip">
        <div style="display:flex;align-items:center;gap:12px">
          @include('partials.brand-logo', ['size' => 26])
          <span style="opacity:.9">— Riwayat Pelanggan</span>
        </div>
        <div style="display:flex;gap:14px">
          <a href="{{ route('admin.dashboard') }}">← Dashboard</a>
          <a href="javascript:window.print()">Cetak</a>
        </div>
      </div>
      <div class="body">
        <div class="meta">
          <h1>{{ $customer->name }}</h1>
          <div class="sub">
            {{ $customer->phone ?? '— belum ada nomor HP' }}
            @if ($customer->address) • {{ $customer->address }} @endif
          </div>
        </div>

        <div class="stats">
          <div class="stat-card"><div class="stat-label">Total Order</div><div class="stat-value">{{ $stats['total'] }}</div></div>
          <div class="stat-card"><div class="stat-label">Total Ongkir</div><div class="stat-value">{{ $stats['total_ongkir'] > 0 ? 'Rp ' . number_format($stats['total_ongkir'], 0, ',', '.') : 'Gratis' }}</div></div>
          <div class="stat-card"><div class="stat-label">Rata-rata Jarak</div><div class="stat-value">{{ $stats['avg_jarak'] }} km</div></div>
          <div class="stat-card"><div class="stat-label">Order Terakhir</div><div class="stat-value" style="font-size:16px">{{ $stats['last'] ?? '—' }}</div></div>
        </div>

        @if ($orders->isEmpty())
          <div class="empty">Pelanggan ini belum memiliki order.</div>
        @else
          <table>
            <thead>
              <tr>
                <th>No Resi</th>
                <th>Tanggal</th>
                <th>Status</th>
                <th class="col-hide">Tahap</th>
                <th>Jarak</th>
                <th>Ongkir</th>
                <th class="col-hide">Kurir</th>
                <th class="col-hide">Catatan</th>
              </tr>
            </thead>
            <tbody>
              @foreach ($orders as $o)
                <tr>
                  <td><strong>{{ $o->receipt_number }}</strong></td>
                  <td>{{ optional($o->order_date)->format('d/m/Y H:i') ?? $o->created_at->format('d/m/Y H:i') }}</td>
                  <td><span class="badge {{ $o->status->status_name ?? '' }}">{{ $o->status->status_name ?? '-' }}</span></td>
                  <td class="col-hide">{{ $o->process_stage ? ucfirst($o->process_stage) : '—' }}</td>
                  <td>{{ $o->distance }} km</td>
                  <td>{{ $o->shipping_cost > 0 ? 'Rp ' . number_format($o->shipping_cost, 0, ',', '.') : 'Gratis' }}</td>
                  <td class="col-hide">{{ optional($o->courier)->name ?? '—' }}</td>
                  <td class="col-hide" style="max-width:240px">{{ $o->note ?: '—' }}</td>
                </tr>
              @endforeach
            </tbody>
          </table>
        @endif
      </div>
    </section>
  </div>
</body>
</html>
