34849-vm/kanban.php

<?php
session_start();
require_once 'db/config.php';

if (!isset($_SESSION['username'])) {
    header("Location: login.php");
    exit();
}

$username = $_SESSION['username'];
$role = $_SESSION['role'];

// Conectar a la base de datos
$pdo = db();

// Obtener la configuración de las columnas del Kanban
$stmt = $pdo->query("SELECT kanban_columns FROM configuracion WHERE id = 1");
$config = $stmt->fetch(PDO::FETCH_ASSOC);

$columns_to_display = [];
if ($config && !empty($config['kanban_columns'])) {
    $column_ids = json_decode($config['kanban_columns'], true);
    if (!empty($column_ids)) {
        $placeholders = implode(',', array_fill(0, count($column_ids), '?'));
        $stmt = $pdo->prepare("SELECT id, nombre FROM kanban_columns WHERE id IN ($placeholders)");
        $stmt->execute($column_ids);
        $columns_to_display = $stmt->fetchAll(PDO::FETCH_ASSOC);
    }
}

if (empty($columns_to_display)) {
    $stmt = $pdo->query("SELECT id, nombre FROM kanban_columns");
    $columns_to_display = $stmt->fetchAll(PDO::FETCH_ASSOC);
}

// Obtener todos los productos de información
$stmt = $pdo->query("SELECT ip.*, p.nombre as producto_nombre FROM info_productos ip LEFT JOIN products p ON ip.product_id = p.id");
$items = $stmt->fetchAll(PDO::FETCH_ASSOC);

$pageTitle = "Kanban de Productos";
$pageDescription = "Tablero Kanban para visualizar la información de los productos.";

include 'layout_header.php';
?>

<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h1><?php echo $pageTitle; ?></h1>
            </div>
            <p><?php echo $pageDescription; ?></p>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="kanban-board-container">
                <div class="kanban-board">
                    <?php foreach ($columns_to_display as $column): ?>
                        <div class="kanban-column" data-column-id="<?php echo $column['nombre']; ?>">
                            <div class="kanban-column-header">
                                <h5><?php echo htmlspecialchars($column['nombre']); ?></h5>
                            </div>
                            <div class="kanban-column-body">
                                <?php foreach ($items as $item): ?>
                                    <?php if ($item['estado_kanban'] == $column['nombre']): ?>
                                        <div class="kanban-card" data-item-id="<?php echo $item['id']; ?>">
                                            <div class="card-body">
                                                <?php if (!empty($item['imagen'])): ?>
                                                    <img src="assets/uploads/info_images/<?php echo htmlspecialchars($item['imagen']); ?>" class="card-img-top mb-2" alt="Imagen del producto">
                                                <?php endif; ?>
                                                <h6 class="card-title"><?php echo htmlspecialchars($item['titulo']); ?></h6>
                                                <p class="card-text small"><?php echo htmlspecialchars($item['producto_nombre']); ?></p>
                                                <button class="btn btn-sm btn-secondary" onclick="copiarTexto(this)">Copiar Texto</button>
                                                <div class="texto-a-copiar" style="display:none;"><?php echo htmlspecialchars($item['texto']); ?></div>
                                            </div>
                                        </div>
                                    <?php endif; ?>
                                <?php endforeach; ?>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .kanban-board-container {
        overflow-x: auto;
        padding-bottom: 15px;
    }
    .kanban-board {
        display: flex;
        gap: 15px;
        min-width: max-content;
    }
    .kanban-column {
        width: 300px;
        flex-shrink: 0;
        background-color: #f4f5f7;
        border-radius: 3px;
    }
    .kanban-column-header {
        padding: 10px 15px;
        border-bottom: 1px solid #ddd;
    }
    .kanban-column-body {
        padding: 10px;
        min-height: 400px;
        overflow-y: auto;
    }
    .kanban-card {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 3px;
        padding: 10px;
        margin-bottom: 10px;
        cursor: grab;
    }
</style>

<script>
function copiarTexto(button) {
    var cardBody = button.closest('.card-body');
    var texto = cardBody.querySelector('.texto-a-copiar').innerText;
    
    var tempInput = document.createElement('textarea');
    tempInput.style.position = 'absolute';
    tempInput.style.left = '-9999px';
    tempInput.value = texto;
    document.body.appendChild(tempInput);
    tempInput.select();
    document.execCommand('copy');
    document.body.removeChild(tempInput);
    
    button.innerText = 'Copiado!';
    setTimeout(function() {
        button.innerText = 'Copiar Texto';
    }, 2000);
}
</script>

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