@extends('layouts.exat')
@section('title', 'Nouvel utilisateur')

@section('content')
<form method="POST" action="{{ route('utilisateurs.store') }}" class="mx-auto max-w-2xl">
    @csrf
    <div class="mb-4"><a href="{{ route('utilisateurs.index') }}" 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 class="grid gap-3 sm:grid-cols-2">
            <div><label class="mb-1 block text-[11px] text-slate-400">Nom</label><input name="name" value="{{ old('name') }}" required class="w-full rounded-lg border-slate-200 text-sm"></div>
            <div><label class="mb-1 block text-[11px] text-slate-400">Prénom</label><input name="prenom" value="{{ old('prenom') }}" class="w-full rounded-lg border-slate-200 text-sm"></div>
            <div><label class="mb-1 block text-[11px] text-slate-400">Login</label><input name="login" value="{{ old('login') }}" required class="w-full rounded-lg border-slate-200 text-sm"></div>
            <div><label class="mb-1 block text-[11px] text-slate-400">Email</label><input type="email" name="email" value="{{ old('email') }}" required class="w-full rounded-lg border-slate-200 text-sm"></div>
            <div><label class="mb-1 block text-[11px] text-slate-400">N° téléphone</label><input name="telephone" value="{{ old('telephone') }}" class="w-full rounded-lg border-slate-200 text-sm"></div>
            <div>
                <label class="mb-1 block text-[11px] text-slate-400">Rôle</label>
                <select name="role" required class="w-full rounded-lg border-slate-200 text-sm">
                    @foreach($roles as $r)<option value="{{ $r }}" @selected(old('role') === $r)>{{ $r }}</option>@endforeach
                </select>
            </div>
            <div class="sm:col-span-2"><label class="mb-1 block text-[11px] text-slate-400">Description</label><input name="description" value="{{ old('description') }}" placeholder="Fonction, service, remarque…" class="w-full rounded-lg border-slate-200 text-sm"></div>
            <div class="sm:col-span-2">
                @include('partials._ponts-multi', ['pontsDispo' => $ponts, 'pontsSel' => $pontsSel ?? []])
            </div>
            <div class="sm:col-span-2">
                <label class="mb-1 block text-[11px] text-slate-400">Mot de passe <span class="text-slate-300">(optionnel)</span></label>
                <input type="text" name="password" value="{{ old('password') }}" autocomplete="new-password" class="w-full rounded-lg border-slate-200 text-sm">
                <p class="mt-1 text-[11px] text-slate-400">Laissez vide pour générer un mot de passe automatiquement. Dans tous les cas, les identifiants sont envoyés par e-mail à l'utilisateur.</p>
            </div>
            <div class="sm:col-span-2"><label class="inline-flex items-center gap-2 text-sm text-slate-700"><input type="checkbox" name="actif" value="1" checked class="rounded border-slate-300 text-emerald-600 focus:ring-emerald-500"> Compte actif</label></div>
        </div>
        <p class="mt-3 text-[11px] text-slate-400">L'utilisateur devra changer son mot de passe à la première connexion. Les accès fins par module se règlent après création.</p>
    </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</button></div>
</form>
@endsection