@extends('layouts.app')

@section('title', 'Crear Usuario')
@section('page-title', 'Crear Nuevo Usuario')

@section('content')
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="mb-0">Información del Usuario</h5>
            </div>
            <div class="card-body">
                <form method="POST" action="{{ route('users.store') }}">
                    @csrf
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="name" class="form-label">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 class="col-md-6 mb-3">
                            <label for="email" class="form-label">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 class="row">
                        <div class="col-md-6 mb-3">
                            <label for="role" class="form-label">Rol <span class="text-danger">*</span></label>
                            <select class="form-select @error('role') is-invalid @enderror" 
                                    id="role" name="role" required>
                                <option value="">Seleccionar rol...</option>
                                <option value="administrador" {{ old('role') == 'administrador' ? 'selected' : '' }}>Administrador</option>
                                <option value="supervisor" {{ old('role') == 'supervisor' ? 'selected' : '' }}>Supervisor N3</option>
                                <option value="ingeniero" {{ old('role') == 'ingeniero' ? 'selected' : '' }}>Ingeniero N2</option>
                                <option value="responsable" {{ old('role') == 'responsable' ? 'selected' : '' }}>Técnico N1</option>
                                <option value="solicitante" {{ old('role') == 'solicitante' ? 'selected' : '' }}>Cliente</option>
                            </select>
                            @error('role')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                <small>
                                    <strong>Administrador:</strong> Acceso total al sistema<br>
                                    <strong>Supervisor N3:</strong> Supervisa y asigna tickets<br>
                                    <strong>Ingeniero N2:</strong> Resuelve casos complejos y asigna tickets<br>
                                    <strong>Técnico N1:</strong> Atiende tickets de primer nivel<br>
                                    <strong>Cliente:</strong> Crea y da seguimiento a tickets
                                </small>
                            </div>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="phone" class="form-label">Teléfono</label>
                            <input type="text" class="form-control @error('phone') is-invalid @enderror" 
                                   id="phone" name="phone" value="{{ old('phone') }}">
                            @error('phone')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="position" class="form-label">Cargo/Posición</label>
                        <input type="text" class="form-control @error('position') is-invalid @enderror" 
                               id="position" name="position" value="{{ old('position') }}">
                        @error('position')
                        <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                    
                    <div id="client-fields" style="display: none;">
                        <hr class="my-4">
                        <h6 class="mb-3"><i class="bi bi-building me-2"></i>Asignación de Empresa y Proyectos</h6>
                        
                        <div class="mb-3">
                            <label for="company_id" class="form-label">Empresa</label>
                            <select class="form-select @error('company_id') is-invalid @enderror" 
                                    id="company_id" name="company_id">
                                <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 class="form-text">
                                Selecciona la empresa a la que pertenece este cliente
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="projects" class="form-label">Proyectos Asignados</label>
                            <select class="form-select @error('projects') is-invalid @enderror" 
                                    id="projects" name="projects[]" multiple size="6">
                                <option value="">Primero selecciona una empresa</option>
                            </select>
                            @error('projects')
                            <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <div class="form-text">
                                Mantén presionado Ctrl (o Cmd en Mac) para seleccionar múltiples proyectos. El cliente solo podrá crear tickets para estos proyectos.
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <div class="alert alert-info mb-3">
                            <i class="bi bi-info-circle me-2"></i>
                            <strong>Activación de cuenta:</strong> Se generará un enlace de activación que deberás enviar al usuario por correo electrónico. 
                            El usuario establecerá su propia contraseña al activar su cuenta.
                        </div>
                    </div>
                    
                    <hr class="my-4">
                    
                    <div class="d-flex justify-content-between">
                        <a href="{{ route('users.index') }}" class="btn btn-outline-secondary">
                            <i class="bi bi-arrow-left me-2"></i>Cancelar
                        </a>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save me-2"></i>Crear Usuario
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const roleSelect = document.getElementById('role');
    const clientFields = document.getElementById('client-fields');
    const companySelect = document.getElementById('company_id');
    const projectsSelect = document.getElementById('projects');
    
    // Mostrar/ocultar campos de empresa y proyectos según el rol
    roleSelect.addEventListener('change', function() {
        if (this.value === 'solicitante' || this.value === 'responsable' || this.value === 'ingeniero' || this.value === 'supervisor') {
            clientFields.style.display = 'block';
        } else {
            clientFields.style.display = 'none';
            companySelect.value = '';
            projectsSelect.innerHTML = '<option value="">Primero selecciona una empresa</option>';
        }
    });
    
    // Cargar proyectos cuando se selecciona una empresa
    companySelect.addEventListener('change', function() {
        const companyId = this.value;
        
        if (!companyId) {
            projectsSelect.innerHTML = '<option value="">Primero selecciona una empresa</option>';
            return;
        }
        
        // Mostrar loading
        projectsSelect.innerHTML = '<option value="">Cargando proyectos...</option>';
        
        // Hacer petición AJAX para obtener proyectos de la empresa
        fetch(`/api/companies/${companyId}/projects`)
            .then(response => response.json())
            .then(data => {
                if (data.length === 0) {
                    projectsSelect.innerHTML = '<option value="">No hay proyectos disponibles</option>';
                    return;
                }
                
                projectsSelect.innerHTML = '';
                data.forEach(project => {
                    const option = document.createElement('option');
                    option.value = project.id;
                    option.textContent = project.name;
                    projectsSelect.appendChild(option);
                });
            })
            .catch(error => {
                console.error('Error al cargar proyectos:', error);
                projectsSelect.innerHTML = '<option value="">Error al cargar proyectos</option>';
            });
    });
    
    // Trigger al cargar si ya hay un rol seleccionado (para old values)
    if (roleSelect.value === 'solicitante' || roleSelect.value === 'responsable' || roleSelect.value === 'ingeniero' || roleSelect.value === 'supervisor') {
        clientFields.style.display = 'block';
    }
});
</script>
@endpush