@extends('layouts.app')

@section('content')
<div class="p-6 max-w-3xl mx-auto">

    {{-- HEADER --}}
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Crear Usuario</h1>

        <a href="{{ route('usuarios.index') }}"
           class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg">
           ← Volver
        </a>
    </div>

    {{-- ERRORES --}}
    @if ($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            <ul class="list-disc list-inside text-sm">
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    {{-- FORMULARIO --}}
    <div class="bg-white shadow-md rounded-lg p-6">
        <form method="POST" action="{{ route('usuarios.store') }}">
            @csrf

            {{-- NOMBRE --}}
            <div class="mb-4">
                <label class="block font-medium mb-1">Nombre *</label>
                <input name="name"
                       value="{{ old('name') }}"
                       placeholder="Nombre completo"
                       class="w-full border rounded-lg px-3 py-2 @error('name') border-red-500 @enderror">
            </div>

            {{-- USERNAME --}}
            <div class="mb-4">
                <label class="block font-medium mb-1">Usuario *</label>
                <input name="username"
                       value="{{ old('username') }}"
                       placeholder="Nombre de usuario"
                       class="w-full border rounded-lg px-3 py-2 @error('username') border-red-500 @enderror">
            </div>

            {{-- PASSWORD --}}
            <div class="mb-4">
                <label class="block font-medium mb-1">Contraseña *</label>
                <input name="password" type="password"
                       placeholder="********"
                       class="w-full border rounded-lg px-3 py-2 @error('password') border-red-500 @enderror">
            </div>

            {{-- ÁREA --}}
            <div class="mb-4">
                <label class="block font-medium mb-1">Área</label>
                <select name="area_id"
                        class="w-full border rounded-lg px-3 py-2">
                    <option value="">-- Seleccionar área --</option>
                    @foreach($areas as $a)
                        <option value="{{ $a->id }}"
                            {{ old('area_id') == $a->id ? 'selected' : '' }}>
                            {{ $a->nombre }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- ROL --}}
            <div class="mb-4">
                <label class="block font-medium mb-1">Rol *</label>
                <select name="role"
                        class="w-full border rounded-lg px-3 py-2">
                    <option value="">-- Seleccionar rol --</option>
                    @foreach($roles as $r)
                        <option value="{{ $r->name }}"
                            {{ old('role') == $r->name ? 'selected' : '' }}>
                            {{ $r->name }}
                        </option>
                    @endforeach
                </select>
            </div>

            {{-- ESTADO --}}
            <div class="mb-6">
                <label class="block font-medium mb-1">Estado</label>
                <select name="estado"
                        class="w-full border rounded-lg px-3 py-2">
                    <option value="1" {{ old('estado') == '1' ? 'selected' : '' }}>
                        Activo
                    </option>
                    <option value="0" {{ old('estado') == '0' ? 'selected' : '' }}>
                        Inactivo
                    </option>
                </select>
            </div>

            {{-- BOTONES --}}
            <div class="flex justify-end gap-2">
                <a href="{{ route('usuarios.index') }}"
                   class="bg-gray-400 hover:bg-gray-500 text-white px-4 py-2 rounded-lg">
                   Cancelar
                </a>

                <button class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-lg shadow">
                    Guardar Usuario
                </button>
            </div>

        </form>
    </div>

</div>
@endsection