@section('orders-page')

<div class="bg-white rounded-xl overflow-hidden shadow-sm mb-6">
    <div class="px-6 py-4 border-b border-border">
        <h2 class="font-semibold text-lg">My Orders</h2>
    </div>
    <div class="px-6 py-4">
        @if($orders->isEmpty())
            <p class="text-text-secondary text-center py-8">
                No orders found.
            </p>
        @else
            <div class="space-y-4">
                @foreach($orders as $order)
                <div class="flex items-start gap-4">
                    <div class="w-12 h-12 rounded-md bg-primary/10 flex items-center justify-center flex-shrink-0">
                        {{ substr($order->order_number, 0, 2) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="font-medium truncate">{{ $order->order_number }}</p>
                        <p class="text-text-secondary text-sm mt-1">
                            {{ $order->created_at->format('M d, Y') }} ·
                            {{ $order->items->count() }} item{{ $order->items->count() !== 1 ? 's' : '' }}
                        </p>
                        <p class="text-primary font-medium mt-2">
                            KSh {{ number_format((float) $order->total, 2) }}
                        </p>
                    </div>
                    <div class="w-20 text-right min-w-0">
                        <p class="text-primary font-medium">
                            {{ $order->payment_status ?: 'Pending' }}
                        </p>
                        <p class="text-xs text-text-secondary mt-1">
                            {{ $order->shippingAddress?->customer_name ?: 'No address' }}
                        </p>
                    </div>
                </div>
                @endforeach
            </div>
            <div class="pt-6 text-right">
                <a href="{{ route('account.orders') }}" class="text-sm font-medium text-primary hover:underline">
                    View all orders
                </a>
            </div>
        @endif
    </div>
</div>

<div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <div class="px-6 py-4 border-b border-border">
        <h2 class="font-semibold text-lg">Order Details</h2>
    </div>
    @if($orders->isEmpty())
        <p class="text-text-secondary text-center py-8">No orders found.</p>
    @else
        <div class="px-6 py-4 space-y-4">
            @foreach($orders as $order)
            <details class="cursor-pointer">
                <summary class="flex items-center justify-between py-3 px-6 text-lg font-medium">
                    <span>{{ $order->order_number }}</span>
                    <span class="text-text-secondary">{{ $order->created_at->format('M d, Y') }}</span>
                </summary>
                <div class="px-6 py-4 space-y-2">
                    <p class="text-text-secondary">Status: <span class="font-medium {{ $order->status === 'completed' ? 'text-green-600' : 'text-primary' }}">{{ ucfirst($order->status ?? 'pending') }}</span></p>
                    <p class="text-text-secondary">Payment: <span class="font-medium {{ $order->payment_status === 'paid' ? 'text-green-600' : 'text-primary' }}">{{ $order->payment_status ?: 'Unpaid' }}</span></p>
                    <p class="text-text-secondary">Items: {{ $order->items->count() }}</p>
                    @if($order->shippingAddress)
                        <p class="text-text-secondary">Delivery: {{ $order->shippingAddress->customer_name }}</p>
                    @endif
                </div>
            </details>
            @endforeach
        </div>
    @endif
</div>
@endsection