@extends('plantilla.app')
@section('titulo', 'Editar Perfil')
@section('contenido')

{{-- ALERTA DE ÉXITO --}}
@if (session('success'))
    <div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">
        <i class="fa-regular fa-circle-check mr-1"></i> {{ session('success') }}
    </div>
@endif

<div class="flex flex-col gap-3 md:flex-row md:items-end md:justify-between">
    <div>
        <p class="text-xs uppercase tracking-wider text-slate-500">Perfil</p>
        <h1 class="text-2xl font-bold text-slate-900">Editar Perfil</h1>
        <p class="mt-1 text-sm text-slate-500">Actualiza la información de tu perfil.</p>
    </div>
</div>

<div class="mt-5 glass-card rounded-2xl border border-black/10 bg-white/80 p-5 shadow-xl shadow-indigo-100 backdrop-blur">
    <form method="POST" action="{{ route('perfil.update') }}" class="space-y-4">
        @csrf
        @method('PUT')

        <div class="space-y-4">
            <div>
                <label class="text-xs font-semibold text-slate-600">Nombres</label>
                <input name="nombres" value="{{ old('nombres', $user->nombres) }}" required
                    class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
            </div>

            <div>
                <label class="text-xs font-semibold text-slate-600">Email</label>
                <input name="email" type="email" value="{{ old('email', $user->email) }}" required
                    class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
            </div>

            <div>
                <label class="text-xs font-semibold text-slate-600">DNI</label>
                <input name="dni" type="number" value="{{ old('dni', $user->dni) }}" required
                    class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
            </div>

            <div>
                <label class="text-xs font-semibold text-slate-600">Tipo</label>
                <select name="tipo" required
                    class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                    <option value="ADMIN" {{ $user->tipo == 'ADMIN' ? 'selected' : '' }}>Administrador</option>
                    <option value="USERS" {{ $user->tipo == 'USERS' ? 'selected' : '' }}>Usuario</option>
                </select>
            </div>

            <div>
                <label class="text-xs font-semibold text-slate-600">Estado</label>
                <select name="estado" required
                    class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
                    <option value="activo" {{ $user->estado == 'activo' ? 'selected' : '' }}>Activo</option>
                    <option value="bloqueado" {{ $user->estado == 'bloqueado' ? 'selected' : '' }}>Bloqueado</option>
                </select>
            </div>

            <div>
                <label class="text-xs font-semibold text-slate-600">Contraseña (Opcional)</label>
                <input name="password" type="password"
                    class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
            </div>

            <div>
                <label class="text-xs font-semibold text-slate-600">Confirmar Contraseña</label>
                <input name="password_confirmation" type="password"
                    class="mt-1 w-full rounded-xl border border-black/10 bg-white px-3 py-2 text-sm outline-none focus:ring-4 focus:ring-indigo-100">
            </div>
        </div>

        <div class="flex justify-end gap-2 pt-2">
            <button type="button" class="rounded-xl bg-slate-900/5 px-4 py-2 text-sm font-semibold text-slate-700 hover:bg-slate-900/10">
                Cancelar
            </button>
            <button type="submit" class="rounded-xl bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-indigo-200 hover:bg-indigo-700">
                Guardar cambios
            </button>
        </div>
    </form>
</div>

@endsection