<div class="p-6 bg-white">
    <!-- Header Invoice -->
    <div class="flex justify-between items-start border-b-2 border-gray-800 pb-4 mb-4">
        <div>
            <h1 class="text-2xl font-bold text-gray-800">INVOICE</h1>
            <p class="text-sm text-gray-600 mt-1">No: {{ $pesanan->kode_pesanan }}</p>
            <p class="text-xs text-gray-500">Tanggal: {{ $pesanan->created_at->format('d M Y, H:i') }}</p>
        </div>
        <div class="text-right">
            @if($pesanan->pembayaran)
                <span class="inline-block border-2 border-green-500 text-green-500 text-xl font-bold px-4 py-1 rotate-[-5deg] opacity-80">
                    LUNAS
                </span>
            @else
                <span class="inline-block border-2 border-red-500 text-red-500 text-xl font-bold px-4 py-1 rotate-[-5deg] opacity-80">
                    BELUM BAYAR
                </span>
            @endif
        </div>
    </div>

    <!-- Info Pengirim & Penerima -->
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
        <!-- Pengirim -->
        <div class="border border-gray-200 bg-gray-50 p-4 rounded">
            <p class="text-xs uppercase tracking-wider text-gray-500 font-bold mb-2">DARI (PENJUAL)</p>
            <p class="font-bold text-gray-800">{{ $toko->nama_toko ?? 'Raja Futsal' }}</p>
            @if($toko && $toko->alamat)
                <p class="text-sm text-gray-600 mt-1">{{ $toko->alamat }}</p>
            @endif
            @if($toko && ($toko->no_hp ?? $toko->telepon))
                <p class="text-sm text-gray-600">Telp: {{ $toko->no_hp ?? $toko->telepon }}</p>
            @endif
            @if($pesanan->kurir)
                <p class="text-sm text-gray-600 mt-2"><span class="font-semibold">Kurir:</span> {{ $pesanan->kurir->name }} ({{ $pesanan->kurir->no_hp }})</p>
            @endif
        </div>
        
        <!-- Penerima -->
        <div class="border border-gray-200 bg-gray-50 p-4 rounded">
            <p class="text-xs uppercase tracking-wider text-gray-500 font-bold mb-2">KEPADA (PEMBELI)</p>
            @if($pesanan->alamat)
                <p class="font-bold text-gray-800">{{ $pesanan->alamat->nama_penerima }}</p>
                <p class="text-sm text-gray-600">Telp: {{ $pesanan->alamat->no_hp }}</p>
                <p class="text-sm text-gray-600 mt-1">{{ $pesanan->alamat->alamat_lengkap }}</p>
                <p class="text-sm text-gray-600">
                    {{ $pesanan->alamat->village->name ?? '' }},
                    {{ $pesanan->alamat->district->name ?? '' }},
                    {{ $pesanan->alamat->city->name ?? '' }},
                    {{ $pesanan->alamat->province->name ?? '' }}
                    {{ $pesanan->alamat->kode_pos }}
                </p>
            @endif
        </div>
    </div>

    <!-- Status Strip -->
    <div class="bg-gray-100 border border-gray-300 p-3 mb-6 flex justify-between items-center">
        <div class="text-sm">
            <span class="font-semibold">No. Pesanan:</span> {{ $pesanan->kode_pesanan }}
            @if($pesanan->no_resi)
                <span class="ml-4"><span class="font-semibold">No. Resi:</span> {{ $pesanan->no_resi }}</span>
            @endif
            <span class="ml-4"><span class="font-semibold">Metode Bayar:</span> 
                {{ $pesanan->pembayaran ? strtoupper(str_replace('_', ' ', $pesanan->pembayaran->metode)) : '-' }}
            </span>
        </div>
        <div>
            <span class="inline-block border border-gray-800 px-3 py-1 text-xs font-bold uppercase">
                @php
                    $statusLabels = [
                        'pending' => 'MENUNGGU PEMBAYARAN',
                        'dibayar' => 'DIBAYAR',
                        'diproses' => 'SEDANG DIPROSES',
                        'dikirim' => 'DIKIRIM',
                        'selesai' => 'SELESAI',
                        'dibatalkan' => 'DIBATALKAN',
                    ];
                @endphp
                {{ $statusLabels[$pesanan->status] ?? strtoupper($pesanan->status) }}
            </span>
        </div>
    </div>

    <!-- Tabel Produk -->
    <table class="w-full text-sm border-collapse mb-6">
        <thead>
            <tr class="bg-gray-800 text-white">
                <th class="p-2 text-left">#</th>
                <th class="p-2 text-left">Produk</th>
                <th class="p-2 text-left">Variasi</th>
                <th class="p-2 text-center">Qty</th>
                <th class="p-2 text-right">Harga</th>
                <th class="p-2 text-right">Subtotal</th>
            </tr>
        </thead>
        <tbody>
            @foreach($pesanan->detail as $i => $detail)
            <tr class="border-b border-gray-200 {{ $i % 2 == 0 ? 'bg-gray-50' : '' }}">
                <td class="p-2">{{ $i + 1 }}</td>
                <td class="p-2 font-medium">{{ $detail->nama_produk }}</td>
                <td class="p-2 text-gray-600">
                    @if($detail->warna || $detail->ukuran)
                        {{ $detail->warna ?? '' }} {{ $detail->ukuran ? '/ ' . $detail->ukuran : '' }}
                    @else
                        -
                    @endif
                </td>
                <td class="p-2 text-center">{{ $detail->qty }}</td>
                <td class="p-2 text-right">Rp {{ number_format($detail->harga, 0, ',', '.') }}</td>
                <td class="p-2 text-right font-medium">Rp {{ number_format($detail->subtotal, 0, ',', '.') }}</td>
            </tr>
            @endforeach
        </tbody>
    </table>

    <!-- Summary -->
    <div class="flex justify-end mb-6">
        <div class="w-full md:w-1/2">
            <table class="w-full">
                <tr>
                    <td class="p-2 text-gray-600">Subtotal ({{ $pesanan->detail->sum('qty') }} item)</td>
                    <td class="p-2 text-right">Rp {{ number_format($subtotalProduk, 0, ',', '.') }}</td>
                </tr>
                <tr>
                    <td class="p-2 text-gray-600">Ongkos Kirim</td>
                    <td class="p-2 text-right">
                        @if($ongkir <= 0) GRATIS
                        @else Rp {{ number_format($ongkir, 0, ',', '.') }}
                        @endif
                    </td>
                </tr>
                @if($pesanan->pembayaran)
                <tr>
                    <td class="p-2 text-gray-600">Metode Pembayaran</td>
                    <td class="p-2 text-right">{{ strtoupper(str_replace('_', ' ', $pesanan->pembayaran->metode)) }}</td>
                </tr>
                <tr>
                    <td class="p-2 text-gray-600">Tanggal Bayar</td>
                    <td class="p-2 text-right">{{ $pesanan->pembayaran->created_at->format('d M Y') }}</td>
                </tr>
                @endif
                <tr class="border-t-2 border-gray-800">
                    <td class="p-2 font-bold text-lg">TOTAL</td>
                    <td class="p-2 text-right font-bold text-lg text-orange-600">Rp {{ number_format($pesanan->total_harga, 0, ',', '.') }}</td>
                </tr>
            </table>
        </div>
    </div>

    <!-- Catatan -->
    <div class="border border-gray-200 bg-gray-50 p-3 text-sm text-gray-600 mb-6">
        <span class="font-bold">⚠️ Catatan:</span> Mohon periksa kondisi barang sebelum menerima. Invoice ini merupakan bukti transaksi yang sah. Simpan invoice ini sebagai bukti pembelian Anda.
        @if($pesanan->catatan)
            <br><br><span class="font-bold">Catatan Pesanan:</span> {{ $pesanan->catatan }}
        @endif
    </div>

    <!-- Tanda Tangan -->
    <div class="grid grid-cols-3 gap-4 mb-6">
        <div class="text-center">
            <p class="font-bold mb-12">Dipesan Oleh</p>
            <div class="border-t border-gray-400 pt-2">
                <p class="text-sm">{{ $pesanan->user->name }}</p>
            </div>
        </div>
        <div class="text-center">
            <p class="font-bold mb-12">Dikirim Oleh</p>
            <div class="border-t border-gray-400 pt-2">
                <p class="text-sm">{{ $pesanan->kurir->name ?? '-' }}</p>
            </div>
        </div>
        <div class="text-center">
            <p class="font-bold mb-12">Diterima Oleh</p>
            <div class="border-t border-gray-400 pt-2">
                <p class="text-sm">{{ $pesanan->alamat->nama_penerima ?? '-' }}</p>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <div class="border-t-2 border-gray-800 pt-3 flex justify-between text-xs text-gray-600">
        <div>Dicetak: {{ now()->format('d M Y, H:i') }} WIB</div>
        <div class="font-semibold">Glow Beauty — Toko Skincare Terper aya | Terima kasih telah berbelanja!</div>
    </div>
</div>

<style>
@media print {
    body { background: white; }
    @page { margin: 1cm; }
}
</style>