@extends('layouts.admin')

@section('content')
<div class="container mx-auto py-8">
    <div class="max-w-lg mx-auto bg-white rounded-xl shadow-lg p-8">
        <h2 class="text-2xl font-bold mb-6">Editar Personal Administrativo</h2>
        <form action="{{ route('admin.users.update-personal', $admin->id) }}" method="POST">
            @csrf
            <!-- Nombre -->
            <div class="mb-5">
                <label for="name" class="block text-sm font-semibold text-gray-700 mb-2">Nombre Completo *</label>
                <input type="text" id="name" name="name" value="{{ old('name', $admin->name) }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
            </div>

            <!-- Rol -->
            <div class="mb-5">
                <label for="role" class="block text-sm font-semibold text-gray-700 mb-2">Rol *</label>
                <select id="role" name="role" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
                    <option value="admin" {{ old('role', $admin->role) == 'admin' ? 'selected' : '' }}>Administrador</option>
                    <option value="user" {{ old('role', $admin->role) == 'user' ? 'selected' : '' }}>Usuario</option>
                </select>
            </div>
            <!-- Email -->
            <div class="mb-5">
                <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">Correo Electrónico *</label>
                <input type="email" id="email" name="email" value="{{ old('email', $admin->email) }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" required>
            </div>
            <!-- Teléfono -->
            <div class="mb-5">
                <label for="phone" class="block text-sm font-semibold text-gray-700 mb-2">Teléfono</label>
                <input type="tel" id="phone" name="phone" value="{{ old('phone', $admin->phone) }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
            </div>
            <!-- Contraseña -->
            <div class="mb-5">
                <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">Nueva Contraseña</label>
                <input type="password" id="password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Dejar en blanco para no cambiar">
                <p class="text-xs text-gray-500 mt-1">Mínimo 8 caracteres</p>
            </div>
            <!-- Confirmar Contraseña -->
            <div class="mb-6">
                <label for="password_confirmation" class="block text-sm font-semibold text-gray-700 mb-2">Confirmar Contraseña</label>
                <input type="password" id="password_confirmation" name="password_confirmation" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Repite la contraseña">
            </div>
            <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition transform hover:scale-105">
                <i class="fas fa-save mr-2"></i> Guardar Cambios
            </button>
        </form>
        <a href="{{ route('admin.users.create-personal') }}" class="block mt-6 text-blue-600 hover:underline">&larr; Volver a la lista</a>
    </div>
</div>
@endsection