Tul xxx Tul

Viewing: show.php

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

$estadoConfig = [
    'pendiente'   => ['bg' => 'rgba(239,71,111,0.1)',  'color' => '#ef476f', 'icon' => 'bi-clock',       'label' => 'Pendiente'],
    'en_progreso' => ['bg' => 'rgba(255,209,102,0.15)','color' => '#d97706', 'icon' => 'bi-arrow-repeat', 'label' => 'Progreso'],
    'completada'  => ['bg' => 'rgba(6,214,160,0.1)',   'color' => '#059669', 'icon' => 'bi-check-circle', 'label' => 'Completada'],
];
$ec = $estadoConfig[$tarea['estado']] ?? $estadoConfig['pendiente'];
$isAdmin = Auth::isAdmin();
?>

<!-- Breadcrumb -->
<nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb" style="font-size: 0.85rem;">
        <?php if ($isAdmin): ?>
        <li class="breadcrumb-item"><a href="<?= BASE_URL ?>/tareas" style="color: var(--primary);">Tareas</a></li>
        <?php else: ?>
        <li class="breadcrumb-item"><a href="<?= BASE_URL ?>/tareas/misTareas" style="color: var(--primary);">Mis Tareas</a></li>
        <?php endif; ?>
        <li class="breadcrumb-item active"><?= htmlspecialchars($tarea['titulo']) ?></li>
    </ol>
</nav>

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

<?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="row g-4">
    <!-- Panel principal -->
    <div class="col-lg-8">
        <!-- Información de la tarea -->
        <div class="card-custom mb-4">
            <div class="card-header-custom">
                <div class="d-flex align-items-center gap-3">
                    <div style="width: 10px; height: 10px; border-radius: 50%; background: <?= $ec['color'] ?>;"></div>
                    <h5 style="margin: 0;"><?= htmlspecialchars($tarea['titulo']) ?></h5>
                </div>
                <span class="badge" style="background: <?= $ec['bg'] ?>; color: <?= $ec['color'] ?>; font-size: 0.78rem; padding: 6px 14px; border-radius: 20px; font-weight: 600;">
                    <i class="bi <?= $ec['icon'] ?> me-1"></i><?= $ec['label'] ?>
                </span>
            </div>
            <div class="card-body-custom">
                <?php if (!empty($tarea['descripcion'])): ?>
                <div style="background: var(--bg-body); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px;">
                    <div style="font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;">
                        <i class="bi bi-text-paragraph me-1"></i>Descripción
                    </div>
                    <p style="font-size: 0.9rem; line-height: 1.7; margin: 0; white-space: pre-line;"><?= htmlspecialchars($tarea['descripcion']) ?></p>
                </div>
                <?php endif; ?>

                <!-- Checklist de Tareas -->
                <div class="mb-4">
                    <div style="font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;">
                        <i class="bi bi-card-checklist me-1"></i>Checklist de Seguimiento
                    </div>
                    <div class="checklist-wrapper border rounded-3 p-2 bg-light">
                        <?php if (empty($checklist)): ?>
                            <div class="text-center py-2">
                                <span class="text-muted small">No hay items en el checklist</span>
                            </div>
                        <?php else: ?>
                            <ul class="list-group list-group-flush bg-transparent">
                                <?php foreach ($checklist as $item): ?>
                                    <li class="list-group-item bg-transparent d-flex align-items-center gap-3 border-0 py-2">
                                        <div class="form-check">
                                            <input class="form-check-input checklist-toggle" type="checkbox" 
                                                   value="<?= $item['id'] ?>" 
                                                   id="check-<?= $item['id'] ?>"
                                                   <?= $item['completado'] ? 'checked' : '' ?>
                                                   data-url="<?= BASE_URL ?>/tareas/updateChecklistItem/<?= $item['id'] ?>">
                                        </div>
                                        <label class="form-check-label flex-grow-1 <?= $item['completado'] ? 'text-decoration-line-through text-muted' : '' ?>" 
                                               for="check-<?= $item['id'] ?>" 
                                               style="font-size: 0.9rem; cursor: pointer;">
                                            <?= htmlspecialchars($item['descripcion']) ?>
                                        </label>
                                    </li>
                                <?php endforeach; ?>
                            </ul>
                        <?php endif; ?>
                    </div>
                </div>

                <!-- Asignado a -->
                <div class="mb-4">
                    <div style="font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;">
                        <i class="bi bi-person-badge me-1"></i>Asignado a
                    </div>
                    <div class="d-flex align-items-center gap-3 p-3 border rounded-3 bg-light">
                        <div class="user-avatar-large" style="width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: var(--primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); flex-shrink: 0;">
                            <?php if (!empty($tarea['empleado_foto'])): ?>
                                <img src="<?= BASE_URL ?>/public/assets/uploads/empleados/<?= htmlspecialchars($tarea['empleado_foto']) ?>" style="width: 100%; height: 100%; object-fit: cover;">
                            <?php else: ?>
                                <span style="color: #fff; font-weight: 700; font-size: 1.2rem;">
                                    <?= strtoupper(substr($tarea['empleado_nombre'], 0, 1)) ?>
                                </span>
                            <?php endif; ?>
                        </div>
                        <div>
                            <div style="font-weight: 700; font-size: 1rem; color: #111827; line-height: 1.2;"><?= htmlspecialchars($tarea['empleado_nombre']) ?></div>
                            <?php if (!empty($tarea['empleado_cargo'])): ?>
                                <div style="font-size: 0.8rem; color: var(--text-muted); text-transform: none; font-weight: normal;"><?= htmlspecialchars($tarea['empleado_cargo']) ?></div>
                            <?php endif; ?>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Archivos Adjuntos -->
        <div class="card-custom mb-4">
            <div class="card-header-custom">
                <h5><i class="bi bi-paperclip me-2"></i>Archivos Adjuntos</h5>
                <?php if (!empty($archivos)): ?>
                <span class="badge bg-primary" style="font-size: 0.72rem;"><?= count($archivos) ?></span>
                <?php endif; ?>
            </div>
            <div class="card-body-custom">
                <?php if (empty($archivos)): ?>
                    <div class="text-center py-3">
                        <i class="bi bi-folder2-open text-muted" style="font-size: 1.5rem;"></i>
                        <p class="text-muted mt-2 mb-0" style="font-size: 0.85rem;">Sin archivos adjuntos</p>
                    </div>
                <?php else: ?>
                    <div class="d-flex flex-column gap-2">
                        <?php foreach ($archivos as $a): ?>
                        <?php
                            $ext = strtolower(pathinfo($a['nombre_archivo'], PATHINFO_EXTENSION));
                            $iconMap = [
                                'pdf'  => ['bi-file-earmark-pdf',  '#ef476f'],
                                'doc'  => ['bi-file-earmark-word', '#4361ee'],
                                'docx' => ['bi-file-earmark-word', '#4361ee'],
                                'xls'  => ['bi-file-earmark-excel','#06d6a0'],
                                'xlsx' => ['bi-file-earmark-excel','#06d6a0'],
                                'zip'  => ['bi-file-earmark-zip',  '#d97706'],
                                'rar'  => ['bi-file-earmark-zip',  '#d97706'],
                                'jpg'  => ['bi-file-earmark-image','#7209b7'],
                                'jpeg' => ['bi-file-earmark-image','#7209b7'],
                                'png'  => ['bi-file-earmark-image','#7209b7'],
                                'gif'  => ['bi-file-earmark-image','#7209b7'],
                                'webp' => ['bi-file-earmark-image','#7209b7'],
                                'txt'  => ['bi-file-earmark-text', '#636e72'],
                            ];
                            $fi = $iconMap[$ext] ?? ['bi-file-earmark', '#636e72'];
                        ?>
                        <div class="d-flex align-items-center justify-content-between" style="background: var(--bg-body); border-radius: 8px; padding: 10px 14px;">
                            <div class="d-flex align-items-center gap-3">
                                <i class="bi <?= $fi[0] ?>" style="font-size: 1.3rem; color: <?= $fi[1] ?>;"></i>
                                <div>
                                    <div style="font-weight: 500; font-size: 0.85rem;"><?= htmlspecialchars($a['nombre_archivo']) ?></div>
                                    <div style="font-size: 0.72rem; color: var(--text-muted);"><?= date('d/m/Y h:i A', strtotime($a['fecha_subida'])) ?></div>
                                </div>
                            </div>
                            <a href="<?= BASE_URL ?>/assets/uploads/tareas/<?= htmlspecialchars($a['ruta']) ?>"
                               class="btn btn-sm btn-outline-primary" target="_blank"
                               style="border-radius: 6px; padding: 4px 10px; font-size: 0.78rem;">
                                <i class="bi bi-download me-1"></i>Descargar
                            </a>
                        </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <!-- Formulario subir archivo -->
                <div class="mt-3 pt-3" style="border-top: 1px solid var(--border-color);">
                    <form action="<?= BASE_URL ?>/tareas/subirArchivo/<?= $tarea['id'] ?>" method="POST" enctype="multipart/form-data">
                        <div class="d-flex gap-2 align-items-end">
                            <div class="flex-grow-1">
                                <label class="form-label fw-semibold" style="font-size: 0.82rem;">Subir Archivo</label>
                                <input type="file" class="form-control" name="archivo" required style="border-radius: 8px; padding: 8px 12px; font-size: 0.85rem;">
                            </div>
                            <button type="submit" class="btn btn-primary-custom" style="height: 44px; font-size: 0.82rem;">
                                <i class="bi bi-upload me-1"></i> Subir
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Panel lateral -->
    <div class="col-lg-4">
        <!-- Cambiar estado -->
        <div class="card-custom mb-4">
            <div class="card-header-custom">
                <h5><i class="bi bi-arrow-left-right me-2"></i>Cambiar Estado</h5>
            </div>
            <div class="card-body-custom">
                <div class="d-flex flex-column gap-2">
                    <?php
                    $estados = [
                        'pendiente'   => ['label' => 'Pendiente',   'icon' => 'bi-clock',       'color' => '#ef476f', 'bg' => 'rgba(239,71,111,0.08)'],
                        'en_progreso' => ['label' => 'Progreso', 'icon' => 'bi-arrow-repeat','color' => '#d97706', 'bg' => 'rgba(255,209,102,0.1)'],
                        'completada'  => ['label' => 'Completada',  'icon' => 'bi-check-circle','color' => '#059669', 'bg' => 'rgba(6,214,160,0.08)'],
                    ];
                    foreach ($estados as $estKey => $est): ?>
                    <form action="<?= BASE_URL ?>/tareas/updateEstado/<?= $tarea['id'] ?>" method="POST">
                        <input type="hidden" name="estado" value="<?= $estKey ?>">
                        <button type="submit" class="btn w-100 text-start d-flex align-items-center gap-2"
                                style="border-radius: 8px; padding: 10px 14px; font-size: 0.85rem; border: 1px solid var(--border-color);
                                       <?= $tarea['estado'] === $estKey ? 'background: ' . $est['bg'] . '; border-color: ' . $est['color'] . '; font-weight: 600;' : '' ?>"
                                <?= $tarea['estado'] === $estKey ? 'disabled' : '' ?>>
                            <i class="bi <?= $est['icon'] ?>" style="color: <?= $est['color'] ?>;"></i>
                            <span><?= $est['label'] ?></span>
                            <?php if ($tarea['estado'] === $estKey): ?>
                                <i class="bi bi-check-lg ms-auto" style="color: <?= $est['color'] ?>;"></i>
                            <?php endif; ?>
                        </button>
                    </form>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>

        <!-- Info rápida -->
        <div class="card-custom">
            <div class="card-header-custom">
                <h5><i class="bi bi-info-circle me-2"></i>Información</h5>
            </div>
            <div class="card-body-custom">
                <div class="d-flex flex-column gap-3">
                    <div>
                        <div style="font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;">Empleado</div>
                        <div style="font-weight: 600; font-size: 0.9rem;"><?= htmlspecialchars($tarea['empleado_nombre']) ?></div>
                        <?php if (!empty($tarea['empleado_cargo'])): ?>
                        <div style="font-size: 0.78rem; color: var(--text-secondary);"><?= htmlspecialchars($tarea['empleado_cargo']) ?></div>
                        <?php endif; ?>
                    </div>
                    <div>
                        <div style="font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;">Creada</div>
                        <div style="font-weight: 500; font-size: 0.88rem;"><?= date('d/m/Y', strtotime($tarea['fecha_creacion'])) ?></div>
                        <div style="font-size: 0.78rem; color: var(--text-secondary);"><?= date('h:i A', strtotime($tarea['fecha_creacion'])) ?></div>
                    </div>
                    <div>
                        <div style="font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px;">Archivos</div>
                        <div style="font-weight: 500; font-size: 0.88rem;"><?= count($archivos) ?> archivo<?= count($archivos) !== 1 ? 's' : '' ?></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const toggles = document.querySelectorAll('.checklist-toggle');
    
    toggles.forEach(toggle => {
        toggle.addEventListener('change', function() {
            const isChecked = this.checked ? 1 : 0;
            const url = this.getAttribute('data-url');
            const label = this.closest('.list-group-item').querySelector('.form-check-label');
            
            // Efecto visual inmediato
            if (isChecked) {
                label.classList.add('text-decoration-line-through', 'text-muted');
            } else {
                label.classList.remove('text-decoration-line-through', 'text-muted');
            }

            // Guardar en BD vía AJAX
            const formData = new FormData();
            formData.append('completado', isChecked);

            fetch(url, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => response.json())
            .then(data => {
                if (!data.success) {
                    alert('Error al actualizar el item: ' + (data.error || 'Error desconocido'));
                    // Revertir si falla
                    this.checked = !this.checked;
                    label.classList.toggle('text-decoration-line-through');
                    label.classList.toggle('text-muted');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Error de conexión al actualizar el item');
                this.checked = !this.checked;
                label.classList.toggle('text-decoration-line-through');
                label.classList.toggle('text-muted');
            });
        });
    });
});
</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