<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Invoice #{{ $order->order_id }}</title>
<style>
    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        font-family: 'DejaVu Sans', sans-serif;
        font-size: 12px;
        color: #1c1917;
        background: #ffffff;
    }

    .page {
        padding: 40px 48px;
        max-width: 794px;
        margin: 0 auto;
    }

    /* ── Header ── */
    .header {
        display: table;
        width: 100%;
        margin-bottom: 32px;
        background: #fdf5cf; /* gradient-primary fallback */
        border-bottom: 2px solid #fed7aa;
        border-radius: 12px;
        padding: 24px 32px;
    }
    .header-left  { display: table-cell; vertical-align: middle; width: 60%; }
    .header-right { display: table-cell; vertical-align: middle; width: 40%; text-align: right; }

    .brand-name {
        font-size: 26px;
        font-weight: 800;
        color: #78350f; /* amber-900 */
        letter-spacing: 1px;
    }
    .brand-tagline {
        font-size: 11px;
        color: #57534e; /* stone-600 */
        margin-top: 4px;
        font-weight: 600;
    }

    .invoice-label {
        font-size: 28px;
        font-weight: 800;
        color: #92400e; /* amber-800 */
        text-transform: uppercase;
        letter-spacing: 3px;
    }
    .invoice-number {
        font-size: 13px;
        color: #b45309; /* amber-700 */
        margin-top: 4px;
        font-weight: bold;
    }

    /* ── Info Grid ── */
    .info-section {
        display: table;
        width: 100%;
        margin-bottom: 28px;
    }
    .info-col {
        display: table-cell;
        vertical-align: top;
        width: 33.33%;
        padding-right: 12px;
    }
    .info-col:last-child { padding-right: 0; }

    .info-title {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #d97706;
        margin-bottom: 6px;
        padding-bottom: 4px;
        border-bottom: 1px solid #fde68a;
    }
    .info-value {
        font-size: 11px;
        color: #292524;
        line-height: 1.6;
    }
    .info-value strong { font-weight: 700; }

    /* ── Status badge ── */
    .status-paid {
        display: inline-block;
        background: #d1fae5;
        color: #065f46;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 20px;
        border: 1px solid #6ee7b7;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* ── Items Table ── */
    .items-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 24px;
    }
    .items-table thead tr {
        background: #fef3c7;
        color: #78350f;
    }
    .items-table thead th {
        padding: 9px 10px;
        text-align: left;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    .items-table thead th.text-right { text-align: right; }
    .items-table thead th.text-center { text-align: center; }

    .items-table tbody tr { border-bottom: 1px solid #e7e5e4; }
    .items-table tbody tr:nth-child(even) { background: #fafaf9; }

    .items-table tbody td {
        padding: 9px 10px;
        font-size: 11px;
        vertical-align: middle;
        color: #292524;
    }
    .items-table tbody td.text-right  { text-align: right; }
    .items-table tbody td.text-center { text-align: center; }

    .product-name { font-weight: 600; }
    .product-id   { font-size: 9px; color: #a8a29e; margin-top: 2px; }

    /* ── Totals ── */
    .totals-wrap {
        display: table;
        width: 100%;
        margin-bottom: 28px;
    }
    .totals-spacer { display: table-cell; width: 55%; }
    .totals-box    { display: table-cell; width: 45%; }

    .totals-row {
        display: table;
        width: 100%;
        padding: 5px 0;
        border-bottom: 1px solid #e7e5e4;
    }
    .totals-label {
        display: table-cell;
        font-size: 11px;
        color: #78716c;
        width: 55%;
    }
    .totals-value {
        display: table-cell;
        font-size: 11px;
        color: #292524;
        text-align: right;
        font-weight: 600;
    }

    .totals-row.grand {
        background: #fef3c7;
        padding: 8px 10px;
        border-radius: 4px;
        margin-top: 4px;
        border: 1px solid #fde68a;
    }
    .totals-row.grand .totals-label {
        color: #92400e;
        font-weight: 700;
        font-size: 12px;
    }
    .totals-row.grand .totals-value {
        color: #78350f;
        font-weight: 700;
        font-size: 13px;
    }

    /* ── Shipping Info ── */
    .shipping-box {
        background: #fef9f0;
        border: 1px solid #fde68a;
        border-radius: 6px;
        padding: 14px 16px;
        margin-bottom: 28px;
    }
    .shipping-box-title {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        color: #78350f;
        letter-spacing: 0.5px;
        margin-bottom: 8px;
    }
    .shipping-row {
        display: table;
        width: 100%;
        margin-bottom: 4px;
    }
    .shipping-key {
        display: table-cell;
        font-size: 10px;
        color: #d97706;
        width: 35%;
    }
    .shipping-val {
        display: table-cell;
        font-size: 10px;
        color: #1c1917;
        font-weight: 600;
    }

    /* ── Footer ── */
    .footer {
        border-top: 2px solid #e7e5e4;
        padding-top: 14px;
        text-align: center;
    }
    .footer-text {
        font-size: 10px;
        color: #a8a29e;
        line-height: 1.6;
    }
    .footer-brand {
        font-size: 11px;
        font-weight: 700;
        color: #d97706;
        margin-top: 4px;
    }
</style>
</head>
<body>
<div class="page">

    {{-- ── HEADER ── --}}
    <div class="header">
        <div class="header-left">
            <div class="brand-name">INTERIA</div>
            <div class="brand-tagline">Belanja mudah, pengiriman cepat</div>
        </div>
        <div class="header-right">
            <div class="invoice-label">Invoice</div>
            <div class="invoice-number">#{{ $order->order_id }}</div>
        </div>
    </div>

    {{-- ── DECODE ALAMAT ── --}}
    @php
        $addr     = $order->address;
        $cityObj  = $addr ? (is_string($addr->city ?? null)     ? json_decode($addr->city)     : ($addr->city ?? null))     : null;
        $provObj  = $addr ? (is_string($addr->province ?? null) ? json_decode($addr->province) : ($addr->province ?? null)) : null;
        $cityName = is_object($cityObj) ? ($cityObj->name ?? null) : (is_string($cityObj) ? $cityObj : null);
        $provName = is_object($provObj) ? ($provObj->name ?? null) : (is_string($provObj) ? $provObj : null);
    @endphp

    {{-- ── INFO ROWS ── --}}
    <div class="info-section">

        {{-- Tagihan Kepada --}}
        <div class="info-col">
            <div class="info-title">Tagihan Kepada</div>
            <div class="info-value">
                <strong>{{ $order->user->name }}</strong><br>
                {{ $order->user->email }}<br>
                @if($order->user->phone ?? null)
                    {{ $order->user->phone }}
                @endif
            </div>
        </div>

        {{-- Alamat Pengiriman --}}
        <div class="info-col">
            <div class="info-title">Alamat Pengiriman</div>
            <div class="info-value">
                @if($addr)
                    {{ $addr->recipient_name ?? $order->user->name }}<br>
                    {{ $addr->address_line ?? $addr->full_address ?? '-' }}<br>
                    @if($cityName){{ $cityName }},@endif
                    @if($provName) {{ $provName }}@endif
                    @if($addr->postal_code ?? null) {{ $addr->postal_code }}@endif
                @else
                    <span style="color:#a8a29e">Alamat tidak tersedia</span>
                @endif
            </div>
        </div>

        {{-- Detail Invoice --}}
        <div class="info-col">
            <div class="info-title">Detail Invoice</div>
            <div class="info-value">
                <strong>Tanggal:</strong> {{ $order->created_at->format('d M Y') }}<br>
                <strong>Jatuh Tempo:</strong> {{ $order->created_at->format('d M Y') }}<br>
                <div style="margin-top: 6px;">
                    <strong style="vertical-align: middle;">Status:</strong>
                    <span class="status-paid" style="vertical-align: middle;">LUNAS</span>
                </div>
            </div>
        </div>
    </div>

    {{-- ── ITEMS TABLE ── --}}
    <table class="items-table">
        <thead>
            <tr>
                <th style="width:5%">#</th>
                <th style="width:42%">Produk</th>
                <th class="text-center" style="width:12%">Qty</th>
                <th class="text-right" style="width:20%">Harga Satuan</th>
                <th class="text-right" style="width:21%">Subtotal</th>
            </tr>
        </thead>
        <tbody>
            @foreach($order->items as $i => $item)
            <tr>
                <td>{{ $i + 1 }}</td>
                <td>
                    <div class="product-name">{{ $item->product->product_name ?? 'Produk Dihapus' }}</div>
                    <div class="product-id">SKU #{{ $item->product_id }}</div>
                </td>
                <td class="text-center">{{ $item->quantity }}</td>
                <td class="text-right">
                    Rp {{ number_format($item->quantity > 0 ? ($item->subtotal / $item->quantity) : 0, 0, ',', '.') }}
                </td>
                <td class="text-right">
                    Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

    {{-- ── TOTALS ── --}}
    <div class="totals-wrap">
        <div class="totals-spacer"></div>
        <div class="totals-box">
            @php
                $subtotalProduk = $order->product_subtotal;
                $shippingCost   = (int) $order->shipping_cost;
            @endphp

            <div class="totals-row">
                <div class="totals-label">Subtotal Produk</div>
                <div class="totals-value">Rp {{ number_format($subtotalProduk, 0, ',', '.') }}</div>
            </div>

            <div class="totals-row">
                <div class="totals-label">
                    Ongkos Kirim
                    @if($order->courier_name)({{ $order->courier_name }})@endif
                </div>
                <div class="totals-value">
                    @if($shippingCost === 0) GRATIS
                    @else Rp {{ number_format($shippingCost, 0, ',', '.') }}
                    @endif
                </div>
            </div>

            <div class="totals-row grand">
                <div class="totals-label">Total Pembayaran</div>
                <div class="totals-value">Rp {{ number_format($order->total_price, 0, ',', '.') }}</div>
            </div>
        </div>
    </div>

    {{-- ── SHIPPING INFO ── --}}
    @if($order->tracking_number || $order->courier_name)
    <div class="shipping-box">
        <div class="shipping-box-title">&#x1F69A; Informasi Pengiriman</div>

        @if($order->courier_name)
        <div class="shipping-row">
            <div class="shipping-key">Kurir</div>
            <div class="shipping-val">{{ $order->courier_name }}</div>
        </div>
        @endif

        @if($order->estimated_days)
        <div class="shipping-row">
            <div class="shipping-key">Estimasi</div>
            <div class="shipping-val">{{ $order->estimated_days }}</div>
        </div>
        @endif

        @if($order->tracking_number)
        <div class="shipping-row">
            <div class="shipping-key">No. Resi</div>
            <div class="shipping-val" style="font-family: monospace; letter-spacing: 1px;">
                {{ $order->tracking_number }}
            </div>
        </div>
        @endif
    </div>
    @endif

    {{-- ── PAYMENT INFO ── --}}
    @if($order->payment)
    @php
        $methods = [
            'cash'     => 'COD (Bayar di Tempat)',
            'card'     => 'Kartu Kredit/Debit',
            'transfer' => 'Transfer Bank',
            'ewallet'  => 'E-Wallet',
            'qris'     => 'QRIS',
        ];
    @endphp
    <div class="shipping-box" style="background:#f0fdf4; border-color:#bbf7d0;">
        <div class="shipping-box-title" style="color:#166534;">&#x2705; Informasi Pembayaran</div>
        <div class="shipping-row">
            <div class="shipping-key" style="color:#166534;">Metode</div>
            <div class="shipping-val">
                {{ $methods[$order->payment->payment_method] ?? ucfirst($order->payment->payment_method) }}
            </div>
        </div>
        <div class="shipping-row">
            <div class="shipping-key" style="color:#166534;">Status</div>
            <div class="shipping-val" style="color:#16a34a; font-weight:700;">LUNAS</div>
        </div>
        @if($order->payment->payment_date)
        <div class="shipping-row">
            <div class="shipping-key" style="color:#166534;">Tgl Bayar</div>
            <div class="shipping-val">{{ \Carbon\Carbon::parse($order->payment->payment_date)->format('d M Y') }}</div>
        </div>
        @endif
    </div>
    @endif

    {{-- ── CATATAN ── --}}
    @if($order->order_note)
    <div style="margin-bottom:20px; padding:12px; background:#fafaf9; border-left:3px solid #d97706; border-radius:0 4px 4px 0;">
        <div style="font-size:9px; font-weight:700; color: #78350f; text-transform:uppercase; letter-spacing:0.5px; margin-bottom:4px;">Catatan Pesanan</div>
        <div style="font-size:11px; color:#44403c;">{{ $order->order_note }}</div>
    </div>
    @endif

    {{-- ── FOOTER ── --}}
    <div class="footer">
        <div class="footer-text">
            Dokumen ini merupakan invoice resmi yang diterbitkan secara otomatis oleh sistem.<br>
            Untuk pertanyaan, hubungi kami melalui email atau customer service kami.
        </div>
        <div class="footer-brand">INTERIA &mdash; Terima kasih telah berbelanja!</div>
    </div>

</div>
</body>
</html>