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

{% block title %}Turnomate{% endblock %}

{% block body %}

<style>
.modal_loading {
    display:    none;
    position:   fixed;
    z-index:    1000;
    top:        0;
    left:       0;
    height:     100%;
    width:      100%;
    background: rgba( 255, 255, 255, .8 ) 
                url('/img/pIkfp.gif') 
                50% 50% 
                no-repeat;
}

/* When the body has the loading class, we turn
   the scrollbar off with overflow:hidden */
body.loading {
    overflow: hidden;   
}

/* Anytime the body has the loading class, our
   modal_loading element will be visible */
body.loading .modal_loading {
    display: block;
}
.modalAlerta {
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 50;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modalAlerta-content {
  background-color: #cc3333 !important;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 50%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.closeAlerta {
  color: white;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.closeAlerta:hover,
.closeAlerta:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
.modalAlertaNone {
    display: none;
}
.modalAlertaTitulo {
    text-align: center;
    font-weight: 700;
    color: white;
}
.modalAlertaTexto {
    text-align: center;
    color: white;
    font-size: 1.6rem;
    font-weight: 700;
}
</style>

     <div class="container-fluid">
        <div class="row">
            <div class="col">
            <form class="form-inline" method="post" action="{{ path('atencion')}}" onchange="$(this).submit()">
            <div class="form-group mb-2">
                <b>Seleccione módulo de atención : </b>&nbsp;
                {% set l_aux='' %}
                <select class="form-control" name="modulo_id">
                    {% for mod in modulos_usuario %}
                        {% if l_aux!=mod.local %}
                    <option disabled>-- {{ mod.local}} --</option>
                        {% endif %}
                    <option value="{{ mod.id_modulo }}" {% if mod.id_modulo==app.session.get('modulo_id')%} selected {% endif %}>{{ mod.nombre_modulo}}</option>
                    {% set l_aux = mod.local %}
                    {% endfor %}
                </select>

                
            </div>
            </div>
            </form>
        </div>
     </div>
    <!-- Content Header (Page header) -->


    <div class="content-header">
        <div class="container-fluid" id="kpi_usuario">

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

    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
           
            <div class="row">
                <div class="col-lg-8">
                    <div class="card">
                        <div class="card-header border-0">
                            <div class="d-flex justify-content-between">
                                <h3 class="card-title">Atendiendo a:</h3>
                                <h2>{{ modulo }}</h2>
                               
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="d-flex">
                                <div class="col-lg-6">
                                <div>
                                    <p style="text-align: center"><span id="turno" class="text-bold" style="font-size:70px;text-shadow: 6px 6px 3px rgba(150, 150, 150, 0.71);">
                                     {% if turnoActual!=''%} 
                                        {{ turnoActual }} 
                                        <p id="label_nombre" style="text-align:center; font-size:20px">{{ nombre_cliente }}</p>
                                     {% else %} -- {% endif %}
                                    </span>
                                

                                    </p>
                                     <!--<p style="text-align:center">Marcelo Muñoz Cumplido</p>-->
				                             
                                </div>
                                </div>
                                <div class="col-lg-6">
                                    <button id="btn_atencion" type="button" class="btn btn-block btn-success btn-lg">Atender siguiente</b></button>
                                    <button id="btn_rellamar" type="button" class="btn btn-block btn-success btn-lg">Re llamar</b></button>
                                    <button id="btn_pausar_atencion" type="button" class="btn btn-block btn-warning btn-lg" style="margin-top: 15px;">Terminar atención <b>y pausar</b></button>
                                    <button id="btn_turno_perdido" type="button" class="btn btn-block btn-danger btn-lg" style="margin-top: 15px;">Posponer turno</button>
                                    
                                    
                                </div>



                            </div>



                        </div>
                    </div>

                </div>
                <!-- /.col-md-6 -->
                <div class="col-lg-4" style="overflow: auto; max-height: 400px">
                    <div class="card">
                        <div id="detalle_turno" class="card-header border-0">
                            
                          
                        </div>
                        <div class="card-body">
                            <div class="d-flex" style="overflow: auto">

                            </div>
                            <!-- /.d-flex -->




                        </div>
                    </div>
                    <!-- /.card -->


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


            <div class="card">
                <div class="card-header">
                
                    <h3 class="card-title">Servicios que atiende este módulo : <b>{{ nombre_buffer }}</b></h3>
                   
                    
                     <a class="btn btn-default" style="float:right" id="btn_registro" href="#"> <span class="info-box-icon"><i class="fa fa-users"></i></span>&nbsp;Registro de atenciones</a>
                </div>
                <!-- /.card-header -->
                <div class="card-body p-0">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th style="width: 10px">Fila</th>
                            <th style="width: 200px;">Nombre de servicio</th>
                            <th>Personas en espera: <span id="lbl_personas_en_espera">0</span></th>
         

                        </tr>
                        </thead>
                        <tbody id="tabla_servicio">
                        </tbody>
                    </table>
                </div>
                <!-- /.card-body -->
            </div>
        </div><!-- /.container-fluid -->

        <div class="modal_loading"></div>
    </div>
    <!-- /.content -->

    <div class="modal fade" id="modal-motivos-pausa">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Seleccione motivo de pausa</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div id="modal-body-motivos-pausa" class="modal-body-motivos-pausa">
            
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
 
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>


      <div class="modal fade" id="modal-motivos-visita">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title">Seleccione motivo de visita</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div id="modal-body-motivos-visita" class="modal-body-motivos-visita">
            
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
 
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>



       <div class="modal fade" id="modal-registro">
        <div class="modal-dialog"  style="max-width:1000px">
          <div class="modal-content" style="padding: 20px;">
            <div class="modal-header">
              <h4 class="modal-title">Registro de atenciones</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div id="modal-body-registro" class="modal-body-registro">
            
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
 
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>



       <div class="modal fade" id="modal-derivar">
        <div class="modal-dialog"  style="max-width:500px">
          <div class="modal-content" style="padding: 20px;">
            <div class="modal-header">
              <h2 id="modal_derivar_title" class="modal-title"></h2>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
           
           
            <div id="modal-body-derivar" class="modal-body-derivar">
            
            </div>
            <div class="modal-footer" style="text-align:right">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
 
            </div>
          </div>
          <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
      </div>


    <div class="modal fade" id="modal-opciones">
        <div class="modal-dialog"  style="max-width:500px">
            <div class="modal-content" style="padding: 20px;">



                <div id="modal-body-opciones" class="modal-body-opciones">

                </div>
                <div class="modal-footer" style="text-align:right">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>

                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>



        <div class="modal fade" id="modal-reserva">
        <div class="modal-dialog"  style="max-width:500px">
          <div class="modal-content" style="padding: 20px;">
            <div class="modal-header">
              <h4 class="modal-title">Reserva</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div id="modal-body-reserva" class="modal-body-reserva">
                <input type="hidden" name="reserva_id" id="reserva_id">
                <button id="btn_atender_reserva" type="button" class="btn btn-success" data-dismiss="modal">Atender reserva</button>
            </div>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
 
            </div>
          </div>
        </div>
        </div>

        <div class="modal fade" id="modal-turno">
        <div class="modal-dialog"  style="max-width:500px">
          <div class="modal-content" style="padding: 20px;">
            <div class="modal-header">
              <h4 class="modal-title">Activar turno pospuesto</h4>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div id="modal-body-turno" class="modal-body-turno">
                
            </div>
            <input type="hidden" name="turno_id" id="turno_id">
                <button id="btn_activar_turno" type="button" class="btn btn-success" data-dismiss="modal">Activar</button>
            <div class="modal-footer justify-content-between">
              <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
 
            </div>
          </div>
        </div>
        </div>

        <div id="modalAlerta" class="modalAlerta modalAlertaNone">

            <!-- Modal content -->
            <div class="modalAlerta-content">
                <span class="closeAlerta" onclick="cerrarAlerta()">&times;</span>
                <h2 class="modalAlertaTitulo">Alerta SOS Enviada ⚠</h2>                
            </div>

        </div>

        <div id="modalAlertaSOS" class="modalAlerta modalAlertaNone">

            <!-- Modal content -->
            <div class="modalAlerta-content">
                <span class="closeAlerta" onclick="cerrarAlertaIntervalo()">&times;</span>
                <h2 class="modalAlertaTitulo">Alerta SOS ⚠</h2>
                <p id="modalAlertaText" class="modalAlertaTexto" ></p>
            </div>

        </div>

    <script type="text/javascript">

            var status_atencion=1;

            function modalMotivo(id_motivo){

                status_atencion=0;
                    $("#btn_atencion").prop('disabled',true);
                    $("#btn_pausar_atencion").html("Continuar atención <b>y atender siguiente</b>");
                    atenderPausar(id_motivo);
                    $("#modal-motivos-pausa").modal('hide');
                   
            }

            function modalMotivoVisita(id_motivo_visita){
               
                $.post("{{ path('set-motivo-atencion')}}",{id_motivo_visita:id_motivo_visita},function(data){

                        console.log(data);

                        $("#label_motivo_visita").html("Motivo de visita : "+data.motivo_nombre);
                });

                $("#modal-motivos-visita").modal('hide');
            }

            



            function tabla_servicios(){
                
                $("#tabla_servicio").load('{{ path('tabla_servicios') }}',{modulo_id: {{ app.session.get('modulo_id')}} });
                

            }


            function kpi_usuario(){
                $("#kpi_usuario").load('{{ path('kpi-usuario') }}',{modulo_id: {{ app.session.get('modulo_id')}} });
            }


            function rellamar(){

                $.getJSON("{{ path('rellamar') }}",{}, function( data ) {
                  
                    if(data.error==true){
                        alert('No hay turnos en espera');
                    }

                });

            }


            function atender(pausar,perdido){

              
                $("#btn_atencion").prop('disabled',true);

                $.getJSON("{{ path('atender') }}",{pausar:1,perdido:perdido}, function( data ) {
					
                    $("#btn_atencion").prop('disabled',false);

                    if(data.error==true){
                        alert('No hay turnos en espera');
                    }

                    if(data.code==200){
                        $("#turno").html(data.data.turno_label);
                        $("#label_nombre").html(data.data.nombre);
                        //detalleTurno(data.data.turno_id);
                        document.location.reload();
                      
                    }else{
                        $("#turno").html('--');
                        $("#label_nombre").html('--');
                        $("#detalle_turno").html('');

                        
                       
                        
                    }
                    tabla_servicios();
                });

            }

            

            function atenderPausar(id_motivo){


                $.getJSON("{{ path('atender') }}",{pausar:1,perdido:0,id_motivo:id_motivo}, function( data ) {
                  
                    if(data.error==true){
                        alert('No hay turnos en espera');
                    }


                    if(data.code==200){

                        $("#turno").html(data.data.turno_label);
                        $("#label_nombre").html(data.data.nombre);
                        detalleTurno(data.data.turno_id);
                       
                    }else{
                        $("#turno").html('--');
                        $("#label_nombre").html('');
                         $("#detalle_turno").html('');
                      
                    }
                    tabla_servicios();
                });

            }


            $("#btn_atencion").click(function () {
                derivar(0);
            });

           

           
             $("#btn_rellamar").click(function () {
                rellamar();
                 $("#btn_rellamar").attr('disabled','disabled');

                 var t=setTimeout(function(){ 
                     $("#btn_rellamar").removeAttr('disabled');
                 }, 5000);

        

            });


            $("#btn_turno_perdido").click(function () {
                atender(1,1);
            });

            $("#btn_registro").click(function(){

                 $.get("{{ path('registro') }}",{}, function( data ) {
                     $("#modal-body-registro").html(data);
                    $("#modal-registro").modal('show');
                });

                    
            });



            $("#btn_pausar_atencion").click(function () {

            
                if(status_atencion==1){
                    
                    $("#modal-body-motivos-pausa").html("");
                    $.getJSON("{{ path('motivos-pausa') }}",{modulo_id: {{ app.session.get('modulo_id')}} }, function( data ) {

                        $.each( data, function( key, val ) {

                            $("#modal-body-motivos-pausa").append("<button id='btn_turno_perdido' type='button' class='btn btn-block btn-warning btn-lg' onclick='modalMotivo("+val.id+")'>"+val.nombre+"</button>");
                        });

                        $("#modal-motivos-pausa").modal('show');
                       
                    });

                    
               
                }else{
                    status_atencion=1;
                    $("#btn_atencion").prop('disabled',false);
                    $("#btn_pausar_atencion").html("Terminar atención <b>y pausar</b>");
                    atender(0,0);

                }
            });



            $("#btn_motivo_visita").click(function () {

                    $("#modal-body-motivos-visita").html("");
                    

                    $.getJSON("{{ path('motivos-visita') }}",{}, function( data ) {

                        $.each( data, function( key, val ) {

                            $("#modal-body-motivos-visita").append("<button id='btn_turno_perdido' type='button' class='btn btn-block btn-warning btn-lg' onclick='modalMotivoVisita("+val.id+")'>"+val.nombre+"</button>");
                        });

                        $("#modal-motivos-visita").modal('show');
                       
                    });

            });



            function activar_turno(id_turno=0){

                $.get("{{ path('turno-activar-modal') }}",{id_modulo :{{app.session.get('modulo_id')}},id_turno:id_turno }, function( data ) {
                      
                        $("#modal-body-turno").html(data);
                        $("#modal-turno").modal('show'); 
                         $("#turno_id").val(id_turno);
                 });

               
                
            }

            function derivar(id_turno=0){
                 $("#modal-body-derivar").html('');
                 $.get("{{ path('filas-derivar') }}",{id_modulo :{{app.session.get('modulo_id')}},id_turno:id_turno }, function( data ) {

                     if(data!='') {
                         $("#modal-body-derivar").html(data);
                         $("#modal-derivar").modal('show');
                     }
                 });
            }

            function opcionesTurno(id_turno=0){
                $("#modal-body-opciones").html('');
                $.get("{{ path('opciones-turno') }}",{id_modulo :{{app.session.get('modulo_id')}},id_turno:id_turno }, function( data ) {

                    $("#modal-body-opciones").html(data);
                    $("#modal-opciones").modal('show');
                });
            }


            function atender_reserva(id){
                
                    $("#reserva_id").val(id);
                    $("#modal-reserva").modal('show');
            }

            $("#btn_activar_turno").click(function(){

                    var id_turno=$("#turno_id").val();

                    $.getJSON("{{ path('turno-activar') }}",{id_turno:id_turno}, function( data ){
                                tabla_servicios();
                    });

            });


            $("#btn_atender_reserva").click(function(){

                    var id_reserva=$("#reserva_id").val();
                    $.getJSON("{{ path('reserva-atender') }}",{pausar:0,perdido:0,id_reserva:id_reserva}, function( data ){
                                if(data.code==200){
                                    $("#turno").html(data.data.turno_label);
                                    $("#label_nombre").html(data.data.nombre);
                                   
                                }else{
                                    $("#turno").html('--');
                                    $("#label_nombre").html('');
                                    $("#detalle_turno").html('');
                                   
                                }
                              // tabla_servicios();
                    });

            });


            function detalleTurno(id){

           // turnoActualId

            $.post("{{ path('detalle-turno') }}",{turno_id :id}, function( data ) {
                      
                        $("#detalle_turno").html(data);
                        
            });


        }

        let intervalo;

        function reproducirAlerta() {
            const audio = new Audio("{{ asset('voz/sos.mp3')}}");
            audio.play();
        }

        function cerrarAlertaIntervalo() {
            clearInterval(intervalo);
            var modal = $('#modalAlerta');
            modal[0].classList.add('modalAlertaNone');
        }

    function cerrarAlerta() {

        var modal = $('#modalAlerta');
        modal[0].classList.add('modalAlertaNone');
    }

	 function sos(){
                
                local_id= '{{ local_id }}';
                 $.post("{{ path('agente-sos') }}",{modulo :'{{ modulo }}',local_id:local_id, modulo_id: {{ app.session.get('modulo_id')}}}, function( data ) {
                      
                    var modal = $('#modalAlerta');
                    modal[0].classList.remove('modalAlertaNone');
                
                    setTimeout(() =>{
                        modal[0].classList.add('modalAlertaNone');
                    }, 10000);
            });
        }
            
            
         $(function () {

        $body = $("body");

            $(document).on({
                ajaxStart: function() { $body.addClass("loading");    },
                ajaxStop: function() { $body.removeClass("loading"); }    
            });


                 var mqtt;
        let host="{{ broker_url }}";
        let port={{ socket_port }};
        let local_id={{ local_id }};
        function onConnect(){
            console.log('conectado.'+local_id);
            mqtt.subscribe(local_id+'/turnos/dashboard');
        }

        function onMessageArrived(message){
            console.log("onMessageArrived : "+message.payloadString);
            if(message.payloadString=='nuevo_turno'){
                console.log('A');
                
                
                tabla_servicios(local_id);


            }

            if(message.payloadString=='avanza_turno'){
                tabla_servicios(local_id);
                kpi_usuario();

            }

            if(message.payloadString.includes('sos')){


              
                var res = message.payloadString.split("_");
                
                if(res[1]=='{{ modulo }}'){
                    console.log('Soy yo mismo ....');
                }else{

                    

                    intervalo = setInterval(reproducirAlerta(), 2500)

                    var tex = $('#modalAlertaText');
                    tex[0].innerText = 'Agente '+res[1]+' necesita ayuda !!';
                    var modal = $('#modalAlertaSOS');
                    modal[0].classList.remove('modalAlertaNone');
                
                    new Notification('Alerta SOS', { body: 'Agente '+res[1]+' necesita ayuda !!', icon: "https://admin.turnocolina.ubq.cl/img/logo_color.svg"});
                }
            }

        }

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

        function MQTTConnect(){

            console.log('conectando al host '+host+' '+port);
            var client_id=Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 10);
            mqtt = new Paho.MQTT.Client(host,port,' ',client_id);

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

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

            mqtt.connect(options);

        }




        

        MQTTConnect();
        
        tabla_servicios(1); 
        kpi_usuario();
        var t=setInterval(function(){ tabla_servicios();}, 60000);

        var t_aviso = setInterval(
            function(){
                var pf = $("#lbl_personas_en_espera").html();
               
                if(pf!='0' && $("#turno").html().trim()=='--' ){

                    {% if app.session.get('modulo_id')==34 %}
                    new Notification('Notificacion de Personas en Fila', { body: "Hay clientes en espera...", icon: "https://admin.turnocolina.ubq.cl/img/logo_color.svg"});
                    {% endif %}
                    const audio = new Audio("{{ asset('voz/notificacion_ejecutivo.mp3')}}");
                    new Notification('Cliente esperando', { body: 'Atención hay clientes esperando en la fila', icon: "https://admin.turnocolina.ubq.cl/img/logo_color.svg"});
		            audio.play();
                   
                }


            },30000
        );

        {% if turnoActualId > 0 %}
            detalleTurno({{ turnoActualId }});
        {% endif %}

        });

        
    </script>
{% endblock %}