<!DOCTYPE html>
<html>
<head>
  <title></title>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
</head>
<body>
<?php
  require_once("models/config.php");
  if(isUserLoggedIn()) { 
    
  }else{
    header("Location: index.php"); die(); 
  }
  
$mysqli = new mysqli("localhost", "dmcentra_dmsc", "uGlG?gXfMhA1", "dmcentra_sc");
              $result_pro = $mysqli->query("SELECT pf.id, pf.SKU, pf.MFRPartNumber, pf.ProductDescription1, fi.nombre as marca, ci.nombre as categoria FROM pricefile pf INNER JOIN fabricantes_ingram fi ON fi.id = pf.id_fabricante INNER JOIN categorias_ingram ci ON ci.id = pf.id_subcategoria INNER JOIN manufacturer_xref_user mxu ON mxu.manufacturer_id_xref = pf.id_fabricante WHERE mxu.user_id = {$loggedInUser->user_id} AND pf.isactive = 1 and pf.disponibilidad>0");

?> 
        
 <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">

        <h1 class="h2">Por Seleccionar </h1>
</div>
<table id="losseleccionados" class="table table-striped table-sm">
          
          <thead>
            
            <tr>
              <th class="no">No.</th>
              <th class="no">SKU</th>
              <th class="no">Modelo</th>
              <th class="no">Descripcion</th>
              <th class="si">Marca</th>
              <th class="si">Categoria</th>
            </tr>
          </thead>
          <tbody id="myTable">
            <?php 
           

           
           
           
            $i = 1;
            while ($row = $result_pro->fetch_assoc()) {
           
            ?>
            <tr>
              <td><?php echo $i; ?></td>
              <td><?php echo $row["SKU"]; ?></td>
              <td><?php echo $row["MFRPartNumber"]; ?></td>
              <td><?php echo utf8_encode($row["ProductDescription1"]); ?></td>
              <td><?php echo utf8_encode($row["marca"]); ?></td>
              <td><?php echo utf8_encode($row["categoria"]); ?></td>
            </tr>
            <?php $i++;} ?>
          </tbody>
          <tfoot>
            
            <tr>
              <td></td>
              <td>No.</td>
              <td>SKU</td>
              <td>Modelo</td>
              <td>Descripcion</td>
              <td>Marca</td>
              <td>Categoria</td>
            </tr>
          </tfoot>         
        </table>
    
<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.9.0/feather.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
  $( document ).ready(function() {

    $('#losseleccionados thead tr').clone(true).appendTo( '#losseleccionados thead' );
    $('#losseleccionados thead tr:eq(1) th').each( function (i) {
      if ($(this).hasClass("si")) {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Filtrar '+title+'" />' );
 
        $( 'input', this ).on( 'keyup change', function () {
            if ( table.column(i).search() !== this.value ) {
                table
                    .column(i)
                    .search( this.value )
                    .draw();
            }
        } );
      }
    } );
 $('#example').dataTable( {
            "language": {
                "url": "dataTables.german.lang"
            }
        } );

    var table = $('#losseleccionados').DataTable( {
        orderCellsTop: true,
        fixedHeader: true,
        language: { "url": "https://cdn.datatables.net/plug-ins/1.10.20/i18n/Spanish.json" }
    } );

    
   });
</script>        
</body>
</html>