@extends('layouts.app')
@section('title', $user->exists ? 'Modifier utilisateur' : 'Nouvel utilisateur')
@section('heading', $user->exists ? 'Modifier '.$user->name : 'Nouvel utilisateur')
@section('content')
@php $isSelf = $user->exists && $user->id === auth()->id(); @endphp

<form method="POST" action="{{ $user->exists ? route('users.update',$user) : route('users.store') }}" id="user-form" class="w-full" enctype="multipart/form-data">
    @csrf @if($user->exists)@method('PUT')@endif
    <x-card>
        <div class="space-y-3">
            @if($isSelf)<p class="text-sm text-slate-500 mb-1">Vous modifiez <b>votre propre profil</b>.</p>@endif

            {{-- Photo de profil --}}
            <div x-data="{ preview: @js($user->avatarUrl()) }" class="flex items-center gap-4 pb-2">
                <div class="h-20 w-20 rounded-2xl overflow-hidden bg-brand-50 grid place-items-center shrink-0 ring-1 ring-slate-200">
                    <template x-if="preview"><img :src="preview" class="h-full w-full object-cover"></template>
                    <template x-if="!preview"><span class="text-brand-600 text-2xl font-semibold">{{ $user->exists ? $user->initials() : '?' }}</span></template>
                </div>
                <div class="text-sm">
                    <label class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3.5 py-2 font-medium text-slate-700 hover:bg-slate-50 cursor-pointer shadow-sm">
                        📷 Choisir une photo
                        <input type="file" name="avatar" accept="image/*" class="hidden"
                               @change="const f=$event.target.files[0]; if(f) preview=URL.createObjectURL(f)">
                    </label>
                    <p class="text-xs text-slate-400 mt-1.5">JPG, PNG ou WebP — 4 Mo max.</p>
                    @if($user->exists && $user->avatarUrl())
                        <label class="text-xs flex items-center gap-1.5 mt-1.5 text-rose-600"><input type="checkbox" name="remove_avatar" value="1" class="rounded" @change="if($event.target.checked) preview=null"> Supprimer la photo</label>
                    @endif
                </div>
            </div>

            <div class="grid md:grid-cols-2 gap-x-6 gap-y-3">
                @include('partials.field',['name'=>'name','label'=>'Nom complet *','value'=>$user->name])
                @include('partials.field',['name'=>'email','label'=>'Email *','type'=>'email','value'=>$user->email])
                @include('partials.field',['name'=>'job_title','label'=>'Fonction','value'=>$user->job_title])
                @include('partials.field',['name'=>'phone','label'=>'Téléphone','value'=>$user->phone])
                <div>
                    <label class="text-sm block">Rôle
                        <select name="role_id" @disabled($isSelf) class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm {{ $isSelf ? 'bg-slate-100 text-slate-500' : '' }}">
                            <option value="">—</option>
                            @foreach($roles as $r)<option value="{{ $r->id }}" @selected($user->role_id==$r->id)>{{ $r->name }}</option>@endforeach
                        </select>
                    </label>
                    @if($isSelf)<input type="hidden" name="role_id" value="{{ $user->role_id }}"><p class="text-xs text-slate-400 mt-1">Vous ne pouvez pas changer votre propre rôle.</p>@endif
                </div>
                @include('partials.field',['name'=>'password','label'=>$user->exists?'Nouveau mot de passe (laisser vide pour ne pas changer)':'Mot de passe *','type'=>'password','value'=>''])
            </div>
            <label class="flex items-center gap-2 text-sm mt-1"><input type="checkbox" name="is_active" value="1" @checked($user->is_active ?? true) @disabled($isSelf) class="rounded"> Compte actif</label>
        </div>
    </x-card>
</form>

@if($user->exists)
    {{-- Sécurité : double authentification --}}
    <x-card title="Sécurité — Double authentification (2FA)" class="w-full mt-6">
        <div class="flex items-center justify-between gap-4">
            <div class="text-sm">
                @if($user->hasTwoFactor())
                    <x-badge status="actif" label="Activée" />
                    <p class="text-slate-500 mt-2">La double authentification est active @if($user->two_factor_confirmed_at)depuis le {{ $user->two_factor_confirmed_at->format('d/m/Y') }}@endif. Un code sera demandé à chaque connexion.</p>
                @else
                    <x-badge status="brouillon" label="Désactivée" />
                    <p class="text-slate-500 mt-2">Ajoutez une couche de sécurité : un code à usage unique généré par une application sur votre téléphone.</p>
                @endif
            </div>
            <div class="shrink-0">
                @if($isSelf)
                    @if($user->hasTwoFactor())
                        <form method="POST" action="{{ route('2fa.disable') }}" onsubmit="return confirm('Désactiver la double authentification ?')">@csrf @method('DELETE')
                            <x-btn variant="secondary" type="submit">Désactiver</x-btn>
                        </form>
                    @else
                        <x-btn :href="route('2fa.setup')">🔒 Activer la 2FA</x-btn>
                    @endif
                @endif
            </div>
        </div>
        @unless($isSelf)<p class="text-xs text-slate-400 mt-3">La 2FA se configure par l'utilisateur lui-même depuis son propre profil (scan d'un QR code sur son téléphone).</p>@endunless
    </x-card>
@endif

{{-- Barre d'actions : le bouton Enregistrer est relié au formulaire via l'attribut form= (pas d'imbrication) --}}
<div class="mt-6 flex gap-2 items-center w-full">
    <x-btn type="submit" form="user-form">💾 Enregistrer</x-btn>
    <x-btn variant="secondary" :href="route('users.index')">Annuler</x-btn>

    @if($user->exists && ! $isSelf)
        <form method="POST" action="{{ route('users.destroy',$user) }}" class="ml-auto" onsubmit="return confirm('Supprimer définitivement cet utilisateur ?')">
            @csrf @method('DELETE')
            <x-btn variant="danger" type="submit">🗑️ Supprimer</x-btn>
        </form>
    @endif
</div>
@endsection