@extends('layouts.app')

@section('title', 'Groupes de ' . $personne->nom_complet)
@section('header', 'Groupes de ' . $personne->nom_complet)

@push('styles')
<style>
.tree-toggle { cursor: pointer; user-select: none; }
.tree-toggle::before { content: '\25B6'; display: inline-block; margin-right: 6px; font-size: 10px; transition: transform .15s; }
.tree-toggle.expanded::before { transform: rotate(90deg); }
.tree-children { padding-left: 22px; }
.tree-leaf { margin-left: 16px; }
.tree-leaf::before { content: '\25CF'; display: inline-block; margin-right: 6px; font-size: 8px; color: #6b7280; }
.group-badge { display: inline-block; padding: 2px 8px; border-radius: 9999px; font-size: 11px; font-weight: 600; margin-left: 6px; }
.group-ad { background: #dbeafe; color: #1e40af; }
.group-m365 { background: #fef3c7; color: #92400e; }
</style>
@endpush

@section('content')
<div class="mb-4">
    <a href="{{ route('admin.annuaire.personnes.show', $personne) }}" class="text-indigo-600 hover:text-indigo-800">&larr; Retour à la fiche</a>
</div>

@if($racines->isEmpty())
<p class="text-gray-500 italic">Aucun groupe trouvé pour cette personne.</p>
@else
<div class="bg-white rounded shadow p-4">
    <h3 class="text-sm font-semibold text-gray-700 mb-3">
        {{ $leafGroupes->count() }} groupe(s) direct(s) — {{ $racines->count() }} racine(s)
    </h3>
    <div class="tree" x-data="{}">
        @foreach($racines as $racine)
            @include('modules.annuaire.personnes._groupe_tree', ['node' => $racine, 'paths' => $paths, 'leafIds' => $leafGroupes->pluck('id')->toArray(), 'depth' => 0])
        @endforeach
    </div>
</div>
@endif
@endsection