@extends('layouts.app')

@section('content')
@include('validaciones')
<div class="bg-white shadow-md rounded-lg p-6 w-full dark:bg-gray-800">
    <h2 class="text-xl font-semibold mb-4 dark:text-gray-200 text-gray-800">Editar Usuario</h2>
    <form action="{{ route('admin.users.update', $user->id) }}" method="POST" enctype="multipart/form-data"
        class="grid grid-cols-2 gap-4">
        @csrf
        @method('PUT')

        <div>
            <label for="name" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Nombre</label>
            <input type="text" id="name" name="name" value="{{ old('name', $user->name) }}" class="mt-1 p-2 w-full border border-gray-300 text-xs rounded-md 
                dark:bg-gray-700 dark:border-gray-400 dark:text-gray-100">
        </div>

        <div>
            <label for="email" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Email</label>
            <input type="email" id="email" name="email" value="{{ old('email', $user->email) }}" class="mt-1 p-2 w-full border border-gray-300 text-xs rounded-md 
                dark:bg-gray-700 dark:border-gray-400 dark:text-gray-100">
        </div>

        <div>
            <label for="password" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Nueva
                Contraseña</label>
            <input type="password" id="password" name="password" class="mt-1 p-2 w-full border border-gray-300 text-xs rounded-md 
                dark:bg-gray-700 dark:border-gray-400 dark:text-gray-100">
        </div>

        <div>
            <label for="id_rol" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Rol</label>
            <select name="id_rol" id="id_rol" class="mt-1 p-2 w-full border border-gray-300 text-xs rounded-md 
                dark:bg-gray-700 dark:border-gray-400 dark:text-gray-100">
                @foreach ($roles as $rol)
                <option value="{{ $rol->id }}" {{ $user->id_rol == $rol->id ? 'selected' : '' }}>{{ $rol->nombre }}
                </option>
                @endforeach
            </select>
        </div>

        <div class="col-span-2">
            <label for="avatar" class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Foto de
                perfil</label>
            <input type="file" id="avatar" name="avatar" class="mt-1 p-2 w-full border border-gray-300 text-xs rounded-md 
                dark:bg-gray-700 dark:border-gray-400 dark:text-gray-100">
            @if ($user->avatar)
            <div class="mt-2">
                <img src="{{ asset('storage/avatars/'. $user->id . '/' . $user->avatar) }}" alt="Avatar"
                    class="w-16 h-16 rounded-full">
            </div>
            @endif
        </div>

        <div class="col-span-2 flex justify-start">
            <a href="{{ route('admin.users') }}"
                class="bg-gray-500 text-white px-4 py-2 text-xs rounded-md shadow hover:bg-gray-600 mr-2">Volver</a>
            <button type="submit"
                class="bg-sky-500 text-white px-4 py-2 text-xs rounded-md shadow hover:bg-sky-600">Actualizar</button>
        </div>
    </form>
</div>
@endsection