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

@section('content')

<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 mb-6">
    <div>
        <h2 class="text-lg font-bold text-gray-900">Gestion des produits</h2>
        <p class="text-sm text-gray-500">{{ $products->total() }} produit(s) au total</p>
    </div>
    <a href="{{ route('admin.produits.create') }}" class="inline-flex items-center gap-2 bg-blue-600 text-white text-sm font-semibold px-4 py-2.5 rounded-xl hover:bg-blue-700 transition-colors">
        <i class="fas fa-plus"></i> Nouveau produit
    </a>
</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="Rechercher un produit…"
           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="category" class="border border-gray-200 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
        <option value="">Toutes catégories</option>
        @foreach($categories as $cat)
            <option value="{{ $cat->id }}" {{ request('category') == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
        @endforeach
    </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>
    @if(request('search') || request('category'))
        <a href="{{ route('admin.produits.index') }}" class="text-red-500 hover:text-red-700 text-sm font-medium flex items-center gap-1 px-2">
            <i class="fas fa-times"></i> Réinitialiser
        </a>
    @endif
</form>

{{-- Table --}}
<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">Produit</th>
                    <th class="text-left px-5 py-3 font-semibold hidden sm:table-cell">Catégorie</th>
                    <th class="text-left px-5 py-3 font-semibold">Prix</th>
                    <th class="text-left px-5 py-3 font-semibold hidden md:table-cell">Stock</th>
                    <th class="text-left px-5 py-3 font-semibold hidden lg:table-cell">Statut</th>
                    <th class="text-right px-5 py-3 font-semibold">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-50">
                @forelse($products as $product)
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-5 py-3">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-gray-100 overflow-hidden flex-shrink-0">
                                @if($product->image)
                                    <img src="{{ $product->image_url }}" alt="{{ $product->name }}" class="w-full h-full object-cover">
                                @else
                                    <div class="w-full h-full flex items-center justify-center text-gray-300">
                                        <i class="fas fa-image"></i>
                                    </div>
                                @endif
                            </div>
                            <div>
                                <p class="font-medium text-gray-800 line-clamp-1">{{ $product->name }}</p>
                                @if($product->sku)
                                    <p class="text-xs text-gray-400">{{ $product->sku }}</p>
                                @endif
                            </div>
                        </div>
                    </td>
                    <td class="px-5 py-3 hidden sm:table-cell">
                        <span class="bg-blue-100 text-blue-700 text-xs font-medium px-2 py-0.5 rounded-full">{{ $product->category->name ?? '—' }}</span>
                    </td>
                    <td class="px-5 py-3">
                        <p class="font-bold text-gray-800">{{ number_format($product->price, 2) }} FCFA</p>
                        @if($product->old_price)
                            <p class="text-xs text-gray-400 line-through">{{ number_format($product->old_price, 2) }}</p>
                        @endif
                    </td>
                    <td class="px-5 py-3 hidden md:table-cell">
                        <span class="font-medium {{ $product->stock > 0 ? 'text-green-600' : 'text-red-500' }}">
                            {{ $product->stock }}
                        </span>
                    </td>
                    <td class="px-5 py-3 hidden lg:table-cell">
                        <span class="inline-flex items-center gap-1 text-xs font-semibold px-2 py-0.5 rounded-full
                            {{ $product->is_active ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-500' }}">
                            <span class="w-1.5 h-1.5 rounded-full {{ $product->is_active ? 'bg-green-500' : 'bg-gray-400' }}"></span>
                            {{ $product->is_active ? 'Actif' : 'Inactif' }}
                        </span>
                        @if($product->is_featured)
                            <span class="ml-1 text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded-full font-semibold">⭐</span>
                        @endif
                    </td>
                    <td class="px-5 py-3 text-right">
                        <div class="flex items-center justify-end gap-1">
                            <a href="{{ route('admin.produits.edit', $product) }}" class="p-1.5 bg-blue-50 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors" title="Modifier">
                                <i class="fas fa-pen text-xs"></i>
                            </a>
                            <form action="{{ route('admin.produits.destroy', $product) }}" method="POST"
                                  onsubmit="return confirm('Supprimer ce produit ?')">
                                @csrf @method('DELETE')
                                <button type="submit" class="p-1.5 bg-red-50 text-red-500 hover:bg-red-100 rounded-lg transition-colors" title="Supprimer">
                                    <i class="fas fa-trash text-xs"></i>
                                </button>
                            </form>
                        </div>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-5 py-12 text-center text-gray-400">
                        <i class="fas fa-box text-3xl mb-3"></i>
                        <p>Aucun produit trouvé.</p>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
    @if($products->hasPages())
        <div class="px-5 py-4 border-t border-gray-100">
            {{ $products->links() }}
        </div>
    @endif
</div>

@endsection