Tul xxx Tul

Viewing: timeline.php

<?php
$db = getDB();
$events = $db->query('SELECT * FROM timeline_events ORDER BY sort_order ASC')->fetchAll();
?>

<div class="admin-card">
    <div class="card-header">
        <div class="card-title"><i class="ph-fill ph-clock-countdown"></i> Eventos del Itinerario</div>
        <button class="btn btn-primary" onclick="openTimelineModal()">
            <i class="ph-bold ph-plus"></i> Nuevo Evento
        </button>
    </div>
    <table class="admin-table">
        <thead>
            <tr><th>Orden</th><th>Hora</th><th>Icono</th><th>Título</th><th>Acciones</th></tr>
        </thead>
        <tbody>
            <?php foreach ($events as $ev): ?>
            <tr>
                <td><span class="badge badge-gold"><?= $ev['sort_order'] ?></span></td>
                <td style="font-weight:600;color:var(--admin-gold);"><?= htmlspecialchars($ev['event_time']) ?></td>
                <td><i class="<?= htmlspecialchars($ev['icon']) ?>" style="font-size:1.3rem;color:var(--admin-purple-light)"></i></td>
                <td><?= htmlspecialchars($ev['title']) ?></td>
                <td>
                    <div style="display:flex;gap:.4rem;">
                        <button class="btn-icon" onclick="editTimeline(<?= $ev['id'] ?>,'<?= htmlspecialchars(addslashes($ev['event_time'])) ?>','<?= htmlspecialchars(addslashes($ev['icon'])) ?>','<?= htmlspecialchars(addslashes($ev['title'])) ?>',<?= $ev['sort_order'] ?>)">
                            <i class="ph-bold ph-pencil-simple"></i>
                        </button>
                        <button class="btn-icon danger" onclick="confirmDelete('evento',<?= $ev['id'] ?>, deleteTimeline)">
                            <i class="ph-bold ph-trash"></i>
                        </button>
                    </div>
                </td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<!-- Modal -->
<div class="admin-modal" id="timelineModal">
    <div class="modal-dialog">
        <div class="modal-header">
            <div class="modal-title"><i class="ph-fill ph-clock"></i> <span id="tlModalTitle">Nuevo Evento</span></div>
            <button class="modal-close" onclick="closeModal('timelineModal')"><i class="ph-bold ph-x"></i></button>
        </div>
        <form id="timelineForm" onsubmit="saveTimeline(event)">
            <div class="modal-body">
                <input type="hidden" id="tlId" value="">
                <div class="form-row">
                    <div class="form-group">
                        <label class="form-label">Hora</label>
                        <input type="text" id="tlTime" class="form-control" placeholder="8:00 PM" required>
                    </div>
                    <div class="form-group">
                        <label class="form-label">Orden</label>
                        <input type="number" id="tlOrder" class="form-control" value="1" min="1">
                    </div>
                </div>
                <div class="form-group">
                    <label class="form-label">Título</label>
                    <input type="text" id="tlTitle" class="form-control" placeholder="Nombre del evento" required>
                </div>
                <div class="form-group">
                    <label class="form-label">Icono (clase Phosphor)</label>
                    <input type="text" id="tlIcon" class="form-control" value="ph-fill ph-star" placeholder="ph-fill ph-star">
                    <small style="color:var(--admin-text-muted);font-size:.75rem;">Ejemplo: ph-fill ph-church, ph-fill ph-wine, ph-fill ph-music-notes</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" onclick="closeModal('timelineModal')">Cancelar</button>
                <button type="submit" class="btn btn-primary">Guardar</button>
            </div>
        </form>
    </div>
</div>

<script>
function openTimelineModal() {
    document.getElementById('timelineForm').reset();
    document.getElementById('tlId').value = '';
    document.getElementById('tlModalTitle').textContent = 'Nuevo Evento';
    openModal('timelineModal');
}

function editTimeline(id, time, icon, title, order) {
    document.getElementById('tlId').value = id;
    document.getElementById('tlTime').value = time;
    document.getElementById('tlIcon').value = icon;
    document.getElementById('tlTitle').value = title;
    document.getElementById('tlOrder').value = order;
    document.getElementById('tlModalTitle').textContent = 'Editar Evento';
    openModal('timelineModal');
}

async function saveTimeline(e) {
    e.preventDefault();
    const result = await adminFetch('save_timeline', {
        id: document.getElementById('tlId').value,
        event_time: document.getElementById('tlTime').value,
        icon: document.getElementById('tlIcon').value,
        title: document.getElementById('tlTitle').value,
        sort_order: document.getElementById('tlOrder').value
    });
    if (result.success) { closeModal('timelineModal'); setTimeout(()=>location.reload(),500); }
}

async function deleteTimeline(id) {
    const result = await adminFetch('delete_timeline', { id });
    if (result.success) setTimeout(()=>location.reload(),500);
}
</script>
User / IP	: 216.73.216.159
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