@extends('layouts.app')
@section('title', 'Pesanan Berhasil')
@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">

    <div class="text-center mb-8">
        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
            <svg class="w-8 h-8 text-green-500" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/></svg>
        </div>
        <h1 class="text-2xl font-bold text-gray-900">Pesanan Berhasil Dibuat!</h1>
        <p class="text-gray-400 text-sm mt-1">{{ $orders->count() > 1 ? $orders->count() . ' pesanan dibuat (per toko)' : 'Segera lakukan pembayaran sebelum batas waktu.' }}</p>
    </div>

    <div class="space-y-5">
        @foreach($orders as $order)
        @php $storeName = $order->items->first()?->store?->name ?? 'Toko'; @endphp

        <div class="bg-white rounded-2xl border border-gray-100 overflow-hidden">
            {{-- Order Header --}}
            <div class="flex items-center justify-between px-6 py-4 bg-gray-50/50 border-b border-gray-100">
                <div>
                    <p class="text-xs text-gray-400 mb-0.5">{{ $storeName }}</p>
                    <p class="text-sm font-semibold text-gray-800">{{ $order->order_number }}</p>
                </div>
                <span class="text-xs px-2.5 py-1 bg-amber-100 text-amber-700 font-semibold rounded-full">Menunggu Pembayaran</span>
            </div>

            {{-- Items --}}
            <div class="px-6 py-4 space-y-3">
                @foreach($order->items as $item)
                <div class="flex gap-3 items-center">
                    <div class="w-10 h-10 rounded-lg bg-gray-100 overflow-hidden shrink-0">
                        @if($item->product_thumbnail)
                            <img src="{{ Storage::url($item->product_thumbnail) }}" class="w-full h-full object-cover">
                        @endif
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-gray-800 truncate">{{ $item->product_name }}</p>
                        <p class="text-xs text-gray-400">×{{ $item->quantity }}</p>
                    </div>
                    <p class="text-sm font-semibold text-gray-700 shrink-0">Rp {{ number_format($item->total, 0, ',', '.') }}</p>
                </div>
                @endforeach
            </div>

            {{-- Order Totals --}}
            <div class="px-6 py-3 border-t border-gray-50 space-y-1.5 text-sm">
                <div class="flex justify-between text-gray-500">
                    <span>Subtotal</span>
                    <span>Rp {{ number_format($order->subtotal, 0, ',', '.') }}</span>
                </div>
                @if($order->shipping_cost > 0)
                <div class="flex justify-between text-gray-500">
                    <span>Ongkos Kirim
                        @if($order->shipment)
                            <span class="text-xs text-gray-400">({{ $order->shipment->courier }} {{ $order->shipment->service }})</span>
                        @endif
                    </span>
                    <span>Rp {{ number_format($order->shipping_cost, 0, ',', '.') }}</span>
                </div>
                @elseif($order->shipment?->courier === 'pickup')
                <div class="flex justify-between text-gray-500">
                    <span>Pengiriman</span>
                    <span class="text-green-600 font-medium">Ambil di Toko</span>
                </div>
                @endif
                <div class="flex justify-between font-bold text-gray-800 pt-1 border-t border-gray-100">
                    <span>Total Pesanan</span>
                    <span class="text-teal-600">Rp {{ number_format($order->total, 0, ',', '.') }}</span>
                </div>
            </div>

            <div class="px-6 py-4 border-t border-gray-100">
                <a href="{{ route('buyer.orders.show', $order) }}" class="block w-full py-2.5 border border-gray-200 text-gray-600 text-sm font-medium rounded-xl hover:bg-gray-50 transition text-center">
                    Lihat Detail
                </a>
            </div>
        </div>
        @endforeach
    </div>

    @php $payment = $orders->first()?->payment; @endphp
    @if($payment && $payment->status === 'pending')
    <div class="mt-5 bg-amber-50 rounded-2xl border border-amber-100 p-5">
        <p class="text-sm font-semibold text-amber-700 mb-1">
            Total Pembayaran: <span class="text-lg">Rp {{ number_format($payment->amount, 0, ',', '.') }}</span>
        </p>
        <p class="text-xs text-amber-600 mb-4">Batas waktu: {{ $payment->expires_at?->format('d M Y, H:i') }}</p>
        <a href="{{ route('payment.show', $payment) }}"
           class="block w-full py-3 bg-teal-600 text-white text-sm font-bold rounded-xl hover:bg-teal-700 transition text-center">
            Bayar Sekarang →
        </a>
    </div>
    @endif

    <div class="mt-5 text-center">
        <a href="{{ route('products.index') }}" class="text-sm text-teal-600 hover:text-teal-700 font-medium">← Lanjut Belanja</a>
    </div>
</div>
@endsection