{% extends "crud/detail.html" %}
{% load i18n %}
{% load staticfiles %}
{% load webpack_static from webpack_loader %}
{% block actions %} {% endblock %}

{% block title %}
	<h1 class="page-header">
		Painel Eletrônico <small>({{sessaoplenaria}})</small>
	</h1>
{% endblock %}


{% block detail_content %}

  <audio type="hidden" id="audio" src="{% webpack_static 'audio/ring.mp3' %}"></audio>

  <div class="row">
    <div class="col-md-6"><a href="" onclick="window.open('{% url 'sapl.painel:painel_principal' pk %}','Comprovante','width=800, height=800, scrollbars=yes'); return false;" class="btn btn-primary btn-sm active">Iniciar painel completo</a></div>
    <div class="col-md-3"><button onclick="switch_painel(true)" id="id_abrir_painel" class="btn btn-primary btn-sm active" style="display: none">Abrir Painel</button></div>
    <div class="col-md-3"><button onclick="switch_painel(false)" id="id_fechar_painel" class="btn btn-danger btn-sm active" style="display: none;">Fechar Painel</button></div>
  </div>
	<br />

	<h1>Operação do Painel Eletrônico</h1>
	<h2><span id="relogio"></span></h2>
	<br />
  <div class="row">
    <div class="col-md-12 mb-2"><h3>Cronômetro do Discurso</h3></div>
  </div>

  <div class="row">
    <div class="col-md-2"><input size="2" id="discurso" name="discurso" value="" readyonly="true" class="form-control"></div>
  </div>
	<br />

  <div class="row">
    <div class="col-md-6"><button type="button" id="discursoStart" class="btn btn-success">Iniciar</button></div>
    <div class="col-md-6"><button type="button" id="discursoReset" class="btn btn-success">Reiniciar</button></div>
  </div>

	<br /><br >
  <div class="row">
    <div class="col-md-12 mb-2"><h3>Cronômetro do Aparte</h3></div>
  </div>

  <div class="row">
    <div class="col-md-2"><input size="2" id="aparte" name="aparte" value="" readyonly="true" class="form-control"></div>
  </div>
	<br />

  <div class="row">
    <div class="col-md-6"><button type="button" id="aparteStart" class="btn btn-success">Iniciar</button></div>
    <div class="col-md-6"><button type="button" id="aparteReset" class="btn btn-success" class="btn btn-success">Reiniciar</button></div>
  </div>

	<br /><br >
  <div class="row">
    <div class="col-md-12 mb-2"><h3>Cronômetro da Questão de Ordem </h3></div>
  </div>

  <div class="row">
    <div class="col-md-2"><input size="2" id="ordem" name="ordem" value="" readyonly="true" class="form-control"></div>
  </div>
	<br />

  <div class="row">
    <div class="col-md-6"><button type="button" id="ordemStart" class="btn btn-success">Iniciar</button></div>
    <div class="col-md-6"><button type="button" id="ordemReset" class="btn btn-success">Reiniciar</button></div>
  </div>

  <br/>
  <br/>

  <div class="row">
    <div class="col-md-12 mb-2"><h3>Cronômetro de Considerações Finais</h3></div>
  </div>

  <div class="row">
    <div class="col-md-4"><input size="2" id="consideracoes" name="consideracoes" value="" readyonly="true" class="form-control"></div>
  </div>
  <br />

  <div class="row">
    <div class="col-md-6"><button type="button" id="consideracoesStart" class="btn btn-success">Iniciar</button></div>
    <div class="col-md-6"><button type="button" id="consideracoesReset" class="btn btn-success">Reiniciar</button></div>
  </div>
  <br /><br >

  <div class="row">
    <div class="col-md-6"><button type="button" id="sinalSonoro" class="btn btn-success" onclick="document.getElementById('audio').play();">Sinal Sonoro</button></div>
  </div>

{% endblock detail_content %}

{% block extra_js %}
<script language="JavaScript">
$(function() {

	function checkTime(i) {
		if (i<10) {i = "0" + i};
			return i;
	}

	function startTime() {
		var today=new Date();
	 	var h=today.getHours();
		var m=today.getMinutes();
		var s=today.getSeconds();
		m = checkTime(m);
		s = checkTime(s);
		$("#relogio").text(h+":"+m+":"+s)
		var t = setTimeout(function(){
		    startTime()
		},500);
	}

	startTime();
    var audioAlertFinish = document.getElementById("audio");
	$('#discurso').prop('disabled', false);
	$('#aparte').prop('disabled', false);
	$('#ordem').prop('disabled', false);
    $('#consideracoes').prop('disabled', false);

    $('#discurso').runner({
        autostart: false,
        countdown: true,
        startAt: {{cronometro_discurso}} * 1000,
        stopAt: 0,
        milliseconds: false
	}).on('runnerFinish', function(eventObject, info){
        $.get('/painel/cronometro', { tipo: 'discurso', action: 'stop' } );
        audioAlertFinish.play();
        $('#discursoReset').show();
        $('#discurso').runner('stop');
        $('#discursoStart').text('Iniciar');

    });

    $('#discursoStart').click(function() {

		if ($('#discursoStart').text() == 'Iniciar'){

			$.get('/painel/cronometro', { tipo: 'discurso', action: 'start' } );

			$('#discursoReset').hide();
			$('#discurso').runner('start');
			$('#discursoStart').text('Parar');

		} else {

			$.get('/painel/cronometro', { tipo: 'discurso', action: 'stop' } );

			$('#discursoReset').show();
			$('#discurso').runner('stop');
			$('#discursoStart').text('Iniciar');
		}
    });

    $('#discursoReset').click(function() {

		$.get('/painel/cronometro', { tipo: 'discurso', action: 'reset' } );

        $('#discurso').runner('stop');
        $('#discurso').runner('reset');
    });

    $('#aparte').runner({
        autostart: false,
        countdown: true,
        startAt: {{cronometro_aparte}} * 1000,
        stopAt: 0,
        milliseconds: false
	}).on('runnerFinish', function(eventObject, info){
        $.get('/painel/cronometro', { tipo: 'aparte', action: 'stop' } );
        audioAlertFinish.play();
        $('#aparteReset').show();
        $('#aparte').runner('stop');
        $('#aparteStart').text('Iniciar');

    });

	$('#aparteStart').click(function(){
		if ($('#aparteStart').text() == 'Iniciar') {

			$.get('/painel/cronometro', { tipo: 'aparte', action: 'start' } );

			$('#aparteReset').hide();
	        $('#aparte').runner('start');
			$('#aparteStart').text('Parar');

		} else {

			$.get('/painel/cronometro', { tipo: 'aparte', action: 'stop' } );

			$('#aparteReset').show();
			$('#aparte').runner('stop');
			$('#aparteStart').text('Iniciar');

		}
    });

    $('#aparteReset').click(function() {

		$.get('/painel/cronometro', { tipo: 'aparte', action: 'reset' } );

        $('#aparte').runner('stop');
        $('#aparte').runner('reset');
    });

    $('#ordem').runner({
        autostart: false,
        countdown: true,
        startAt: {{cronometro_ordem}} * 1000,
        stopAt: 0,
        milliseconds: false
	}).on('runnerFinish', function(eventObject, info){
        $.get('/painel/cronometro', { tipo: 'ordem', action: 'stop' } );
        audioAlertFinish.play();
        $('#ordemReset').show();
        $('#ordem').runner('stop');
        $('#ordemStart').text('Iniciar');

    });

    $('#ordemStart').click(function() {
		if ($('#ordemStart').text() == 'Iniciar') {

			$.get('/painel/cronometro', { tipo: 'ordem', action: 'start' } );

			$('#ordemReset').hide();
	        $('#ordem').runner('start');
			$('#ordemStart').text('Parar');


		} else {

			$.get('/painel/cronometro', { tipo: 'ordem', action: 'stop' } );

			$('#ordemReset').show();
	        $('#ordem').runner('stop');
			$('#ordemStart').text('Iniciar');

		}
    });

    $('#ordemReset').click(function() {

		$.get('/painel/cronometro', { tipo: 'ordem', action: 'reset' } );

        $('#ordem').runner('stop');
        $('#ordem').runner('reset');
    });

     $('#consideracoes').runner({
        autostart: false,
        countdown: true,
        startAt: {{cronometro_consideracoes}} * 1000,
        stopAt: 0,
        milliseconds: false
    }).on('runnerFinish', function(eventObject, info){
        $.get('/painel/cronometro', { tipo: 'consideracoes', action: 'stop' } );
        audioAlertFinish.play();
        $('#consideracoesReset').show();
        $('#consideracoes').runner('stop');
        $('#consideracoesStart').text('Iniciar');


    });

    $('#consideracoesStart').click(function(){
        if ($('#consideracoesStart').text() == 'Iniciar') {

            $.get('/painel/cronometro', { tipo: 'consideracoes', action: 'start' } );

            $('#consideracoesReset').hide();
            $('#consideracoes').runner('start');
            $('#consideracoesStart').text('Parar');

        } else {

            $.get('/painel/cronometro', { tipo: 'consideracoes', action: 'stop' } );

            $('#consideracoesReset').show();
            $('#consideracoes').runner('stop');
            $('#consideracoesStart').text('Iniciar');

        }
    });

    $('#consideracoesReset').click(function() {

        $.get('/painel/cronometro', { tipo: 'consideracoes', action: 'reset' } );

        $('#consideracoes').runner('stop');
        $('#consideracoes').runner('reset');
    });

});

function switch_painel(aberto) {
    var pk_sessao = {{root_pk}};
    var botao_abrir = $('#id_abrir_painel');
    var botao_fechar = $('#id_fechar_painel');


    $.ajax({
        data: {pk_sessao: pk_sessao, aberto: aberto},
        type: 'POST',
        url: "{% url 'sapl.painel:switch_painel' %}",
        headers: {'X-CSRFToken': getCookie('csrftoken')},
    });

    if (aberto) {
        botao_abrir.hide();
        botao_fechar.show();
    } else {
        botao_abrir.show();
        botao_fechar.hide();
    }
}

$(document).ready(function(){
    var pk_sessao = {{root_pk}};
    var botao_abrir = $('#id_abrir_painel');
    var botao_fechar = $('#id_fechar_painel');

    $.ajax({
        data: {pk_sessao: pk_sessao},
        type: 'GET',
        dataType: 'json',
        url: "{% url 'sapl.painel:verifica_painel' %}",
        error: function () {
            alert("Erro ao verificar o Painel");
        },
        success: function (data) {
            if (data['status']) {
                botao_abrir.hide();
                botao_fechar.show();
            } else {
                botao_abrir.show();
                botao_fechar.hide();
            }
        },
    });


});

</script>

{% endblock %}