@extends('layouts.app')

@section('title', 'My Orders')

@section('content')
<div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl md:text-3xl font-bold text-gray-800 mb-6">My Orders</h1>

    @if($pendingPaymentOrders->count() > 0)
    <div class="bg-gradient-to-r from-orange-500 to-orange-600 rounded-xl shadow-lg p-4 md:p-6 mb-6 text-white">
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div>
                <p class="text-white/80 text-sm">Total Pending Payments</p>
                <p class="text-2xl md:text-3xl font-bold">₦{{ number_format($pendingPaymentTotal, 0) }}</p>
            </div>
            <a href="{{ route('orders.payAll') }}" class="px-6 py-3 bg-white text-orange-600 rounded-lg font-semibold hover:bg-gray-100 text-center">
                Pay All Now
            </a>
        </div>
    </div>
    @endif

    @if($orders->isEmpty())
        <div class="text-center py-12 md:py-16 bg-white rounded-xl shadow-md">
            <i class="fas fa-box-open text-5xl md:text-6xl text-gray-300 mb-4"></i>
            <p class="text-gray-500 text-lg mb-4">No orders yet.</p>
            <a href="{{ route('products') }}" class="text-primary hover:underline">Browse Products</a>
        </div>
    @else
        <div class="space-y-4">
            @foreach($orders as $order)
                <div class="bg-white rounded-xl shadow-md p-4 md:p-6">
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3 mb-4">
                        <div>
                            <h3 class="font-semibold text-gray-800">{{ $order->order_number }}</h3>
                            <p class="text-sm text-gray-500">{{ $order->created_at->format('M d, Y') }}</p>
                        </div>
                        <span class="px-3 py-1 rounded text-sm self-start sm:self-center
                            @if($order->payment_status === 'paid') bg-green-100 text-green-600
                            @elseif($order->payment_status === 'partial') bg-yellow-100 text-yellow-600
                            @else bg-red-100 text-red-600 @endif">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </div>

                    <div class="border-t border-gray-100 pt-4">
                        <div class="space-y-3">
                            @foreach($order->items as $item)
                                <div class="flex items-center gap-3">
                                    @if($item->product->images->first())
                                        <img src="{{ asset('storage/' . $item->product->images->first()->image_path) }}" 
                                             class="w-14 h-14 rounded-lg object-cover">
                                    @else
                                        <div class="w-14 h-14 bg-gray-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-image text-gray-400"></i>
                                        </div>
                                    @endif
                                    <div class="flex-1 min-w-0">
                                        <p class="font-medium text-gray-800 truncate">{{ $item->product->name }}</p>
                                        <p class="text-sm text-gray-500">{{ $item->quantity }} x ₦{{ number_format($item->unit_price, 2) }}</p>
                                    </div>
                                    <p class="font-semibold text-gray-800">₦{{ number_format($item->total, 2) }}</p>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="border-t border-gray-100 mt-4 pt-4">
                        <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                            <div>
                                <p class="text-sm text-gray-500">Subtotal: ₦{{ number_format($order->subtotal, 2) }}</p>
                                <p class="text-sm text-gray-500">Shipping: ₦{{ number_format($order->shipping_cost, 2) }}</p>
                                <p class="text-lg md:text-xl font-bold text-primary">Total: ₦{{ number_format($order->total, 2) }}</p>
                                @if(in_array($order->payment_status, ['pending', 'partial']))
                                <p class="text-sm text-orange-600 mt-1 font-semibold">Balance: ₦{{ number_format($order->total - $order->paid_amount, 2) }}</p>
                                @endif
                            </div>
                            <a href="{{ route('orders.show', $order) }}" class="px-4 py-3 rounded-lg font-semibold text-center
                                @if(in_array($order->payment_status, ['pending', 'partial']))
                                    bg-orange-500 text-white hover:bg-orange-600
                                @else bg-primary text-white hover:bg-blue-700 @endif">
                                {{ in_array($order->payment_status, ['pending', 'partial']) ? 'Pay Now' : 'View Details' }}
                            </a>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    @endif
</div>
@endsection