{% extends 'base.html.twig' %}

{% block title %}Gestión de Filas - Ubiquity{% endblock %}

{% block body %}
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-8">
                    <h1 class="m-0 text-dark">Dashboard</h1>
                </div><!-- /.col -->
                <div class="col-sm-4">
                <form class="form-inline" id="frm" method="post">
                    <div class="form-group">
                    <input class="form-control" type="date" name="fecha" id="fecha" value="{{ fecha }}">
                    </div>
                    <div class="form-group">
                    <select id="select_local" class="form-control select2" style="width: 100%;" data-select2-id="12" tabindex="-1" aria-hidden="true">
                    {% for local in locales %}
                    <option selected="selected" data-select2-id="14" value="{{ local.id }}">{{ local.nombre }}</option>
                    {% endfor %}
                    </select>
                    </div>
                    <div class="form-group">
                    <input class="btn btn-primary" type="submit" value="Filtrar">
                    </div>
                </form>
                 

                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
        
            
            <!-- /.row -->
            <div class="card card-primary card-outline card-outline-tabs">
              <div class="card-header p-0 border-bottom-0">
                <ul class="nav nav-tabs" id="custom-tabs-three-tab" role="tablist">
                  <li class="nav-item">
                    <a class="nav-link active" id="custom-tabs-three-home-tab" data-toggle="pill" href="#custom-tabs-three-home" role="tab" aria-controls="custom-tabs-three-home" aria-selected="true"><i class="fas fa-chart-bar mr-1"></i>&nbsp;Métricas</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-three-profile-tab" data-toggle="pill" href="#custom-tabs-three-profile" role="tab" aria-controls="custom-tabs-three-profile" aria-selected="false"><i class="fas fa-users"></i>&nbsp;Ejecutivos</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" id="custom-tabs-three-messages-tab" data-toggle="pill" href="#custom-tabs-three-messages" role="tab" aria-controls="custom-tabs-three-messages" aria-selected="false"><i class="fa fa-handshake"></i>&nbsp;Módulos de atención</a>
                  </li>
    
                </ul>
              </div>
              <div class="card-body">
                <div class="tab-content" id="custom-tabs-three-tabContent">
                  <div class="tab-pane fade active show" id="custom-tabs-three-home" role="tabpanel" aria-labelledby="custom-tabs-three-home-tab">

                      <div class="row">
          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box">
              <span class="info-box-icon bg-info elevation-1"><i class="fas fa-users"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Personas en la fila</span>
                <span class="info-box-number">
                  <span id="kpi_personas_fila"></span>

                </span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-danger elevation-1"><i class="fas fa-users"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Tickets perdidos</span>
                <span id="kpi_turnos_perdidos" class="info-box-number"></span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->

          <!-- fix for small devices only -->
          <div class="clearfix hidden-md-up"></div>

          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-success elevation-1"><i class="fas fa-users"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Atendidos / Emitidos</span>
                <span class="info-box-number"><span id="kpi_turnos_atendidos"></span><small>El día de hoy</small></span>
               
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
          <div class="col-12 col-sm-6 col-md-3">
            <div class="info-box mb-3">
              <span class="info-box-icon bg-warning elevation-1"><i class="fas fa-clock"></i></span>

              <div class="info-box-content">
                <span class="info-box-text">Espera máxima promedio</span>
                <span class="info-box-number" id="kpi_promedio_tiempo_atencion"></span>
              </div>
              <!-- /.info-box-content -->
            </div>
            <!-- /.info-box -->
          </div>
          <!-- /.col -->
        </div>
            <div class="row">
            <div class="col">
            <div class="card" style="width:100%">
                        <div class="card-body">
       

                             <table class="table table-striped table-valign-middle table-bordered">
                     
                             <tr>
                                <td></td>
                                <td colspan="3"><i class="fas fa-tag"></i>&nbsp; Tiquets Obtenidos</td>
                                <td colspan="3"><i class="fas fa-tag"></i>&nbsp;Tiquets Atendidos</td>
                                <td colspan="3"><i class="fas fa-tag"></i>&nbsp;Tiquets Perdidos</td>
                                <td colspan="3"><i class="fas fa-clock"></i>&nbsp;Tiempo Espera Promedio</td>
     
                             </tr>
                             <tr>
                                <td><i>Fecha</i></td>
                                <td><b>Total</b></td>
                                <td>Manual</td>
                                <td>Virtual</td>

                                <td><b>Total</b></td>
                                <td>Manual</td>
                                <td>Virtual</td>

                                <td><b>Total</b></td>
                                <td>Manual</td>
                                <td>Virtual</td>

                                <td><b>Total</b></td>
                                <td>Manual</td>
                                <td>Virtual</td>

                             
                             </tr>
                       
                             <tbody>
                            {% for row in tablaResumen %}
                             <tr>
                                <td>{{ row.fecha }}</td>
                                <td>{{ row.total_obtenidos}}</td>
                                <td>{{ row.total_obtenidos_totem}}</td>
                                <td>{{ row.total_obtenidos_web}}</td>

                                <td>{{ row.total_atendidos}}</td>
                                <td>{{ row.total_atendidos_totem}}</td>
                                <td>{{ row.total_atendidos_web}}</td>

                                <td>{{ row.total_perdidos}}</td>
                                <td>{{ row.total_perdidos_totem}}</td>
                                <td>{{ row.total_perdidos_web}}</td>

                                <td>{{ row.promedio_tiempo_atencion}}</td>
                                <td></td>
                                <td></td>

                 
                             </tr>
                             {% endfor %}
                            

                             </tbody>
                             </table>
                        </div>
                    </div>
            </div>

            </div>
            <div class="row">
                <div class="col-lg-6">


                <div class="card card-success">
                    <div class="card-header">
                      <h3 class="card-title"><i class="fas fa-chart-bar mr-1"></i>N° Atendidos por mesón</h3>
                    </div>
                    <div class="card-body">
                      <div class="chart"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                        <canvas id="barChart" style="height: 230px; min-height: 230px; display: block; width: 766px;" width="766" height="230" class="chartjs-render-monitor"></canvas>
                      </div>
                    </div>
                  <!-- /.card-body -->
                </div>
                    


                </div>

                <div class="col-lg-6">
              
                    <div class="card card-warning">
                      <div class="card-header">
                        <h3 class="card-title"><i class="fas fa-chart-pie mr-1"></i>Pausas de atención</h3>

                      </div>
                      <div class="card-body"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                        <canvas id="donutChart" style="height: 230px; min-height: 230px; display: block; width: 766px;" width="766" height="230" class="chartjs-render-monitor"></canvas>
                      </div>
                      <!-- /.card-body -->
                    </div>

                </div>
                <!-- /.col-md-6 -->

                <!-- /.col-md-6 -->
            </div>
            <div class="row">
                  <div class="col-lg-6">


                          <div class="card card-success">
                              <div class="card-header">
                                <h3 class="card-title"><i class="fas fa-chart-bar mr-1"></i>N° Atendidos por hora</h3>

                              </div>
                              <div class="card-body">
                                <div class="chart"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                                  <canvas id="barChartHora" style="height: 230px; min-height: 230px; display: block; width: 766px;" width="766" height="230" class="chartjs-render-monitor"></canvas>
                                </div>
                              </div>
                            <!-- /.card-body -->
                          </div>
                    
                </div>
                <div class="col-lg-6">

                      <div class="card card-danger">
                            <div class="card-header">
                              <h3 class="card-title"><i class="fas fa-chart-pie mr-1"></i>Cantidad de turnos</h3>

                            </div>
                            <div class="card-body"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
                              <canvas id="donutChartStatusTurnos" style="height: 230px; min-height: 230px; display: block; width: 766px;" width="766" height="230" class="chartjs-render-monitor"></canvas>
                            </div>
                            <!-- /.card-body -->
                    </div>
                </div>
            </div>



                  </div>
                  <div class="tab-pane fade" id="custom-tabs-three-profile" role="tabpanel" aria-labelledby="custom-tabs-three-profile-tab">
               
                          <div id="detalle-ejecutivos" class="row">

                  

                                
                          </div>
                  </div>
                  <div class="tab-pane fade" id="custom-tabs-three-messages" role="tabpanel" aria-labelledby="custom-tabs-three-messages-tab">
                  </div>

                </div>
              </div>
              <!-- /.card -->
            </div>
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
    
    <script>
  $(function () {

      var local_id=$("#select_local").val();
      var fecha   =$("#fecha").val();


      fillKpiGeneral(local_id,fecha);
   
      var promesa1=fillAtendidosPorMeson(local_id,fecha);

      $.when(promesa1).done(function(data){
          
           fillMotivosPausa(local_id,fecha);

      });

      fillAtendidosPorHora(local_id,fecha);
      fillStatusTurnos(local_id,fecha);
      fillDetalleEjecutivos(local_id,fecha);


        var mqtt;
        let host='socket.turnomate.ubq.cl';
        let port=9001;

        function onConnect(){
            console.log('conectado.');
            mqtt.subscribe(local_id+'/turnos/dashboard');
        }


        function onMessageArrived(message){
            console.log("onMessageArrived : "+message.payloadString);
            if(message.payloadString=='nuevo_turno'){
                fillKpiGeneral(local_id,fecha);
            }

            if(message.payloadString=='avanza_turno'){
                fillKpiGeneral(local_id,fecha);
                fillAtendidosPorMeson(local_id,fecha);
                fillAtendidosPorHora(local_id,fecha);
                fillStatusTurnos(local_id,fecha);
                fillDetalleEjecutivos(local_id,fecha);

            }

        }

        function onFailure(message){
            console.log('FALLO!!');
            console.log(message);
        }

        function MQTTConnect(){
            clientID = "clientIDAdm_" + parseInt(Math.random() * 100);
            console.log('conectando al host '+host+' '+port);
            mqtt = new Paho.MQTT.Client(host,port,' ',clientID);

                let options={
                    timeout:10,
                    useSSL:true,
                    onSuccess: onConnect
                };

            mqtt.onMessageArrived = onMessageArrived;
            mqtt.onFailure = onFailure;

            mqtt.connect(options);

        }

        MQTTConnect();

  });

    function fillKpiGeneral(local_id,fecha){

       var promesa=$.getJSON("{{ path('kpi-general') }}",{local_id:local_id,fecha:fecha},function(data){

         $("#kpi_personas_fila").html(data.personas_fila);
         $("#kpi_turnos_perdidos").html(data.turnos_perdidos);
         $("#kpi_turnos_atendidos").html(data.turnos_atendidos+"/"+data.total_turnos);
         $("#kpi_promedio_tiempo_atencion").html(data.promedio_tiempo_atencion+' min');

       });

        return promesa;
    }

    function fillDetalleEjecutivos(local_id,fecha){

        $("#detalle-ejecutivos").load("{{ path('detalle-ejecutivos') }}",{local_id:local_id,fecha:fecha});
    }

    function fillAtendidosPorMeson(local_id,fecha){

        var promesa=$.getJSON("{{ path('bar-atendidos_meson') }}",{local_id:local_id,fecha:fecha}, function( data ) {

            var barChartCanvas = $('#barChart').get(0).getContext('2d')
            var barChartData = jQuery.extend(true, {}, data)



            var barChartOptions = {
              responsive              : true,
              maintainAspectRatio     : false,
              datasetFill             : true,
              scales: {
                  
                  yAxes: [{
                      ticks: {
                        beginAtZero: true,
                        callback: function(value) {if (value % 1 === 0) {return value;}}
                      },
                      scaleLabel: {
                        display: true,
                        labelString: 'Total atendidos'
                      }
                  }]
              }
            }

            var barChart = new Chart(barChartCanvas, {
              type: 'bar', 
              data: barChartData,
              options: barChartOptions
            })

        });

        return promesa;
    }

        function fillAtendidosPorHora(local_id,fecha){

        $.getJSON("{{ path('bar-atendidos_hora') }}",{local_id:local_id,fecha:fecha}, function( data ) {

            var barChartCanvas = $('#barChartHora').get(0).getContext('2d')
            var barChartData = jQuery.extend(true, {}, data)



            var barChartOptions = {
              responsive              : true,
              maintainAspectRatio     : false,
              datasetFill             : true,
              scales: {
                  
                  yAxes: [{
                      ticks: {
                        beginAtZero: true,
                        callback: function(value) {if (value % 1 === 0) {return value;}}
                      },
                      scaleLabel: {
                        display: true,
                        labelString: 'Total atendidos'
                      }
                  }],
                  xAxes: [{
                      scaleLabel: {
                        display: true,
                        labelString: 'Hora de atención'
                      }
                  }]
              }
            }

            var barChart = new Chart(barChartCanvas, {
              type: 'bar', 
              data: barChartData,
              options: barChartOptions
            })

        });

    }

    


     function fillMotivosPausa(local_id,fecha){

        $.getJSON("{{ path('donut-motivos-pausa') }}",{local_id:local_id,fecha:fecha}, function( data ) {

            var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
            var donutOptions     = {
              maintainAspectRatio : false,
              responsive : true,
            }
            //Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            var donutChart = new Chart(donutChartCanvas, {
              type: 'doughnut',
              data: data,
              options: donutOptions      
            })


        });
    }

    function fillStatusTurnos(local_id,fecha){

        $.getJSON("{{ path('donut-status-turnos') }}",{local_id:local_id,fecha:fecha}, function( data ) {

            var donutChartCanvas = $('#donutChartStatusTurnos').get(0).getContext('2d')
            var donutOptions     = {
              maintainAspectRatio : false,
              responsive : true,
            }
            //Create pie or douhnut chart
            // You can switch between pie and douhnut using the method below.
            var donutChart = new Chart(donutChartCanvas, {
              type: 'pie',
              data: data,
              options: donutOptions      
            })


        });
    }


        


  

  </script>

{% endblock %}