<?php
session_start();
include("path/header.php");
if(isset($_SESSION['nomUsuario'])){
  
  $usuario = $_SESSION['nomUsuario'];
  $rol_usuario=$_SESSION['rolUsuario'];
  $id=$_SESSION['cveUsuario'];

  
}else{
echo "<script> 
      document.location.href='/';
  </script>";
}
?>

<div class="row">
  <div class="col-lg-12">
    <div class="row">
      <div class="col-md-12 mb-lg-0">
        <div class="card-header pb-0 p-2">
          <div class="row">

            <div class="col-2">

            </div>

            <div class="col-2">

            </div>
            <div class="col-4 d-flex mb-4 justify-content-center">
              <img width="130" src="../assets/img/logos/logo.png">
            </div>

          </div>
        </div>

      </div>

      <div class="col-12">
        <div class="card my-1">
          <div class="card-body px-0">
            <div class="table-responsive">
              <table class="table" id="tabla_notas" style="width:100%">
                <thead style="background: #D5D8DC;">
                  <tr>
                    <th class="align-middle text-center" scope="col">Producto</th>
                    <th class="align-middle text-center" scope="col">Cantidad</th>
                    <th class="align-middle text-center" scope="col">Tiempo</th>
                    <th class="align-middle text-center" scope="col">Hora</th>
                    <th class="align-middle text-center" scope="col">Nota</th>
                    <th class="align-middle text-center" scope="col">Comensal</th>
                    <th class="align-middle text-center" scope="col">Mesa</th>
                    <th class="align-middle text-center" scope="col">Mesero</th>
                    <th class="align-middle text-center" scope="col">Estado</th>
                  </tr>
                </thead>
                <tbody class="tabla_notas_body" id="tbody_tabla_notas">
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>

</div>

<script src="../assets/js/jquery-3.5.1.min.js"></script>
<script src="../assets/lib/dataTable/datatables.min.js?v=1.0.0.0"></script>

<!--Script de funcionalidad-->
<script>
    // Variable global para datos
    var datos;
    var cont = 0;
    let num = 0;

    
    $(document).ready(function () {
      $('#tabla_notas').DataTable({
        //order: [[8, 'Desc']],
        ordering: false,
        dom: 'Blrt',
        searching: false,  
        lengthChange: false,
        buttons: [],
        pagingType: 'simple_numbers',
        language: {
            url: '../assets/lib/dataTable/spanish.json',
        },
        paging: true,
        scrollY: 'calc(120vh - 300px)',
        scrollX: true,
        fixedHeader: true,
        columns: [
            {data: 'Producto', class: 'sku'},
            {data: 'Cantidad', class: 'centrar'},
            {data: 'Tiempo', class: 'centrar'},
            {data: 'Hora', class: 'dateRegs'},
            {data: 'Nota', class: 'quantity'},
            {data: 'Comensal', class: 'code-type_s'},
            {data: 'Mesa', class: 'centrar'},
            {data: 'Mesero', class: 'comments'},
            {data: 'Estado', class: 'code-type_s'},
        ],
    });
  
    getProducts();
    
    //setInterval(getProducts, 900000);
    // Funcion jquery que selecciona el pivote en la lista de productos agregando la clase row-selected al tr indicado
    
    //abilitarBoton();
    });
    
    
    
  function abilitarBoton(){
    // Funcion clic para los botones de cada una de las tuplas
    $('.completar').unbind('click').on('click', function () {
      // Seleccionamos el input de tipo 'button'
      $(this).closest('button');
      // Imprimimos en consola el id de la tupla a la que le dimos clic en el boton
      console.log($(this).data('id'));
      // Agregamos la clase 'finalizado' al boton cliqueado
      $(this).addClass('finalizado');
      $(this).find('img').attr('src', '../assets/img/icons/preparando.png');
      // Variable con el id del producto cliqueado
      var idProducto = $(this).data('id');
      /* deleteRow();
      appendRow(); */
      // Funcion AJAX de mandar id a functions.php
      $.ajax({
        type: 'POST',
        dataType: 'JSON',
        data: { idProducto: idProducto },
        url: '../functions/functions.php?u=' + encodeURIComponent('setProductBtn'),
        success: function (respuesta) {
          console.log(respuesta);
          deleteRow();
          appendRow();
          //getProducts();
        }, error(e) {
          console.log(e);
        }
      });
    });
  }
  //console.log('producto', $(this).parents('tr').find('td')[0].text());
  function seleccionarFila(){
    //Si existen filas seleccionadas quitarles la seleccion
    $('.row-selected').each(function(index, element){
      $(element).removeClass('row-selected');
      
    })
    $('#tabla_notas tbody tr').each(function (v, u) {
      if (v == 3) {
        $(this).addClass('row-selected');
      }
    });
  }
  // Funcion de eliminar fila en la tabla
  function deleteRow() {
    /* $('#tbody_tabla_notas tr').each(function (v, u) {
      if (v == 0) {
        $(this).remove();
      }
    }) */
    let tabla = $('#tabla_notas').DataTable();
    tabla
        .row(0)
        .remove()
        .draw();
    
    seleccionarFila();
  };

  function getProducts(){
    let tabla = $('#tabla_notas').DataTable();
    tabla.rows().remove().draw();
    $.ajax({
      type: 'POST',
      dataType: 'JSON',
      data: { idProducto: 0 },
      url: './functions_chef/getDescProducts.php',
      success: function (respuesta) {
        inicializarTablaDescProd(respuesta);
        //seleccionarFila();
      }, error(e) {
        console.log(e);
      }
    })
    setTimeout(() => {
      $.ajax({
        type: 'POST',
        dataType: 'JSON',
        data: { idProducto: 0 },
        url: './functions_chef/getProducts.php',
        success: function (respuesta) {
          inicializarTabla(respuesta);
          seleccionarFila();
        }, error(e) {
          console.log(e);
        }
      })
    }, 100);
    
  }
  function  inicializarTablaDescProd(dt) {
    let tabla = $('#tabla_notas').DataTable();
    console.log(dt);
    //tabla.rows().remove().draw();
    if (dt[0]['ID'] > 0) {
      $.each(dt, function (v, u) {
      /* if ( u.BOTON == 'activo') {
        icon = "../assets/img/icons/preparar.png";
        valstage='completar';
      } else { */
          icon = "../assets/img/icons/preparando.png";
          valstage='finalizado';
      //}
      
        tabla.row
        .add({
          Producto: u.PRO_NOMBRE,
          Cantidad: u.CANTIDAD,
          Tiempo:   u.TIEMPO,
          Hora:     u.HORA,
          Nota:     u.NO_NOTA,
          Comensal: u.COMENSAL,
          Mesa:     u.MESA,
          Mesero:   u.MESERO,
          Estado:   `<button class="badge badge-sm btn bg-gradient ${valstage}" type="button" name="boton_completar"
            id="boton_completar" data-id="${u.ID}"><img width="22.5"
            src="${icon}">`,
        }).draw();
      
      
      });
      
    }else{
      for (let j = 0; j < 3; j++) {
        tabla.row
        .add({
          Producto: '',
          Cantidad: '',
          Tiempo:   '',
          Hora:     '',
          Nota:     '',
          Comensal: '',
          Mesa:     '',
          Mesero:   '',
          Estado:   `<button class="badge badge-sm btn bg-gradient" type="button" name="boton_completar"
            id="boton_completar"><img width="22.5"
            src="">`,
        }).draw();
            
      }
    }
      
    num = 4;
  }
  function inicializarTabla(dt) {
    datos = dt;
    
    console.log(dt);
    //
    let tabla = $('#tabla_notas').DataTable();
    //tabla.rows().remove().draw();

    if (dt[0]['ID'] > 0) {
      //for (let i = 0; i < 7; i++) {
        $.each(dt, function (v, u) {
      
          if (v < num) {
            //if ( u.BOTON == 'activo') {
            icon = "../assets/img/icons/preparar.png";
            valstage='completar';
          /* } else { 
              icon = "../assets/img/icons/preparando.png";
              valstage='finalizado'; */
          //}
          
          /* var H = `<tr>
                        <td >${dt[i]['PRO_NOMBRE']}</td>
                        <td >${dt[i]['CANTIDAD']}</td>
                        <td >${dt[i]['TIEMPO']}</td>
                        <td >${dt[i]['HORA']}</td>
                        <td >${dt[i]['NO_NOTA']}</td>
                        <td >${dt[i]['COMENSAL']}</td>
                        <td >${dt[i]['MESA']}</td>
                        <td >${dt[i]['MESERO']}</td>
                        <td ><button class="badge badge-sm btn bg-gradient completar" type="button" name="boton_completar"
                id="boton_completar" data-id="${dt[i]['ID']}"><img width="22.5"
                src="../assets/img/icons/preparando.png"></button></td>
                    </tr>`;
                $('#tabla_notas tbody').append(H); */
          /* tabla.row
            .add({
              Producto: dt[i]['PRO_NOMBRE'],
              Cantidad: dt[i]['CANTIDAD'],
              Tiempo:   dt[i]['TIEMPO'],
              Hora:     dt[i]['HORA'],
              Nota:     dt[i]['NO_NOTA'],
              Comensal: dt[i]['COMENSAL'],
              Mesa:     dt[i]['MESA'],
              Mesero:   dt[i]['MESERO'],
              Estado:   `<button class="badge badge-sm btn bg-gradient ${valstage}" type="button" name="boton_completar"
                id="boton_completar" data-id="${dt[i]['ID']}"><img width="22.5"
                src="${icon}">`,
            }).draw(); */
            tabla.row
            .add({
              Producto: u.PRO_NOMBRE,
              Cantidad: u.CANTIDAD,
              Tiempo:   u.TIEMPO,
              Hora:     u.HORA,
              Nota:     u.NO_NOTA,
              Comensal: u.COMENSAL,
              Mesa:     u.MESA,
              Mesero:   u.MESERO,
              Estado:   `<button class="badge badge-sm btn bg-gradient ${valstage}" type="button" name="boton_completar"
                id="boton_completar" data-id="${u.ID}"><img width="22.5"
                src="${icon}">`,
            }).draw();
          }
          
        });
      
      
    };
    abilitarBoton();
    cont = 7;
  };

  // Funcion de agregar fila en la tabla
  function appendRow() {
    let tabla = $('#tabla_notas').DataTable();
    console.log(datos[cont]);
    if (datos[cont]) {
      if (datos[cont]['BOTON'] == 'activo') {
          icon = "../assets/img/icons/preparar.png";
          valstage='completar';
      } else {
          icon = "../assets/img/icons/preparando.png";
          valstage='finalizado';
      }
      tabla.row
          .add({
            Producto: datos[cont]['PRO_NOMBRE'],
            Cantidad: datos[cont]['CANTIDAD'],
            Tiempo:   datos[cont]['TIEMPO'],
            Hora:     datos[cont]['HORA'],
            Nota:     datos[cont]['NO_NOTA'],
            Comensal: datos[cont]['COMENSAL'],
            Mesa:     datos[cont]['MESA'],
            Mesero:   datos[cont]['MESERO'],
            Estado:   `<button class="badge badge-sm btn bg-gradient ${valstage}" type="button" name="boton_completar"
              id="boton_completar" data-id="${datos[cont]['ID']}"><img width="22.5"
              src="${icon}">`,
          }).draw();
          
      abilitarBoton();
    }else{
      getProducts();
      /* tabla.row
        .add({
          Producto: '',
          Cantidad: '',
          Tiempo:   '',
          Hora:     '',
          Nota:     '',
          Comensal: '',
          Mesa:     '',
          Mesero:   '',
          Estado:   '',
        }).draw(); */
    }
    

    cont++;
  };
</script>
<!--@Footer-->
<?php
include("path/footer.php");
?>