@extends('layouts.customer')

@section('title', 'Mi Cuenta')

@section('customer-content')
<div class="space-y-6">
    <!-- Stats del Usuario -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
            <h4 class="text-sm font-medium text-muted-foreground uppercase  mb-2">Pedidos Totales</h4>
            <p class="text-3xl font-bold">{{ $recentOrders->count() }}</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
             <h4 class="text-sm font-medium text-muted-foreground uppercase  mb-2">Estado Reciente</h4>
             @if($recentOrders->first())
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                    {{ $recentOrders->first()->status == 'approved' ? 'bg-green-100 text-green-800' : 
                       ($recentOrders->first()->status == 'rejected' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">
                    {{ ucfirst($recentOrders->first()->status) }}
                </span>
             @else
                <p class="text-sm text-gray-500">-</p>
             @endif
        </div>
        <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
             <h4 class="text-sm font-medium text-muted-foreground uppercase  mb-2">Dirección Principal</h4>
             <p class="text-sm text-gray-600">No definida</p>
        </div>
    </div>

    <!-- Pedidos Recientes -->
    <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
        <div class="px-6 py-4 border-b flex justify-between items-center">
            <h3 class="font-bold text-lg">Pedidos Recientes</h3>
            <a href="{{ route('customer.orders') }}" class="text-sm text-primary hover:underline">Ver todos</a>
        </div>
        <div class="overflow-x-auto">
            <table class="w-full text-sm text-left">
                <thead class="bg-gray-50 text-gray-600 uppercase text-xs">
                    <tr>
                        <th class="px-6 py-3">Pedido</th>
                        <th class="px-6 py-3">Fecha</th>
                        <th class="px-6 py-3">Total</th>
                        <th class="px-6 py-3">Estado</th>
                        <th class="px-6 py-3"></th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse($recentOrders as $order)
                    <tr class="hover:bg-gray-50/50">
                        <td class="px-6 py-4 font-mono font-medium">#{{ substr($order->uuid, 0, 8) }}</td>
                        <td class="px-6 py-4">{{ $order->created_at->format('d/m/Y') }}</td>
                        <td class="px-6 py-4 font-bold">${{ number_format($order->total, 2) }}</td>
                        <td class="px-6 py-4">
                            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium 
                                {{ $order->status == 'approved' ? 'bg-green-100 text-green-800' : 
                                   ($order->status == 'rejected' ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800') }}">
                                {{ ucfirst($order->status == 'pending' ? 'Pendiente' : $order->status) }}
                            </span>
                        </td>
                        <td class="px-6 py-4 text-right">
                            <a href="{{ route('customer.orders.show', $order) }}" class="text-primary hover:text-primary/80 font-medium">Ver</a>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="5" class="px-6 py-8 text-center text-gray-500">
                            No has realizado ningún pedido aún. 
                            <a href="{{ route('shop.index') }}" class="text-primary underline">Ir a comprar</a>.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection