{% extends "module.html.twig" %}
{% block moduleContent %}
<div id="monitor">
    <form class="form-inline" role="search" onsubmit="return false">
        <div class="form-group">
            <input type="text" id="buscar-senha" class="form-search form-control" placeholder="{% trans %}buscar senha{% endtrans %}" />
        </div>
        <button id="btn-open-consulta" class="btn btn-primary" onclick="SGA.Monitor.Senha.consulta()">
            <span class="glyphicon glyphicon-search"></span>&nbsp;
            {% trans %}Consultar{% endtrans %}
        </button>
    </form>
    {% for su in servicos %}
    <div id="servico-{{ su.servico.id }}" class="servico empty" data-id="{{ su.servico.id }}">
        <span class="title">{{ su.sigla }} - {{ su.servico.nome }}</span>
        <ul class="fila">
        </ul>
    </div>
    {% endfor %}
</div>

{# busca #}
<div id="dialog-busca" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{% trans %}Busca{% endtrans %}</h4>
            </div>
            <div class="modal-body">
                <form class="form-inline" role="form" onsubmit="return false">
                    <div class="form-group">
                        <input id="numero_busca" type="text" maxlength="5" class="form-search form-control" placeholder="{% trans %}Número{% endtrans %}" />
                    </div>
                    <button id="btn-consultar" class="btn btn-primary" onclick="SGA.Monitor.Senha.consultar()">{% trans %}Consultar{% endtrans %}</button>
                </form>
                <div class="result">
                    <table id="result_table" class="table">
                        <thead>
                            <tr>
                                <th>{% trans %}Número{% endtrans %}</th>
                                <th>{% trans %}Serviço{% endtrans %}</th>
                                <th>{% trans %}Data chegada{% endtrans %}</th>
                                <th>{% trans %}Data início{% endtrans %}</th>
                                <th>{% trans %}Data fim{% endtrans %}</th>
                                <th>{% trans %}Triagem{% endtrans %}</th>
                                <th>{% trans %}Atendente{% endtrans %}</th>
                                <th>{% trans %}Situação{% endtrans %}</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

{# view #}
<div id="dialog-view" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{% trans %}Atendimento{% endtrans %}</h4>
            </div>
            <div class="modal-body">
                <input id="senha_id" type="hidden" />
                <fieldset>
                    <legend>{% trans %}Senha|Bilhete{% endtrans %}</legend>
                    <div>
                        <label>{% trans %}Número{% endtrans %}</label>
                        <span id="senha_numero"></span>
                    </div>
                    <div>
                        <label>{% trans %}Prioridade{% endtrans %}</label>
                        <span id="senha_prioridade"></span>
                    </div>
                    <div>
                        <label>{% trans %}Serviço{% endtrans %}</label>
                        <span id="senha_servico"></span>
                    </div>
                    <div>
                        <label>{% trans %}Data chegada{% endtrans %}</label>
                        <span id="senha_chegada"></span>
                    </div>
                    <div>
                        <label>{% trans %}Tempo de espera{% endtrans %}</label>
                        <span id="senha_espera"></span>
                    </div>
                    <div>
                        <label>{% trans %}Data início{% endtrans %}</label>
                        <span id="senha_inicio"></span>
                    </div>
                    <div>
                        <label>{% trans %}Data fim{% endtrans %}</label>
                        <span id="senha_fim"></span>
                    </div>
                    <div>
                        <label>{% trans %}Situação{% endtrans %}</label>
                        <span id="senha_status"></span>
                    </div>
                </fieldset>
                <fieldset>
                    <legend>{% trans %}Cliente{% endtrans %}</legend>
                    <div>
                        <label>{% trans %}Nome{% endtrans %}</label>
                        <span id="cliente_nome"></span>
                    </div>
                    <div>
                        <label>{% trans %}Documento{% endtrans %}</label>
                        <span id="cliente_documento"></span>
                    </div>
                </fieldset>
            </div>
            <div class="modal-footer">
                <button id="btn-reativar"
                        class="btn btn-primary"
                        onclick="SGA.Monitor.Senha.reativar($('#senha_id').val())">
                    {% trans %}Reativar senha{% endtrans %}
                </button>
                <button id="btn-transferir"
                        class="btn btn-default"
                        onclick="SGA.Monitor.Senha.transfere($('#senha_id').val(), $('#senha_numero').text())">
                    {% trans %}Transferir / Alterar senha{% endtrans %}
                </button>
                <button id="btn-cancelar"
                        class="btn btn-danger"
                        onclick="SGA.Monitor.Senha.cancelar($('#senha_id').val())">
                    {% trans %}Cancelar senha{% endtrans %}
                </button>
            </div>
        </div>
    </div>
</div>

{# transfere #}
<div id="dialog-transfere" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">{% trans %}Tranferir Senha{% endtrans %}</h4>
            </div>
            <div class="modal-body">
                <input id="transfere_id" type="hidden" />
                <div class="form-group">
                    <label>{% trans %}Senha|Bilhete{% endtrans %}</label>
                    <span id="transfere_numero"></span>
                </div>
                <div class="form-group">
                    <label for="transfere_servico">{% trans %}Novo serviço{% endtrans %}</label>
                    <select id="transfere_servico" class="form-control">
                        {% for su in servicos %}
                        <option value="{{ su.servico.id }}">{{ su.servico.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>{% trans %}Nova prioridade{% endtrans %}</label>
                    <select id="transfere_prioridade" class="form-control">
                        {% for prioridade in prioridades %}
                        <option value="{{ prioridade.id }}">{{ prioridade.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button id="btn-transferir"
                        class="btn btn-primary"
                        onclick="SGA.Monitor.Senha.transferir()">
                    {% trans %}Transferir{% endtrans %}
                </button>
            </div>
        </div>
    </div>
</div>


<div id="sga-clock" title="{% trans %}Data e hora no servidor{% endtrans %}}"></div>
<script type="text/javascript">
    $('.servico').each(function(i,v) {
        var servico = $(v);
        SGA.Monitor.ids.push(servico.data('id'));
    });
    SGA.Clock.init("sga-clock", {{ milis }});
    SGA.Monitor.alertCancelar = '{% trans %}Deseja realmente cancelar essa senha?{% endtrans %}';
    SGA.Monitor.alertReativar = '{% trans %}Deseja realmente reativar essa senha?{% endtrans %}';
    SGA.Monitor.init();
</script>
{% endblock %}