@extends('store.layouts.app')

@section('title', 'Profile')
@section('meta_description', 'Your profile – ' . ($store_name ?? config('app.name')))

@section('content')
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
    <h1 class="text-3xl font-black text-gray-900 mb-8">My Account</h1>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {{-- Profile Form --}}
        <div class="lg:col-span-2 space-y-6">
            {{-- Account Details --}}
            <div class="card p-6">
                <h2 class="text-xl font-black text-gray-900 mb-6 flex items-center gap-2">
                    <i class="fas fa-user-circle text-blinkit-green"></i>
                    Account Details
                </h2>
                <form action="{{ route('profile.update') }}" method="POST" class="space-y-5">
                    @csrf
                    @method('PUT')
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Full Name</label>
                        <input type="text" name="name" value="{{ old('name', $user->name) }}" required class="input">
                        @error('name')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Email</label>
                        <input type="email" name="email" value="{{ old('email', $user->email) }}" required class="input">
                        @error('email')<p class="text-red-600 text-sm mt-1">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Phone</label>
                        <input type="text" name="phone" value="{{ old('phone', $user->phone) }}" class="input" placeholder="+1 234 567 8900">
                    </div>
                    <div>
                        <label class="block text-sm font-bold text-gray-700 mb-2">Address</label>
                        <textarea name="address" rows="3" class="input" placeholder="Your default address">{{ old('address', $user->address) }}</textarea>
                    </div>
                    <button type="submit" class="btn-primary">
                        <i class="fas fa-save mr-2"></i> Save Changes
                    </button>
                </form>
            </div>

            {{-- Quick Stats --}}
            <div class="grid grid-cols-2 sm:grid-cols-3 gap-4">
                <div class="card p-5 text-center bg-gradient-to-br from-blue-50 to-blue-100/50">
                    <i class="fas fa-box text-3xl text-blue-600 mb-2"></i>
                    <p class="font-black text-2xl text-gray-900">{{ $user->orders()->count() }}</p>
                    <p class="text-sm text-gray-600 font-semibold">Total Orders</p>
                </div>
                <div class="card p-5 text-center bg-gradient-to-br from-green-50 to-green-100/50">
                    <i class="fas fa-check-circle text-3xl text-green-600 mb-2"></i>
                    <p class="font-black text-2xl text-gray-900">{{ $user->orders()->where('status', 'delivered')->count() }}</p>
                    <p class="text-sm text-gray-600 font-semibold">Completed</p>
                </div>
                <div class="card p-5 text-center bg-gradient-to-br from-yellow-50 to-yellow-100/50">
                    <i class="fas fa-clock text-3xl text-yellow-600 mb-2"></i>
                    <p class="font-black text-2xl text-gray-900">{{ $user->orders()->whereIn('status', ['pending', 'paid', 'shipped'])->count() }}</p>
                    <p class="text-sm text-gray-600 font-semibold">Pending</p>
                </div>
            </div>
        </div>

        {{-- Quick Links Sidebar --}}
        <div class="lg:col-span-1 space-y-4">
            <div class="card p-6">
                <h3 class="font-black text-gray-900 mb-4">Quick Links</h3>
                <div class="space-y-2">
                    <a href="{{ route('orders.index') }}" class="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition group">
                        <div class="w-10 h-10 rounded-lg bg-blue-100 flex items-center justify-center text-blue-600 group-hover:bg-blue-200 transition">
                            <i class="fas fa-box"></i>
                        </div>
                        <span class="font-semibold text-gray-700 group-hover:text-blinkit-green transition">Order History</span>
                        <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
                    </a>
                    <a href="{{ route('cart.show') }}" class="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition group">
                        <div class="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-green-600 group-hover:bg-green-200 transition">
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                        <span class="font-semibold text-gray-700 group-hover:text-blinkit-green transition">Shopping Cart</span>
                        <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
                    </a>
                    <a href="{{ route('products.index') }}" class="flex items-center gap-3 p-3 rounded-xl hover:bg-gray-50 transition group">
                        <div class="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center text-purple-600 group-hover:bg-purple-200 transition">
                            <i class="fas fa-shopping-bag"></i>
                        </div>
                        <span class="font-semibold text-gray-700 group-hover:text-blinkit-green transition">Continue Shopping</span>
                        <i class="fas fa-chevron-right ml-auto text-gray-400"></i>
                    </a>
                </div>
            </div>

            <div class="card p-6 bg-gradient-to-br from-blinkit-green/10 to-blinkit-yellow/10 border-2 border-blinkit-green/20">
                <h3 class="font-black text-gray-900 mb-2">Need Help?</h3>
                <p class="text-sm text-gray-600 mb-4">Our support team is here to help you 24/7</p>
                <a href="#" class="btn-outline w-full text-center text-sm py-2.5">
                    <i class="fas fa-headset mr-2"></i> Contact Support
                </a>
            </div>
        </div>
    </div>
</div>
@endsection