File "cursos.php"

Full Path: C:/wamp64/www/Formaciones/Vistas/admin/cursos.php
File size: 7.25 KB
MIME-type: text/x-php
Charset: utf-8

<?php // Vistas/admin/cursos.php ?>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
    <h1 style="margin: 0; text-shadow: 0 2px 4px rgba(0,0,0,0.1);">Gestión de Cursos</h1>
    <button class="btn-primary" onclick="abrirModalNuevo()">
        ➕ Crear Nuevo Curso
    </button>
</div>

<section class="card">
    <div class="table-responsive">
        <table class="table">
            <thead>
                <tr>
                    <th>Título</th>
                    <th>Duración</th>
                    <th>Límite</th>
                    <th>Estado</th>
                    <th style="text-align: center;">Acciones</th>
                </tr>
            </thead>
            <tbody>
                <?php while($c = $cursos->fetch_assoc()): ?>
                <tr>
                    <td><strong><?= h($c['title']) ?></strong></td>
                    <td><?= (int)$c['duracion'] ?> Horas</td>
                    <td><?= $c['limite_at'] ? date('d/m/Y', strtotime($c['limite_at'])) : '♾️ Sin límite' ?></td>
                    <td>
                        <span class="badge" style="background: <?= $c['status'] == 'active' ? '#e6fffa' : '#fff5f5' ?>; color: <?= $c['status'] == 'active' ? '#047481' : '#c53030' ?>;">
                            <?= $c['status'] == 'active' ? 'Activo' : 'Inactivo' ?>
                        </span>
                    </td>
                    <td style="text-align: center; display: flex; gap: 10px; justify-content: center;">
                        <button class="btn-primary" 
                                style="padding: 5px 12px; font-size: 0.8rem;"
                                onclick='abrirModalEditar(<?= json_encode($c) ?>)'>
                                ✏️ Editar
                        </button>
                        <a href="index.php?r=admin/cursos/borrar&id=<?= $c['id'] ?>" 
                           class="btn-primary" 
                           style="padding: 5px 12px; font-size: 0.8rem; background: #e74c3c;"
                           onclick="return confirm('¿Seguro que deseas eliminar este curso?')">
                           🗑️
                        </a>
                    </td>
                </tr>
                <?php endwhile; ?>
            </tbody>
        </table>
    </div>

    <?php if (isset($total_paginas) && $total_paginas > 1): ?>
    <div class="pagination-container">
        <?php if ($pagina_actual > 1): ?>
            <a href="index.php?r=admin/cursos&p=<?= $pagina_actual - 1 ?>" class="btn-page">« Anterior</a>
        <?php endif; ?>

        <?php for ($i = 1; $i <= $total_paginas; $i++): ?>
            <a href="index.php?r=admin/cursos&p=<?= $i ?>" 
               class="btn-page <?= $i == $pagina_actual ? 'active' : '' ?>">
               <?= $i ?>
            </a>
        <?php endfor; ?>

        <?php if ($pagina_actual < $total_paginas): ?>
            <a href="index.php?r=admin/cursos&p=<?= $pagina_actual + 1 ?>" class="btn-page">Siguiente »</a>
        <?php endif; ?>
    </div>
    <?php endif; ?>
</section>

<div id="courseModal" class="modal" style="display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); align-items:center; justify-content:center;">
    <div class="card" style="width: 500px; max-width: 90%; margin: auto;">
        <h2 id="modalTitle" style="color: var(--accent-1);">Nuevo Curso</h2>
        <form method="post" action="index.php?r=admin/cursos/guardar">
            <input type="hidden" name="course_id" id="course_id">
            
            <div class="form-group">
                <label>Título del Curso</label>
                <input type="text" name="title" id="title" required>
            </div>
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px;">
                <div class="form-group">
                    <label>Duración (Horas)</label>
                    <input type="number" name="duracion" id="duracion" value="0">
                </div>
                <div class="form-group">
                    <label>Fecha Límite</label>
                    <input type="date" name="limite_at" id="limite_at">
                </div>
            </div>

            <div class="form-group">
                <label>Descripción</label>
                <textarea name="description" id="description" rows="3" style="width:100%; border-radius:10px; border:1px solid #ddd; padding:10px;"></textarea>
            </div>

            <div class="form-group">
                <label>Estado</label>
                <select name="status" id="status">
                    <option value="active">Activo</option>
                    <option value="inactive">Inactivo</option>
                </select>
            </div>

            <div style="display: flex; gap: 10px; margin-top: 20px;">
                <button type="submit" class="btn-primary" style="flex:1;">💾 Guardar</button>
                <button type="button" class="btn-primary" style="background:#ccc; flex:1;" onclick="cerrarModal()">Cancelar</button>
            </div>
        </form>
    </div>
</div>

<style>
    /* Estilos para la paginación (Consistente con Usuarios) */
    .pagination-container {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
        padding-bottom: 10px;
    }

    .btn-page {
        padding: 6px 12px;
        border: 1px solid #eee;
        border-radius: 6px;
        text-decoration: none;
        color: #666;
        font-size: 0.85rem;
        background: white;
        transition: all 0.2s;
    }

    .btn-page:hover {
        background: #fff3ec;
        color: #f37021;
        border-color: #f37021;
    }

    .btn-page.active {
        background: #f37021;
        color: white;
        border-color: #f37021;
    }
</style>

<script>
// (Tus scripts actuales se mantienen sin cambios)
const modal = document.getElementById('courseModal');

function abrirModalNuevo() {
    document.getElementById('modalTitle').innerText = "✨ Nuevo Curso";
    document.getElementById('course_id').value = "";
    document.getElementById('title').value = "";
    document.getElementById('duracion').value = "0";
    document.getElementById('description').value = "";
    document.getElementById('limite_at').value = "";
    document.getElementById('status').value = "active";
    modal.style.display = 'flex';
}

function abrirModalEditar(curso) {
    document.getElementById('modalTitle').innerText = "✏️ Editar Curso";
    document.getElementById('course_id').value = curso.id;
    document.getElementById('title').value = curso.title;
    document.getElementById('duracion').value = curso.duracion;
    document.getElementById('description').value = curso.description;
    document.getElementById('status').value = curso.status;
    
    if(curso.limite_at) {
        document.getElementById('limite_at').value = curso.limite_at.split(' ')[0];
    }
    modal.style.display = 'flex';
}

function cerrarModal() {
    modal.style.display = 'none';
}

window.onclick = function(event) {
    if (event.target == modal) cerrarModal();
}
</script>