@extends('layouts.admin')

@section('title', 'Editar Utilizador')

@section('content')
<div class="flex items-center justify-between mb-6">
    <div>
        <span class="w-8 h-[2px] bg-brand block mb-2"></span>
        <h1 class="text-3xl font-bold italic tracking-tighter uppercase text-brand">Editar Utilizador</h1>
        <p class="text-slate-500 font-medium text-sm">A editar: <span class="font-bold text-brand">{{ $user->name }}</span></p>
    </div>
    <a href="{{ route('admin.users.index') }}" class="border border-slate-200 hover:border-brand text-slate-600 hover:text-brand font-bold text-xs uppercase tracking-widest px-5 py-3 rounded-2xl transition-all flex items-center gap-2">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/></svg>
        Voltar
    </a>
</div>

<div class="bg-white border border-slate-100 rounded-2xl shadow-sm p-8">
    <form method="POST" action="{{ route('admin.users.update', $user) }}" class="max-w-xl space-y-6">
        @csrf
        @method('PUT')

        <div class="space-y-2">
            <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Nome</label>
            <input type="text" name="name" value="{{ old('name', $user->name) }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('name') border-red-300 @enderror" placeholder="Nome completo">
            @error('name') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="space-y-2">
            <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Email</label>
            <input type="email" name="email" value="{{ old('email', $user->email) }}" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('email') border-red-300 @enderror" placeholder="email@exemplo.com">
            @error('email') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Palavra-passe</label>
                <input type="password" name="password" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition @error('password') border-red-300 @enderror" placeholder="Deixar vazio para manter atual">
                <p class="text-[10px] font-medium text-slate-400 mt-1">Deixar vazio para manter atual</p>
                @error('password') <p class="text-[10px] font-bold text-red-500 mt-1">{{ $message }}</p> @enderror
            </div>

            <div class="space-y-2">
                <label class="text-[10px] font-bold uppercase tracking-widest text-slate-400">Confirmar Palavra-passe</label>
                <input type="password" name="password_confirmation" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-brand focus:ring-1 focus:ring-brand outline-none text-sm font-medium transition" placeholder="••••••••">
            </div>
        </div>

        <div class="flex items-center gap-4 pt-4">
            <button type="submit" class="bg-brand hover:bg-brand-700 text-white font-bold text-xs uppercase tracking-widest px-8 py-3.5 rounded-2xl transition-all hover:-translate-y-0.5 shadow-md">
                Atualizar Utilizador
            </button>
            <a href="{{ route('admin.users.index') }}" class="text-slate-400 hover:text-slate-600 font-bold text-xs uppercase tracking-widest transition">
                Cancelar
            </a>
        </div>
    </form>
</div>
@endsection
