<?php

session_start();
if(isset($_SESSION['nomUsuario'])){
  
    $usuario = $_SESSION['nomUsuario'];
    $rol_usuario=$_SESSION['rolUsuario'];
    $id=$_SESSION['cveUsuario'];
    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">
            <div class="col-lg-3 col-sm-0 pt-1 mb-4">
                <i class="material-icons ms-auto text-dark cursor-pointer redondo-b" id="refresh" style="width: 92px; height:92px;" data-bs-toggle="tooltip" data-bs-placement="top" title="Cerrar Sesion"><img style="padding: 10%;" width="90" src="../assets/img/icons/refresh.png"></i>
            </div>
            <div class="col-lg-3 col-sm-0 pt-1 mb-4">
            </div>
              <div class="col-lg-6 col-sm-12 pt-1 mb-4">
                <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-6 col-sm-6">  
                        <div class="date" style="display: none; ">
                            <span id="weekDay" class="weekDay" style="color: white; font-size: 2.5rem;"></span>, 
                            <span id="day" class="day" style="color: white; font-size: 2.5rem;"></span> de
                            <span id="month" class="month" style="color: white; font-size: 2.5rem;"></span> del
                            <span id="year" class="year" style="color: white; font-size: 2.5rem;"></span>
                        </div>
                        <div style="position: relative; left: 10px; color: white; font-size: 2.5rem;" class="clock pt-1">
                            <span class="hours h3" style="color: white; font-size: 2.5rem;">Hora: </span>
                            <span id="hours" class="hours h3" style="color: white; font-size: 2.5rem;"></span> :
                            <span id="minutes" class="minutes h3" style="color: white; font-size: 2.5rem;"></span> :
                            <span id="seconds" class="seconds h3" style="color: white; font-size: 2.5rem;"></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="carouselExample" class="carousel carousel-dark slide">
    <div class="carousel-inner" id="comandas">
        
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Previous</span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="visually-hidden">Next</span>
    </button>
    </div>
    <!-- <div class="col-lg-12 col-sm-12">
        <div class="row" id="comandas">
        </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 () {
        getNotas();
        setTimeout(function() {
            getComandas();
        },1000);

        slider();
        
        $('#refresh').on('click', function(){
            location.href ="/aqua-restaurant/usuario_chef/comandas.php";
        })
    })
     /** 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){
        console.log(dt)
        if (dt[0].id > 0) {
            $.each(dt, function (v, u) {
            let H = `<div class=" carousel-item">
                        <div class="card card-chef" >
                            <div class="card-body px-0  text-center ">
                                <div class="card-title">
                                    <h1> Mesa: <span id="noMesa"> ${u.ntv_no_mesa} </span></h1>
                                </div>
                                <div class="card-body" id="nota_conenido_${u.id}">
                                </div>
                                
                            </div>
                        </div>
                    </div>`
            $('#comandas').append(H);
        })
        }
       
    }
    function getComandas(){
        let pagina = '../functions/tablet/chef/list_comandas.php'; 
        let datos = { word: 0 }; 
        let dtipo = "JSON"; 
        let tipo = "POST"; 
        let selector = putComandas;
        ajax_function(pagina, datos, dtipo, tipo, selector);
    }
    function putComandas(dt){
        console.log(dt)
        if (dt[0].pdn_cantidad) {
            $.each(dt, function (v, u) {
            let color = "#8d7662";
            if (u.pdn_estatus == 'terminado') {
                color = "#4CAF50";
            }
            if (u.pdn_estatus == 'cancelado') {
                color = "#F44335";
            }
            console.log(color);
            let H = `<div class="row" >
                        <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>`;
            $(`#nota_conenido_${u.id}`).append(H);
        })
        }
        
    }

    // SLIDER
    function slider(){
        var sldWidth = $('.carousel-inner')[0].scrollWidth;
        var crdWidth = $('.card').width();
        var scrollp = 0;

        $('.carousel-control-next').on('click', function(){
            console.log('c',crdWidth)
            scrollp = scrollp + crdWidth;
            $('.carousel-inner').animate({
                scrollLeft: scrollp
            },500)
        })
        $('.carousel-control-prev').on('click', function(){
            console.log('c',crdWidth)
            scrollp = scrollp - crdWidth;
            $('.carousel-inner').animate({
                scrollLeft: scrollp
            },500)
            
        })

    }
</script>