@extends('layouts.app')

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

@section('content')
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="flex flex-col lg:flex-row gap-6">
        {{-- Sidebar --}}
        <aside class="w-full lg:w-64 flex-shrink-0">
            <div class="card card-body">
                <div class="text-center mb-6 pb-6 border-b border-gray-200">
                    @if(auth()->user()->avatar)
                        <img src="{{ auth()->user()->avatar_url }}" alt="{{ auth()->user()->name }}" class="w-16 h-16 mx-auto rounded-full mb-3 object-cover">
                    @else
                        <div class="w-16 h-16 mx-auto mb-3 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-700 text-xl font-semibold">
                            {{ substr(auth()->user()->name, 0, 1) }}
                        </div>
                    @endif
                    <h3 class="text-sm font-medium text-gray-900">{{ auth()->user()->name }}</h3>
                    <p class="text-xs text-gray-500">{{ auth()->user()->email }}</p>
                </div>

                <nav class="space-y-1">
                    <a href="{{ route('customer.dashboard') }}" class="block px-3 py-2 rounded-lg text-sm {{ request()->routeIs('customer.dashboard') ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">Dashboard</a>
                    <a href="{{ route('customer.orders') }}" class="block px-3 py-2 rounded-lg text-sm {{ request()->routeIs('customer.orders.*') ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">My Orders</a>
                    <a href="{{ route('customer.wishlist') }}" class="block px-3 py-2 rounded-lg text-sm {{ request()->routeIs('customer.wishlist') ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">Wishlist</a>
                    <a href="{{ route('customer.addresses.index') }}" class="block px-3 py-2 rounded-lg text-sm {{ request()->routeIs('customer.addresses.*') ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">Addresses</a>
                    <a href="{{ route('customer.reviews') }}" class="block px-3 py-2 rounded-lg text-sm {{ request()->routeIs('customer.reviews') ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">My Reviews</a>
                    <a href="{{ route('customer.refunds') }}" class="block px-3 py-2 rounded-lg text-sm {{ request()->routeIs('customer.refunds') ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">My Refunds</a>
                    <a href="{{ route('customer.chats.index') }}" class="block px-3 py-2 rounded-lg text-sm {{ request()->routeIs('customer.chats.*') ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">
                        <span class="flex items-center justify-between">
                            Messages
                            @php
                                $chatUnread = \App\Models\Message::whereIn('chat_id', \App\Models\Chat::where('customer_id', Auth::id())->pluck('id'))->where('is_read', false)->where('sender_id', '!=', Auth::id())->count();
                            @endphp
                            @if($chatUnread > 0)
                                <span class="bg-red-500 text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">{{ $chatUnread }}</span>
                            @endif
                        </span>
                    </a>
                    <a href="{{ route('customer.live-sessions.index') }}" class="block px-3 py-2 rounded-lg text-sm {{ request()->routeIs('customer.live-sessions.*') ? 'bg-indigo-50 text-indigo-700 font-medium' : 'text-gray-600 hover:bg-gray-50' }}">
                        <span class="flex items-center gap-2">
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M4.5 4.5a3 3 0 00-3 3v9a3 3 0 003 3h8.25a3 3 0 003-3v-9a3 3 0 00-3-3H4.5zM19.94 18.75l-2.69-2.69V7.94l2.69-2.69c.944-.945 2.56-.276 2.56 1.06v11.38c0 1.336-1.616 2.005-2.56 1.06z"/></svg>
                            Live Sessions
                        </span>
                    </a>
                </nav>
            </div>
        </aside>

        {{-- Main Content --}}
        <div class="flex-1">
            @if(isImpersonating())
            <div class="bg-amber-500 text-white px-4 py-2 rounded-lg mb-4 flex items-center justify-between">
                <div class="flex items-center gap-3">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg>
                    <span class="text-sm font-medium">You are impersonating a user</span>
                </div>
                <form action="{{ route('admin.stop-impersonate') }}" method="POST">
                    @csrf
                    <button type="submit" class="px-3 py-1 bg-white text-amber-600 rounded-lg text-sm font-medium hover:bg-amber-50 transition">Return to Admin</button>
                </form>
            </div>
            @endif
            @if(session('success'))
                <div class="alert alert-success mb-6 flex items-center gap-3">
                    <svg class="w-5 h-5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    <span>{{ session('success') }}</span>
                </div>
            @endif
            @yield('customer-content')
        </div>
    </div>
</div>
@endsection