@extends('layouts.exat')
@section('title', 'Nouveau rôle')

@section('content')
<form method="POST" action="{{ route('roles.store') }}" class="mx-auto max-w-2xl">
    @csrf
    <div class="mb-4"><a href="{{ route('utilisateurs.index', ['onglet' => 'roles']) }}" 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>

    <section class="rounded-xl bg-white p-5 ring-1 ring-slate-200">
        <div>
            <label class="mb-1 block text-[11px] text-slate-400">Nom du rôle</label>
            <input name="name" value="{{ old('name') }}" required placeholder="ex. AGENT_PONT"
                   class="w-full rounded-lg border-slate-200 text-sm uppercase" style="text-transform:uppercase">
            <p class="mt-1 text-[11px] text-slate-400">MAJUSCULES, chiffres et underscore uniquement.</p>
        </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 hérités par module</h3>
            <p class="mb-3 text-[11px] text-slate-400">Ces niveaux s'appliquent par défaut à tout utilisateur portant ce rôle (sauf override utilisateur ou restriction de groupe).</p>
            <div class="divide-y divide-slate-100">
                @foreach($modules as $m)
                    <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="0" selected>Aucun</option>
                            <option value="1">Lecture</option>
                            <option value="2">Écriture</option>
                        </select>
                    </div>
                @endforeach
            </div>
        </div>
    </section>

    <div class="mt-5 flex justify-end"><button class="inline-flex h-10 items-center rounded-lg bg-emerald-600 px-4 text-sm font-medium text-white hover:bg-emerald-700">Créer le rôle</button></div>
</form>
@endsection