@extends('layouts.app')

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

@section('content')
<div class="max-w-7xl mx-auto px-4 py-8">
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
        <!-- Sidebar -->
        <aside class="lg:col-span-1">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                <!-- User Info -->
                <div class="bg-gradient-to-br from-navy to-blue-900 p-6 text-white text-center">
                    <div class="w-16 h-16 bg-electric-blue rounded-full flex items-center justify-center mx-auto mb-3 text-2xl font-bold shadow-lg">
                        {{ strtoupper(substr(Auth::user()->name, 0, 1)) }}
                    </div>
                    <p class="font-semibold text-lg">{{ Auth::user()->name }}</p>
                    <p class="text-blue-200 text-sm">{{ Auth::user()->email }}</p>
                    <span class="inline-block mt-2 bg-electric-blue/20 text-electric-blue text-xs font-semibold px-3 py-1 rounded-full capitalize">
                        {{ Auth::user()->role }}
                    </span>
                </div>

                <!-- Nav -->
                <nav class="p-2">
                    <a href="{{ route('account.dashboard') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('account.dashboard') ? 'bg-electric-blue text-white' : 'text-gray-600 hover:bg-gray-50' }}">
                        <i class="fas fa-tachometer-alt w-4"></i> Dashboard
                    </a>
                    <a href="{{ route('account.orders') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('account.orders*') ? 'bg-electric-blue text-white' : 'text-gray-600 hover:bg-gray-50' }}">
                        <i class="fas fa-shopping-bag w-4"></i> My Orders
                    </a>
                    <a href="{{ route('account.profile') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors {{ request()->routeIs('account.profile') ? 'bg-electric-blue text-white' : 'text-gray-600 hover:bg-gray-50' }}">
                        <i class="fas fa-user w-4"></i> Profile Settings
                    </a>
                    @if(in_array(Auth::user()->role, ['vendor', 'admin']))
                    <a href="{{ route('vendor.dashboard') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-electric-blue hover:bg-blue-50 transition-colors">
                        <i class="fas fa-store w-4"></i> Vendor Panel
                    </a>
                    @endif
                    @if(Auth::user()->role === 'admin')
                    <a href="{{ route('admin.dashboard') }}" class="flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-electric-blue hover:bg-blue-50 transition-colors">
                        <i class="fas fa-cog w-4"></i> Admin Panel
                    </a>
                    @endif
                    <div class="border-t border-gray-100 mt-2 pt-2">
                        <form action="{{ route('logout') }}" method="POST">
                            @csrf
                            <button type="submit" class="flex items-center gap-3 w-full px-4 py-2.5 rounded-xl text-sm font-medium text-red-500 hover:bg-red-50 transition-colors">
                                <i class="fas fa-sign-out-alt w-4"></i> Logout
                            </button>
                        </form>
                    </div>
                </nav>
            </div>
        </aside>

        <!-- Main Content -->
        <div class="lg:col-span-3 space-y-6">
            <!-- Stats Cards -->
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 text-center">
                    <div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-shopping-bag text-blue-600"></i>
                    </div>
                    <p class="text-2xl font-bold text-navy">{{ $totalOrders }}</p>
                    <p class="text-xs text-gray-500 mt-1">Total Orders</p>
                </div>
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 text-center">
                    <div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-coins text-green-600"></i>
                    </div>
                    <p class="text-lg font-bold text-navy">KES {{ number_format($totalSpent) }}</p>
                    <p class="text-xs text-gray-500 mt-1">Total Spent</p>
                </div>
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 text-center">
                    <div class="w-10 h-10 bg-yellow-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-clock text-yellow-600"></i>
                    </div>
                    <p class="text-2xl font-bold text-navy">{{ $pendingOrders }}</p>
                    <p class="text-xs text-gray-500 mt-1">Pending</p>
                </div>
                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-5 text-center">
                    <div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                        <i class="fas fa-check-circle text-purple-600"></i>
                    </div>
                    <p class="text-2xl font-bold text-navy">{{ $deliveredOrders }}</p>
                    <p class="text-xs text-gray-500 mt-1">Delivered</p>
                </div>
            </div>

            <!-- Recent Orders -->
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
                <div class="flex items-center justify-between px-6 py-4 border-b border-gray-100">
                    <h2 class="font-bold text-navy">Recent Orders</h2>
                    <a href="{{ route('account.orders') }}" class="text-sm text-electric-blue hover:underline">View all</a>
                </div>
                @if($recentOrders->count())
                <div class="divide-y divide-gray-100">
                    @foreach($recentOrders as $order)
                    <div class="flex items-center justify-between px-6 py-4">
                        <div>
                            <p class="font-semibold text-navy text-sm">{{ $order->order_number }}</p>
                            <p class="text-xs text-gray-500">{{ $order->created_at->format('M d, Y') }}</p>
                        </div>
                        <div class="text-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' : '' }}
                            ">
                                {{ ucfirst($order->status) }}
                            </span>
                        </div>
                        <div class="text-right">
                            <p class="font-bold text-navy text-sm">KES {{ number_format($order->total) }}</p>
                            <a href="{{ route('account.order.detail', $order->id) }}" class="text-xs text-electric-blue hover:underline">View Details</a>
                        </div>
                    </div>
                    @endforeach
                </div>
                @else
                <div class="text-center py-12 text-gray-400">
                    <i class="fas fa-shopping-bag text-4xl mb-3 text-gray-200"></i>
                    <p>No orders yet.</p>
                    <a href="{{ route('products.index') }}" class="mt-3 inline-block text-electric-blue hover:underline text-sm">Start shopping</a>
                </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection