<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Invoice #{{ $pesanan->id }}</title>
    <style>
        body { font-family: sans-serif; font-size: 13px; color: #333; line-height: 1.5; }
        .invoice-box { max-width: 800px; margin: auto; padding: 30px; border: 1px solid #eee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
        .header { display: table; width: 100%; border-bottom: 2px solid #eee; padding-bottom: 20px; margin-bottom: 20px; }
        .header-left { display: table-cell; vertical-align: top; width: 50%; }
        .header-right { display: table-cell; vertical-align: top; text-align: right; width: 50%; }
        .header h1 { margin: 0; font-size: 28px; color: #111; }
        .info-section { display: table; width: 100%; margin-bottom: 30px; }
        .info-card { display: table-cell; width: 50%; vertical-align: top; }
        .info-card h3 { font-size: 14px; text-transform: uppercase; margin-top: 0; color: #555; border-bottom: 1px solid #eee; padding-bottom: 5px; }
        table.items { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table.items th, table.items td { padding: 10px; border: 1px solid #eee; text-align: left; }
        table.items th { background: #f9fafb; font-weight: bold; }
        .text-right { text-align: right; }
        .text-center { text-align: center; }
        .total-row td { border-top: 2px solid #333; font-weight: bold; }
        .footer { text-align: center; margin-top: 40px; font-size: 12px; color: #777; }
    </style>
</head>
<body>
    <div class="invoice-box">
        <div class="header">
            <div class="header-left">
                <h1>INVOICE</h1>
                <p style="margin:5px 0;"><strong>Pesanan:</strong> #{{ $pesanan->id }}</p>
                <p style="margin:0;"><strong>Tanggal:</strong> {{ \Carbon\Carbon::parse($pesanan->tanggal_pesanan)->format('d F Y') }}</p>
            </div>
            <div class="header-right">
                <h2 style="margin:0; font-size: 20px;">Toko Miftah</h2>
                <p style="margin:5px 0; color: #666;">Jl. Contoh No. 123, Kota Anda</p>
                <p style="margin:0; color: #666;">Telp: 0812-3456-7890</p>
            </div>
        </div>

        <div class="info-section">
            <div class="info-card" style="padding-right: 20px;">
                <h3>Informasi Pelanggan</h3>
                <p style="margin:0;"><strong>Nama:</strong> {{ $pesanan->user->nama ?? 'Umum' }}</p>
                @if($pesanan->user)
                <p style="margin:0;"><strong>Email:</strong> {{ $pesanan->user->email }}</p>
                @endif
            </div>
            <div class="info-card">
                <h3>Alamat Pengiriman</h3>
                <p style="margin:0;">{{ $pesanan->alamat_tujuan }}</p>
                <p style="margin:0;">Desa/Kel. {{ $pesanan->desa->name ?? '-' }}, Kec. {{ $pesanan->kecamatan->name ?? '-' }}</p>
                <p style="margin:0;">{{ $pesanan->kota ?? ($pesanan->regency->name ?? '-') }}, {{ $pesanan->provinsi->name ?? '-' }} {{ $pesanan->kode_pos }}</p>
            </div>
        </div>
        
        <div style="margin-bottom: 20px;">
            @php $statusBayar = $pesanan->pembayaran->transaction_status ?? 
                                (in_array($pesanan->status, ['diproses', 'dikirim', 'selesai']) ? 'berhasil' : 'pending'); @endphp
            <strong>Status Pembayaran:</strong> <span style="text-transform: uppercase;">{{ $statusBayar }}</span><br>
            <strong>Status Pesanan:</strong> <span style="text-transform: uppercase;">{{ $pesanan->status }}</span>
        </div>

        <table class="items">
            <thead>
                <tr>
                    <th width="5%">No</th>
                    <th width="45%">Nama Produk</th>
                    <th width="15%" class="text-right">Harga</th>
                    <th width="10%" class="text-center">Qty</th>
                    <th width="25%" class="text-right">Subtotal</th>
                </tr>
            </thead>
            <tbody>
                @foreach($pesanan->detailPesanans as $index => $detail)
                <tr>
                    <td class="text-center">{{ $index + 1 }}</td>
                    <td>
                        {{ $detail->produk->nama ?? 'Produk' }}
                        @if($detail->varian)
                            <br><small style="color:#666;">Varian: {{ $detail->varian->ukuran }} / {{ $detail->varian->warna }}</small>
                        @endif
                    </td>
                    <td class="text-right">Rp {{ number_format($detail->harga, 0, ',', '.') }}</td>
                    <td class="text-center">{{ $detail->jumlah }}</td>
                    <td class="text-right">Rp {{ number_format($detail->subtotal, 0, ',', '.') }}</td>
                </tr>
                @endforeach
            </tbody>
            <tfoot>
                <tr class="total-row">
                    <td colspan="4" class="text-right">TOTAL TAGIHAN</td>
                    <td class="text-right">Rp {{ number_format($pesanan->total_harga, 0, ',', '.') }}</td>
                </tr>
            </tfoot>
        </table>

        <div class="footer">
            <p>Terima kasih telah berbelanja di Toko Miftah.</p>
        </div>
    </div>
</body>
</html>
