@extends('layouts.admin')

@section('title', $user ? "Modifier - {$user['name']}" : 'Ajouter un utilisateur')

@php
    $breadcrumbs = [['label' => 'Utilisateurs', 'route' => 'admin.users.index'], ['label' => $user ? $user['name'] : 'Ajouter']];
@endphp

@section('content')

    <form method="POST" action="{{ $user ? route('admin.users.update', $user) : route('admin.users.store') }}" data-dirty-form novalidate>
        @csrf
        @if ($user)
            @method('PATCH')
        @endif

        <div class="mb-5 flex flex-col gap-1">
            <h1 class="text-xl font-bold text-brand-ink">{{ $user ? 'Modifier l\'utilisateur' : 'Ajouter un utilisateur' }}</h1>
        </div>

        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            <div class="admin-card flex flex-col gap-4 p-5 lg:col-span-2">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <x-admin.field type="text" name="name" label="Nom complet" required :value="old('name', $user['name'] ?? '')" :error="$errors->first('name')" />
                    <x-admin.field type="email" name="email" label="E-mail" required :value="old('email', $user['email'] ?? '')" :error="$errors->first('email')" />
                </div>

                <x-admin.field type="select" name="role" label="Role" :options="['super_admin' => 'Super administrateur', 'admin' => 'Administrateur', 'editor' => 'Editeur']" :value="old('role', $user?->role?->value ?? 'editor')" :error="$errors->first('role')" />

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div class="flex flex-col gap-1.5">
                        <label for="field-password" class="text-sm font-medium text-brand-ink">{{ $user ? 'Nouveau mot de passe' : 'Mot de passe temporaire' }}</label>
                        <div class="flex items-stretch overflow-hidden rounded-lg border border-brand-border focus-within:border-brand-primary">
                            <input type="password" id="field-password" name="password" class="w-full border-0 px-3.5 py-2.5 text-sm text-brand-ink focus:outline-none" autocomplete="new-password">
                            <button type="button" data-password-toggle="field-password" aria-pressed="false" class="shrink-0 border-l border-brand-border px-3 text-xs font-semibold text-brand-primary hover:bg-brand-surface">Afficher</button>
                        </div>
                        @if ($user)
                            <p class="text-xs text-brand-muted">Laissez vide pour conserver le mot de passe actuel.</p>
                        @endif
                    </div>
                    <x-admin.field type="password" name="password_confirmation" label="Confirmation du mot de passe" />
                </div>
            </div>

            <div class="admin-card flex flex-col gap-4 p-5">
                <x-admin.field type="switch" name="is_active" label="Compte actif" :checked="old('is_active', $user['is_active'] ?? true)" />
                @if ($user)
                    <p class="text-xs text-brand-muted">Derniere connexion : {{ $user['last_login_demo'] }}</p>
                @endif
            </div>
        </div>

        <div class="sticky bottom-0 z-20 -mx-4 flex flex-col gap-3 border-t border-brand-border bg-brand-white/95 px-4 py-3 backdrop-blur sm:-mx-6 sm:flex-row sm:items-center sm:justify-end sm:px-6">
            <a href="{{ route('admin.users.index') }}" class="btn btn-secondary btn-sm">Annuler</a>
            <button type="submit" class="btn btn-primary btn-sm">{{ $user ? 'Enregistrer les modifications' : 'Creer l\'utilisateur' }}</button>
        </div>
    </form>

@endsection
