@extends('admin.layouts.app')

@section('title', 'Gestion des Produits')
@section('header', 'Produits Globaux')

@section('content')
    <div class="flex justify-between items-center mb-6">
        <div>
            <h2 class="text-lg font-medium text-slate-700 dark:text-slate-200">Catalogue Produits</h2>
            <p class="text-sm text-slate-500 dark:text-slate-400">Gérez les produits d'assurance et leur déploiement.</p>
        </div>
        <a href="{{ route('admin.products.create') }}" class="bg-brand-600 hover:bg-brand-700 text-white font-medium py-2 px-4 rounded-lg shadow-sm transition-all flex items-center">
            <i class="fas fa-plus mr-2"></i> Nouveau Produit
        </a>
    </div>

    <div class="bg-white dark:bg-slate-800 rounded-xl shadow-sm border border-slate-100 dark:border-white/10 overflow-hidden transition-colors">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-slate-50 border-b border-slate-100 dark:bg-white/5 dark:border-white/10">
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-left">Nom du Produit</th>
                         <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-left">Slug</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-center">Déployé sur</th>
                         <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-center">Statut</th>
                        <th class="py-4 px-6 text-xs font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 dark:divide-white/5">
                    @foreach($products as $product)
                        <tr class="hover:bg-slate-50 dark:hover:bg-white/5 transition-colors">
                            <td class="py-4 px-6">
                                <div class="flex items-center">
                                    <div class="h-8 w-8 rounded-full bg-slate-100 dark:bg-white/10 text-slate-600 dark:text-slate-300 flex items-center justify-center mr-3">
                                        @if($product->icon)
                                            <i class="{{ $product->icon }}"></i>
                                        @else
                                            <i class="fas fa-box"></i>
                                        @endif
                                    </div>
                                    <div>
                                        <span class="font-medium text-slate-900 dark:text-white block">{{ $product->name }}</span>
                                        <span class="text-xs text-slate-500 dark:text-slate-400">{{ Str::limit($product->description, 30) }}</span>
                                    </div>
                                </div>
                            </td>
                            <td class="py-4 px-6 text-sm text-slate-600 dark:text-slate-300">
                                <code class="bg-slate-100 dark:bg-white/10 px-2 py-1 rounded text-slate-700 dark:text-slate-300 text-xs">{{ $product->slug }}</code>
                            </td>
                            <td class="py-4 px-6 text-center">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-500/20 text-blue-800 dark:text-blue-300 border border-blue-200 dark:border-blue-500/30">
                                    {{ $product->tenants_count }} Agences
                                </span>
                            </td>
                            <td class="py-4 px-6 text-center">
                                @if($product->is_active)
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-emerald-100 dark:bg-emerald-500/20 text-emerald-800 dark:text-emerald-300 border border-emerald-200 dark:border-emerald-500/30">
                                        Actif
                                    </span>
                                @else
                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 dark:bg-red-500/20 text-red-800 dark:text-red-300 border border-red-200 dark:border-red-500/30">
                                        Inactif
                                    </span>
                                @endif
                            </td>
                            <td class="py-4 px-6 text-right space-x-2">
                                <a href="{{ route('admin.products.edit', $product->id) }}" class="p-2 text-slate-400 hover:text-brand-600 dark:text-slate-500 dark:hover:text-brand-400 rounded hover:bg-brand-50 dark:hover:bg-brand-500/10 transition-colors" title="Modifier & Assigner">
                                    <i class="fas fa-edit"></i>
                                </a>
                                <form action="{{ route('admin.products.destroy', $product->id) }}" method="POST" class="inline-block" onsubmit="return confirm('Supprimer ce produit ?');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="p-2 text-slate-400 hover:text-rose-600 dark:text-slate-500 dark:hover:text-rose-400 rounded hover:bg-rose-50 dark:hover:bg-rose-500/10 transition-colors" title="Supprimer">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        @if($products->isEmpty())
             <div class="text-center py-12">
                <div class="rounded-full bg-slate-50 dark:bg-white/5 h-16 w-16 flex items-center justify-center mx-auto mb-4 text-slate-300 dark:text-slate-600">
                    <i class="fas fa-box-open text-3xl"></i>
                </div>
                <h3 class="text-slate-800 dark:text-white font-medium mb-1">Aucun produit</h3>
                <p class="text-slate-500 dark:text-slate-400 text-sm">Commencez par créer votre premier produit global.</p>
            </div>
        @endif
        <div class="px-6 py-4 border-t border-slate-100 dark:border-white/10 bg-slate-50 dark:bg-white/5">
            {{ $products->links() }}
        </div>
    </div>
@endsection