Tul xxx Tul

Viewing: edit.php

<div class="card-custom">
    <div class="card-header-custom">
        <h5><i class="bi bi-pencil-square me-2"></i>Editar Tarea</h5>
    </div>
    <div class="card-body-custom">
        <form action="<?= BASE_URL ?>/tareas/update/<?= $tarea['id'] ?>" method="POST" enctype="multipart/form-data">
            <div class="row g-4">
                <!-- Información básica -->
                <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 value="<?= htmlspecialchars($tarea['titulo']) ?>" 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'] ?>" <?= $emp['id'] == $tarea['empleado_id'] ? 'selected' : '' ?> 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" style="border-radius: 8px; padding: 10px 14px; resize: vertical;"><?= htmlspecialchars($tarea['descripcion'] ?? '') ?></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">
                            <?php if (!empty($checklist)): ?>
                                <?php foreach ($checklist as $item): ?>
                                    <div class="input-group mb-2">
                                        <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" value="<?= htmlspecialchars($item['descripcion']) ?>" placeholder="Descripción del item...">
                                        <button type="button" class="btn btn-outline-danger btn-remove-item"><i class="bi bi-trash"></i></button>
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </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>

                <!-- Gestión de Archivos y Galería de Imágenes -->
                <div class="col-12">
                    <label class="form-label fw-semibold" style="font-size: 0.85rem;">Archivos y Galería de Imágenes</label>
                    <div class="border rounded-3 p-3 bg-light">
                        <!-- Archivos existentes -->
                        <?php if (!empty($archivos)): ?>
                            <div class="mb-3">
                                <h6 class="small fw-bold mb-2">Archivos Actuales:</h6>
                                <div class="d-flex flex-wrap gap-3">
                                    <?php foreach ($archivos as $archivo): ?>
                                        <?php 
                                            $ext = strtolower(pathinfo($archivo['ruta'], PATHINFO_EXTENSION));
                                            $isImg = in_array($ext, ['jpg', 'jpeg', 'png', 'gif', 'webp']);
                                            $fileUrl = BASE_URL . '/public/assets/uploads/tareas/' . $archivo['ruta'];
                                        ?>
                                        <div class="file-preview-card border rounded p-2 bg-white text-center position-relative" style="width: 100px;" id="archivo-<?= $archivo['id'] ?>">
                                            <button type="button" class="btn-delete-file-ajax position-absolute top-0 end-0 btn btn-danger btn-sm p-0 d-flex align-items-center justify-content-center" 
                                                    style="width: 20px; height: 20px; border-radius: 50%; margin-top: -5px; margin-right: -5px;"
                                                    data-id="<?= $archivo['id'] ?>" data-url="<?= BASE_URL ?>/tareas/deleteArchivo/<?= $archivo['id'] ?>">
                                                <i class="bi bi-x small"></i>
                                            </button>
                                            <?php if ($isImg): ?>
                                                <img src="<?= $fileUrl ?>" class="img-thumbnail img-clickable" style="width: 80px; height: 80px; object-fit: cover; cursor: zoom-in;" data-full="<?= $fileUrl ?>">
                                            <?php else: ?>
                                                <div class="d-flex align-items-center justify-content-center bg-light rounded" style="width: 80px; height: 80px;">
                                                    <i class="bi bi-file-earmark-text text-muted" style="font-size: 2rem;"></i>
                                                </div>
                                            <?php endif; ?>
                                            <div class="text-truncate small mt-1" title="<?= htmlspecialchars($archivo['nombre_archivo']) ?>">
                                                <?= htmlspecialchars($archivo['nombre_archivo']) ?>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        <?php endif; ?>

                        <!-- Subida de nuevos archivos -->
                        <div class="upload-area mt-2">
                            <label for="archivos" class="form-label small fw-bold">Subir nuevos archivos / imágenes:</label>
                            <input type="file" class="form-control" id="archivos" name="archivos[]" multiple accept="image/*,application/pdf,.zip,.rar">
                            <div id="imagePreviewGallery" class="d-flex flex-wrap gap-2 mt-3"></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" class="btn btn-primary-custom px-4">
                    <i class="bi bi-save me-1"></i> Guardar Cambios
                </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>

<!-- Modal Lightbox (Visor de imágenes) -->
<div class="modal fade" id="lightboxModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-xl">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0 text-center position-relative">
                <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-3" data-bs-dismiss="modal" aria-label="Close"></button>
                <img id="lightboxImg" src="" class="img-fluid rounded shadow-lg" style="max-height: 90vh;">
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const btnAddChecklistItem = document.getElementById('btnAddChecklistItem');
    const checklistItems = document.getElementById('checklistItems');
    const archivosInput = document.getElementById('archivos');
    const previewGallery = document.getElementById('imagePreviewGallery');
    const lightboxModal = new bootstrap.Modal(document.getElementById('lightboxModal'));
    const lightboxImg = document.getElementById('lightboxImg');

    // --- Checklist Logic ---
    function attachRemoveEvent(btn) {
        btn.addEventListener('click', function() {
            const div = this.closest('.input-group');
            div.classList.add('animate-fade-out');
            setTimeout(() => div.remove(), 300);
        });
    }

    document.querySelectorAll('.btn-remove-item').forEach(attachRemoveEvent);

    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);
        div.querySelector('input').focus();
        attachRemoveEvent(div.querySelector('.btn-remove-item'));
    });

    // --- AJAX File Deletion ---
    document.querySelectorAll('.btn-delete-file-ajax').forEach(btn => {
        btn.addEventListener('click', function() {
            if (!confirm('¿Estás seguro de eliminar este archivo permanentemente?')) return;
            
            const url = this.getAttribute('data-url');
            const fileId = this.getAttribute('data-id');
            const card = document.getElementById(`archivo-${fileId}`);

            fetch(url, {
                method: 'POST',
                headers: { 'X-Requested-With': 'XMLHttpRequest' }
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    card.style.opacity = '0';
                    card.style.transform = 'scale(0.8)';
                    setTimeout(() => card.remove(), 300);
                } else {
                    alert('Error: ' + data.error);
                }
            })
            .catch(err => console.error(err));
        });
    });

    // --- Image Preview Logic ---
    archivosInput.addEventListener('change', function() {
        previewGallery.innerHTML = '';
        if (this.files) {
            Array.from(this.files).forEach(file => {
                if (file.type.startsWith('image/')) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        const div = document.createElement('div');
                        div.className = 'position-relative border rounded p-1 bg-white';
                        div.style.width = '70px';
                        div.style.height = '70px';
                        div.innerHTML = `
                            <img src="${e.target.result}" class="w-100 h-100 object-fit-cover rounded" style="object-fit: cover;">
                            <span class="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white" style="font-size: 8px; text-align: center;">Nuevo</span>
                        `;
                        previewGallery.appendChild(div);
                    }
                    reader.readAsDataURL(file);
                }
            });
        }
    });

    // --- Lightbox Viewer ---
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('img-clickable')) {
            const fullUrl = e.target.getAttribute('data-full');
            lightboxImg.src = fullUrl;
            lightboxModal.show();
        }
    });
});
</script>

<style>
.object-fit-cover { object-fit: cover; }
.img-clickable:hover { transform: scale(1.05); transition: all 0.2s; }
.animate-fade-in { animation: fadeIn 0.3s ease-in; }
.animate-fade-out { animation: fadeOut 0.3s ease-out; opacity: 0; transform: scale(0.9); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
</style>
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