@extends('layouts.app', ['title' => 'Order #' . $order->order_number])

@section('content')
<div class="space-y-8 max-w-4xl mx-auto">
    <!-- Header -->
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 border-b border-[#e4e2dd] pb-6">
        <div>
            <div class="flex items-center gap-2">
                <span class="text-xs font-bold uppercase tracking-widest text-[#526048]">Order Receipt</span>
                <span class="text-xs text-stone-400">•</span>
                <span class="text-xs text-[#75786f]">{{ $order->created_at->format('M d, Y • H:i') }}</span>
            </div>
            <h1 class="font-serif text-3xl sm:text-4xl font-semibold text-[#1b1c19] mt-1">{{ $order->order_number }}</h1>
        </div>

        <div class="flex items-center gap-2.5">
            <a href="{{ route('dashboard') }}" class="px-4 py-2.5 rounded-full bg-white border border-[#c5c8bd] hover:bg-[#f5f3ee] text-[#1b1c19] text-xs font-bold uppercase tracking-wider transition-colors shadow-xs">
                &larr; Dashboard
            </a>
            <a href="{{ route('products.index') }}" class="px-5 py-2.5 rounded-full bg-[#526048] hover:bg-[#6a795f] text-white text-xs font-bold uppercase tracking-wider transition-colors shadow-xs">
                Shop More
            </a>
        </div>
    </div>

    <!-- Tokopedia-Style Fulfillment & Shipping Process Steps Tracker -->
    @php
        $isCancelled = $order->order_status === \App\Enums\OrderStatus::CANCELLED;
        $isPickup = $order->isPickup();

        // Calculate step index (1-based)
        if ($isPickup) {
            // Pick-up Steps: 1. Placed, 2. Ready for Pickup, 3. Completed
            $currentStep = match ($order->order_status) {
                \App\Enums\OrderStatus::PENDING => 1,
                \App\Enums\OrderStatus::READY_FOR_PICKUP => 2,
                \App\Enums\OrderStatus::COMPLETED => 3,
                default => 1,
            };
            $steps = [
                1 => ['title' => 'Pesanan Dibuat', 'desc' => 'Order Placed', 'icon' => 'receipt_long'],
                2 => ['title' => 'Siap Diambil', 'desc' => 'Ready at Boutique', 'icon' => 'storefront'],
                3 => ['title' => 'Selesai', 'desc' => 'Picked Up & Paid', 'icon' => 'task_alt'],
            ];
        } else {
            // Delivery Steps: 1. Menunggu Pembayaran / Placed, 2. Diproses Penjual, 3. Sedang Dikirim, 4. Selesai
            $currentStep = match ($order->order_status) {
                \App\Enums\OrderStatus::PENDING => $order->isPaid() ? 2 : 1,
                \App\Enums\OrderStatus::PROCESSING => 2,
                \App\Enums\OrderStatus::SHIPPED => 3,
                \App\Enums\OrderStatus::COMPLETED => 4,
                default => 1,
            };
            $steps = [
                1 => ['title' => 'Menunggu Pembayaran', 'desc' => 'Order Placed', 'icon' => 'account_balance_wallet'],
                2 => ['title' => 'Diproses Penjual', 'desc' => 'Packing', 'icon' => 'inventory_2'],
                3 => ['title' => 'Dalam Pengiriman', 'desc' => 'In Transit', 'icon' => 'local_shipping'],
                4 => ['title' => 'Pesanan Selesai', 'desc' => 'Delivered', 'icon' => 'task_alt'],
            ];
        }
    @endphp

    <div class="bg-white rounded-3xl border border-[#e4e2dd] p-6 sm:p-8 shadow-xs space-y-6">
        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-2 pb-4 border-b border-[#f0eee9]">
            <div class="flex items-center gap-2.5">
                <span class="material-symbols-outlined text-[#526048] text-2xl">timeline</span>
                <h2 class="font-serif text-xl font-semibold text-[#1b1c19]">Status & Tracking</h2>
            </div>
            <span class="text-xs text-[#75786f]">
                Metode: <strong class="text-[#526048]">{{ $order->fulfillment_type->label() }}</strong>
            </span>
        </div>

        @if ($isCancelled)
            <div class="p-4 rounded-2xl bg-rose-50 border border-rose-200 text-xs text-rose-800 flex items-center gap-3">
                <span class="material-symbols-outlined text-rose-600 text-2xl">cancel</span>
                <div>
                    <strong class="block text-sm font-semibold">Pesanan Dibatalkan</strong>
                    <span>Pesanan ini telah dibatalkan atau kedaluwarsa.</span>
                </div>
            </div>
        @else
            <!-- Horizontal Stepper (Tablet & Desktop) -->
            <div class="hidden sm:grid {{ $isPickup ? 'grid-cols-3' : 'grid-cols-4' }} gap-4 relative items-start">
                @foreach ($steps as $idx => $step)
                    @php
                        $isPast = $idx < $currentStep;
                        $isCurrent = $idx === $currentStep;
                        $isUpcoming = $idx > $currentStep;
                    @endphp

                    <div class="flex flex-col items-center text-center relative group">
                        <!-- Connecting Line between steps -->
                        @if (! $loop->first)
                            <div class="absolute top-5 -left-1/2 w-full h-[3px] -z-0 {{ $idx <= $currentStep ? 'bg-[#526048]' : 'bg-[#e4e2dd]' }} transition-colors"></div>
                        @endif

                        <!-- Step Circle Icon -->
                        <div class="w-11 h-11 rounded-full flex items-center justify-center text-sm font-bold transition-all relative z-10
                            {{ $isPast ? 'bg-[#526048] text-white shadow-xs' : '' }}
                            {{ $isCurrent ? 'bg-[#526048] text-white ring-4 ring-[#526048]/20 shadow-md' : '' }}
                            {{ $isUpcoming ? 'bg-[#f0eee9] text-[#75786f] border border-[#e4e2dd]' : '' }}">
                            <span class="material-symbols-outlined text-lg">
                                {{ $isPast ? 'check' : $step['icon'] }}
                            </span>
                        </div>

                        <!-- Step Labels -->
                        <div class="mt-3 space-y-0.5">
                            <span class="text-xs font-bold block {{ $isCurrent ? 'text-[#526048]' : ($isPast ? 'text-[#1b1c19]' : 'text-[#75786f]') }}">
                                {{ $step['title'] }}
                            </span>
                            <span class="text-[11px] text-[#75786f] block">
                                {{ $step['desc'] }}
                            </span>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Vertical Stepper Timeline (Mobile View) -->
            <div class="sm:hidden space-y-4">
                @foreach ($steps as $idx => $step)
                    @php
                        $isPast = $idx < $currentStep;
                        $isCurrent = $idx === $currentStep;
                        $isUpcoming = $idx > $currentStep;
                    @endphp

                    <div class="flex items-start gap-4 relative">
                        <!-- Left indicator -->
                        <div class="flex flex-col items-center">
                            <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold
                                {{ $isPast ? 'bg-[#526048] text-white' : '' }}
                                {{ $isCurrent ? 'bg-[#526048] text-white ring-4 ring-[#526048]/20' : '' }}
                                {{ $isUpcoming ? 'bg-[#f0eee9] text-[#75786f] border border-[#e4e2dd]' : '' }}">
                                <span class="material-symbols-outlined text-base">
                                    {{ $isPast ? 'check' : $step['icon'] }}
                                </span>
                            </div>
                            @if (! $loop->last)
                                <div class="w-0.5 h-8 my-1 {{ $idx < $currentStep ? 'bg-[#526048]' : 'bg-[#e4e2dd]' }}"></div>
                            @endif
                        </div>

                        <!-- Right details -->
                        <div class="pt-0.5">
                            <strong class="text-xs font-bold block {{ $isCurrent ? 'text-[#526048]' : ($isPast ? 'text-[#1b1c19]' : 'text-[#75786f]') }}">
                                {{ $step['title'] }}
                            </strong>
                            <span class="text-[11px] text-[#75786f] block">
                                {{ $step['desc'] }}
                            </span>
                        </div>
                    </div>
                @endforeach
            </div>

            <!-- Current Step Context Notice Card -->
            <div class="p-5 rounded-2xl bg-[#fbf9f4] border border-[#e4e2dd] text-xs text-[#444840] space-y-3">
                <div class="flex items-start gap-3">
                    <span class="material-symbols-outlined text-[#526048] text-xl shrink-0 mt-0.5">info</span>
                    <div class="flex-grow">
                        @if ($isPickup)
                            @if ($currentStep === 1)
                                <strong class="text-[#1b1c19] block">Pesanan Sedang Dipersiapkan</strong>
                                <p class="mt-0.5">Tim kami sedang menyiapkan produk Anda </p> <br>
                                <p class="mt-0.5">Jika ada pertanyaan, silakan hubungi kami atau klik nomor berikut <a href="https://wa.me/6287762359833" class="text-[#526048]"><strong>+62 87-7623-59833</strong></a></p>
                            @elseif ($currentStep === 2)
                                <strong class="text-[#1b1c19] block">Paket Siap Diambil di lalita bloom</strong>
                                <p class="mt-0.5">Silakan kunjungi lalita bloom dan tunjukkan Kode Verifikasi: <strong class="text-[#526048]">{{ $order->pickup_code }}</strong>.</p> <br>
                                <p class="mt-0.5">Jika ada pertanyaan, silakan hubungi kami atau klik nomor berikut <a href="https://wa.me/6287762359833" class="text-[#526048]"><strong>+62 87-7623-59833</strong></a></p>
                            @elseif ($currentStep === 3)
                                <strong class="text-[#1b1c19] block">Pesanan Telah Selesai</strong>
                                <p class="mt-0.5">Terima kasih telah mengunjungi lalita bloom!</p> <br>
                                <p class="mt-0.5">Jika ada pertanyaan, silakan hubungi kami atau klik nomor berikut <a href="https://wa.me/6287762359833" class="text-[#526048]"><strong>+62 87-7623-59833</strong></a></p>

                            @endif
                        @else
                            @if ($currentStep === 1)
                                <strong class="text-[#1b1c19] block">Menunggu Konfirmasi Pembayaran</strong>
                                <p class="mt-0.5">Silakan selesaikan pembayaran agar pesanan Anda dapat segera diproses dan dikirim.</p> <br>
                                <p class="mt-0.5">Jika ada pertanyaan, silakan hubungi kami atau klik nomor berikut <a href="https://wa.me/6287762359833" class="text-[#526048]"><strong>+62 87-7623-59833</strong></a></p>

                            @elseif ($currentStep === 2)
                                <strong class="text-[#1b1c19] block">Pembayaran Diterima & Pesanan Dikemas</strong>
                                <p class="mt-0.5">Pembayaran Anda terkonfirmasi. Tim kami sedang mengemas produk dengan kemasan aman.</p> <br>
                                <p class="mt-0.5">Jika ada pertanyaan, silakan hubungi kami atau klik nomor berikut <a href="https://wa.me/6287762359833" class="text-[#526048]"><strong>+62 87-7623-59833</strong></a></p>

                            @elseif ($currentStep === 3)
                                <strong class="text-[#1b1c19] block">Paket Sedang Dalam Pengiriman</strong>
                                <p class="mt-0.5">
                                    Kurir: <strong>{{ $order->courier_name ?? 'Local Express' }}</strong> • Resi: <strong class="text-[#526048] font-mono">{{ $order->tracking_number }}</strong>. Anda dapat melihat foto bukti paket di bawah.
                                </p> <br>
                                <p class="mt-0.5">Jika ada pertanyaan, silakan hubungi kami atau klik nomor berikut <a href="https://wa.me/6287762359833" class="text-[#526048]"><strong>+62 87-7623-59833</strong></a></p>
                            @elseif ($currentStep === 4)
                                <strong class="text-[#1b1c19] block">Pesanan Telah Tiba & Selesai</strong>
                                <p class="mt-0.5">Paket telah diterima di alamat tujuan. Terima kasih telah mempercayakan perawatan kecantikan Anda pada Lalita Bloom.</p> <br>
                                <p class="mt-0.5">Jika ada pertanyaan, silakan hubungi kami atau klik nomor berikut <a href="https://wa.me/6287762359833" class="text-[#526048]"><strong>+62 87-7623-59833</strong></a></p>

                            @endif
                        @endif
                    </div>
                </div>

                <!-- Action Button for Customer when order is SHIPPED -->
                @if ($order->order_status === \App\Enums\OrderStatus::SHIPPED)
                    <div class="pt-3 border-t border-[#e4e2dd] flex flex-col sm:flex-row sm:items-center justify-between gap-3 bg-white p-4 rounded-xl shadow-xs">
                        <div>
                            <span class="font-bold text-[#1b1c19] block">Sudah menerima paket Anda?</span>
                            <span class="text-[11px] text-[#75786f]">Klik tombol di samping untuk mengonfirmasi bahwa produk telah sampai dengan baik.</span>
                        </div>
                        <form method="POST" action="{{ route('orders.complete', $order->order_number) }}" onsubmit="return confirm('Konfirmasi bahwa Anda telah menerima seluruh pesanan ini dalam kondisi baik?');">
                            @csrf
                            @method('PATCH')
                            <button type="submit" class="inline-flex items-center gap-1.5 px-6 py-2.5 rounded-full bg-[#526048] hover:bg-[#6a795f] text-white text-xs font-bold uppercase tracking-wider transition-colors shadow-xs whitespace-nowrap">
                                <span class="material-symbols-outlined text-base">check_circle</span>
                                <span>Pesanan Selesai</span>
                            </button>
                        </form>
                    </div>
                @endif
            </div>
        @endif
    </div>

    <!-- Status Highlight Cards -->
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 text-xs">
        <div class="bg-white p-6 rounded-3xl border border-[#e4e2dd] shadow-xs space-y-1.5">
            <span class="text-[#75786f] uppercase tracking-wider text-[10px] font-bold block">Metode Pembayaran</span>
            <strong class="text-[#1b1c19] text-base font-semibold block">{{ $order->fulfillment_type->label() }}</strong>
            <span class="text-[11px] text-[#526048] font-medium">{{ $order->isPickup() ? 'Free In-store Pickup' : 'Delivery' }}</span>
        </div>

        <div class="bg-white p-6 rounded-3xl border border-[#e4e2dd] shadow-xs space-y-1.5">
            <span class="text-[#75786f] uppercase tracking-wider text-[10px] font-bold block">Order Status</span>
            <div>
                @php
                    $orderBadge = match ($order->order_status) {
                        \App\Enums\OrderStatus::READY_FOR_PICKUP => 'bg-[#d8e8c8] text-[#131f0b]',
                        \App\Enums\OrderStatus::PROCESSING => 'bg-blue-100 text-blue-900',
                        \App\Enums\OrderStatus::SHIPPED => 'bg-purple-100 text-purple-900',
                        \App\Enums\OrderStatus::COMPLETED => 'bg-[#f0eee9] text-[#1b1c19]',
                        default => 'bg-amber-100 text-amber-900',
                    };
                @endphp
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold {{ $orderBadge }}">
                    {{ $order->order_status->label() }}
                </span>
            </div>
            <span class="text-[11px] text-[#75786f] block">Updated: {{ $order->updated_at->diffForHumans() }}</span>
        </div>

        <div class="bg-white p-6 rounded-3xl border border-[#e4e2dd] shadow-xs space-y-1.5">
            <span class="text-[#75786f] uppercase tracking-wider text-[10px] font-bold block">Payment Status</span>
            <div>
                @php
                    $payBadge = match ($order->payment_status) {
                        \App\Enums\PaymentStatus::PAID => 'bg-[#d8e8c8] text-[#131f0b]',
                        \App\Enums\PaymentStatus::UNPAID => 'bg-amber-100 text-amber-900',
                        default => 'bg-amber-100 text-amber-900',
                    };
                @endphp
                <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-bold {{ $payBadge }}">
                    {{ $order->payment_status->label() }}
                </span>
            </div>
            <span class="text-[11px] text-[#75786f] block">{{ $order->payment_method->label() }}</span>
        </div>
    </div>

    <!-- Midtrans Online Payment Box (For Delivery orders needing payment) -->
    @if ($order->isDelivery() && ! $order->isPaid())
        @php
            $midtransService = app(\App\Services\MidtransService::class);
            $snapToken = $midtransService->getSnapToken($order);
            $snapJsUrl = config('midtrans.snap_url');
            $clientKey = config('midtrans.client_key');
        @endphp
        <div class="bg-white p-8 rounded-3xl border-2 border-[#526048] shadow-sm space-y-4">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <div>
                    <span class="inline-flex items-center gap-1 px-3 py-1 rounded-full text-[10px] font-bold bg-amber-100 text-amber-900 uppercase tracking-wider">
                         Proses Pembayaran Diperlukan
                    </span>
                    <h2 class="font-serif text-2xl font-semibold text-[#1b1c19] mt-1.5">Selesaikan Pembayaran Anda</h2>
                    <p class="text-xs text-[#444840] mt-0.5">Bayar dengan menekan pay {{ $order->formatted_grand_total }}</p>
                </div>

                <button type="button" id="pay-button" class="px-8 py-3.5 rounded-full bg-[#526048] hover:bg-[#6a795f] text-white text-xs font-bold uppercase tracking-wider transition-colors shadow-xs flex items-center justify-center gap-2 shrink-0">
                    <span class="material-symbols-outlined text-base">lock</span>
                    <span>Pay {{ $order->formatted_grand_total }}</span>
                </button>
            </div>
        </div>

        @if (! empty($clientKey))
            <script src="{{ $snapJsUrl }}" data-client-key="{{ $clientKey }}"></script>
        @endif
        <script>
            document.getElementById('pay-button')?.addEventListener('click', function () {
                if (typeof window.snap !== 'undefined') {
                    window.snap.pay('{{ $snapToken }}', {
                        onSuccess: function(result) {
                            window.location.reload();
                        },
                        onPending: function(result) {
                            window.location.reload();
                        },
                        onError: function(result) {
                            alert("Payment error occurred. Please try again.");
                        },
                        onClose: function() {
                            // Customer closed without finishing
                        }
                    });
                } else {
                    alert('Midtrans Sandbox Mode active (Snap Token: {{ $snapToken }}). Ready for webhook simulation.');
                }
            });
        </script>
    @endif

    <!-- Prominent In-Store Pickup Banner (if Pickup) -->
    @if ($order->isPickup() && $order->pickup_code)
        <div class="bg-[#526048] text-white p-8 rounded-3xl shadow-md space-y-6">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-6">
                <div class="space-y-1.5">
                    <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[10px] font-bold bg-white/20 backdrop-blur-xs text-white uppercase tracking-wider">
                        ★ Ready for Store Collection
                    </span>
                    <h2 class="font-serif text-2xl sm:text-3xl font-semibold text-white">Kode Verifikasi Pengambilan Barang Anda</h2>
                    <p class="text-xs text-white/80 max-w-lg leading-relaxed">Tunjukkan kode ini di toko kami untuk pengambilan barang Anda.</p>
                </div>

                <div class="bg-white/10 backdrop-blur-md p-5 rounded-2xl border border-white/20 text-center sm:text-right shrink-0">
                    <span class="text-[10px] uppercase tracking-widest text-white/70 block mb-1">Kode Pengambilan Barang Anda</span>
                    <span class="font-mono text-3xl font-black text-white tracking-widest block" id="code-text">{{ $order->pickup_code }}</span>
                    <button type="button" onclick="navigator.clipboard.writeText('{{ $order->pickup_code }}'); alert('Pickup Code copied to clipboard!');" class="mt-2 text-xs text-emerald-200 hover:text-white underline font-semibold">
                        Copy Code
                    </button>
                </div>
            </div>

            <div class="pt-4 border-t border-white/20 text-xs text-white/90 grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <strong class="text-white block mb-0.5">Lokasi Toko:</strong>
                    Lalita Bloom Beauty<br>
                    APHM Cilinaya Mataram Mall, Toko A16<br>
                    Jl. Panca Usaha, Mataram - NTB<br>
                    <em>Operating Hours: Daily 09:00 - 20:00 WITA</em>
                </div>
                <div>
                    <strong class="text-white block mb-0.5">Bayar di Counter:</strong>
                    Cash (IDR), Visa, Mastercard, or QRIS accepted upon collecting your items.
                </div>
            </div>
        </div>
    @endif

    <!-- Delivery Tracking Banner (if Delivery) -->
    @if ($order->isDelivery())
        <div class="bg-white p-8 rounded-3xl border border-[#e4e2dd] shadow-xs space-y-6">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                <h2 class="font-serif text-2xl font-semibold text-[#1b1c19]">Informasi Pengiriman & Pelacakan</h2>
                @if ($order->order_status === \App\Enums\OrderStatus::SHIPPED)
                    <form method="POST" action="{{ route('orders.complete', $order->order_number) }}" onsubmit="return confirm('Konfirmasi bahwa Anda telah menerima seluruh pesanan ini dalam kondisi baik?');">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="inline-flex items-center gap-1.5 px-5 py-2 rounded-full bg-[#526048] hover:bg-[#6a795f] text-white text-xs font-bold uppercase tracking-wider transition-colors shadow-xs">
                            <span class="material-symbols-outlined text-base">check_circle</span>
                            <span>Pesanan Selesai / Diterima</span>
                        </button>
                    </form>
                @endif
            </div>

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6 text-xs text-[#444840]">
                <!-- Shipping Address Snapshot -->
                <div class="p-5 rounded-2xl bg-[#fbf9f4] border border-[#e4e2dd] space-y-2">
                    <span class="text-[10px] uppercase font-bold text-[#526048] block">Tujuan Pengiriman</span>
                    @if ($order->shipping_address_snapshot)
                        <strong class="text-[#1b1c19] block text-sm">{{ $order->shipping_address_snapshot['recipient_name'] ?? '' }} ({{ $order->shipping_address_snapshot['phone_number'] ?? '' }})</strong>
                        <p class="leading-relaxed text-xs">
                            {{ $order->shipping_address_snapshot['full_address'] ?? '' }}<br>
                            {{ $order->shipping_address_snapshot['city'] ?? '' }}, {{ $order->shipping_address_snapshot['province'] ?? '' }} {{ $order->shipping_address_snapshot['postal_code'] ?? '' }}
                        </p>
                    @else
                        <p>No address recorded.</p>
                    @endif
                </div>

                <!-- Courier Tracking Info -->
                <div class="p-5 rounded-2xl bg-[#fbf9f4] border border-[#e4e2dd] space-y-3">
                    <span class="text-[10px] uppercase font-bold text-[#526048] block">Courier Tracking </span>
                    @if ($order->tracking_number)
                        <div class="space-y-1">
                            <span class="text-xs text-[#444840] block">Courier: <strong>{{ $order->courier_name ?? 'Local Express' }}</strong></span>
                            <div class="flex items-center gap-2">
                                <span class="font-mono text-base font-bold text-[#1b1c19]">{{ $order->tracking_number }}</span>
                                <button type="button" onclick="navigator.clipboard.writeText('{{ $order->tracking_number }}'); alert('Tracking number copied!');" class="text-xs text-[#526048] font-bold underline">
                                    Copy Resi
                                </button>
                            </div>
                        </div>

                        @if ($order->shipping_receipt_image)
                            <div class="pt-2 border-t border-[#e4e2dd]">
                                <a href="{{ asset('storage/' . $order->shipping_receipt_image) }}" target="_blank" class="inline-flex items-center gap-1.5 text-xs text-[#526048] font-bold underline">
                                    <span>Lihat foto paket ↗</span>
                                </a>
                            </div>
                        @endif
                    @else
                        <div class="text-xs text-[#75786f] italic">
                            Tracking receipt will appear here once your package is dispatched by our store staff.
                        </div>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <!-- Itemized Order Table -->
    <div class="bg-white rounded-3xl border border-[#e4e2dd] shadow-xs overflow-hidden">
        <div class="p-6 border-b border-[#f0eee9]">
            <h2 class="font-serif text-xl font-semibold text-[#1b1c19]">Rincian Produk Pesanan</h2>
        </div>

        <div class="p-6 divide-y divide-[#f0eee9]">
            @foreach ($order->items as $item)
                <div class="py-4 first:pt-0 last:pb-0 flex items-center justify-between gap-4 text-xs">
                    <div class="flex items-center gap-3.5 min-w-0">
                        <div class="w-14 h-14 rounded-2xl overflow-hidden shrink-0 bg-[#f5f3ee] border border-[#e4e2dd]">
                            @if ($item->product && $item->product->image_path)
                                <img src="{{ asset('storage/' . $item->product->image_path) }}" alt="{{ $item->product_name }}" class="w-full h-full object-cover">
                            @else
                                <img src="https://lh3.googleusercontent.com/aida-public/AB6AXuBKGnzCHxor7uJcCQ21xolADD2qWBSpPrYaoFXdO_JqDlgZXg-P97Ku4NLjnE3c0gqY0Gr23BIBPO1Q1cVDxWX45-O9SiNWwLPN31lKvegEyMIifLysmLgqdVm3joRfBI5eln49n3B_BDcgRzUt_VZ3N4NXEjruQ9WrMsEic2-xjhXtlfpr73ICKr2notvWIH6zp5J5loAI8JB8DBecn2n8Z5G7WPwkjNreTzXwBn_ENr6S9ZFxgOLSNg" alt="{{ $item->product_name }}" class="w-full h-full object-cover">
                            @endif
                        </div>
                        <div class="space-y-0.5 min-w-0">
                            <strong class="text-sm font-semibold text-[#1b1c19] block font-serif">{{ $item->product_name }}</strong>
                            <span class="text-[#75786f]">Berat: {{ $item->weight_grams }}g • Jumlah: {{ $item->quantity }} pcs</span>
                        </div>
                    </div>
                    <div class="text-right shrink-0">
                        <span class="text-[#75786f] block">{{ $item->quantity }} x Rp {{ number_format($item->price, 0, ',', '.') }}</span>
                        <strong class="font-serif text-sm font-bold text-[#1b1c19] block">Rp {{ number_format($item->subtotal, 0, ',', '.') }}</strong>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Totals Summary -->
        <div class="bg-[#fbf9f4] p-6 border-t border-[#e4e2dd] space-y-2 text-xs text-[#444840]">
            <div class="flex items-center justify-between">
                <span> Subtotal Products</span>
                <strong class="text-[#1b1c19] font-semibold">{{ $order->formatted_total_product_price }}</strong>
            </div>

            <div class="flex items-center justify-between">
                <span>Shipping Cost ({{ $order->fulfillment_type->label() }})</span>
                <strong class="text-[#1b1c19] font-semibold">{{ $order->formatted_shipping_cost }}</strong>
            </div>

            @if ($order->notes)
                <div class="pt-2 text-[11px] text-[#75786f]">
                    <strong>Order Note:</strong> {{ $order->notes }}
                </div>
            @endif

            <div class="pt-3 border-t border-[#e4e2dd] flex items-baseline justify-between text-base">
                <span class="font-serif font-bold text-[#1b1c19]">Grand Total</span>
                <span class="font-serif text-2xl font-bold text-[#526048]">{{ $order->formatted_grand_total }}</span>
            </div>
        </div>
    </div>
</div>
@endsection