@extends('layouts.vertical')

@section('content')
<div id="panel-1" class="panel">
    <div class="panel-hdr">
        <h2>
            <i class="fal fa-user-plus"></i> Crear Usuario
        </h2>
    </div>

    <div class="panel-container show">
        <div class="panel-content">

            <form action="{{ route('users.store') }}" method="POST" id="formUsuario">
                @csrf

                <div class="row">
                    {{-- Nombre --}}
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="name">Nombre Completo <span class="text-danger">*</span></label>
                            <input type="text" 
                                   class="form-control @error('name') is-invalid @enderror" 
                                   id="name" 
                                   name="name" 
                                   value="{{ old('name') }}" 
                                   required 
                                   autofocus>
                            @error('name')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Email --}}
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="email">Correo Electrónico <span class="text-danger">*</span></label>
                            <input type="email" 
                                   class="form-control @error('email') is-invalid @enderror" 
                                   id="email" 
                                   name="email" 
                                   value="{{ old('email') }}" 
                                   required>
                            @error('email')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    {{-- Company --}}
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="company_id">Empresa <span class="text-danger">*</span></label>
                            <select class="form-control @error('company_id') is-invalid @enderror" 
                                    id="company_id" 
                                    name="company_id" 
                                    required>
                                <option value="">Seleccionar empresa...</option>
                                @foreach($companies as $company)
                                    <option value="{{ $company->id }}" 
                                            {{ old('company_id') == $company->id ? 'selected' : '' }}>
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('company_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    {{-- Rol --}}
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="role">Rol <span class="text-danger">*</span></label>
                            <select class="form-control @error('role') is-invalid @enderror" 
                                    id="role" 
                                    name="role" 
                                    required>
                                <option value="">Seleccionar rol...</option>
                                @foreach($roles as $role)
                                    <option value="{{ $role->name }}" 
                                            {{ old('role') == $role->name ? 'selected' : '' }}>
                                        {{ $role->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('role')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    {{-- Contraseña --}}
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="password">Contraseña <span class="text-danger">*</span></label>
                            <input type="password" 
                                   class="form-control @error('password') is-invalid @enderror" 
                                   id="password" 
                                   name="password" 
                                   required>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="form-text text-muted">Mínimo 8 caracteres</small>
                        </div>
                    </div>

                    {{-- Confirmar Contraseña --}}
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="password_confirmation">Confirmar Contraseña <span class="text-danger">*</span></label>
                            <input type="password" 
                                   class="form-control" 
                                   id="password_confirmation" 
                                   name="password_confirmation" 
                                   required>
                        </div>
                    </div>
                </div>

                {{-- Botones --}}
                <div class="form-group mt-4">
                    <button type="submit" class="btn btn-primary">
                        <i class="fal fa-save"></i> Guardar Usuario
                    </button>
                    <a href="{{ route('users.index') }}" class="btn btn-secondary">
                        <i class="fal fa-times"></i> Cancelar
                    </a>
                </div>

            </form>

        </div>
    </div>
</div>
@endsection