@extends('layouts.customer')

@section('title', 'Mis Pedidos')

@section('customer-content')
<div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b">
        <h3 class="font-bold text-lg">Historial de Pedidos</h3>
    </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">Artículos</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($orders 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 h:i A') }}</td>
                    <td class="px-6 py-4">{{ $order->items_count ?? $order->items->count() }} items</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 Detalles</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-12 text-center text-gray-500">
                        <div class="flex flex-col items-center gap-2">
                             <svg class="w-12 h-12 text-gray-300" 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>
                            <p>No tienes pedidos registrados.</p>
                            <a href="{{ route('shop.index') }}" class="text-primary font-medium hover:underline mt-2">Explorar Productos</a>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    
    @if($orders->hasPages())
    <div class="px-6 py-4 border-t">
        {{ $orders->links() }}
    </div>
    @endif
</div>
@endsection