<!doctype html>
<html lang="id">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>{{ $tracking['invoice_no'] }}</title><script src="https://cdn.tailwindcss.com"></script></head>
<body class="min-h-screen bg-slate-100 px-4 py-8">
<main class="mx-auto max-w-md rounded-lg bg-white p-6 shadow-sm">
    <div class="text-sm text-slate-500">Nomor nota</div>
    <h1 class="text-2xl font-semibold">{{ $tracking['invoice_no'] }}</h1>
    <div class="mt-5 grid grid-cols-2 gap-3 text-sm">
        <div class="rounded-md bg-slate-50 p-3"><div class="text-slate-500">Status</div><div class="font-medium">{{ $tracking['status'] }}</div></div>
        <div class="rounded-md bg-slate-50 p-3"><div class="text-slate-500">Pembayaran</div><div class="font-medium">{{ $tracking['payment_status'] }}</div></div>
        <div class="rounded-md bg-slate-50 p-3"><div class="text-slate-500">Masuk</div><div class="font-medium">{{ $tracking['tanggal_masuk'] }}</div></div>
        <div class="rounded-md bg-slate-50 p-3"><div class="text-slate-500">Estimasi</div><div class="font-medium">{{ $tracking['estimasi_selesai'] }}</div></div>
    </div>
    <div class="mt-5 rounded-md border p-3 text-sm">Sisa tagihan: <strong>Rp {{ number_format($tracking['sisa_tagihan'], 0, ',', '.') }}</strong></div>
    <ol class="mt-5 space-y-3 text-sm">
        @foreach ($tracking['progress'] as $log)
            <li class="border-l-2 border-slate-300 pl-3"><div class="font-medium">{{ str_replace('_', ' ', $log->progress_status) }}</div><div class="text-slate-500">{{ $log->created_at->format('d/m/Y H:i') }}</div></li>
        @endforeach
    </ol>
</main>
</body>
</html>
