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

{% block title %}Pantalla de turnos{% endblock %}
{% block stylesheets %}
    <link href="{{ asset('pantalla/css/') }}{{ pantalla.css }}?v=6" rel="stylesheet"/>
    <style>
        .fila{

            position:relative;
            background-color:#fff6ed;
            color:white;
             border-radius: 30px 30px 30px 30px;
            -moz-border-radius: 30px 30px 30px 30px;
            -webkit-border-radius: 30px 30px 30px 30px;
            border: 0px;
        }

        .nombreFila{
            position:relative;
            background-color:#ff880a;
            text-align:center;
            border-radius: 53px 53px 53px 53px;
            -moz-border-radius: 53px 53px 53px 53px;
            -webkit-border-radius: 53px 53px 53px 53px;
            border: 0px;
            margin:5%;
            font-size:40px;
            
        }

        .turno{
            position:relative;
            text-align:center;
            background-color:#ff880a;
            text-align:center;
            border-radius: 53px 53px 53px 53px;
            -moz-border-radius: 53px 53px 53px 53px;
            -webkit-border-radius: 53px 53px 53px 53px;
            border: 0px;
            margin:5%;
            margin-left: 8%;
            margin-right: 8%;
            font-size: 40px;
        }

        .turnoSiguiente{
            background-color:#dadada;
            color:#b2b2b2;
            position:relative;
            text-align:center;
            border-radius: 53px 53px 53px 53px;
            -moz-border-radius: 53px 53px 53px 53px;
            -webkit-border-radius: 53px 53px 53px 53px;
            border: 0px;
            margin:5%;
            margin-left: 11%;
            margin-right: 11%;
            font-size: 40px;
        }

        .turnoSegundo{
            background-color: #83c8e5;
        }

    </style>
{% endblock %}
{% block body %}

<div>
<img src="https://tv.ripley.ubq.cl/assets/images/logo_ripley.png" style="margin-bottom: 20px" height="130">
</div>
<div id="layout_pantalla" class="layout_pantalla" style="width:100%">
  
    <div style="width:50%; padding-top:120px; float:left" id="turnoList" class="turnoList"></div>
    <div style="width:50%; float:right">

	<img style="width:100%" src="https://elcomercio.pe/resizer/zu2udQQ73XzI0HnTwoCS-xXlHis=/1200x1200/smart/filters:format(jpeg):quality(75)/cloudfront-us-east-1.images.arcpublishing.com/elcomercio/O7NVMB3PTNFG7AJS5IC3BF5WQI.jpg">
	</div>  
    </div>
</div>
{% endblock %}

{% block javascripts %}
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"  type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.2/mqttws31.min.js" type="text/javascript"></script>
    <script type="text/javascript">


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

        function onConnect(){
            console.log('conectado.');
            console.log('al sistema');
            mqtt.subscribe('/turnos/pantalla/{{ pantalla.token }}');
        }


        function onMessageArrived(message){
            console.log("onMessageArrived : "+message.payloadString);

            update();

        }


        function update(){ 
          
            var request = new XMLHttpRequest();
            request.open('GET','{{ path('miniscreen-content',{'token':pantalla.token}) }}',true);
         
         
            request.onreadystatechange = function() {
               
                if (this.status == 200 && this.readyState==4) {
                  
                    var htmlcontent=request.responseText;
                   
                    document.getElementById("turnoList").innerHTML=htmlcontent;
                    /*
                    if(obj.data['turnoActual'].turnolabel){
                     playAudio(obj.data['turnoActual'].turnolabel);
                    }*/

                    
                }

            }
            request.send();
            
        }

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

        function MQTTConnect(){

            console.log('conectando al host '+host+' '+port);
            clientID = "clientID_" + parseInt(Math.random() * 100);
            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);

        }

        function playAudio(turn){

    
                var fila =   turn.substring(0,1);
                turn =  turn.substring(1);

                if(turn.substring(0,1)=='0'){
                    turn=turn.substring(1);
                }


                var audio_magicinfo = new Howl({
                    src: ['/voz/beep.mp3'],
                    autoplay: true,
                    volume: 0.5,
                    onend: function() {
                        var audio_magicinfo1 = new Howl({
                            src: ['/voz/'+fila+'.wav'],
                            autoplay: true,
                            volume: 0.5,
                            onend: function() {
                                var audio_magicinfo1 = new Howl({
                                    src: ['/voz/'+turn+'.wav'],
                                    autoplay: true,
                                    volume: 0.5,
                                    onend: function() {
                                        src:"";
                                    }
                                });
                            }
                        });
                    }
                });
        }

        MQTTConnect();
        update();
    </script>
{% endblock %}