<?php require_once('conecta.php'); ?>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">

<style>
    .input-nombre { width: 100% !important; min-width: 250px; }
    .input-precio-chico { 
        font-size: 11px !important; 
        height: 24px !important; 
        padding: 2px 5px !important;
        width: 90px !important;
    }
</style>

<div class="container" style="margin-top: 20px;">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">Selección de Productos para Etiquetas</h3>
        </div>
        <div class="panel-body">
            <form id="formEtiquetas" action="codigo_barras.php" method="POST" target="_blank">
                <table id="tablaProductos" class="table table-striped table-bordered" style="width:100%">
                    <thead>
                        <tr>
                            <th class="text-center" style="width: 40px;"><input type="checkbox" id="select_all"></th>
                            <th>Producto</th> 
                            <th style="width: 100px;">Precio</th>
                            <th style="width: 150px;">Código</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                        $sql = "SELECT idarticulo,codigo, nombre, precio FROM articulo ORDER BY 1 DESC";
                        $res_sql = mysqli_query($conecta, $sql) or die("Error: " . mysqli_error($conecta));
                        $i = 0; 
                        while ($p = mysqli_fetch_assoc($res_sql)): 
                            $precio_formateado = number_format($p['precio'], 0, '', '.');
                        ?>
                            <tr>
                                <td class="text-center">
                                    <input type="checkbox" name="seleccionados[]" value="<?php echo $i; ?>">
                                </td>
                                <td>
                                    <span style="display:none;"><?php echo htmlspecialchars($p['nombre']); ?></span>
                                    <input type="text" class="form-control input-sm input-nombre" name="items[<?php echo $i; ?>][nombre]" value="<?php echo htmlspecialchars($p['nombre']); ?>" readonly>
                                </td>
                                <td>
                                    <input type="text" class="form-control input-sm text-right input-precio-chico" name="items[<?php echo $i; ?>][precio]" value="<?php echo $precio_formateado; ?>" readonly>
                                </td>
                                <td>
                                    <span style="display:none;"><?php echo $p['codigo']; ?></span>
                                    <input type="text" class="form-control input-sm" name="items[<?php echo $i; ?>][codigo]" value="<?php echo $p['codigo']; ?>" readonly>
                                </td>
                            </tr>
                        <?php $i++; endwhile; ?>
                    </tbody>
                </table>
                <div class="text-right">
                    <button type="submit" class="btn btn-primary btn-lg">Generar Etiquetas</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>

<script>
$(document).ready(function() {
    var table = $('#tablaProductos').DataTable({
        "pageLength": 10,
        "language": {
            "sProcessing":     "Procesando...",
            "sLengthMenu":     "Mostrar _MENU_ registros",
            "sZeroRecords":    "No se encontraron resultados",
            "sEmptyTable":     "Ningún dato disponible en esta tabla",
            "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
            "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
            "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
            "sSearch":         "Buscar:",
            "oPaginate": {
                "sFirst":    "Primero",
                "sLast":     "Último",
                "sNext":     "Siguiente",
                "sPrevious": "Anterior"
            }
        }
    });

    // Solución corregida: Evento click manejado manualmente
    $('#select_all').on('click', function(e) {
        var isChecked = $(this).is(':checked');
        
        // Obtenemos solo los nodos visibles en la página actual de DataTable
        var rows = table.rows({ page: 'current' }).nodes();
        
        // Marcamos los checkboxes dentro de esas filas visibles
        $(rows).find('input[type="checkbox"]').prop('checked', isChecked);
        
        // Detenemos la propagación para evitar saltos o comportamientos del navegador
        e.stopImmediatePropagation();
    });

    $('#formEtiquetas').on('submit', function(e) {
        var form = this;
        table.$('input[type="checkbox"]:checked').each(function() {
            var index = $(this).val();
            
            if(!$.contains(document, this)){
                $(form).append($('<input>').attr('type', 'hidden').attr('name', 'seleccionados[]').val(index));
            }
            
            var n = table.$('input[name="items['+index+'][nombre]"]').val();
            var p = table.$('input[name="items['+index+'][precio]"]').val();
            var c = table.$('input[name="items['+index+'][codigo]"]').val();

            var precioLimpio = p.replace(/\./g, ''); 

            $(form).append($('<input>').attr('type', 'hidden').attr('name', 'items['+index+'][nombre]').val(n));
            $(form).append($('<input>').attr('type', 'hidden').attr('name', 'items['+index+'][precio]').val(precioLimpio));
            $(form).append($('<input>').attr('type', 'hidden').attr('name', 'items['+index+'][codigo]').val(c));
        });
    });
});
</script>