@extends('layouts.exat')
@section('title', 'Groupe : '.$groupe->libelle)
@section('subtitle', 'Paramètres et membres')

@section('content')
<div class="mx-auto max-w-2xl space-y-5">
    <div class="mb-1"><a href="{{ route('utilisateurs.index', ['onglet' => 'groupes']) }}" class="inline-flex rounded-lg p-2 text-slate-500 hover:bg-slate-100" aria-label="Retour"><svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/></svg></a></div>

    {{-- Paramètres --}}
    <form method="POST" action="{{ route('groupes.update', $groupe) }}">
        @csrf @method('PUT')
        <section class="rounded-xl bg-white p-5 ring-1 ring-slate-200 space-y-3">
            <div><label class="mb-1 block text-[11px] text-slate-400">Libellé</label><input name="libelle" value="{{ old('libelle', $groupe->libelle) }}" required class="w-full rounded-lg border-slate-200 text-sm"></div>
            <div><label class="mb-1 block text-[11px] text-slate-400">Description</label><input name="description" value="{{ old('description', $groupe->description) }}" class="w-full rounded-lg border-slate-200 text-sm"></div>
            <div><label class="inline-flex items-center gap-2 text-sm text-slate-700"><input type="checkbox" name="actif" value="1" @checked($groupe->actif) class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500"> Groupe actif</label></div>
            <div class="mt-4 border-t border-slate-100 pt-4">
                <h3 class="mb-1 text-sm font-medium text-slate-900">Accès par module (groupe)</h3>
                <p class="mb-3 text-[11px] text-slate-400">« Hérité » = pas de contrainte de groupe. Sinon, l'accès effectif d'un membre est le <b>plus restrictif</b> entre son niveau et celui du groupe.</p>
                <div class="divide-y divide-slate-100">
                    @foreach($modules as $m)
                        @php $val = $accesGroupe[$m->id] ?? 3; @endphp
                        <div class="flex items-center gap-3 py-2">
                            <div class="flex-1 text-sm text-slate-700">{{ $m->libelle }}</div>
                            <select name="acces[{{ $m->id }}]" class="rounded-lg border-slate-200 text-sm">
                                <option value="3" @selected($val == 3)>Hérité</option>
                                <option value="0" @selected($val == 0)>Aucun</option>
                                <option value="1" @selected($val == 1)>Lecture</option>
                                <option value="2" @selected($val == 2)>Écriture</option>
                            </select>
                        </div>
                    @endforeach
                </div>
            </div>

            <div class="mt-4 flex justify-end"><button class="inline-flex h-9 items-center rounded-lg bg-emerald-600 px-4 text-sm font-medium text-white hover:bg-emerald-700">Enregistrer</button></div>
        </section>
    </form>

    <div class="-mt-2">
        <form method="POST" action="{{ route('groupes.destroy', $groupe) }}" onsubmit="return confirm('Supprimer ce groupe ? Les membres seront détachés.')">
            @csrf @method('DELETE')
            <button class="text-sm text-red-600 hover:text-red-700">Supprimer le groupe</button>
        </form>
    </div>

    {{-- Membres --}}
    <section class="rounded-xl bg-white p-5 ring-1 ring-slate-200">
        <h2 class="mb-3 text-sm font-medium text-slate-900">Membres ({{ $membres->count() }})</h2>
        <div class="mb-4 flex flex-wrap gap-2">
            @forelse($membres as $m)
                <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 py-1 pl-3 pr-1 text-xs text-slate-700">
                    {{ trim($m->name.' '.($m->prenom ?? '')) }}
                    <form method="POST" action="{{ route('groupes.membres.retirer', [$groupe, $m]) }}">
                        @csrf @method('DELETE')
                        <button class="flex h-5 w-5 items-center justify-center rounded-full text-slate-400 hover:bg-slate-200 hover:text-red-600" title="Retirer"><svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/></svg></button>
                    </form>
                </span>
            @empty
                <span class="text-xs text-slate-400">Aucun membre pour l'instant.</span>
            @endforelse
        </div>

        <form method="POST" action="{{ route('groupes.membres.ajouter', $groupe) }}" class="border-t border-slate-100 pt-3">
            @csrf
            <label class="mb-1 block text-[11px] text-slate-400">Ajouter des membres (Ctrl/Cmd pour en choisir plusieurs)</label>
            <div class="flex items-start gap-2">
                <select name="user_ids[]" multiple size="6" required class="w-full rounded-lg border-slate-200 text-sm">
                    @foreach($candidats as $u)
                        <option value="{{ $u->id }}">{{ trim($u->name.' '.($u->prenom ?? '')) }} @if($u->groupe_id && $u->groupe_id !== $groupe->id)(déjà dans un groupe)@endif</option>
                    @endforeach
                </select>
                <button class="inline-flex h-9 shrink-0 items-center rounded-lg border border-slate-200 px-3 text-sm text-slate-700 hover:bg-slate-50">Ajouter</button>
            </div>
            <p class="mt-2 text-[11px] text-slate-400">Un utilisateur appartient à un seul groupe : l'ajouter ici le déplace dans ce groupe.</p>
        </form>
    </section>
</div>
@endsection