@extends('layouts.exat')
@php
    $onglet = request('onglet', 'utilisateurs');
    $groupes = \App\Models\Groupe::withCount('utilisateurs')->orderBy('libelle')->get();
    $roles = \Spatie\Permission\Models\Role::orderBy('name')->get();
    $rolesProteges = \App\Http\Controllers\RoleController::PROTEGES;
@endphp
@section('title', 'Utilisateurs/Groupes')
@section('subtitle', $onglet === 'groupes' ? $groupes->count().' groupe(s)' : ($onglet === 'roles' ? $roles->count().' rôle(s)' : $utilisateurs->total().' compte(s)'))

@section('actions')
    @if($onglet === 'groupes')
        <a href="{{ route('groupes.create') }}" class="inline-flex h-9 items-center gap-2 rounded-lg bg-emerald-600 px-3 text-sm font-medium text-white hover:bg-emerald-700">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
            Nouveau groupe
        </a>
    @elseif($onglet === 'roles')
        <a href="{{ route('roles.create') }}" class="inline-flex h-9 items-center gap-2 rounded-lg bg-emerald-600 px-3 text-sm font-medium text-white hover:bg-emerald-700">
            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
            Nouveau rôle
        </a>
    @else
        <div class="flex items-center gap-2">
            <a href="{{ route('permissions.index') }}" class="inline-flex h-9 items-center gap-2 rounded-lg border border-slate-200 px-3 text-sm text-slate-700 hover:bg-slate-50">Permissions par rôle</a>
            <a href="{{ route('utilisateurs.create') }}" class="inline-flex h-9 items-center gap-2 rounded-lg bg-emerald-600 px-3 text-sm font-medium text-white hover:bg-emerald-700">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"/></svg>
                Nouvel utilisateur
            </a>
        </div>
    @endif
@endsection

@section('content')
{{-- Onglets --}}
<div class="mb-4 flex items-center gap-1 border-b border-slate-200">
    <a href="{{ route('utilisateurs.index', ['onglet' => 'utilisateurs']) }}"
       class="-mb-px border-b-2 px-4 py-2 text-sm font-medium {{ !in_array($onglet, ['groupes','roles']) ? 'border-emerald-600 text-emerald-700' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
        Utilisateurs
    </a>
    <a href="{{ route('utilisateurs.index', ['onglet' => 'groupes']) }}"
       class="-mb-px border-b-2 px-4 py-2 text-sm font-medium {{ $onglet === 'groupes' ? 'border-emerald-600 text-emerald-700' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
        Groupes
    </a>
    <a href="{{ route('utilisateurs.index', ['onglet' => 'roles']) }}"
       class="-mb-px border-b-2 px-4 py-2 text-sm font-medium {{ $onglet === 'roles' ? 'border-emerald-600 text-emerald-700' : 'border-transparent text-slate-500 hover:text-slate-700' }}">
        Rôles
    </a>
</div>

@if($onglet === 'roles')
    {{-- Liste des rôles --}}
    <div class="overflow-hidden rounded-xl bg-white ring-1 ring-slate-200">
        <div class="overflow-x-auto"><table class="w-full min-w-[640px] text-sm">
            <thead><tr class="bg-slate-50 text-left text-xs text-slate-500">
                <th class="px-4 py-3 font-medium">Rôle</th>
                <th class="px-4 py-3 font-medium">Utilisateurs</th>
                <th class="px-4 py-3 font-medium">Type</th>
                <th class="px-4 py-3"></th>
            </tr></thead>
            <tbody>
                @forelse($roles as $r)
                    @php $estProtege = in_array($r->name, $rolesProteges); @endphp
                    <tr class="border-t border-slate-100 hover:bg-slate-50/60">
                        <td class="px-4 py-3 font-medium text-slate-800">{{ $r->name }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ \App\Models\User::role($r->name)->count() }}</td>
                        <td class="px-4 py-3">
                            @if($estProtege)<span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-500">Système</span>
                            @else<span class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Personnalisé</span>@endif
                        </td>
                        <td class="px-4 py-3 text-right">
                            <div class="flex items-center justify-end gap-3">
                                <a href="{{ route('roles.edit', $r) }}" class="text-xs font-medium text-emerald-600 hover:text-emerald-700">{{ $estProtege ? 'Accès' : 'Gérer' }}</a>
                                @unless($estProtege)
                                    <form method="POST" action="{{ route('roles.destroy', $r) }}" onsubmit="return confirm('Supprimer le rôle {{ $r->name }} ? Les utilisateurs concernés passeront au rôle USER.')">
                                        @csrf @method('DELETE')
                                        <button class="text-xs text-red-600 hover:text-red-700">Supprimer</button>
                                    </form>
                                @endunless
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="4" class="px-4 py-12 text-center text-sm text-slate-400">Aucun rôle.</td></tr>
                @endforelse
            </tbody>
        </table></div>
    </div>
    <p class="mt-3 text-[11px] text-slate-400">Les rôles système (SUPERADMIN, ADMIN, USER) ne peuvent pas être supprimés ni renommés. Les accès de SUPERADMIN et ADMIN sont complets et non modifiables.</p>
@elseif($onglet === 'groupes')
    {{-- Liste des groupes --}}
    <div class="overflow-hidden rounded-xl bg-white ring-1 ring-slate-200">
        <div class="overflow-x-auto"><table class="w-full min-w-[720px] text-sm">
            <thead><tr class="bg-slate-50 text-left text-xs text-slate-500">
                <th class="px-4 py-3 font-medium">Libellé</th>
                <th class="px-4 py-3 font-medium">Description</th>
                <th class="px-4 py-3 font-medium">Membres</th>
                <th class="px-4 py-3 font-medium">Statut</th>
                <th class="px-4 py-3"></th>
            </tr></thead>
            <tbody>
                @forelse($groupes as $g)
                    <tr class="border-t border-slate-100 hover:bg-slate-50/60">
                        <td class="px-4 py-3 font-medium text-slate-800">{{ $g->libelle }}</td>
                        <td class="px-4 py-3 text-slate-500">{{ $g->description ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $g->utilisateurs_count }}</td>
                        <td class="px-4 py-3">
                            @if($g->actif)<span class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Actif</span>
                            @else<span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-500">Inactif</span>@endif
                        </td>
                        <td class="px-4 py-3 text-right"><a href="{{ route('groupes.edit', $g) }}" class="text-xs font-medium text-emerald-600 hover:text-emerald-700">Gérer</a></td>
                    </tr>
                @empty
                    <tr><td colspan="5" class="px-4 py-12 text-center text-sm text-slate-400">Aucun groupe. Cliquez sur « Nouveau groupe ».</td></tr>
                @endforelse
            </tbody>
        </table></div>
    </div>
@else
    {{-- Liste des utilisateurs --}}
    <div class="overflow-hidden rounded-xl bg-white ring-1 ring-slate-200">
        <div class="overflow-x-auto"><table class="w-full min-w-[900px] text-sm">
            <thead><tr class="bg-slate-50 text-left text-xs text-slate-500">
                <th class="px-4 py-3 font-medium">Nom</th>
                <th class="px-4 py-3 font-medium">Login</th>
                <th class="px-4 py-3 font-medium">Email</th>
                <th class="px-4 py-3 font-medium">Téléphone</th>
                <th class="px-4 py-3 font-medium">Rôle</th>
                <th class="px-4 py-3 font-medium">Statut</th>
                <th class="px-4 py-3"></th>
            </tr></thead>
            <tbody>
                @forelse($utilisateurs as $u)
                    <tr class="border-t border-slate-100 hover:bg-slate-50/60">
                        <td class="px-4 py-3 text-slate-800">{{ trim(($u->name ?? '').' '.($u->prenom ?? '')) }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $u->login }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $u->email ?? '—' }}</td>
                        <td class="px-4 py-3 text-slate-600">{{ $u->telephone ?? '—' }}</td>
                        <td class="px-4 py-3">
                            @foreach($u->roles as $r)<span class="mr-1 inline-flex items-center rounded-full bg-slate-100 px-2 py-0.5 text-[11px] text-slate-600">{{ $r->name }}</span>@endforeach
                        </td>
                        <td class="px-4 py-3">
                            @if($u->actif)<span class="inline-flex items-center rounded-full bg-emerald-50 px-2.5 py-0.5 text-xs font-medium text-emerald-700">Actif</span>
                            @else<span class="inline-flex items-center rounded-full bg-slate-100 px-2.5 py-0.5 text-xs font-medium text-slate-500">Inactif</span>@endif
                        </td>
                        <td class="px-4 py-3 text-right">
                            <div class="flex items-center justify-end gap-3">
                                <a href="{{ route('utilisateurs.edit', $u) }}" class="text-xs font-medium text-emerald-600 hover:text-emerald-700">Modifier</a>
                                @if($u->id !== auth()->id())
                                    <form method="POST" action="{{ route('utilisateurs.toggle', $u) }}">@csrf @method('PATCH')
                                        <button class="text-xs text-slate-500 hover:text-slate-700">{{ $u->actif ? 'Désactiver' : 'Activer' }}</button>
                                    </form>
                                    <form method="POST" action="{{ route('utilisateurs.destroy', $u) }}" onsubmit="return confirm('Supprimer définitivement ce compte ? (impossible s\'il a un historique)')">@csrf @method('DELETE')
                                        <button class="text-xs text-red-600 hover:text-red-700">Supprimer</button>
                                    </form>
                                @endif
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="7" class="px-4 py-12 text-center text-sm text-slate-400">Aucun utilisateur.</td></tr>
                @endforelse
            </tbody>
        </table></div>
        @if($utilisateurs->hasPages())<div class="border-t border-slate-100 px-4 py-3">{{ $utilisateurs->links() }}</div>@endif
    </div>
@endif
@endsection