Tul xxx Tul

Viewing: create.php

<?php $error = $error ?? null; ?>

<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb" style="font-size: 0.85rem;">
        <li class="breadcrumb-item"><a href="<?= BASE_URL ?>/tareas" style="color: var(--primary);">Tareas</a></li>
        <li class="breadcrumb-item active">Nueva Tarea</li>
    </ol>
</nav>

<?php if ($error): ?>
<div class="alert alert-danger alert-dismissible fade show d-flex align-items-center" role="alert" style="border: none; border-radius: 10px; border-left: 4px solid #ef476f;">
    <i class="bi bi-exclamation-circle-fill me-2"></i><?= htmlspecialchars($error) ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<?php endif; ?>

<div class="card-custom">
    <div class="card-header-custom">
        <h5><i class="bi bi-plus-circle me-2"></i>Nueva Tarea</h5>
    </div>
    <div class="card-body-custom">
        <form id="formNuevaTarea" action="<?= BASE_URL ?>/tareas/store" method="POST" enctype="multipart/form-data">
            <div class="row g-4">
                <div class="col-md-8">
                    <label for="titulo" class="form-label fw-semibold" style="font-size: 0.85rem;">Título <span class="text-danger">*</span></label>
                    <input type="text" class="form-control" id="titulo" name="titulo" required placeholder="Ej: Diseñar landing page" style="border-radius: 8px; padding: 10px 14px;">
                </div>
                <div class="col-md-4">
                    <label for="empleado_id" class="form-label fw-semibold" style="font-size: 0.85rem;">Asignar a <span class="text-danger">*</span></label>
                    <div class="custom-select-wrapper">
                        <select class="form-select employee-select-with-avatar" id="empleado_id" name="empleado_id" required style="border-radius: 8px; padding: 10px 14px;">
                            <option value="">— Seleccionar empleado —</option>
                            <?php foreach ($empleados as $emp): ?>
                            <option value="<?= $emp['id'] ?>" data-avatar="<?= !empty($emp['foto']) ? BASE_URL . '/public/assets/uploads/empleados/' . $emp['foto'] : '' ?>" data-initial="<?= strtoupper(substr($emp['nombre'], 0, 1)) ?>">
                                <?= htmlspecialchars($emp['nombre']) ?>
                            </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
                <div class="col-12">
                    <label for="descripcion" class="form-label fw-semibold" style="font-size: 0.85rem;">Descripción</label>
                    <textarea class="form-control" id="descripcion" name="descripcion" rows="4" placeholder="Detalles, instrucciones, notas..." style="border-radius: 8px; padding: 10px 14px; resize: vertical;"></textarea>
                </div>

                <!-- Checklist Dinámico -->
                <div class="col-12">
                    <label class="form-label fw-semibold" style="font-size: 0.85rem;">Checklist de Sub-tareas</label>
                    <div id="checklistContainer" class="border rounded-3 p-3 bg-light">
                        <div id="checklistItems">
                            <!-- Los items se agregarán aquí -->
                        </div>
                        <button type="button" id="btnAddChecklistItem" class="btn btn-outline-primary btn-sm mt-2">
                            <i class="bi bi-plus-lg me-1"></i> Agregar Item
                        </button>
                    </div>
                    <div class="form-text" style="font-size: 0.78rem;">Agrega pasos específicos que el empleado debe completar.</div>
                </div>

                <div class="col-md-6">
                    <label for="archivo" class="form-label fw-semibold" style="font-size: 0.85rem;">Archivo Adjunto <span class="text-muted fw-normal">(Opcional)</span></label>
                    <div class="upload-wrapper p-3 border rounded-3 bg-light">
                        <input type="file" class="form-control" id="archivo" name="archivo" style="border-radius: 8px;">
                        <div class="form-text mt-2" style="font-size: 0.78rem;">
                            <i class="bi bi-info-circle me-1"></i> PDF, imágenes, ZIP/RAR, documentos. <strong>Máx 150MB</strong>.
                        </div>
                        
                        <!-- Barra de Progreso -->
                        <div id="uploadProgressContainer" class="mt-3 d-none">
                            <div class="d-flex justify-content-between align-items-center mb-1">
                                <span class="text-primary small fw-semibold" id="uploadStatusText">Subiendo archivo...</span>
                                <span class="text-muted small" id="uploadPercent">0%</span>
                            </div>
                            <div class="progress" style="height: 8px; border-radius: 4px;">
                                <div id="uploadProgressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 0%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2 mt-4 pt-3" style="border-top: 1px solid var(--border-color);">
                <button type="submit" id="btnSubmit" class="btn btn-primary-custom px-4">
                    <i class="bi bi-check-lg me-1"></i> Crear y Asignar Tarea
                </button>
                <a href="<?= BASE_URL ?>/tareas" class="btn btn-light" style="border-radius: 6px;">
                    <i class="bi bi-arrow-left me-1"></i> Cancelar
                </a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('formNuevaTarea');
    const btnSubmit = document.getElementById('btnSubmit');
    const progressContainer = document.getElementById('uploadProgressContainer');
    const progressBar = document.getElementById('uploadProgressBar');
    const percentText = document.getElementById('uploadPercent');
    const statusText = document.getElementById('uploadStatusText');
    const btnAddChecklistItem = document.getElementById('btnAddChecklistItem');
    const checklistItems = document.getElementById('checklistItems');

    // Agregar item al checklist
    btnAddChecklistItem.addEventListener('click', function() {
        const div = document.createElement('div');
        div.className = 'input-group mb-2 animate-fade-in';
        div.innerHTML = `
            <span class="input-group-text bg-white border-end-0"><i class="bi bi-circle text-muted"></i></span>
            <input type="text" name="checklist[]" class="form-control border-start-0" placeholder="Descripción del item...">
            <button type="button" class="btn btn-outline-danger btn-remove-item"><i class="bi bi-trash"></i></button>
        `;
        checklistItems.appendChild(div);

        // Enfocar el nuevo input
        div.querySelector('input').focus();

        // Eliminar item
        div.querySelector('.btn-remove-item').addEventListener('click', function() {
            div.classList.add('animate-fade-out');
            setTimeout(() => div.remove(), 300);
        });
    });

    // Ya no agregamos un primer item por defecto para que sea opcional
    // btnAddChecklistItem.click();

    form.addEventListener('submit', function(e) {
        const fileInput = document.getElementById('archivo');
        
        // Solo usar AJAX si hay un archivo seleccionado
        if (fileInput.files.length > 0) {
            e.preventDefault();
            
            const formData = new FormData(form);
            formData.append('is_ajax', '1');

            // Deshabilitar botón
            btnSubmit.disabled = true;
            btnSubmit.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>Procesando...';
            
            // Mostrar progreso
            progressContainer.classList.remove('d-none');
            
            const xhr = new XMLHttpRequest();
            
            // Monitor de progreso
            xhr.upload.addEventListener('progress', function(e) {
                if (e.lengthComputable) {
                    const percent = Math.round((e.loaded / e.total) * 100);
                    progressBar.style.width = percent + '%';
                    percentText.innerText = percent + '%';
                    
                    if (percent === 100) {
                        statusText.innerText = 'Finalizando subida y procesando...';
                        progressBar.classList.remove('progress-bar-animated');
                        progressBar.classList.add('bg-success');
                    }
                }
            });

            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 413) {
                        alert('Error: El archivo es demasiado grande para el servidor. Intente con uno más pequeño o contacte al administrador.');
                        resetButton();
                        return;
                    }
                    
                    try {
                        const response = JSON.parse(xhr.responseText);
                        if (response.success) {
                            window.location.href = '<?= BASE_URL ?>/tareas';
                        } else {
                            alert('Error: ' + (response.error || 'Ocurrió un error inesperado'));
                            resetButton();
                        }
                    } catch (e) {
                        console.error('Error al procesar respuesta:', xhr.responseText);
                        alert('Error crítico en el servidor. El archivo de 40MB+ podría estar excediendo los límites globales de PHP. He intentado aumentarlos automáticamente, por favor reintente.');
                        resetButton();
                    }
                }
            };

            xhr.open('POST', form.action, true);
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
            xhr.send(formData);
        }
    });

    function resetButton() {
        btnSubmit.disabled = false;
        btnSubmit.innerHTML = '<i class="bi bi-check-lg me-1"></i> Crear y Asignar Tarea';
        progressContainer.classList.add('d-none');
        progressBar.style.width = '0%';
        percentText.innerText = '0%';
        statusText.innerText = 'Subiendo archivo...';
        progressBar.classList.add('progress-bar-animated');
        progressBar.classList.remove('bg-success');
    }
});
</script>
User / IP	: 216.73.216.110
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64