{% extends "module.html.twig" %}
{% block moduleContent %}
    <div id="dialog-local" 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 %}Guichê{% endtrans %}</h4>
                </div>
                <div class="modal-body">
                    <form id="local_form" action="#" method="post" role="form">
                        <div class="row">
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label">{% trans %}Número{% endtrans %}</label>
                                    <input type="text" id="numero_local" name="local" maxlength="3" class="form-control config-numero-local" value="{{ local }}" />
                                </div>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="control-label" title="{% trans %}Tipo de Atendimento{% endtrans %}">{% trans %}Atendimento{% endtrans %}</label>
                                    <select id="tipo_atendimento" name="tipo" class="form-control config-tipo-atendimento">
                                        {% for v,l in tiposAtendimento %}
                                        <option value="{{ v }}" {% if tipoAtendimento == v %}selected="selected"{% endif %}>{{ l }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                    <script type="text/javascript">
                        $('#local_form').on('submit', function() {
                            var numero = parseInt($('#numero_local').val());
                            if (isNaN(numero) || numero <= 0) {
                                $('#numero_local').val('');
                            } else {
                                SGA.ajax({
                                    url: '{{ baseUrl() }}/modules/{{ module.chave }}/set_local',
                                    type: 'post',
                                    data: $(this).serialize(),
                                    success: function(response) {
                                        window.location.reload();
                                    }
                                });
                            }
                            return false;
                        });
                    </script>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="$('#local_form').submit(); return false">{% trans %}Salvar{% endtrans %}</button>
                </div>
            </div>
        </div>
    </div>
    {# se ainda nao definiu o numero do local, exibe automaticamente a dialog #}
    {% if local <= 0 %}
        <script type="text/javascript">
            SGA.dialogs.modal('#dialog-local');
            $('#local').focus();
        </script>
    {% else %}
        {# local definido, exibe tela de atendimento #}
        <div id="atendimento">
            <div class="row">
                <div class="col-sm-3 col-md-2">
                    <div id="local">
                        <span class="label-local">{% trans %}Guichê{% endtrans %}</span>
                        <span class="numero config-numero-local">{{ local }}</span>
                        <a href="#dialog-local" data-toggle="modal">{% trans %}Alterar{% endtrans %}</a>
                    </div>
                </div>
                <div class="col-sm-9 col-md-10">
                    <div id="controls">
                        <div id="chamar" class="control" style="display:none">
                            <div class="row">
                                <div class="col-xs-12 col-md-4">
                                    <button class="btn btn-default btn-block btn-control chamar"
                                            onclick="SGA.Atendimento.chamar(this)"
                                            title="{% trans %}Chamar próximo{% endtrans %}"
                                            disabled="disabled">
                                        <span>{% trans %}Chamar próximo{% endtrans %}</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="iniciar" class="control" style="display:none">
                            <div class="senha">
                                <h3 class="title">{% trans %}Atendimento{% endtrans %}</h3>
                                <ul class="info {% if atendimento and atendimento.senha.isPrioridade %}prioridade{% endif %}">
                                    <li class="numero">
                                        <span class="atend-label">{% trans %}Senha|Bilhete{% endtrans %}</span>
                                        <span class="atend-value">{{ atendimento.senha }}</span>
                                    </li>
                                    <li class="servico">
                                        <span class="atend-label">{% trans %}Serviço{% endtrans %}</span>
                                        <span class="atend-value">{{ atendimento.servicoUnidade.nome }}</span>
                                    </li>
                                    <li class="nome-prioridade">
                                        <span class="atend-label">{% trans %}Prioridade{% endtrans %}</span>
                                        <span class="atend-value">{{ atendimento.senha.prioridade.nome }}</span>
                                    </li>
                                    <li class="nome">
                                        <span class="atend-label">{% trans %}Nome{% endtrans %}</span>
                                        <span class="atend-value">
                                            {% if atendimento.cliente.nome %}
                                                {{ atendimento.cliente.nome }}
                                            {% else %}
                                                -
                                            {% endif %}
                                        </span>
                                    </li>
                                </ul>
                            </div>
                            <div class="row">
                                <div class="col-xs-4">
                                    <button class="btn btn-default btn-block btn-control chamar_novamente"
                                            onclick="SGA.Atendimento.chamar_novamente(this)"
                                            title="{% trans %}Chamar novamente{% endtrans %}">
                                        <span>{% trans %}Chamar novamente{% endtrans %}</span>
                                    </button>
                                </div>
                                <div class="col-xs-4">
                                    <button class="btn btn-default btn-block btn-control iniciar"
                                            onclick="SGA.Atendimento.iniciar(this)"
                                            title="{% trans %}Iniciar atendimento{% endtrans %}">
                                        <span>{% trans %}Iniciar atendimento{% endtrans %}</span>
                                    </button>
                                </div>
                                <div class="col-xs-4">
                                    <button class="btn btn-default btn-block btn-control nao_compareceu"
                                            onclick="SGA.Atendimento.nao_compareceu(this)"
                                            title="{% trans %}Não compareceu{% endtrans %}">
                                        <span>{% trans %}Não compareceu{% endtrans %}</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="encerrar" class="control" style="display:none">
                            <div class="senha">
                                <h3 class="title">{% trans %}Atendimento{% endtrans %}</h3>
                                <ul class="info {% if atendimento and atendimento.senha.isPrioridade %}prioridade{% endif %}">
                                    <li class="numero">
                                        <span class="atend-label">{% trans %}Senha|Bilhete{% endtrans %}</span>
                                        <span class="atend-value">{{ atendimento.senha }}</span>
                                    </li>
                                    <li class="servico">
                                        <span class="atend-label">{% trans %}Serviço{% endtrans %}</span>
                                        <span class="atend-value">{{ atendimento.servicoUnidade.nome }}</span>
                                    </li>
                                    <li class="nome-prioridade">
                                        <span class="atend-label">{% trans %}Prioridade{% endtrans %}</span>
                                        <span class="atend-value">{{ atendimento.senha.prioridade.nome }}</span>
                                    </li>
                                    <li class="nome">
                                        <span class="atend-label">{% trans %}Nome{% endtrans %}</span>
                                        <span class="atend-value">
                                            {% if atendimento.cliente.nome %}
                                                {{ atendimento.cliente.nome }}
                                            {% else %}
                                                -
                                            {% endif %}
                                        </span>
                                    </li>
                                </ul>
                            </div>
                            <div class="row">
                                <div class="col-xs-4">
                                    <button class="btn btn-default btn-block btn-control chamar_novamente"
                                            onclick="SGA.Atendimento.chamar_novamente(this)"
                                            title="{% trans %}Chamar novamente{% endtrans %}">
                                        <span>{% trans %}Chamar novamente{% endtrans %}</span>
                                    </button>
                                </div>
                                <div class="col-xs-4">
                                    <button class="btn btn-default btn-block btn-control encerrar"
                                            onclick="SGA.Atendimento.encerrar(this)"
                                            title="{% trans %}Encerrar atendimento{% endtrans %}">
                                        <span>{% trans %}Encerrar atendimento{% endtrans %}</span>
                                    </button>
                                </div>
                                <div class="col-xs-4">
                                    <button class="btn btn-default btn-block btn-control erro_triagem"
                                            onclick="SGA.Atendimento.erro_triagem(this)"
                                            title="{% trans %}Erro de triagem{% endtrans %}">
                                        <span>{% trans %}Erro de triagem{% endtrans %}</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div id="codificar" class="control" style="display:none">
                            <div class="col-xs-6">
                                <h3>{% trans %}Serviços disponíveis{% endtrans %}</h3>
                                <ul id="macro-servicos" class="items">
                                    {% for su in servicos %}
                                        <li id="servico-{{ su.servico.id }}">
                                            {% if su.servico.subServicos|length == 0 %}
                                                <a href="javascript:void(0)"
                                                   onclick="SGA.Atendimento.addServico(this)"
                                                   data-id="{{ su.servico.id }}"
                                                   title="{% trans %}Adicionar{% endtrans %}">
                                                    {{ su.servico.nome }}
                                                </a>
                                            {% else %}
                                                {{ su.servico.nome }}
                                                <ul>
                                                {% for sub in su.servico.subServicos %}
                                                    <li id="servico-{{ sub.id }}">
                                                        <a href="javascript:void(0)"
                                                           onclick="SGA.Atendimento.addServico(this)"
                                                           data-id="{{ sub.id }}"
                                                           title="{% trans %}Adicionar{% endtrans %}">
                                                            {{ sub.nome }}
                                                        </a>
                                                    </li>
                                                {% endfor %}
                                                </ul>
                                            {% endif %}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </div>
                            <div class="col-xs-6">
                                <h3>{% trans %}Serviços realizados{% endtrans %}</h3>
                                <ul id="servicos-realizados" class="items">
                                </ul>
                                <div class="redirecionar">
                                    <input id="encerrar-redirecionar" type="checkbox" value="1" />
                                    <label for="encerrar-redirecionar"
                                           title="{% trans %}Marque para codificar e redirecionar o atendimento atual{% endtrans %}">
                                        <span>{% trans %}Redirecionar atendimento ao encerrar {% endtrans %}</span>
                                    </label>
                                </div>
                                <button class="btn btn-default btn-block btn-control codificar"
                                        onclick="SGA.Atendimento.codificar(this)"
                                        title="{% trans %}Encerrar atendimento{% endtrans %}">
                                    <span>{% trans %}Encerrar atendimento{% endtrans %}</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="fila">
                <h4>{% trans %}Minha fila{% endtrans %} (<span class="tipo-{{ usuario.tipoAtendimento }} config-tipo-atendimento">{{ tiposAtendimento[tipoAtendimento] }}</span>):</h4>
                <ul></ul>
            </div>
        </div>
        <p class="links">
            <a href="#dialog-busca" class="btn btn-default" data-toggle="modal">
                <span class="glyphicon glyphicon-search"></span>&nbsp;
                {% trans %}Consultar senha{% endtrans %}
            </a>
            <button id="notification" type="button" class="btn btn-warning" onclick="SGA.Notification.request(this)" style="display: none">
                <span class="glyphicon glyphicon-exclamation-sign"></span>&nbsp;
                {% trans %}Habilitar notificação{% endtrans %}
            </button>
        </p>

        {# dialog redirecionar #}
        <div id="dialog-redirecionar" 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 %}Redirecionar{% endtrans %}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="redirecionar_servico">{% trans %}Novo Serviço{% endtrans %}</label>
                            <select id="redirecionar_servico" class="form-control">
                                <option value="">{% trans %}Selecione{% endtrans %}</option>
                                {% for su in servicosIndisponiveis %}
                                <option value="{{ su.servico.id }}">{{ su.servico.nome }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary btn-redirecionar" onclick="SGA.Atendimento.redirecionar(this); return false;">
                            {% trans %}Redirecionar{% endtrans %}
                        </button>
                        <button type="button" class="btn btn-primary btn-codificar" onclick="SGA.Atendimento.codificar(this, true); return false;">
                            {% trans %}Codificar e redirecionar{% endtrans %}
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {# dialog 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.Atendimento.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>

        {# dialog info senha #}
        <div id="dialog-senha" 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 %}Senha|Bilhete{% endtrans %}</h4>
                    </div>
                    <div class="modal-body">
                        <div class="field">
                            <h4>{% trans %}Número{% endtrans %}</h4>
                            <p class="numero"></p>
                        </div>
                        <div class="field">
                            <h4>{% trans %}Serviço{% endtrans %}</h4>
                            <p class="servico"></p>
                        </div>
                        <div class="field">
                            <h4>{% trans %}Prioridade{% endtrans %}</h4>
                            <p class="nome-prioridade"></p>
                        </div>
                        <div class="field">
                            <h4>{% trans %}Data de chegada{% endtrans %}</h4>
                            <p class="chegada"></p>
                        </div>
                        <div class="field">
                            <h4>{% trans %}Tempo de espera{% endtrans %}</h4>
                            <p class="espera"></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="sga-clock" title="{% trans %}Data e hora no servidor{% endtrans %}"></div>

        {# som executado quando a fila deixa de estar fazia #}
        <audio id="alert" src="{{ resources('sounds/alert.wav', module.chave) }}" style="display:none"></audio>

        <script type="text/javascript">
            SGA.Clock.init("sga-clock", {{ time }});
            SGA.Atendimento.filaVazia = '{% trans %}Fila vazia{% endtrans %}';
            SGA.Atendimento.remover = '{% trans %}Remover{% endtrans %}';
            SGA.Atendimento.marcarErroTriagem = '{% trans %}Realmente deseja marcar como erro de triagem?{% endtrans %}';
            SGA.Atendimento.marcarNaoCompareceu = '{% trans %}Realmente deseja marcar como não compareceu?{% endtrans %}';
            SGA.Atendimento.nenhumServicoSelecionado = '{% trans %}Nenhum serviço selecionado{% endtrans %}';
            SGA.Atendimento.tiposAtendimento = {{ tiposAtendimento|json_encode()|raw }};
            SGA.Atendimento.init({% if atendimento %}{{ atendimento.status }}{% else %}1{% endif %});
        </script>
    {% endif %}
{% endblock %}