<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Invoice Preview - {{ $pesanan->kode_pesanan }}</title>
    <style>
        /* General Reset */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 14px; color: #333; line-height: 1.5; background: #f3f4f6; padding: 40px 20px; }

        .invoice-card { 
            background: #fff; 
            max-width: 800px; 
            margin: 0 auto; 
            padding: 40px; 
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        /* Header Layout */
        .header-flex { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .logo-box { display: flex; align-items: center; gap: 10px; }
        .logo-text { font-size: 28px; font-weight: 900; color: #ea580c; text-transform: lowercase; letter-spacing: -1.5px; }
        .logo-sub { font-size: 12px; font-weight: 700; color: #ea580c; border-left: 2px solid #ea580c; padding-left: 8px; }
        .invoice-label { font-size: 24px; font-weight: 900; color: #111; letter-spacing: 1px; }

        /* Meta Grid */
        .meta-grid { display: grid; grid-template-columns: 120px 1fr; gap: 8px; margin-bottom: 30px; }
        .meta-label { color: #6b7280; font-size: 13px; font-weight: 600; }
        .meta-value { color: #111; font-size: 13px; font-weight: 700; }
        .status-badge { background: #dcfce7; color: #16a34a; padding: 2px 10px; border-radius: 4px; font-size: 11px; font-weight: 800; margin-left: 10px; }

        /* Table */
        .product-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; border: 1px solid #f3f4f6; }
        .product-table th { background: #333; color: #fff; padding: 10px 15px; text-align: left; font-size: 12px; font-weight: 700; text-transform: uppercase; }
        .product-table td { padding: 15px; border-bottom: 1px solid #f3f4f6; vertical-align: top; }
        .product-name { font-weight: 700; color: #ea580c; font-size: 15px; margin-bottom: 4px; text-decoration: none; display: block; }
        .product-meta { font-size: 12px; color: #9ca3af; }
        .text-right { text-align: right; }
        .text-center { text-align: center; }

        /* Summary */
        .summary-flex { display: flex; justify-content: flex-end; margin-bottom: 40px; }
        .summary-table { width: 100%; max-width: 500px; border-collapse: collapse; }
        .summary-table td { padding: 6px 0; font-size: 14px; }
        .summary-label { color: #4b5563; }
        .summary-value { text-align: right; font-weight: 700; color: #111; }

        .ongkir-detail-text { 
            padding: 5px 10px; 
            font-size: 13px; 
            color: #92400e; 
            font-weight: 700;
            line-height: 1.6;
            margin-bottom: 10px;
        }

        .total-row td { padding-top: 15px; margin-top: 10px; border-top: 2px solid #f3f4f6; }
        .total-label { font-size: 16px; font-weight: 800; color: #111; }
        .total-amount { font-size: 22px; font-weight: 900; color: #ea580c; text-align: right; }

        /* Footer Grid */
        .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; margin-top: 40px; padding-top: 25px; border-top: 1px solid #f3f4f6; }
        .footer-section-title { font-size: 12px; font-weight: 800; color: #6b7280; text-transform: uppercase; margin-bottom: 10px; border-bottom: 1px solid #f3f4f6; padding-bottom: 5px; }
        .footer-content { font-size: 14px; line-height: 1.6; color: #333; }

        /* Final Actions */
        .actions { position: fixed; bottom: 30px; right: 30px; display: flex; gap: 15px; }
        .btn { padding: 12px 24px; border-radius: 50px; text-decoration: none; font-weight: 800; transition: all 0.2s; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
        .btn-print { background: #ea580c; color: white; }
        .btn-print:hover { transform: translateY(-2px); background: #d9480f; }

        @media print {
            body { background: white; padding: 0; }
            .invoice-card { box-shadow: none; border-radius: 0; width: 100%; max-width: 100%; padding: 0; }
            .actions { display: none; }
        }
    </style>
</head>
<body>

    <div class="invoice-card">
        <!-- HEADER -->
        <header class="header-flex">
            <div class="logo-box">
                <div class="logo-text" style="text-transform: uppercase; letter-spacing: 0.5px; font-size: 24px;">RAJA FUTSAL</div>
            </div>
            <h1 class="invoice-label">INVOICE</h1>
        </header>

        <!-- META -->
        <div class="meta-grid">
            <div class="meta-label">No. Invoice</div>
            <div class="meta-value" style="color: #ea580c;">{{ $pesanan->kode_pesanan }} <span class="status-badge">Lunas</span></div>
            
            <div class="meta-label">Penjual</div>
            <div class="meta-value"><b>{{ $toko->nama_toko ?? 'Raja Futsal' }}</b></div>
            
            <div class="meta-label">Pembeli</div>
            <div class="meta-value">{{ $pesanan->alamat->nama_penerima ?? $pesanan->user->name }}</div>
            
            <div class="meta-label">Tanggal Pembelian</div>
            <div class="meta-value">{{ $pesanan->created_at->translatedFormat('d F Y') }}</div>
        </div>

        <!-- PRODUCTS -->
        <table class="product-table">
            <thead>
                <tr>
                    <th>INFO PRODUK</th>
                    <th class="text-center">JUMLAH</th>
                    <th class="text-right">HARGA SATUAN</th>
                    <th class="text-right">TOTAL HARGA</th>
                </tr>
            </thead>
            <tbody>
                @foreach($pesanan->detail as $detail)
                <tr>
                    <td>
                        <a href="#" class="product-name">{{ $detail->nama_produk }}</a>
                        <div class="product-meta">
                            @if($detail->warna) Warna: {{ $detail->warna }} @endif
                            @if($detail->ukuran) @if($detail->warna) | @endif Ukuran: {{ $detail->ukuran }} @endif
                            @if($detail->produk && $detail->produk->berat) 
                                <br>Berat: {{ $detail->produk->berat }} gr
                            @endif
                        </div>
                    </td>
                    <td class="text-center">{{ $detail->qty }}</td>
                    <td class="text-right">Rp{{ number_format($detail->harga, 0, ',', '.') }}</td>
                    <td class="text-right">Rp{{ number_format($detail->subtotal, 0, ',', '.') }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>

        <!-- SUMMARY -->
        <div class="summary-flex">
            <table class="summary-table">
                <tr>
                    <td class="summary-label">TOTAL HARGA ({{ $pesanan->detail->sum('qty') }} BARANG)</td>
                    <td class="summary-value">Rp{{ number_format($subtotalProduk, 0, ',', '.') }}</td>
                </tr>
                <tr>
                    <td class="summary-label">Total Ongkos Kirim</td>
                    <td class="summary-value">Rp{{ number_format($ongkir, 0, ',', '.') }}</td>
                </tr>
                @if(isset($diskon) && $diskon > 0)
                <tr>
                    <td class="summary-label">Diskon (produk)</td>
                    <td class="summary-value">-Rp{{ number_format($diskon, 0, ',', '.') }}</td>
                </tr>
                @endif
                <tr>
                    <td class="summary-label">Total Jarak</td>
                    <td class="summary-value">{{ $jarakKm }} km (Rp{{ number_format($biayaJarak, 0, ',', '.') }})</td>
                </tr>
                <tr>
                    <td class="summary-label">Total Berat Produk</td>
                    <td class="summary-value">
                        {{ $totalBerat >= 1000 ? number_format($totalBerat/1000, 2) . ' kg' : $totalBerat . ' gr' }}
                        (Rp{{ number_format($biayaBerat, 0, ',', '.') }})
                    </td>
                </tr>
                <tr>
                    <td class="summary-label">Beda Provinsi atau Sama</td>
                    <td class="summary-value">{{ $kategoriProvinsi }} (Rp{{ number_format($biayaProvinsi, 0, ',', '.') }})</td>
                </tr>
                <tr class="total-row">
                    <td class="total-label">TOTAL BELANJA</td>
                    <td class="total-amount">Rp{{ number_format($pesanan->total_harga, 0, ',', '.') }}</td>
                </tr>
            </table>
        </div>

        <!-- FOOTER INFO -->
        <div class="footer-grid">
            <div class="info-block">
                <h3 class="footer-section-title">Alamat Pengiriman</h3>
                <div class="footer-content">
                    <strong>{{ $pesanan->alamat->nama_penerima ?? $pesanan->user->name }}</strong> ({{ $pesanan->alamat->no_hp ?? '-' }})<br>
                    {{ $pesanan->alamat->alamat_lengkap ?? 'Alamat tidak tersedia' }}<br>
                    {{ strtoupper($pesanan->alamat->district->name ?? '') }}, {{ strtoupper($pesanan->alamat->city->name ?? '') }}<br>
                    {{ strtoupper($pesanan->alamat->province->name ?? '') }} {{ $pesanan->alamat->kode_pos ?? '' }}
                </div>
                
                <div style="margin-top: 25px;">
                    <h3 class="footer-section-title">Kurir</h3>
                    <div class="footer-content">
                        <strong>KurirSendiri-Raja Futsal</strong>
                    </div>
                </div>
            </div>

            <div class="info-block" style="text-align: right;">
                <h3 class="footer-section-title">Metode Pembayaran</h3>
                <div class="footer-content">
                    @if($pesanan->pembayaran)
                        <strong style="font-size: 18px; color: #111;">{{ strtoupper(str_replace('_', ' ', $pesanan->pembayaran->metode)) }}</strong>
                    @else
                        -
                    @endif
                </div>
            </div>
        </div>

        <div style="margin-top: 50px; text-align: left; font-size: 12px; color: #9ca3af; border-top: 1px solid #f3f4f6; padding-top: 15px;">
            <p>Invoice ini sah dan diproses oleh komputer. <br> Silakan hubungi <b>Raja Futsal</b> apabila kamu membutuhkan bantuan.</p>
            <p style="margin-top: 5px; font-style: italic;">Terakhir diupdate: {{ now()->translatedFormat('d F Y H:i') }} WIB</p>
        </div>
    </div>

    <!-- Actions removed per request -->

</body>
</html>