<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Struk Order — {{ $order->receipt_number }} — OKE Laundry</title>
  @include('partials.favicon')
  @include('partials.brand-fonts')
  <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
  <style>
    :root{
      --brand-deep:#1f7fb7;--brand-main:#3aa5e6;--brand-accent:#4BB8FA;
      --text:#0F172A;--muted:#5B6B80;--line:#D9E6F2;--bg:#F4F9FE;--card:#FFFFFF;
      font-family:'Plus Jakarta Sans',Inter,Segoe UI,Roboto,system-ui,sans-serif
    }
    *{box-sizing:border-box}
    body{margin:0;background:var(--bg);color:var(--text);padding:24px}
    .toolbar{max-width:560px;margin:0 auto 16px;display:flex;gap:10px;justify-content:flex-end}
    .toolbar .btn{padding:10px 16px;border-radius:10px;border:none;font-weight:700;cursor:pointer;font-size:14px;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
    .btn-primary{background:linear-gradient(135deg,var(--brand-main),var(--brand-accent));color:#fff;box-shadow:0 8px 16px rgba(75,184,250,.28)}
    .btn-muted{background:#E5F2FB;color:#1f3a5b;border:1px solid #C4E2F5}
    .struk{max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 10px 25px rgba(31,127,183,.08)}
    .head{text-align:center;border-bottom:2px dashed #C4E2F5;padding-bottom:14px;margin-bottom:14px}
    .brand{font-weight:800;font-size:22px;color:var(--brand-deep);letter-spacing:-0.02em}
    .tagline{font-size:12px;color:var(--muted);margin-top:2px}
    .resi-row{margin-top:10px;font-size:14px;color:var(--muted)}
    .resi{font-size:18px;font-weight:800;color:var(--brand-deep);letter-spacing:.02em}
    .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;font-size:14px;margin:14px 0}
    .grid .lbl{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.04em;font-weight:700}
    .grid .val{font-weight:700}
    .qr-wrap{display:flex;gap:18px;align-items:center;border-top:2px dashed #C4E2F5;padding-top:14px;margin-top:6px}
    #qr{width:128px;height:128px;flex:none}
    .qr-note{font-size:12px;color:var(--muted);line-height:1.55}
    .qr-note b{color:var(--brand-deep)}
    .total{margin-top:14px;padding:14px;border-radius:12px;background:#E5F2FB;border:1px solid #C4E2F5;display:flex;justify-content:space-between;align-items:center}
    .total .label{font-weight:700;color:var(--brand-deep)}
    .total .amount{font-size:18px;font-weight:800;color:var(--brand-accent)}
    .footer{margin-top:18px;text-align:center;font-size:11px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;line-height:1.6}
    @media print {
      body{background:#fff;padding:0}
      .toolbar{display:none}
      .struk{box-shadow:none;border-color:#000;border-radius:0;max-width:100%}
    }
  </style>
</head>
<body>
  <div class="toolbar">
    <button type="button" class="btn btn-primary" onclick="window.print()">Cetak / Simpan PDF</button>
    <a href="{{ route('admin.dashboard') }}" class="btn btn-muted">Kembali</a>
  </div>
  <div class="struk">
    <div class="head">
      <div class="brand">OKE LAUNDRY</div>
      <div class="tagline">Cuci Ekspres - Pasti Beres</div>
      <div class="resi-row">No. Resi</div>
      <div class="resi">{{ $order->receipt_number }}</div>
    </div>

    <div class="grid">
      <div><div class="lbl">Tanggal</div><div class="val">{{ optional($order->order_date)->format('d/m/Y H:i') ?? $order->created_at->format('d/m/Y H:i') }}</div></div>
      <div><div class="lbl">Jarak</div><div class="val">{{ $order->distance }} km</div></div>

      <div><div class="lbl">Pelanggan</div><div class="val">{{ optional($order->customer)->name ?? '-' }}</div></div>
      <div><div class="lbl">No HP</div><div class="val">{{ optional($order->customer)->phone ?? '-' }}</div></div>

      <div style="grid-column:1 / -1"><div class="lbl">Alamat</div><div class="val">{{ optional($order->customer)->address ?? '-' }}</div></div>

      @if ($order->note)
        <div style="grid-column:1 / -1"><div class="lbl">Catatan</div><div class="val" style="font-weight:500">{{ $order->note }}</div></div>
      @endif
    </div>

    <div class="total">
      <span class="label">Ongkir</span>
      <span class="amount">{{ $order->shipping_cost > 0 ? 'Rp ' . number_format($order->shipping_cost, 0, ',', '.') : 'Gratis Ongkir' }}</span>
    </div>

    <div class="qr-wrap">
      <canvas id="qr"></canvas>
      <div class="qr-note">
        <b>Scan untuk lacak pesanan</b><br>
        Pelanggan dapat memindai kode QR ini untuk membuka halaman pelacakan secara otomatis.<br>
        <span style="word-break:break-all">{{ $trackingUrl }}</span>
      </div>
    </div>

    <div class="footer">
      Terima kasih telah memercayakan cucian Anda kepada OKE Laundry.<br>
      Pertanyaan? Hubungi admin OKE Laundry. © {{ date('Y') }} OKE Laundry.
    </div>
  </div>

  <script>
    QRCode.toCanvas(document.getElementById('qr'), @json($trackingUrl), { width: 128, margin: 1 }, function (err) {
      if (err) console.error(err);
    });
  </script>
</body>
</html>
