<?php

session_start();
if(isset($_SESSION['nomUsuario'])){
  
    $usuario = $_SESSION['nomUsuario'];
    $rol_usuario=$_SESSION['rolUsuario'];
    $id=$_SESSION['cveUsuario'];
    if($rol_usuario == 'CHEF'){
        include("path/header.php");
    }else{
        echo "<script> 
               document.location.href='../functions/salir.php';
            </script>";
    }
    //include("path/header.php");
    $datos_notas = get_notas($rol_usuario,$id);
    $datos_productos = get_productos();
    $dato_usuarios=get_usuarios();
}else{
echo "<script> 
      document.location.href='/aqua-restaurant/';
  </script>";
}


?>

<div class="row">
    <div class="col-md-12 mb-lg-0">
        <div class="card-header pb-0 p-2">
            <div class="row" style="height: 10% !important;">
                <div class="col-lg-8 col-sm-6 col-4">
                    <a href="/aqua-restaurant/functions/salir.php"><i class="material-icons ms-auto text-dark cursor-pointer redondo-b icon-chef" data-bs-toggle="tooltip" data-bs-placement="top" title="Cerrar Sesion"><img style="padding: 20%; width:100%" src="../assets/img/icons/sesion.png"></i></a>
                    <i class="material-icons ms-auto text-dark cursor-pointer redondo-b icon-chef" id="refresh" data-bs-toggle="tooltip" data-bs-placement="top" title="Refrescar"><img style="padding: 20%; width:100%" src="../assets/img/icons/reload.png"></i>
                </div>
                
                <div class="col-lg-4 col-sm-6 col-8">
                    <div class="card card-body card-plain d-flex justify-content-center flex-row text-center banner-titulo" style="  background: #052659; border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-top-right-radius: 0; border-bottom-right-radius: 0; box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);">
                        <div id="content" class="col-lg-12 col-sm-12">  
                            <div class="date" style="display: none; ">
                                <span id="weekDay" class="weekDay" style="color: white;"></span>, 
                                <span id="day" class="day" style="color: white;"></span> de
                                <span id="month" class="month" style="color: white;"></span> del
                                <span id="year" class="year" style="color: white;"></span>
                            </div>
                            <div style="position: relative; left: 10px; color: white;" class="clock pt-1">
                                <span class="hours h3" style="color: white;">Hora: </span>
                                <span id="hours" class="hours h3" style="color: white;"></span> :
                                <span id="minutes" class="minutes h3" style="color: white;"></span> :
                                <span id="seconds" class="seconds h3" style="color: white;"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="col-lg-12 col-sm-12">
        <div class="comandas-chef" id="comandas" >
        </div>
    </div>
</div>

<!-- Modal SUCCESS -->
<div class="modal fade" id="modalVerComanda" tabindex="-1" aria-labelledby="modalVerComanda" aria-hidden="true">
  <div class="modal-dialog modal-sm-lg-t modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-body d-flex justify-content-center">
        <div class="card " style="width: 900px">
            <div class="card-head" style="background-color: #ECC950">
                <div class="row">
                    <div class="col-12 text-center">
                        <h2>M: <span id="nv_mesa"></span></h2>
                    </div>
                    <div class="col-4 text-center">
                        <h5><span id="nv_fecha"></span></h5>
                    </div>
                    <div class="col-4 text-center">
                        <h5><span id="nv_mesero"></span></h5>
                    </div>
                    <div class="col-4 text-center">
                        <h5><span id="nv_hora"></span></h5>
                    </div>
                    
                    <div class="col-12 text-center">
                        <h6><span id="nv_comensal"></span></h6>
                    </div>
                    
                </div>
                
                
                
            </div>
            <div class="card-body" id= "contenido_comanda" style="overflow-y: auto; height: 700px">
                
            </div>
            
        </div>
       
      </div>
      <div class="modal-footer ">
            <button type="button" class="btn btn-secondary h6" data-bs-dismiss="modal" id="btn_cerrar">Cerrar</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/lib/jquery-ui.js"></script>
<script src="../assets/js/funciones.js"></script>

<script src="../assets/js/clock.js"></script>
<script>
    let mod = 0;
    $(document).ready(function () {
        cards();
        $('#refresh').on('click', function(){
            location.href ="/aqua-restaurant/usuario_chef/comandas.php";
        })
        $('#btn_cerrar').on('click', function(){
            $('#modalVerComanda').modal("toggle");
        });
    })
     /** 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 getNotas(){
        let pagina = '../functions/tablet/chef/list_notas.php'; 
        let datos = { word: 0 }; 
        let dtipo = "JSON"; 
        let tipo = "POST"; 
        let selector = putNotas;
        ajax_function(pagina, datos, dtipo, tipo, selector);
    }
    function putNotas(dt){
        if (dt[0].id > 0) {
            $.each(dt, function (v, u) {
            let H = `<div class="">
                        <div class="card card-chef card-item" id="cid_${u.id}">
                            <div class="card-title text-center">
                                <div class="row">
                                    <div class="col-4">
                                        <button type="button" class="btn btn-primary text-white fs-5  btn_chef_imp" id="btn_chef_imp" data-ntvid="${u.id}">CHEF</button>
                                    </div>
                                    <div class="col-4 mt-2">
                                        <h4> M: <span id="noMesa"> ${u.ntv_no_mesa} </span></h4>
                                    </div>
                                    <div class="col-4">
                                        <button type="button" class="btn btn-primary text-white fs-5  btn_ultimos_imp" id="btn_ultimos_imp" data-ntvid="${u.id}">Ultim</button>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-12">
                                        
                                    </div>
                                    <div class="col-6">
                                        <h6> <span id="hora_creacion"> ${u.hora_creacion} </span></h6>
                                    </div>
                                    <div class="col-6">
                                        <h6><span id="hora"> ${u.ntv_hora_edt} </span></h6>
                                    </div>
                                    <div class="col-12">
                                        <h6><span id="mesero"> ${u.uss_nombre} </span></h6>
                                    </div>
                                    <div class="col-12">
                                        <h6><span id="comensal"> ${u.pdn_comensal} </span></h6>
                                    </div>
                                </div>
                            </div>
                            <div class="card-body px-0  text-center ">
                                
                                <div class="" id="nota_conenido_${u.id}">
                                </div>
                                <div class="d-flex justify-content-end" style="">
                                    <button class="badge badge-sm btn bg-gradient-primary ver-mas" style="display:none"  name="btn_${u.id}"
                                    id="btn_${u.id}" value="${u.id}"><img width="40" src="../assets/img/icons/chevron-down.png">
                                </div>
                            </div>
                            
                        </div>
                    </div>`
            $('#comandas').append(H);
        })
        }
        $(".ver-mas").on('click', function(){
            $('#contenido_comanda').html('');
            verComanda($(this).val())
        })

        $('.btn_chef_imp').on('click', function(){
            let nt_id = $(this).attr('data-ntvid')
            console.log(nt_id);
            imprimirChef(nt_id);
        })
        $('.btn_ultimos_imp').on('click', function(){
            let nt_id = $(this).attr('data-ntvid')
            console.log(nt_id);
            imprimirUltimos(nt_id);
        })
       
    }
    function getComandas(){
        let pagina = '../functions/tablet/chef/list_comandas.php'; 
        let datos = { opcion: 1 }; 
        let dtipo = "JSON"; 
        let tipo = "POST"; 
        let selector = putComandas;
        ajax_function(pagina, datos, dtipo, tipo, selector);
    }
    function putComandas(dt){
        if (dt[0].pdn_cantidad) {
            let nota;
            let cont = 0;
            let nota_ant = dt[0].id;
            $.each(dt, function (v, u) {
                let color = "#8d7662";
                let bg_color = '#fff';
                nota = u.id;

                
                if (u.pdn_estatus == 'terminado') {
                    color = "#4CAF50";
                }
                if (u.pdn_estatus == 'cancelado' || u.pdn_estatus == 'eliminado') {
                    color = "#F44335";
                }
                if (u.vista_cocinero == 1) {
                    bg_color = '#f6e6ad'
                }
                if (u.vista_cocinero == 2) {
                    bg_color = '#e8d7d1'
                    
                }
                if (nota == nota_ant) {
                    
                    cont = cont + 1;
                    if (cont < 12) {
                        let H = `<div class="row" style="background: ${bg_color};">
                            <div class="col-2">
                                <h5 style="color:${color} !important;">  <span id="noQuanty"> ${u.pdn_cantidad} </span></h5>
                            </div>
                            <div class="col-8">
                                <h6 style="color:${color} !important;"> ${u.pro_nombre} </h6>
                            </div>
                            <div class="col-2">
                                <h5 style="color:${color} !important;"> <span id="timeProduct"> ${u.pdn_tiempo} </span></h5>
                            </div>
                            <div class="col-12 text-center ">
                                <h6 style="color:${color} !important; font-size: 1rem !important"> <span id="comentario"> ${u.pdn_comentario} </span></h6>
                            </div>
                        </div>`;
                        $(`#nota_conenido_${u.id}`).append(H);
                    }else{
                        $(`#btn_${u.id}`).css('display','block');
                    }
                    
                }else{
                    cont = 0;
                    let H = `<div class="row" style="background: ${bg_color};">
                            <div class="col-2">
                                <h5 style="color:${color} !important;">  <span id="noQuanty"> ${u.pdn_cantidad} </span></h5>
                            </div>
                            <div class="col-8">
                                <h6 style="color:${color} !important;"> ${u.pro_nombre} </h6>
                            </div>
                            <div class="col-2">
                                <h5 style="color:${color} !important;"> <span id="timeProduct"> ${u.pdn_tiempo} </span></h5>
                            </div>
                            <div class="col-12 text-center ">
                                <h6 style="color:${color} !important; font-size: 1rem !important"> <span id="comentario"> ${u.pdn_comentario} </span></h6>
                            </div>
                        </div>`;
                        $(`#nota_conenido_${u.id}`).append(H);
                }
                
                nota_ant = u.id;
            })
        }
        
    }

    function cards(){
        getNotas();
        setTimeout(function() {
            getComandas();
            $(".card-item").draggable({
                start: function(event, ui) {
                    $(this).css('cursor', 'grabbing');
                },
                stop: function(event, ui) {
                    $(this).css('cursor', 'grab');
                }
            });
        },200);
    }
    function verComanda(id){
        $('#modalVerComanda').modal('show');
        let pagina = '../functions/tablet/chef/list_comandas.php'; 
        let datos = { id: id }; 
        let dtipo = "JSON"; 
        let tipo = "POST"; 
        let selector = putComanda;
        ajax_function(pagina, datos, dtipo, tipo, selector);
    }
    function putComanda(dt){
        if (dt[0].id) {
            $.each(dt, function (v, u) {
                let color = "#8d7662";
                let bg_color="#fff";
                
                
                if (u.vista_cocinero == 1) {
                    bg_color = '#f6e6ad'
                }
                if (u.vista_cocinero == 2) {
                    bg_color = '#e8d7d1'
                    
                }
                
                if (u.pdn_estatus == 'terminado') {
                    color = "#4CAF50";
                }
                if (u.pdn_estatus == 'cancelado' || u.pdn_estatus == 'eliminado') {
                    color = "#F44335";
                }
                var H = `<div class="row text-center" style="background: ${bg_color};">
                        <div class="col-2">
                            <h4 style="color:${color} !important;">  <span id="noQuanty"> ${u.pdn_cantidad} </span></h4>
                        </div>
                        <div class="col-8">
                            <h5 style="color:${color} !important;"> ${u.pro_nombre} </h5>
                        </div>
                        <div class="col-2">
                            <h4 style="color:${color} !important;"> <span id="timeProduct"> ${u.pdn_tiempo} </span></h4>
                        </div>
                        <div class="col-12">
                            <h6 style="color:${color} !important; font-size: 1rem !important"> <span id="comentProduct"> ${u.pdn_comentario} </span></h6>
                        </div>
                    </div>`;
                $('#nv_fecha').text(u.ntv_fecha_creacion);
                $('#nv_hora').text(u.ntv_hora_edt);
                $('#nv_mesa').text(u.ntv_no_mesa);
                $('#nv_comensal').text(u.pdn_comensal);
                $('#nv_mesero').text(u.uss_nombre);
                $('#contenido_comanda').append(H);
                
            })
        }
        
    }

    function imprimirChef(id){
        let impresora = 'smb://mi_cabanita_2:1234@MI-CABANITA2/BIXOLON-SRP-350plusIII'; // Nombre de la impresora
        let pagina = "../functions/tablet/ticket/ticket_chef_red.php";
        let datos = {id: id, opcionImprComanda: impresora}; 
        let dtipo = "JSON"; 
        let tipo = "POST"; 
        let selector = impreso;
        ajax_function(pagina, datos, dtipo, tipo, selector);
    }
    function imprimirUltimos(id){
        let impresora = 'smb://mi_cabanita_2:1234@MI-CABANITA2/BIXOLON-SRP-350plusIII'; // Nombre de la impresora 
        let pagina = "../functions/tablet/ticket/ticket_comandas_ultimos_red.php"; 
        let datos = {id: id, opcionImprComanda: impresora}; 
        let dtipo = "JSON"; 
        let tipo = "POST"; 
        let selector = impreso;
        ajax_function(pagina, datos, dtipo, tipo, selector);
    }

    function impreso(dt){
        console.log(dt);
    }
</script>