@extends('layouts.admin')
@section('title', 'Commandes')

@section('content')

<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-lg font-bold text-gray-900">Commandes</h2>
        <p class="text-sm text-gray-500">{{ $orders->total() }} commande(s)</p>
    </div>
</div>

{{-- Filters --}}
<form method="GET" class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-5 flex flex-wrap gap-3">
    <input type="text" name="search" value="{{ request('search') }}" placeholder="N° commande, client, email…"
           class="border border-gray-200 rounded-lg px-3 py-2 text-sm flex-1 min-w-[180px] focus:ring-2 focus:ring-blue-500 outline-none">
    <select name="status" class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
        <option value="">Tous les statuts</option>
        <option value="pending" {{ request('status') === 'pending' ? 'selected' : '' }}>En attente</option>
        <option value="confirmed" {{ request('status') === 'confirmed' ? 'selected' : '' }}>Confirmée</option>
        <option value="shipped" {{ request('status') === 'shipped' ? 'selected' : '' }}>Expédiée</option>
        <option value="delivered" {{ request('status') === 'delivered' ? 'selected' : '' }}>Livrée</option>
        <option value="cancelled" {{ request('status') === 'cancelled' ? 'selected' : '' }}>Annulée</option>
    </select>
    <button type="submit" class="bg-blue-600 text-white text-sm font-semibold px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
        <i class="fas fa-search mr-1"></i> Filtrer
    </button>
</form>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead>
                <tr class="bg-gray-50 border-b border-gray-100 text-xs text-gray-500 uppercase tracking-wide">
                    <th class="text-left px-5 py-3 font-semibold">Commande</th>
                    <th class="text-left px-5 py-3 font-semibold hidden sm:table-cell">Client</th>
                    <th class="text-left px-5 py-3 font-semibold hidden md:table-cell">Ville</th>
                    <th class="text-left px-5 py-3 font-semibold">Total</th>
                    <th class="text-left px-5 py-3 font-semibold">Statut</th>
                    <th class="text-left px-5 py-3 font-semibold hidden lg:table-cell">Date</th>
                    <th class="text-right px-5 py-3 font-semibold">Action</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($orders as $order)
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-5 py-3">
                        <p class="font-bold text-blue-700">{{ $order->order_number }}</p>
                    </td>
                    <td class="px-5 py-3 hidden sm:table-cell">
                        <p class="font-medium text-gray-800">{{ $order->customer_name }}</p>
                        <p class="text-xs text-gray-400">{{ $order->phone }}</p>
                    </td>
                    <td class="px-5 py-3 hidden md:table-cell text-gray-600">{{ $order->city }}</td>
                    <td class="px-5 py-3">
                        <span class="font-bold text-gray-800">{{ number_format($order->total_amount, 2) }} FCFA</span>
                    </td>
                    <td class="px-5 py-3">
                        <span class="inline-block px-2 py-0.5 rounded-full text-xs font-semibold {{ $order->status_badge }}">
                            {{ $order->status_label }}
                        </span>
                    </td>
                    <td class="px-5 py-3 hidden lg:table-cell text-gray-400 text-xs">{{ $order->created_at->format('d/m/Y H:i') }}</td>
                    <td class="px-5 py-3 text-right">
                        <a href="{{ route('admin.orders.show', $order) }}" class="p-1.5 bg-blue-50 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors inline-flex items-center">
                            <i class="fas fa-eye text-xs"></i>
                        </a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-5 py-12 text-center text-gray-400">
                        <i class="fas fa-shopping-bag text-3xl mb-3"></i>
                        <p>Aucune commande.</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($orders->hasPages())
        <div class="px-5 py-4 border-t border-gray-100">{{ $orders->links() }}</div>
    @endif
</div>

@endsection