<x-app-layout :title="'Invoice #' . $order->order_id">

{{-- ── 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);

    $methods = [
        'cash'     => 'COD (Bayar di Tempat)',
        'card'     => 'Kartu Kredit/Debit',
        'transfer' => 'Transfer Bank',
        'ewallet'  => 'E-Wallet',
        'qris'     => 'QRIS',
    ];
@endphp

<div class="max-w-4xl mx-auto px-4 py-8">

    {{-- ── ACTION BAR ── --}}
    <div class="flex items-center justify-between mb-6">
        <a href="{{ route('order.show', $order->order_id) }}"
           class="inline-flex items-center gap-2 text-sm text-stone-600 hover:text-amber-700 font-medium transition">
            <i class="fas fa-arrow-left"></i> Kembali ke Detail Pesanan
        </a>

        <div class="flex items-center gap-2">
            <a href="{{ route('invoice.download', $order->order_id) }}"
               onclick="window.open('{{ route('invoice.stream', $order->order_id) }}', '_blank');"
               class="inline-flex items-center gap-2 px-4 py-2.5 bg-amber-600 hover:bg-amber-700
                      text-white text-sm font-semibold rounded-lg shadow transition">
                <i class="fas fa-file-pdf"></i> Download PDF
            </a>

            <button onclick="window.print()"
                    class="inline-flex items-center gap-2 px-4 py-2 bg-stone-700 hover:bg-stone-800
                           text-white text-sm font-semibold rounded-lg shadow transition">
                <i class="fas fa-print"></i> Cetak
            </button>

            @if(Auth::user()->isAdmin())
            <form action="{{ route('invoice.send', $order->order_id) }}" method="POST" class="inline">
                @csrf
                <button type="submit"
                        class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700
                               text-white text-sm font-semibold rounded-lg shadow transition">
                    <i class="fas fa-envelope"></i> Kirim ke Email
                </button>
            </form>
            @endif
        </div>
    </div>

    {{-- ── INVOICE CARD ── --}}
    <div id="invoice-card"
         class="bg-white rounded-2xl shadow-xl border border-stone-200 overflow-hidden print:shadow-none print:border-0">

        {{-- Header --}}
        <div class="gradient-primary px-8 py-6 flex items-center justify-between border-b border-orange-200">
            <div>
                <h1 class="text-2xl font-black text-amber-900 tracking-wide">INTERIA</h1>
                <p class="text-stone-600 text-xs mt-1 font-medium">Belanja mudah, pengiriman cepat</p>
            </div>
            <div class="text-right">
                <div class="text-3xl font-black text-amber-800 tracking-widest uppercase shadow-sm">Invoice</div>
                <div class="text-amber-700 text-sm mt-1 font-bold">#{{ $order->order_id }}</div>
            </div>
        </div>

        <div class="px-8 py-6 space-y-6">

            {{-- Info Grid --}}
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">

                {{-- Tagihan kepada --}}
                <div>
                    <p class="text-[10px] font-bold text-amber-700 uppercase tracking-wider mb-2 border-b border-amber-200 pb-1">
                        Tagihan Kepada
                    </p>
                    <p class="font-bold text-stone-800">{{ $order->user->name }}</p>
                    <p class="text-xs text-stone-500">{{ $order->user->email }}</p>
                    @if($order->user->phone ?? null)
                        <p class="text-xs text-stone-500">{{ $order->user->phone }}</p>
                    @endif
                </div>

                {{-- Alamat pengiriman --}}
                <div>
                    <p class="text-[10px] font-bold text-amber-700 uppercase tracking-wider mb-2 border-b border-amber-200 pb-1">
                        Alamat Pengiriman
                    </p>
                    @if($addr)
                        <p class="text-xs text-stone-700 font-semibold">
                            {{ $addr->recipient_name ?? $order->user->name }}
                        </p>
                        <p class="text-xs text-stone-500 leading-relaxed">
                            {{ $addr->address_line ?? $addr->full_address ?? '-' }}<br>
                            @if($cityName){{ $cityName }},@endif
                            @if($provName) {{ $provName }}@endif
                            @if($addr->postal_code ?? null) {{ $addr->postal_code }}@endif
                        </p>
                    @else
                        <p class="text-xs text-stone-400">Alamat tidak tersedia</p>
                    @endif
                </div>

                {{-- Detail invoice --}}
                <div>
                    <p class="text-[10px] font-bold text-amber-700 uppercase tracking-wider mb-2 border-b border-amber-200 pb-1">
                        Detail Invoice
                    </p>
                    <div class="space-y-1">
                        <div class="flex justify-between text-xs">
                            <span class="text-stone-500">Tanggal</span>
                            <span class="font-medium text-stone-700">{{ $order->created_at->format('d M Y') }}</span>
                        </div>
                        <div class="flex justify-between text-xs">
                            <span class="text-stone-500">Status</span>
                            <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-emerald-100 text-emerald-700
                                         rounded-full text-[10px] font-bold border border-emerald-300">
                                <i class="fas fa-check-circle text-[8px]"></i> LUNAS
                            </span>
                        </div>
                        <div class="flex justify-between text-xs">
                            <span class="text-stone-500">Metode</span>
                            <span class="font-medium text-stone-700">
                                {{ $methods[$order->payment->payment_method ?? ''] ?? ucfirst($order->payment->payment_method ?? '-') }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Items Table --}}
            <div class="overflow-x-auto rounded-xl border border-stone-200 shadow-sm">
                <table class="w-full text-sm">
                    <thead class="bg-gradient-to-r from-orange-100 to-amber-50 text-amber-900 border-b border-orange-200">
                        <tr>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide">#</th>
                            <th class="px-4 py-3 text-left text-xs font-bold uppercase tracking-wide">Produk</th>
                            <th class="px-4 py-3 text-center text-xs font-bold uppercase tracking-wide">Qty</th>
                            <th class="px-4 py-3 text-right text-xs font-bold uppercase tracking-wide">Harga Satuan</th>
                            <th class="px-4 py-3 text-right text-xs font-bold uppercase tracking-wide">Subtotal</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-stone-100">
                        @foreach($order->items as $i => $item)
                        <tr class="{{ $loop->even ? 'bg-stone-50' : 'bg-white' }}">
                            <td class="px-4 py-3 text-stone-500 text-xs">{{ $i + 1 }}</td>
                            <td class="px-4 py-3">
                                <p class="font-semibold text-stone-800 text-sm">
                                    {{ $item->product->product_name ?? 'Produk Dihapus' }}
                                </p>
                                <p class="text-[10px] text-stone-400">SKU #{{ $item->product_id }}</p>
                            </td>
                            <td class="px-4 py-3 text-center text-stone-700 font-medium">{{ $item->quantity }}</td>
                            <td class="px-4 py-3 text-right text-stone-700">
                                Rp {{ number_format($item->quantity > 0 ? ($item->subtotal / $item->quantity) : 0, 0, ',', '.') }}
                            </td>
                            <td class="px-4 py-3 text-right font-bold text-stone-800">
                                Rp {{ number_format($item->subtotal, 0, ',', '.') }}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            {{-- Totals --}}
            <div class="flex justify-end">
                <div class="w-full sm:w-80 space-y-2">
                    @php
                        $subtotalProduk = $order->product_subtotal;
                        $shippingCost   = (int) $order->shipping_cost;
                    @endphp

                    <div class="flex justify-between text-sm py-1 border-b border-stone-100">
                        <span class="text-stone-500">Subtotal Produk</span>
                        <span class="font-semibold">Rp {{ number_format($subtotalProduk, 0, ',', '.') }}</span>
                    </div>

                    <div class="flex justify-between text-sm py-1 border-b border-stone-100">
                        <span class="text-stone-500">
                            Ongkos Kirim
                            @if($order->courier_name)
                                <span class="text-[10px] text-stone-400">({{ $order->courier_name }})</span>
                            @endif
                        </span>
                        <span class="font-semibold">
                            @if($shippingCost === 0)
                                <span class="text-emerald-600">GRATIS</span>
                            @else
                                Rp {{ number_format($shippingCost, 0, ',', '.') }}
                            @endif
                        </span>
                    </div>

                    <div class="flex justify-between gradient-primary border border-amber-200 shadow-sm text-stone-800 px-4 py-3 rounded-xl mt-2">
                        <span class="font-bold">Total Pembayaran</span>
                        <span class="font-black text-amber-900 text-base">
                            Rp {{ number_format($order->total_price, 0, ',', '.') }}
                        </span>
                    </div>
                </div>
            </div>

            {{-- Shipping + Payment Info --}}
            @if($order->tracking_number || $order->courier_name)
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div class="bg-amber-50 border border-amber-200 rounded-xl p-4">
                    <p class="text-[10px] font-bold text-amber-700 uppercase tracking-wider mb-3">
                        <i class="fas fa-truck mr-1"></i> Informasi Pengiriman
                    </p>
                    <div class="space-y-1.5">
                        @if($order->courier_name)
                        <div class="flex justify-between text-xs">
                            <span class="text-stone-500">Kurir</span>
                            <span class="font-semibold text-stone-700">{{ $order->courier_name }}</span>
                        </div>
                        @endif
                        @if($order->estimated_days)
                        <div class="flex justify-between text-xs">
                            <span class="text-stone-500">Estimasi</span>
                            <span class="font-semibold text-stone-700">{{ $order->estimated_days }}</span>
                        </div>
                        @endif
                        @if($order->tracking_number)
                        <div class="flex justify-between text-xs">
                            <span class="text-stone-500">No. Resi</span>
                            <span class="font-mono font-bold text-stone-800 tracking-widest">{{ $order->tracking_number }}</span>
                        </div>
                        @endif
                    </div>
                </div>

                @if($order->payment)
                <div class="bg-emerald-50 border border-emerald-200 rounded-xl p-4">
                    <p class="text-[10px] font-bold text-emerald-700 uppercase tracking-wider mb-3">
                        <i class="fas fa-check-circle mr-1"></i> Informasi Pembayaran
                    </p>
                    <div class="space-y-1.5">
                        <div class="flex justify-between text-xs">
                            <span class="text-stone-500">Metode</span>
                            <span class="font-semibold text-stone-700">
                                {{ $methods[$order->payment->payment_method] ?? ucfirst($order->payment->payment_method) }}
                            </span>
                        </div>
                        <div class="flex justify-between text-xs">
                            <span class="text-stone-500">Status</span>
                            <span class="font-bold text-emerald-700">LUNAS</span>
                        </div>
                        @if($order->payment->payment_date)
                        <div class="flex justify-between text-xs">
                            <span class="text-stone-500">Tgl Bayar</span>
                            <span class="font-semibold text-stone-700">
                                {{ \Carbon\Carbon::parse($order->payment->payment_date)->format('d M Y') }}
                            </span>
                        </div>
                        @endif
                    </div>
                </div>
                @endif
            </div>
            @endif

            {{-- Catatan --}}
            @if($order->order_note)
            <div class="border-l-4 border-amber-400 pl-4 py-2 bg-amber-50 rounded-r-lg">
                <p class="text-[10px] font-bold text-amber-700 uppercase tracking-wider mb-1">Catatan Pesanan</p>
                <p class="text-sm text-stone-600">{{ $order->order_note }}</p>
            </div>
            @endif

            {{-- Footer --}}
            <div class="border-t border-stone-200 pt-5 text-center">
                <p class="text-xs text-stone-400">
                    Dokumen ini merupakan invoice resmi yang diterbitkan secara otomatis oleh sistem.<br>
                    Untuk pertanyaan, hubungi kami melalui email atau customer service.
                </p>
                <p class="text-sm font-bold text-amber-800 mt-2">
                    INTERIA — Terima kasih telah berbelanja!
                </p>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
@media print {
    nav, header, footer, .print\:hidden { display: none !important; }
    body { background: white !important; }
    #invoice-card { box-shadow: none !important; border: none !important; }
}
</style>
@endpush

</x-app-layout>