@extends('layouts.app')

@section('title', 'Mon compte - ' . app_setting('app_name', 'Dev App'))

@section('content')
<div class="max-w-xl mx-auto space-y-6">
    <div>
        <h1 class="text-2xl font-extrabold text-slate-900">Mon compte</h1>
        <p class="text-sm text-slate-500 mt-1">Vos informations de connexion.</p>
    </div>

    <form action="{{ route('profile.update') }}" method="POST" class="bg-white rounded-2xl border border-slate-200 p-6 shadow-xs space-y-4">
        @csrf
        @method('PUT')

        <div>
            <label for="name" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">Nom</label>
            <input type="text" id="name" name="name" value="{{ old('name', $user->name) }}" required maxlength="255"
                class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-indigo-500">
        </div>

        <div>
            <label for="email" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">Adresse e-mail</label>
            <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" required maxlength="255"
                class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-indigo-500">
        </div>

        <div class="pt-4 border-t border-slate-100 space-y-4">
            <h2 class="text-sm font-bold text-slate-800">
                {{ $needsCurrentPassword ? 'Changer de mot de passe' : 'Choisir un mot de passe' }}
            </h2>
            @unless($needsCurrentPassword)
                <p class="text-xs text-slate-500">Vous êtes arrivé par un lien de connexion : choisissez un mot de passe pour pouvoir aussi vous connecter directement.</p>
            @endunless

            @if($needsCurrentPassword)
                <div>
                    <label for="current_password" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">Mot de passe actuel</label>
                    <input type="password" id="current_password" name="current_password" autocomplete="current-password"
                        class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-indigo-500">
                    <p class="text-[11px] text-slate-400 mt-1">Requis pour changer le mot de passe ou l'adresse e-mail.</p>
                </div>
            @endif

            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label for="password" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">Nouveau mot de passe</label>
                    <input type="password" id="password" name="password" autocomplete="new-password" minlength="10"
                        class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-indigo-500">
                </div>
                <div>
                    <label for="password_confirmation" class="block text-xs font-bold uppercase tracking-wider text-slate-700 mb-1.5">Confirmation</label>
                    <input type="password" id="password_confirmation" name="password_confirmation" autocomplete="new-password"
                        class="w-full px-3.5 py-2.5 rounded-xl border border-slate-300 text-sm focus:ring-2 focus:ring-indigo-500">
                </div>
            </div>
            <p class="text-[11px] text-slate-400">10 caractères minimum. Laissez vide pour le garder.</p>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="px-5 py-2.5 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-bold">Enregistrer</button>
        </div>
    </form>
</div>
@endsection