@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">Crear Usuario</h2>
    <form action="{{ route('admin.users.store') }}" method="POST" enctype="multipart/form-data"
        class="grid grid-cols-2 gap-4">
        @csrf

        <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') }}" class="mt-1 p-2 w-full text-xs rounded-md border border-gray-300 
                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') }}" 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">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 }}">{{ $rol->nombre }}</option>
                @endforeach
            </select>
        </div>

        <div>
            <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">
        </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">Guardar</button>
        </div>
    </form>
</div>
@endsection