<?php

session_start();
if(isset($_SESSION['nomUsuario'])){
    $usuario = $_SESSION['nomUsuario'];
    $rol=$_SESSION['rolUsuario'];
    $id=$_SESSION['cveUsuario'];
    if ($rol == 'COCINA') {
      include("path/header.php");
    }else{
      echo "<script> 
          document.location.href='../functions/salir.php';
      </script>";
    }
    
}else{
  echo "<script> 
      document.location.href='/aqua-restaurant/';
  </script>";
}


?>

<div class="row">
  <div class="col-lg-12 col-sm-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-lg-3 col-sm-5 mb-2"> <!-- modif -->
              <a href="/aqua-restaurant/functions/salir.php"><i class="material-icons ms-auto text-dark cursor-pointer redondo-b" style="width: 70px; height:70px;" data-bs-toggle="tooltip" data-bs-placement="top" title="Cerrar Sesion"><img style="padding: 20%;" width="70" src="../assets/img/icons/sesion.png"></i></a>
            
              <a href="#" id="btn_refrescar"><i class="material-icons ms-auto text-dark cursor-pointer redondo-b" style="width: 70px; height:70px;" data-bs-toggle="tooltip" data-bs-placement="top" title="refrescar"><img style="padding: 20%;" width="70" src="../assets/img/icons/reload.png"></i></a>
              <a href="#" id="btn_reporte"><i class="material-icons ms-auto text-dark cursor-pointer redondo-b" style="width: 70px; height:70px;" data-bs-toggle="tooltip" data-bs-placement="top" title="productos"><img style="padding: 20%;" width="70" src="../assets/img/icons/menu.png"></i></a> <!-- modif menu -->
            </div>
            <div class="col-7 col-lg-6 col-sm-3 d-flex mt-3 mb-3 justify-content-center">
              <!--<img width="130" src="../assets/img/logos/logo.png">-->
              <h1 class="font-weight-bold mb-0" style="font-size: 35px; line-height: 1;" id="clasificacion"> <?php echo $usuario?></h1>
            </div>
            <div id="content" class="col-lg-3 col-sm-4 mt-3 mb-3 d-flex justify-content-center">  
                <div class="date clock" style="display: none;">
                    <span id="weekDay" class="weekDay"></span>, 
                    <span id="day" class="day"></span> de
                    <span id="month" class="month"></span> del
                    <span id="year" class="year"></span>
                </div>
                <div style="position: relative; left: 10px;" class="clock">
                    <span class="hours h2 ">H: </span>
                    <span id="hours" class="hours h2"></span> :
                    <span id="minutes" class="minutes h2"></span> :
                    <span id="seconds" class="seconds h2"></span>
                </div>
            </div>
            
          </div>
        </div>
        
      </div>
      
      <div class="col-12">
        <div class="card my-1">
          <div class="card-body px-0">
            <div class="table-responsive table-responsive-sm" >
              <table class="table" id="tabla_notas" style="width:100%;">
                <thead style="background: #052659; color: white">
                  <tr >
                    <th class="align-middle text-center text-5xl text-white">CANT</th>
                    <th class="align-middle text-center text-5xl text-white">PLATILLO</th>
                    <th class="align-middle text-center text-5xl text-white">COMENTARIO</th>
                    <th class="align-middle text-center text-5xl text-white">TIEMPO</th>
                    <th class="align-middle text-center text-5xl text-white">HORA</th>
                    <th class="align-middle text-center text-5xl text-white">M</th>
                    <th class="align-middle text-center text-5xl text-white"></th>
                    <th class="align-middle text-center text-5xl text-white"></th>
                  </tr>
                </thead>
                <tbody id="productosTableRow" class="text-col-table">
                </tbody>
              </table>
            </div>
          </div>

        </div>
      </div>

    </div>
  </div>
 <!-- Modal Confirmar Modificacion -->
<div class="modal fade" id="modalConfirm" tabindex="-1" aria-labelledby="modalConfirm" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header" style="background-color: #ECC950">
          <div class="col-12 d-flex align-items-center justify-content-center">
              <img src="../assets/img/icons/alert-circle.png" alt="" width="250px">
          </div>
        
      </div>
      <div class="modal-body">
      
        <div class="row ">
          <div class="col-12 d-flex align-items-center justify-content-center">
            <h3>TERMINANDO PRODUCTO</h3>
             
          </div>
          <div class="col-12 d-flex align-items-center justify-content-center">
            <h4 class="mb-0">Estas por dar como finalizado este producto de la nota <span id="note_id"></span></h4> 
          </div>
        </div>
      </div>
      <div class="modal-footer align-items-center justify-content-center">
        <!-- <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button> -->
        <button type="button" class="btn btn-primary text-white h4" id="confirmar_accion" data-confirm="">Confirmar</button>
      </div>
    </div>
  </div>
</div>
<!-- Modal Comanda -->
<div class="modal fade" id="modalComanda" tabindex="-1" aria-labelledby="modalComanda" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header" style="background-color: #ECC950">
        <h4 style="padding:0px 20px 0px 20px">Hora: <span id="hora"></span></h4>
          <div class="row" >
          </div>
        <h3>No. nota: <span id="no_nota"></span></h3>
        
      </div>
      <div class="modal-body">
        <div class="row">
          <!-- <div class="col-12 d-flex justify-content-center" >
            
          </div> -->
        </div>
        <div class="row">
          <div class="col-12 d-flex justify-content-center" >
            <h5 style="padding:0px 20px 0px 20px">Fecha: <span id="fecha"></span></h5>
            <h5 style="padding:0px 20px 0px 20px">Nota: <span id="note_clv"></span></h5>
          </div>
        </div>
        <div class="row ">
          <div class="col-12 d-flex justify-content-center">
            <h5 style="padding:0px 20px 0px 20px">Tipo de Venta:</h5>
             
            <h5 class="mb-0" style="padding:0px 20px 0px 20px" id="venta_piso"></h5> 
          </div>
        </div>
        <div class="row ">
          <div class="col-12 d-flex justify-content-center">
            <h5 style="padding:0px 20px 0px 20px">Comensal: </h5>
             
            <h5 class="mb-0" style="padding:0px 20px 0px 20px" id="comensal"></h5> 
          </div>
        </div>
        <div class="row ">
          <div class="col-12 d-flex justify-content-center">
            <h5 style="padding:0px 20px 0px 20px">Mesero:  </h5>
             
            <h5 class="mb-0" style="padding:0px 20px 0px 20px" id="mesero"></h5> 
          </div>
          <div class="col-12 mt-4 d-flex justify-content-center" >
            <h2 style="padding:0px 20px 0px 20px">MESA: </h2>
             
            <h2 class="mb-0" style="padding:0px 20px 0px 20px" id="mesa"></h2> 
          </div>
          <div class="col-12 mt-4 d-flex align-items-center justify-content-center">
            <h2 class="mb-0 text-center" id="producto"></h6> 
          </div>
          <div class="col-12 mt-4  d-flex justify-content-center">
            <h4 class="mb-0" style="padding:0px 20px 0px 20px">Cant: <span id="cantidad"></span></h4> 
            
            <h4 class="mb-0" style="padding:0px 20px 0px 20px">Tiempo: <span id="tiempo"></span></h4> 
          </div>
          <div class="col-12 mt-4 d-flex align-items-center justify-content-center">
            <h4 class="mb-0" id="comentario"></h4> 
          </div>
        </div>
      </div>
      <div class="modal-footer align-items-center d-flex justify-content-center">
        <button type="button" class="btn btn-secondary text-white h4" data-bs-dismiss="modal" id="btn-cerrar-modal">Cerrar</button>
        <!-- <button type="button" class="btn btn-primary text-white h4" id="btn_terminar" data-pdnid>Terminar</button> -->
      </div>
    </div>
  </div>
</div>

<!-- Modal Reporte -->
 <div class="modal fade" id="modalReport" tabindex="-1" aria-labelledby="modalReport" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header" style="background-color: #ECC950">
        <div class="row " >
          <div class="col-12 col-sm-12 d-flex align-items-center justify-content-center">
            <h3>LISTA PRODUCTOS COCINADOS</h3>
          </div>
          <div class="col-12 col-sm-12 d-flex align-items-center justify-content-center">
            <h5>(SEMANAL)</h5>
          </div>
        </div>
          
      </div>
      <div class="modal-body">
        
        <div class="table-responsive" >
          <table class="table" id="ProductsTable" style="width:100%;">
            <thead style="background: #052659; color: white">
              <tr >
                <th class="align-middle text-center" scope="col">CANT</th>
                <th class="align-middle text-center" scope="col">PLATILLO</th>
                <th class="align-middle text-center" scope="col">FECHA</th>
              </tr>
            </thead>
            <tbody id="productosTableRow" class="">
            </tbody>
          </table>
        </div>
          
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary h5" data-bs-dismiss="modal" id="btn-cerrar">Cerrar</button>
        <!-- <button type="button" class="btn btn-primary text-white h4" id="confirmar_accion" data-confirm="">Confirmar</button> -->
      </div>
    </div>
  </div>
</div>
<script src="../assets/js/jquery-3.5.1.min.js"></script>
<script src="../assets/lib/dataTable/datatables.min.js"></script>
<script src="../assets/js/funciones.js"></script>

<script src="../assets/js/clock.js"></script>
<script>
  $(document).ready(function () {
      var hoy = new Date();
      var dia_semana = hoy.getDay();
      var opcion = 1;
      
      if (dia_semana == 0 || dia_semana == 6) {
        opcion = 2;
      }
      $('#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: false,
        scrollY: 'calc(110vh - 300px)',
        scrollX: true,
        fixedHeader: true,
        bFilter: false, 
        bInfo: false,
        columns: [
            {data: 'cantidad', class: 'text-col-table text-center'},
            {data: 'platillo', class: 'text-col-table text-center'},
            {data: 'comentario', class: 'text-col-table text-center'},
            {data: 'tiempo', class: 'text-col-table text-center'},
            {data: 'hora', class: 'text-col-table text-center'},
            {data: 'mesa', class: 'text-col-table text-center'},
            {data: 'estatus', class: 'text-col-table  text-center'},
            {data: 'is_new', class: 'text-col-table  text-center'},
          ],
      });
      tablaProductos()
      getProductos(opcion);

      $('#btn_refrescar').on('click', function(){
        document.location.href='comandas.php';
        
      });

      $('#btn_reporte').unbind('click').on('click', function(){
        getReporte();
      })
      $('#modalComanda').unbind('hidden.bs.modal').on('hidden.bs.modal', function(){
        if ($('#modalConfirm').css('display') == 'none') {
          cleanTr();
        }
      });
      $('#btn-cerrar-modal').on('click', function(){
        $('#modalComanda').modal('toggle')
      })
      $('#btn-cerrar').on('click', function(){
        $('#modalReport').modal('toggle')
      })
      /* Accion al dar click a un checkbox */
      $(document).on('change','input[type="checkbox"]' ,function(e) {
        let id = $(this).val();
        let status = $(this).attr('data-status');
        let receta_id = $(this).attr('data-receta');
        let cantidad = $(this).attr('data-cantidad');
        
        
        if($(this).is(':checked')){
          
          $('#modalConfirm').modal('show');
          $('#confirmar_accion').attr('data-confirm', id);
          $('#confirmar_accion').attr('data-status', status);
          $('#confirmar_accion').attr('data-receta', receta_id);
          $('#confirmar_accion').attr('data-cantidad', cantidad);
          // en caso de que el modal sea ocultado por alguna razon el checkbox aparecera vacio.
          $('#modalConfirm').unbind('hidden.bs.modal').on('hidden.bs.modal', function(){
            $(`#pdn${id}`).prop('checked',false);
          });
        }
       
        
      });
      $('#confirmar_accion').on('click', function(){
        let id = $(this).attr('data-confirm');
        let status =$(this).attr('data-status');
        let receta =$(this).attr('data-receta');
        let cantidad =$(this).attr('data-cantidad');
        terminarProducto(id, status, receta,cantidad);
        
      });

      /* Accion al seleccionar una fila de la tabla*/
      $(document).on('click', '#tabla_notas tbody tr', function(){
        let id = $(this).attr('id');
        if ($(`#pdn${id}`).is(':checked')) {
          // console.log($(`#pdn${id}`));
          
        }else{
          if ($(this).hasClass('row-selected')) {
            cleanTr();
          }else{
            cleanTr();
            $(this).addClass('row-selected');
            $('#modalComanda').modal('show');
            cleanModal()
            getProductNote(id)
          }
        }

      });
      $('#btn_terminar').on('click',function(){
        let id = $(this).attr('data-pdnid');
        $('#modalComanda').modal('toggle');
        $('#modalConfirm').modal('show');
        $('#confirmar_accion').attr('data-confirm', id);
      });
      
      
  });
  function cleanTr(){
    
    //$('#btn_eliminar_renglon').attr('id',0).attr('data-tiempo',0);
    $('.row-selected').each(function(index, element){
      $(element).removeClass('row-selected');
    })
  } 
    /** FUNCION AJAX */
  function ajax_function(pagina, datos, dtipo, tipo, selector){
    $.ajax({
      type: tipo,
      dataType: dtipo,
      data: datos,
      url: pagina,
      success: function (respuesta) {
        selector(respuesta)
      }, error(e) {
        console.log(e);
      }
    });
  }

  function getProductos(opcion,usuario) {
    var pagina = '../functions/tablet/comandas/list_products.php';
    let datos = { opcion: opcion }; 
    let dtipo = "JSON"; 
    let tipo = "POST"; 
    let selector = putProductos;
    ajax_function(pagina, datos, dtipo, tipo, selector);
  }
  function putProductos(dt){
    let tabla = $('#tabla_notas').DataTable();
    let bg_color;
    let color;
    let nota_act;
    let nota_ant;
    let background = '';
    let bg_ant = "#fff";
    let bg_act = "#f1e1d3";
    
    //tabla.rows().remove().draw();
    if (dt[0]['pdn_id'] > 0) {
      
      nota_ant = dt[0]['id_nota_venta']
      $.each(dt, function (v, u) {
        color = '';
        bg_color='';
        imagen = '';

        nota_act = u.id_nota_venta
        
        if (nota_act == nota_ant) {
          background = bg_act;
          
        }else{
          background = bg_ant;
          bg_ant = bg_act;
          bg_act = background;

          nota_ant = u.id_nota_venta;
        }

        if (u.pdn_estatus == 'cancelado') {
            color = '#F44335';
          }
        if(u.vista_cocinero == '1'){
          imagen = "../assets/img/icons/Vector3.png"
        }
        if(u.vista_cocinero == '2'){
          imagen = "../assets/img/icons/edit.png"
        }
        
        tabla.row
            .add({
              
              cantidad:  u.pdn_cantidad,
              platillo: u.pro_nombre,
              comentario: u.pdn_comentario,
              tiempo: u.pdn_tiempo,
              hora: u.hora_edicion,
              mesa: u.ntv_no_mesa,
              estatus:  `<div class="form-check form-check-inline ">
                            <input class="form-switch form-check-input me-4 " style="width: 40px; height:40px;" type="checkbox" name="ckb-terminado" id="pdn${u.pdn_id}" data-status="${u.pdn_estatus}" data-receta="${u.receta}" data-cantidad="${u.pdn_cantidad}" data-content = "${u.ntv_no_nota}|${u.ntv_zona_ate}|${u.pdn_comensal}|${u.uss_nombre}|${u.ntv_no_mesa}|${u.ntv_fecha_creacion}|${u.hora_edicion}" data-coment="${u.pdn_comentario}" value="${u.pdn_id}">
                            <!-- <label class="form-check-label" style="font-size: 30px !important;" for="inlineRadio1">T2</label>-->
                        </div>`,
              is_new: `<div> <img width=40" src="${imagen}"></div>`,
            })
            .draw();
            $('#pdn' + u.pdn_id).parents('tr').attr('id', u.pdn_id).attr('data-status', u.pdn_estatus).attr('data-receta', u.receta).attr('data-cantidad',u.pdn_cantidad).css('background-color',background).css('color',color);
        });
    } 
  }

  function terminarProducto(id, status, receta, cantidad){
    var pagina = '../functions/tablet/comandas/terminar_producto.php';
    let datos = { id: id, status: status, receta: receta, cantidad: cantidad}; 
    let dtipo = "JSON"; 
    let tipo = "POST"; 
    let selector = elmProducto;
    ajax_function(pagina, datos, dtipo, tipo, selector);
  }

  function elmProducto(dt){
    $('#modalConfirm').modal('toggle');
    let tabla = $('#tabla_notas').DataTable();
     if (dt > 0) {
      tabla.row($(`#${dt}`)).remove().draw();
      if ($(this).hasClass('row-selected')) {
        cleanTr();
      }
     }
     
  }

  function getProductNote(id){
    let producto        = $(`#pdn${id}`);
    let ntv_no_nota     = producto.attr('data-content').split('|')[0];
    let ntv_zona_ate    = producto.attr('data-content').split('|')[1];
    let pdn_comensal    = producto.attr('data-content').split('|')[2];
    let uss_nombre      = producto.attr('data-content').split('|')[3];
    let ntv_no_mesa     = producto.attr('data-content').split('|')[4];
    let pdn_cantidad    = $($(`.row-selected`).find('td')[0]).text();
    let pdn_tiempo      = $($(`.row-selected`).find('td')[3]).text();
    let pdn_comentario  = producto.attr('data-coment');
    let pro_nombre      = $($(`.row-selected`).find('td')[1]).text();
    let fecha           = producto.attr('data-content').split('|')[5];
    let hora            = producto.attr('data-content').split('|')[6];
    
    $('#no_nota').text(ntv_no_nota);
    $('#note_clv').text(ntv_no_nota);
    $('#fecha').text(fecha);
    $('#venta_piso').text(ntv_zona_ate);
    $('#comensal').text(pdn_comensal);
    $('#mesero').text(uss_nombre);
    $('#mesa').text(ntv_no_mesa);
    $('#producto').text(pro_nombre);
    $('#cantidad').text(pdn_cantidad);
    $('#tiempo').text(pdn_tiempo);
    $('#comentario').text(pdn_comentario);
    $('#btn_terminar').attr('data-pdnid',id);
    $("#hora").text(hora);
  }
  function cleanModal(){
    $('#no_nota').text('');
    $('#note_clv').text('');
    $('#fecha').text('');
    $('#venta_piso').text('');
    $('#comensal').text('');
    $('#mesero').text('');
    $('#mesa').text('');
    $('#producto').text('');
    $('#cantidad').text('');
    $('#tiempo').text('');
    $('#comentario').text('');
    $('#btn_terminar').attr('data-pdnid',0);
  }
//FUNCTION PARA LOS DATOS DEL REPORTE DE VENTAS POR COCINERO
  function getReporte(){
    let number_day = getWeekDayNumber();
    var pagina = '../functions/tablet/comandas/list_ventas.php';
    let datos = { num_day: number_day}; 
    let dtipo = "JSON"; 
    let tipo = "POST"; 
    let selector = putReporte;
    ajax_function(pagina, datos, dtipo, tipo, selector);
  }
  function putReporte(dt){
    $('#modalReport').modal('show');
    
    let tabla = $('#ProductsTable').DataTable();
    tabla.rows().remove().draw();
    if (dt[0]['pro_id'] > 0) {
      $.each(dt, function (v, u) {
        tabla.row
            .add({
              cantidad: u.cantidad,
              platillo: u.pro_nombre,
              fecha: u.ntv_fecha_creacion,
              
            })
            .draw();
      })
    }

  }
  function tablaProductos(){
    $('#ProductsTable').DataTable({
        //order: [[8, 'Desc']],
        ordering: false,
        dom: 'Blrt',
        searching: false,  
        lengthChange: false,
        buttons: [],
        pagingType: 'simple_numbers',
        language: {
            url: '../assets/lib/dataTable/spanish.json',
        },
        paging: false,
        scrollY: 'calc(90vh - 300px)',
        scrollX: true,
        fixedHeader: true,
        bFilter: false, 
        bInfo: false,
        columns: [
            {data: 'cantidad', class: 'text-col-table text-center'},
            {data: 'platillo', class: 'text-col-table col-table text-center'},
            {data: 'fecha', class: 'text-col-table text-center'},
            
          ],
      });
  }
  function getWeekDayNumber(){
        let today = new Date();
        let today_number = today.getDay();
        
        if (today_number == 0) {
            today_number = 7;
        }
        return today_number;
    }
  
 
// *********************

</script>