34849-vm/cobertura_xpress.php

<?php
session_start();
if (!isset($_SESSION['user_id'])) {
    header("Location: login.php");
    exit;
}
require_once 'db/config.php';
$pageTitle = "Cobertura Xpress";
require_once 'layout_header.php';

// Fetch all items from the 'cobertura_xpress' table
$db = db();
$stmt = $db->query("SELECT id, titulo, texto FROM cobertura_xpress ORDER BY id ASC");
$coberturas = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<style>
    @keyframes saved {
        0% { background-color: #ffffff; }
        30% { background-color: #d4edda; }
        100% { background-color: #ffffff; }
    }
    .saved-animation {
        animation: saved 1.5s ease-in-out;
    }
    [contenteditable="true"]:focus {
        outline: 2px solid #007bff;
        background-color: #f8f9fa;
    }
    .action-controls .btn {
        padding: 0.2rem 0.5rem;
        font-size: 0.8rem;
    }
</style>

<div class="container-fluid">
    <h1 class="mt-4">Textos de Cobertura Xpress</h1>

    <?php if (isset($_SESSION['message'])): ?>
        <div class="alert alert-success">
            <?php echo $_SESSION['message']; unset($_SESSION['message']); ?>
        </div>
    <?php endif; ?>
    <?php if (isset($_SESSION['error'])): ?>
        <div class="alert alert-danger">
            <?php echo $_SESSION['error']; unset($_SESSION['error']); ?>
        </div>
    <?php endif; ?>

    <div class="card mt-4">
        <div class="card-body">
            <?php
            $banner_path = 'assets/uploads/cobertura_xpress_banner.jpg';
            if (file_exists($banner_path)) {
                echo '<img src="' . $banner_path . '?t=' . time() . '" alt="Banner de Cobertura Xpress" class="img-fluid rounded">';
            } else {
                echo '<p>No hay imagen de cabecera todavía.</p>';
            }
            ?>
        </div>
    </div>

    <div class="card mt-4">
        <div class="card-header">
            Coberturas Xpress Guardadas
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>Ciudad</th>
                            <th>Cobertura</th>
                            <th><!-- Columna para botón de guardar en nuevas filas --></th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($coberturas as $item): ?>
                            <tr data-id="<?php echo $item['id']; ?>">
                                <td contenteditable="true" class="editable-cell" data-field="titulo" style="font-weight: bold;"><?php echo htmlspecialchars($item['titulo']); ?></td>
                                <td contenteditable="true" class="editable-cell" data-field="texto" style="font-weight: bold;"><?php echo htmlspecialchars($item['texto']); ?></td>
                                <td><!-- Celda vacía para alinear con la cabecera --></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <?php if ($_SESSION['user_role'] !== 'Asesor'): ?>
        <div class="card-footer">
            <button class="btn btn-primary" id="addRowBtn">Agregar Fila</button>
        </div>
        <?php endif; ?>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const tableBody = document.querySelector('.table-bordered tbody');

    // --- INLINE EDITING ---
    tableBody.addEventListener('blur', function(e) {
        if (e.target.classList.contains('editable-cell')) {
            const cell = e.target;
            const id = cell.closest('tr').dataset.id;
            if (!id) return; // No guardar celdas de filas nuevas que aún no se han creado en DB

            const field = cell.dataset.field;
            const value = cell.innerText;

            const formData = new FormData();
            formData.append('id', id);
            formData.append('field', field);
            formData.append('value', value);

            fetch('save_cobertura_xpress.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    if (data.deleted) {
                        // Si la fila fue eliminada en el servidor, la quitamos de la vista
                        cell.closest('tr').remove();
                    } else {
                        cell.classList.add('saved-animation');
                        setTimeout(() => cell.classList.remove('saved-animation'), 1500);
                    }
                } else {
                    alert('Error al guardar: ' + (data.error || 'Error desconocido'));
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Ocurrió un error de red.');
            });
        }
    }, true); // Use capturing to get the blur event

    // --- ADD NEW ROW ---
    document.getElementById('addRowBtn').addEventListener('click', function() {
        const newRow = document.createElement('tr');
        newRow.innerHTML = `
            <td contenteditable="true" class="new-cobertura-titulo" placeholder="Nueva Ciudad"></td>
            <td contenteditable="true" class="new-cobertura-texto" placeholder="Nueva Cobertura"></td>
            <td>
                <button class="btn btn-success btn-sm save-new-row">Guardar</button>
            </td>
        `;
        tableBody.appendChild(newRow);
        newRow.querySelector('.new-cobertura-titulo').focus();
    });

    // --- SAVE NEW ROW ---
    tableBody.addEventListener('click', function(e) {
        if (e.target.classList.contains('save-new-row')) {
            const saveButton = e.target;
            const newRow = saveButton.closest('tr');
            const titulo = newRow.querySelector('.new-cobertura-titulo').innerText.trim();
            const texto = newRow.querySelector('.new-cobertura-texto').innerText.trim();

            if (!titulo && !texto) {
                // Si ambos están vacíos, simplemente quita la fila nueva sin guardar
                newRow.remove();
                return;
            }

            if (!titulo) {
                alert('Por favor, introduce un título.');
                return;
            }

            saveButton.disabled = true;
            saveButton.innerText = 'Guardando...';

            const formData = new FormData();
            formData.append('titulo', titulo);
            formData.append('texto', texto);

            fetch('add_cobertura_xpress.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    location.reload();
                } else {
                    alert('Error al guardar: ' + (data.error || 'Error desconocido'));
                    saveButton.disabled = false;
                    saveButton.innerText = 'Guardar';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                alert('Ocurrió un error de red.');
                saveButton.disabled = false;
                saveButton.innerText = 'Guardar';
            });
        }
    });
});
</script>

<?php
require_once 'layout_footer.php';
?>