@extends('layouts.shop')

@section('content')
<div class="bg-gray-50 min-h-screen py-8">
    <div class="container mx-auto px-4">
        <div class="grid md:grid-cols-4 gap-6">
            <!-- Sidebar -->
            <div class="md:col-span-1">
                <div class="bg-white rounded-lg shadow-sm p-6 sticky top-24">
                    <div class="flex items-center gap-4 mb-6 pb-6 border-b">
                        <div class="w-12 h-12 bg-primary/10 rounded-full flex items-center justify-center text-primary font-bold text-xl">
                            {{ substr(auth('customer')->user()->name, 0, 1) }}
                        </div>
                        <div class="overflow-hidden">
                            <h3 class="font-bold truncate">{{ auth('customer')->user()->name }}</h3>
                            <p class="text-xs text-muted-foreground truncate">{{ auth('customer')->user()->email }}</p>
                        </div>
                    </div>

                    <nav class="space-y-1">
                        <a href="{{ route('customer.dashboard') }}" 
                           class="flex items-center gap-3 px-3 py-2 rounded-md transition-colors {{ request()->routeIs('customer.dashboard') ? 'bg-primary/10 text-primary font-medium' : 'text-gray-600 hover:bg-gray-100' }}">
                            <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="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
                            Resumen
                        </a>
                        <a href="{{ route('customer.orders') }}" 
                           class="flex items-center gap-3 px-3 py-2 rounded-md transition-colors {{ request()->routeIs('customer.orders*') ? 'bg-primary/10 text-primary font-medium' : 'text-gray-600 hover:bg-gray-100' }}">
                            <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="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
                            Mis Pedidos
                        </a>
                        <!--
                        <a href="#" 
                           class="flex items-center gap-3 px-3 py-2 rounded-md transition-colors text-gray-400 cursor-not-allowed" title="Próximamente">
                            <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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                            Mi Cuenta
                        </a>
                        -->
                        
                        <form method="POST" action="{{ route('customer.logout') }}" class="pt-4 mt-4 border-t">
                            @csrf
                            <button type="submit" class="w-full flex items-center gap-3 px-3 py-2 rounded-md text-red-600 hover:bg-red-50 transition-colors">
                                <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="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
                                Cerrar Sesión
                            </button>
                        </form>
                    </nav>
                </div>
            </div>

            <!-- Main Content -->
            <div class="md:col-span-3">
                @yield('customer-content')
            </div>
        </div>
    </div>
</div>
@endsection