@extends('admin.layout')

@section('title', 'Catégories / Groupes')

@section('content')
<style>
    .page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
    .page-header h1 { font-size: 1.5rem; font-weight: 700; color: #1a1a1a; margin: 0; }
    .page-header .subtitle { font-size: 0.9rem; color: #6b7280; margin: 0.25rem 0 0 0; }
    .btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; text-decoration: none; border: none; cursor: pointer; }
    .btn-primary { background: #DC143C; color: #fff; }
    .btn-primary:hover { background: #d35400; }
    .btn-outline { background: #f3f4f6; border: 1px solid #e5e7eb; color: #374151; }
    .btn-outline:hover { background: #e5e7eb; }
    .btn-sm { padding: 0.35rem 0.65rem; font-size: 0.8rem; }
    .btn-danger { background: #dc2626; color: #fff; }
    .btn-danger:hover { background: #b91c1c; }
    .toolbar { display: flex; gap: 0.75rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
    .toolbar select { padding: 0.5rem 1rem; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 0.9rem; }
    .table-wrap { background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; overflow: hidden; }
    .table-wrap table { width: 100%; border-collapse: collapse; }
    .table-wrap th { text-align: left; padding: 0.85rem 1rem; font-size: 0.7rem; font-weight: 600; color: #6b7280; text-transform: uppercase; background: #f9fafb; border-bottom: 1px solid #eee; }
    .table-wrap td { padding: 0.85rem 1rem; border-bottom: 1px solid #f3f4f6; font-size: 0.9rem; }
    .table-wrap tr:last-child td { border-bottom: none; }
    .tag { display: inline-block; padding: 0.2rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; }
    .tag-active { background: #22c55e; color: #fff; }
    .tag-inactive { background: #9ca3af; color: #fff; }
    .actions-cell { display: flex; gap: 6px; align-items: center; }
    .empty-state { padding: 3rem; text-align: center; color: #6b7280; }
</style>

<div class="page-header">
    <div>
        <h1>Catégories / Groupes</h1>
        <p class="subtitle">Gérer les catégories affichées dans l’onglet Groupes de l’app.</p>
    </div>
    <a href="{{ route('admin.groups.create') }}" class="btn btn-primary"><i class="fa-solid fa-plus"></i> Nouvelle catégorie</a>
</div>

<form method="GET" action="{{ route('admin.groups.index') }}">
    <div class="toolbar">
        <select name="section">
            <option value="">Section : Toutes</option>
            @foreach($sections as $s)
                <option value="{{ $s }}" {{ request('section') === $s ? 'selected' : '' }}>{{ $s }}</option>
            @endforeach
        </select>
        <select name="active">
            <option value="">Statut : Tous</option>
            <option value="1" {{ request('active') === '1' ? 'selected' : '' }}>Actives</option>
            <option value="0" {{ request('active') === '0' ? 'selected' : '' }}>Désactivées</option>
        </select>
        <button type="submit" class="btn btn-outline">Filtrer</button>
    </div>
</form>

<div class="table-wrap">
    <table>
        <thead>
            <tr>
                <th>Nom</th>
                <th>Détail</th>
                <th>Section</th>
                <th>Membres</th>
                <th>Statut</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($groups as $g)
            <tr>
                <td><strong>{{ $g->name }}</strong><br><span style="font-size:0.8rem;color:#6b7280;">{{ $g->slug }}</span></td>
                <td>{{ Str::limit($g->detail, 50) ?: '—' }}</td>
                <td>{{ $g->section }}</td>
                <td>{{ $g->userGroups()->count() }}</td>
                <td>
                    @if($g->is_active)
                        <span class="tag tag-active">Active</span>
                    @else
                        <span class="tag tag-inactive">Désactivée</span>
                    @endif
                </td>
                <td>
                    <div class="actions-cell">
                        <a href="{{ route('admin.groups.edit', $g) }}" class="btn btn-outline btn-sm"><i class="fa-solid fa-pen"></i></a>
                        <form action="{{ route('admin.groups.toggle', $g) }}" method="POST" style="margin:0;display:inline;">
                            @csrf
                            <button type="submit" class="btn btn-outline btn-sm" title="{{ $g->is_active ? 'Désactiver' : 'Activer' }}">
                                <i class="fa-solid fa-{{ $g->is_active ? 'eye-slash' : 'eye' }}"></i>
                            </button>
                        </form>
                        <form action="{{ route('admin.groups.destroy', $g) }}" method="POST" style="margin:0;display:inline;" onsubmit="return confirm('Supprimer cette catégorie ?');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-danger btn-sm"><i class="fa-solid fa-trash"></i></button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="6"><div class="empty-state">Aucune catégorie. <a href="{{ route('admin.groups.create') }}">Créer une catégorie</a></div></td></tr>
            @endforelse
        </tbody>
    </table>
</div>
@endsection