@extends('layouts.app')

@section('title', 'Asignar Proyectos')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i class="bi bi-building-gear me-2"></i>Asignar Proyectos a {{ $user->name }}
                    </h5>
                    <a href="{{ route('users.index') }}" class="btn btn-sm btn-light">
                        <i class="bi bi-arrow-left"></i> Volver
                    </a>
                </div>

                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success alert-dismissible fade show" role="alert">
                            <i class="bi bi-check-circle me-2"></i>{{ session('success') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <div class="row mb-4">
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="text-muted mb-2">Usuario</h6>
                                    <p class="mb-1"><strong>{{ $user->name }}</strong></p>
                                    <p class="mb-0 text-muted small">
                                        <i class="bi bi-envelope me-1"></i>{{ $user->email }}
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="card bg-light">
                                <div class="card-body">
                                    <h6 class="text-muted mb-2">Rol</h6>
                                    <p class="mb-1">
                                        @php
                                            $roleColors = [
                                                'administrador' => 'danger',
                                                'supervisor' => 'warning',
                                                'ingeniero' => 'primary',
                                                'responsable' => 'info',
                                                'solicitante' => 'secondary'
                                            ];
                                            $roleLabels = [
                                                'administrador' => 'Administrador',
                                                'supervisor' => 'Supervisor N3',
                                                'ingeniero' => 'Ingeniero N2',
                                                'responsable' => 'Técnico N1',
                                                'solicitante' => 'Cliente'
                                            ];
                                        @endphp
                                        <span class="badge bg-{{ $roleColors[$user->role] }}">
                                            {{ $roleLabels[$user->role] }}
                                        </span>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <form action="{{ route('users.update-projects', $user) }}" method="POST">
                        @csrf
                        @method('PUT')

                        <div class="alert alert-info">
                            <i class="bi bi-info-circle me-2"></i>
                            Selecciona las empresas y proyectos a los que este usuario tendrá acceso. 
                            Solo verá los tickets de los proyectos asignados.
                        </div>

                        @if($companies->count() > 1)
                            <div class="card mb-3 border-primary">
                                <div class="card-header bg-primary text-white">
                                    <div class="form-check">
                                        <input class="form-check-input" 
                                               type="checkbox" 
                                               id="select_all"
                                               style="background-color: white; border-color: white;">
                                        <label class="form-check-label fw-bold" for="select_all">
                                            <i class="bi bi-buildings me-2"></i>Todas las Empresas
                                        </label>
                                    </div>
                                </div>
                                <div class="card-body bg-light">
                                    <p class="mb-0 text-muted">
                                        <i class="bi bi-lightning-fill me-1 text-warning"></i>
                                        Selecciona esta opción para asignar todos los proyectos de todas las empresas
                                    </p>
                                </div>
                            </div>
                        @endif

                        @foreach($companies as $company)
                            <div class="card mb-3">
                                <div class="card-header" style="background-color: #f8f9fa;">
                                    <div class="form-check">
                                        <input class="form-check-input company-checkbox" 
                                               type="checkbox" 
                                               id="company_{{ $company->id }}"
                                               data-company-id="{{ $company->id }}">
                                        <label class="form-check-label fw-bold" for="company_{{ $company->id }}">
                                            <i class="bi bi-building me-2"></i>{{ $company->name }}
                                        </label>
                                    </div>
                                </div>
                                <div class="card-body">
                                    @if($company->projects->count() > 0)
                                        <div class="row">
                                            @foreach($company->projects as $project)
                                                <div class="col-md-6 mb-2">
                                                    <div class="form-check">
                                                        <input class="form-check-input project-checkbox project-company-{{ $company->id }}" 
                                                               type="checkbox" 
                                                               name="project_ids[]" 
                                                               value="{{ $project->id }}"
                                                               id="project_{{ $project->id }}"
                                                               {{ $user->projects->contains($project->id) ? 'checked' : '' }}>
                                                        <label class="form-check-label" for="project_{{ $project->id }}">
                                                            <strong>{{ $project->name }}</strong>
                                                            @if($project->contract_number)
                                                                <br><small class="text-muted">
                                                                    <i class="bi bi-file-text me-1"></i>{{ $project->contract_number }}
                                                                </small>
                                                            @endif
                                                        </label>
                                                    </div>
                                                </div>
                                            @endforeach
                                        </div>
                                    @else
                                        <p class="text-muted mb-0">
                                            <i class="bi bi-exclamation-circle me-1"></i>
                                            Esta empresa no tiene proyectos registrados
                                        </p>
                                    @endif
                                </div>
                            </div>
                        @endforeach

                        @if($companies->count() === 0)
                            <div class="alert alert-warning">
                                <i class="bi bi-exclamation-triangle me-2"></i>
                                No hay empresas registradas en el sistema.
                            </div>
                        @endif

                        <div class="d-flex justify-content-between mt-4">
                            <a href="{{ route('users.index') }}" class="btn btn-secondary">
                                <i class="bi bi-x-circle me-1"></i>Cancelar
                            </a>
                            <button type="submit" class="btn btn-success">
                                <i class="bi bi-check-circle me-1"></i>Guardar Asignación
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            <div class="card mt-3 shadow-sm">
                <div class="card-header bg-light">
                    <h6 class="mb-0">
                        <i class="bi bi-info-circle me-2"></i>Información
                    </h6>
                </div>
                <div class="card-body">
                    <ul class="mb-0">
                        <li>El usuario solo verá los tickets de los proyectos asignados</li>
                        <li>Puedes seleccionar múltiples proyectos de diferentes empresas</li>
                        <li>Los cambios se aplicarán inmediatamente</li>
                        <li>Usa el checkbox de la empresa para seleccionar/deseleccionar todos sus proyectos</li>
                        <li><strong>Usa "Todas las Empresas"</strong> para asignar todos los proyectos de una vez</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Seleccionar/deseleccionar TODOS los proyectos de TODAS las empresas
    const selectAllCheckbox = document.getElementById('select_all');
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            const checked = this.checked;
            
            // Marcar/desmarcar todos los checkboxes de empresas
            document.querySelectorAll('.company-checkbox').forEach(companyCheckbox => {
                companyCheckbox.checked = checked;
            });
            
            // Marcar/desmarcar todos los proyectos
            document.querySelectorAll('.project-checkbox').forEach(projectCheckbox => {
                projectCheckbox.checked = checked;
            });
        });
    }

    // Seleccionar/deseleccionar todos los proyectos de una empresa
    document.querySelectorAll('.company-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const companyId = this.dataset.companyId;
            const checked = this.checked;
            document.querySelectorAll(`.project-company-${companyId}`).forEach(projectCheckbox => {
                projectCheckbox.checked = checked;
            });
            
            // Actualizar estado de "Todas las Empresas"
            updateSelectAllState();
        });
    });

    // Actualizar estado del checkbox de empresa si se seleccionan todos sus proyectos
    document.querySelectorAll('.project-checkbox').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            const companyId = Array.from(this.classList).find(c => c.startsWith('project-company-')).split('-')[2];
            const companyCheckbox = document.getElementById(`company_${companyId}`);
            const allProjects = document.querySelectorAll(`.project-company-${companyId}`);
            const checkedProjects = document.querySelectorAll(`.project-company-${companyId}:checked`);
            
            companyCheckbox.checked = allProjects.length === checkedProjects.length;
            companyCheckbox.indeterminate = checkedProjects.length > 0 && checkedProjects.length < allProjects.length;
            
            // Actualizar estado de "Todas las Empresas"
            updateSelectAllState();
        });
    });

    // Función para actualizar el estado del checkbox "Todas las Empresas"
    function updateSelectAllState() {
        const selectAllCheckbox = document.getElementById('select_all');
        if (!selectAllCheckbox) return;
        
        const allProjectCheckboxes = document.querySelectorAll('.project-checkbox');
        const checkedProjectCheckboxes = document.querySelectorAll('.project-checkbox:checked');
        
        if (allProjectCheckboxes.length === 0) {
            selectAllCheckbox.checked = false;
            selectAllCheckbox.indeterminate = false;
        } else if (checkedProjectCheckboxes.length === allProjectCheckboxes.length) {
            selectAllCheckbox.checked = true;
            selectAllCheckbox.indeterminate = false;
        } else if (checkedProjectCheckboxes.length > 0) {
            selectAllCheckbox.checked = false;
            selectAllCheckbox.indeterminate = true;
        } else {
            selectAllCheckbox.checked = false;
            selectAllCheckbox.indeterminate = false;
        }
    }

    // Inicializar estado de checkboxes de empresa al cargar
    document.addEventListener('DOMContentLoaded', function() {
        document.querySelectorAll('.company-checkbox').forEach(companyCheckbox => {
            const companyId = companyCheckbox.dataset.companyId;
            const allProjects = document.querySelectorAll(`.project-company-${companyId}`);
            const checkedProjects = document.querySelectorAll(`.project-company-${companyId}:checked`);
            
            if (checkedProjects.length === allProjects.length && allProjects.length > 0) {
                companyCheckbox.checked = true;
            } else if (checkedProjects.length > 0) {
                companyCheckbox.indeterminate = true;
            }
        });
        
        // Inicializar estado de "Todas las Empresas"
        updateSelectAllState();
    });
</script>
@endpush
@endsection