40097-vm/productos.php

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

// Fetch all products
$stmt = db()->query("SELECT * FROM products ORDER BY nombre ASC");
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>

<div class="content-wrapper">
    <section class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <h1>Lista de Productos</h1>
                </div>
                <div class="col-sm-6">
                    <ol class="breadcrumb float-sm-right">
                        <li class="breadcrumb-item"><a href="dashboard.php">Home</a></li>
                        <li class="breadcrumb-item active">Productos</li>
                    </ol>
                </div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">Todos los productos</h3>
                            <div class="card-tools">
                                <a href="edit_product.php" class="btn btn-primary">Nuevo Producto</a>
                            </div>
                        </div>
                        <div class="card-body">
                            <form action="imprimir_etiquetas.php" method="post" target="_blank">
                                <div class="mb-3">
                                    <button type="submit" class="btn btn-success">Imprimir Etiquetas Seleccionadas</button>
                                </div>
                                <div class="table-responsive">
                                    <table id="products-table" class="table table-bordered table-striped">
                                        <thead>
                                        <tr>
                                            <th><input type="checkbox" id="select-all"></th>
                                            <th>ID</th>
                                            <th>Código de Barras</th>
                                            <th>Nombre</th>
                                            <th>SKU</th>
                                            <th>EAN</th>
                                            <th>Costo</th>
                                            <th>Precio Venta</th>
                                            <th>Unidades Vendidas</th>
                                            <th>Ganancia/Unidad</th>
                                            <th>Ingreso Total</th>
                                            <th>Ganancia Total</th>
                                            <th>Acciones</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php foreach ($products as $product): ?>
                                        <tr>
                                            <td><input type="checkbox" name="product_ids[]" value="<?php echo $product['id']; ?>"></td>
                                            <td><?php echo $product['id']; ?></td>
                                            <td>
                                                <?php if (!empty($product['sku'])): ?>
                                                    <img src="https://barcode.tec-it.com/barcode.ashx?data=<?php echo urlencode($product['sku']); ?>&code=Code128" alt="Barcode for product SKU <?php echo htmlspecialchars($product['sku']); ?>" style="max-height: 40px;">
                                                <?php else: ?>
                                                    Sin SKU
                                                <?php endif; ?>
                                            </td>
                                            <td><?php echo htmlspecialchars($product['nombre']); ?></td>
                                            <td><?php echo htmlspecialchars($product['sku'] ?? ''); ?></td>
                                            <td class="editable-ean" data-product-id="<?php echo (int)$product['id']; ?>" title="Doble clic para editar EAN"><?php echo htmlspecialchars($product['ean'] ?? ''); ?></td>
                                            <td><?php echo htmlspecialchars($product['costo']); ?></td>
                                            <td><?php echo htmlspecialchars($product['precio_venta']); ?></td>
                                            <td><?php echo htmlspecialchars($product['unidades_vendidas']); ?></td>
                                            <td><?php echo htmlspecialchars($product['ganancia_unidad']); ?></td>
                                            <td><?php echo htmlspecialchars($product['ingreso_total']); ?></td>
                                            <td><?php echo htmlspecialchars($product['ganancia_total']); ?></td>
                                            <td>
                                                <div class="btn-group">
                                                    <button type="button" class="btn btn-info btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                                        Acciones
                                                    </button>
                                                    <div class="dropdown-menu">
                                                        <a class="dropdown-item" href="edit_product.php?id=<?php echo $product['id']; ?>">Editar</a>
                                                        <a class="dropdown-item" href="delete_product.php?id=<?php echo $product['id']; ?>" onclick="return confirm('¿Estás seguro de que quieres eliminar este producto?');">Eliminar</a>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                        <?php endforeach; ?>
                                    </tbody>
                                </table>
                            </div>
                        </form>
                        </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

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

<script>
document.getElementById('select-all').addEventListener('click', function(event) {
    var checkboxes = document.getElementsByName('product_ids[]');
    for (var checkbox of checkboxes) {
        checkbox.checked = event.target.checked;
    }
});
</script>

<script src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>

<script>
$(function () {
    $("#products-table").DataTable({
        "responsive": false,
        "scrollX": true,
        "lengthChange": false,
        "autoWidth": false,
    });
});
</script>
<style>
.editable-ean {
    min-width: 140px;
    cursor: pointer;
    background: #fffdf5;
}
.editable-ean:hover {
    background: #fff3cd;
    box-shadow: inset 0 0 0 1px #f0c36d;
}
.ean-input {
    width: 100%;
    min-width: 130px;
    border: 1px solid #f0c36d;
    border-radius: 6px;
    padding: 4px 8px;
}
.ean-saving {
    opacity: .65;
}
</style>

<script>
$(function () {
    $(document).on('dblclick', '.editable-ean', function () {
        const cell = $(this);
        if (cell.find('input').length) return;

        const originalValue = cell.text().trim();
        const input = $('<input type="text" class="ean-input" maxlength="32" inputmode="numeric">').val(originalValue);
        cell.empty().append(input);
        input.trigger('focus').trigger('select');

        function finish(save) {
            const newValue = input.val().trim();
            if (!save || newValue === originalValue) {
                cell.text(originalValue);
                return;
            }

            cell.addClass('ean-saving');
            $.ajax({
                url: 'update_product_ean.php',
                method: 'POST',
                dataType: 'json',
                data: {
                    product_id: cell.data('product-id'),
                    ean: newValue
                }
            }).done(function (response) {
                if (response && response.success) {
                    cell.text(response.ean || '');
                } else {
                    alert('Error: ' + ((response && response.message) ? response.message : 'No se pudo guardar el EAN.'));
                    cell.text(originalValue);
                }
            }).fail(function () {
                alert('Error: No se pudo conectar para guardar el EAN.');
                cell.text(originalValue);
            }).always(function () {
                cell.removeClass('ean-saving');
            });
        }

        input.on('keydown', function (event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                finish(true);
            }
            if (event.key === 'Escape') {
                event.preventDefault();
                finish(false);
            }
        });
        input.on('blur', function () {
            finish(true);
        });
    });
});
</script>