@extends('layouts.app')

@section('title', 'My Orders - ECA Networks')

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="flex items-center justify-between mb-6">
        <div>
            <h1 class="text-2xl font-bold text-navy">My Orders</h1>
            <p class="text-gray-500 text-sm">Track and manage your orders</p>
        </div>
        <a href="{{ route('products.index') }}" class="bg-electric-blue text-white px-5 py-2.5 rounded-xl text-sm font-semibold hover:bg-blue-dark transition-colors">
            <i class="fas fa-plus mr-1"></i> New Order
        </a>
    </div>

    @if($orders->count())
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
        <!-- Table Header (desktop) -->
        <div class="hidden md:grid grid-cols-12 gap-4 px-6 py-3 bg-gray-50 border-b border-gray-100 text-xs font-semibold text-gray-500 uppercase tracking-wider">
            <div class="col-span-3">Order</div>
            <div class="col-span-2">Date</div>
            <div class="col-span-2 text-center">Status</div>
            <div class="col-span-2 text-center">Payment</div>
            <div class="col-span-2 text-right">Total</div>
            <div class="col-span-1 text-center">Action</div>
        </div>

        <div class="divide-y divide-gray-100">
            @foreach($orders as $order)
            <div class="px-6 py-4">
                <div class="grid md:grid-cols-12 gap-4 items-center">
                    <div class="md:col-span-3">
                        <p class="font-semibold text-navy text-sm">{{ $order->order_number }}</p>
                        <p class="text-xs text-gray-500">{{ $order->orderItems->count() ?? '?' }} item(s)</p>
                    </div>
                    <div class="md:col-span-2 text-sm text-gray-600">
                        {{ $order->created_at->format('M d, Y') }}<br>
                        <span class="text-xs text-gray-400">{{ $order->created_at->format('h:i A') }}</span>
                    </div>
                    <div class="md:col-span-2 flex md:justify-center">
                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold
                            {{ $order->status === 'delivered' ? 'bg-green-100 text-green-700' : '' }}
                            {{ $order->status === 'pending' ? 'bg-yellow-100 text-yellow-700' : '' }}
                            {{ $order->status === 'processing' ? 'bg-blue-100 text-blue-700' : '' }}
                            {{ $order->status === 'shipped' ? 'bg-indigo-100 text-indigo-700' : '' }}
                            {{ $order->status === 'cancelled' ? 'bg-red-100 text-red-700' : '' }}
                        ">
                            <i class="fas fa-circle text-xs mr-1"></i> {{ ucfirst($order->status) }}
                        </span>
                    </div>
                    <div class="md:col-span-2 flex md:justify-center">
                        <span class="inline-block px-3 py-1 rounded-full text-xs font-semibold
                            {{ $order->payment_status === 'paid' ? 'bg-green-100 text-green-700' : '' }}
                            {{ $order->payment_status === 'pending' ? 'bg-yellow-100 text-yellow-700' : '' }}
                            {{ $order->payment_status === 'failed' ? 'bg-red-100 text-red-700' : '' }}
                        ">
                            {{ ucfirst($order->payment_status) }}
                        </span>
                    </div>
                    <div class="md:col-span-2 md:text-right">
                        <p class="font-bold text-navy">KES {{ number_format($order->total) }}</p>
                        <p class="text-xs text-gray-400 capitalize">{{ str_replace('_', ' ', $order->payment_method) }}</p>
                    </div>
                    <div class="md:col-span-1 flex md:justify-center">
                        <a href="{{ route('account.order.detail', $order->id) }}" class="bg-gray-100 hover:bg-electric-blue hover:text-white text-navy text-xs font-semibold px-3 py-1.5 rounded-lg transition-colors">
                            View
                        </a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Pagination -->
    <div class="mt-6 flex justify-center">
        {{ $orders->links() }}
    </div>
    @else
    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-16 text-center">
        <i class="fas fa-shopping-bag text-6xl text-gray-200 mb-4"></i>
        <h3 class="text-xl font-semibold text-gray-600 mb-2">No orders yet</h3>
        <p class="text-gray-400 mb-6">You haven't placed any orders yet.</p>
        <a href="{{ route('products.index') }}" class="bg-electric-blue text-white px-8 py-3 rounded-xl font-semibold hover:bg-blue-dark transition-colors">
            Start Shopping
        </a>
    </div>
    @endif
</div>
@endsection