@extends('layouts.app')

@section('title', 'My Account · IZONE Africa × Magic City')

@section('content')

<div class="max-w-7xl mx-auto p-4">

    <!-- Account Header -->
    <header class="mb-8">
        <div class="flex flex-col sm:flex-row items-center gap-4 mb-6">
            <div class="w-12 h-12 rounded-full bg-gradient-to-br from-primary-600 to-primary-500 flex items-center justify-center">
                <span class="text-white font-bold text-lg initials-avatar">
                    {{ strtoupper(substr($user->name, 0, 1)) . strtoupper(substr($user->email, 0, 1)) }}
                </span>
            </div>
            <div>
                <h1 class="text-2xl font-semibold">{{ $user->name }}</h1>
                <p class="text-text-secondary">{{ $user->email }}</p>
            </div>
        </div>

        <nav class="account-nav justify-center grid grid-cols-2 gap-2">
            <a href="{{ route('account') }}" class="nav-item {{ request()->is('account') ? 'active' : '' }}">
                <span>Dashboard</span>
            </a>
            <a href="{{ route('account.orders') }}" class="nav-item {{ request()->is('account/orders') ? 'active' : '' }}">
                <span>My Orders</span>
            </a>
            <a href="{{ route('account.wishlist') }}" class="nav-item {{ request()->is('account/wishlist') ? 'active' : '' }}">
                <span>Wishlist</span>
            </a>
            <a href="{{ route('account.addresses') }}" class="nav-item {{ request()->is('account/addresses') ? 'active' : '' }}">
                <span>Addresses</span>
            </a>
        </nav>
    </header>

    <!-- Dashboard Section -->
    <section class="grid grid-cols-1 gap-6 md:grid-cols-3">

        <!-- Orders Card -->
        <div class="group rounded-xl border border-border bg-card hover:shadow-sm transition-shadow p-6">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-10 h-10 rounded-md bg-primary/10 flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor">
                        <path d="M3 3h2l.4 2M7 13h10l4-8H5.2L15 6l-6 8H7z"/>
                    </svg>
                </div>
                <div>
                    <p class="font-medium">{{ $user->orders->count() }}</p>
                    <p class="text-text-secondary">Orders</p>
                </div>
            </div>
            <a href="{{ route('account.orders') }}" class="text-sm font-medium text-primary hover:underline">
                View all orders
            </a>
        </div>

        <!-- Wishlist Card -->
        <div class="group rounded-xl border border-border bg-card hover:shadow-sm transition-shadow p-6">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-10 h-10 rounded-md bg-primary/10 flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor">
                        <path d="M3 3h2l.4 2M7 13h10l4-8H5.2L15 6l-6 8H7z"/>
                    </svg>
                </div>
                <div>
                    <p class="font-medium">{{ $wishlistItems->count() }}</p>
                    <p class="text-text-secondary">Wishlist items</p>
                </div>
            </div>
            <a href="{{ route('account.wishlist') }}" class="text-sm font-medium text-primary hover:underline">
                View wishlist
            </a>
        </div>

        <!-- Addresses Card -->
        <div class="group rounded-xl border border-border bg-card hover:shadow-sm transition-shadow p-6">
            <div class="flex items-center gap-3 mb-3">
                <div class="w-10 h-10 rounded-md bg-primary/10 flex items-center justify-center">
                    <svg class="w-5 h-5 text-primary" fill="none" stroke="currentColor">
                        <path d="M3 3h2l.4 2M7 13h10l4-8H5.2L15 6l-6 8H7z"/>
                    </svg>
                </div>
                <div>
                    <p class="font-medium">{{ $addresses->count() }}</p>
                    <p class="text-text-secondary">Saved addresses</p>
                </div>
            </div>
            <a href="{{ route('account.addresses') }}" class="text-sm font-medium text-primary hover:underline">
                Manage addresses
            </a>
        </div>

    </section>

    {{-- Orders Page --}}
    @yield('orders-page')

    {{-- Wishlist Page --}}
    @yield('wishlist-page')

    {{-- Addresses Page --}}
    @yield('addresses-page')

</div>

@endsection