<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8" />
    <title>Invoice {{ $order->order_number }} — {{ config('app.name') }}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" />
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        @media print {
            .no-print { display: none !important; }
            body { background: white !important; }
            .invoice-page { box-shadow: none !important; margin: 0 !important; }
        }
        @page { size: A4; margin: 15mm; }
    </style>
</head>
<body class="bg-slate-100 antialiased">

    {{-- Tombol aksi (tidak ikut print) --}}
    <div class="no-print sticky top-0 z-10 bg-white border-b border-slate-200 px-6 py-3 flex items-center justify-between">
        <a href="{{ route('admin.pesanan.show', $order->id) }}"
            class="inline-flex items-center gap-2 text-sm text-slate-600 hover:text-slate-800">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
            </svg>
            Kembali ke Detail Pesanan
        </a>
        <button onclick="window.print()"
            class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-orange-500 rounded-lg hover:bg-orange-600">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6.72 13.829c-.24.03-.48.062-.72.096m.72-.096a42.415 42.415 0 0110.56 0m-10.56 0L6.34 18m10.94-4.171c.24.03.48.062.72.096m-.72-.096L17.66 18m0 0l.229 2.523a1.125 1.125 0 01-1.12 1.227H7.231c-.662 0-1.18-.568-1.12-1.227L6.34 18m11.32 0H6.34m-1.93-3.171a48.355 48.355 0 00-1.232.063m1.232-.063L6.34 18m11.32 0l.232-2.481a48.355 48.355 0 00-1.232-.063m-9.044 0a48.474 48.474 0 011.232-.063m6.58 0c.41.024.82.05 1.23.077m0 0L18.16 18M5.65 14.829c-.41.024-.82.05-1.23.077M2.25 6.75h19.5M4.5 6.75v-1.5a2.25 2.25 0 012.25-2.25h10.5a2.25 2.25 0 012.25 2.25v1.5"/>
            </svg>
            Cetak Invoice
        </button>
    </div>

    {{-- Halaman Invoice A4 --}}
    <div class="invoice-page max-w-[210mm] mx-auto bg-white my-6 p-10 shadow-lg" style="min-height: 297mm;">

        {{-- Kop Surat --}}
        <div class="flex items-start justify-between pb-6 border-b-2 border-slate-800">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 bg-orange-500 rounded-xl flex items-center justify-center shrink-0">
                    <span class="text-white font-bold text-lg">TB</span>
                </div>
                <div>
                    <p class="text-lg font-bold text-slate-800">Titipin Ba Be</p>
                    <p class="text-xs text-slate-500">Platform Jasa Titip Hyperlokal</p>
                    <p class="text-xs text-slate-500">Desa Budiharja</p>
                </div>
            </div>
            <div class="text-right">
                <h1 class="text-2xl font-bold text-slate-800 tracking-wide">INVOICE</h1>
                <p class="font-mono text-sm text-slate-600 mt-1">{{ $order->order_number }}</p>
                <p class="text-xs text-slate-400 mt-1">{{ $order->created_at->translatedFormat('d F Y, H:i') }} WIB</p>
            </div>
        </div>

        {{-- Info Customer & Status --}}
        <div class="grid grid-cols-2 gap-8 py-6">
            <div>
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">Ditujukan Kepada</p>
                <p class="font-semibold text-slate-800">{{ $order->customer_name }}</p>
                <p class="text-sm text-slate-600">{{ $order->customer_phone }}</p>
                <p class="text-sm text-slate-600 mt-1">{{ $order->delivery_address_snapshot }}</p>
            </div>
            <div class="text-right">
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-2">Status</p>
                <p class="text-sm text-slate-700">
                    Status Pesanan: <span class="font-semibold">{{ $order->status->label() }}</span>
                </p>
                <p class="text-sm text-slate-700">
                    Metode Bayar: <span class="font-semibold">{{ $order->payment_method->label() }}</span>
                </p>
                <p class="text-sm text-slate-700">
                    Status Bayar:
                    <span class="font-semibold">
                        {{ $order->payment?->status->label() ?? 'Belum Bayar' }}
                    </span>
                </p>
            </div>
        </div>

        {{-- Tabel Produk --}}
        <table class="w-full text-sm mt-2">
            <thead>
                <tr class="border-b-2 border-slate-800">
                    <th class="text-left py-2 font-semibold text-slate-700">Produk</th>
                    <th class="text-right py-2 font-semibold text-slate-700 w-24">Harga</th>
                    <th class="text-center py-2 font-semibold text-slate-700 w-16">Qty</th>
                    <th class="text-right py-2 font-semibold text-slate-700 w-28">Subtotal</th>
                </tr>
            </thead>
            <tbody>
                @foreach ($order->items as $item)
                    <tr class="border-b border-slate-100">
                        <td class="py-2.5 text-slate-700">{{ $item->product_name }}</td>
                        <td class="py-2.5 text-right text-slate-600">Rp {{ number_format($item->sell_price, 0, ',', '.') }}</td>
                        <td class="py-2.5 text-center text-slate-600">{{ $item->quantity }}</td>
                        <td class="py-2.5 text-right text-slate-700 font-medium">Rp {{ number_format($item->subtotal, 0, ',', '.') }}</td>
                    </tr>
                @endforeach
            </tbody>
        </table>

        {{-- Ringkasan --}}
        <div class="flex justify-end mt-4">
            <div class="w-72 space-y-1.5 text-sm">
                <div class="flex justify-between text-slate-600">
                    <span>Subtotal</span>
                    <span>Rp {{ number_format($order->subtotal, 0, ',', '.') }}</span>
                </div>
                @if ($order->discount_amount > 0)
                    <div class="flex justify-between text-slate-600">
                        <span>Diskon {{ $order->voucher ? '(' . $order->voucher->code . ')' : '' }}</span>
                        <span>− Rp {{ number_format($order->discount_amount, 0, ',', '.') }}</span>
                    </div>
                @endif
                <div class="flex justify-between text-slate-600">
                    <span>Ongkos Kirim</span>
                    <span>Rp {{ number_format($order->delivery_cost, 0, ',', '.') }}</span>
                </div>
                <div class="flex justify-between text-base font-bold text-slate-800 pt-2 border-t-2 border-slate-800">
                    <span>Grand Total</span>
                    <span>Rp {{ number_format($order->grand_total, 0, ',', '.') }}</span>
                </div>
            </div>
        </div>

        @if ($order->customer_notes)
            <div class="mt-6 pt-4 border-t border-slate-200">
                <p class="text-xs font-semibold text-slate-400 uppercase tracking-wide mb-1">Catatan Customer</p>
                <p class="text-sm text-slate-600">{{ $order->customer_notes }}</p>
            </div>
        @endif

        {{-- Footer --}}
        <div class="mt-12 pt-6 border-t border-slate-200 text-center">
            <p class="text-xs text-slate-400">
                Invoice ini dibuat otomatis oleh sistem {{ config('app.name') }} — Desa Budiharja.
            </p>
            <p class="text-xs text-slate-400 mt-0.5">
                Dicetak pada {{ now()->translatedFormat('d F Y, H:i') }} WIB
            </p>
        </div>

    </div>

</body>
</html>
