{% extends "module.html.twig" %}
{% block moduleContent %}

<div id="infobar" class="row">
    <div class="col-md-10 col-xs-9">
        <form role="form" onsubmit="return false">
            <div class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">
                        <span class="glyphicon glyphicon-user"></span>
                    </span>
                    <label for="cli_nome" class="sr-only">{% trans %}Nome{% endtrans %}</label>
                    <input type="text" id="cli_nome" class="form-control" maxlength="100" placeholder="{% trans %}Nome{% endtrans %}" />
                </div>
            </div>
            <div class="col-xs-6">
                <div class="input-group">
                    <span class="input-group-addon" id="basic-addon1">
                        <span class="glyphicon glyphicon-user"></span>
                    </span>
                    <label for="cli_doc" class="sr-only">{% trans %}Documento{% endtrans %}</label>
                    <input type="text" id="cli_doc" class="form-control" maxlength="11" placeholder="{% trans %}Documento{% endtrans %}" />
                </div>
            </div>
        </form>
    </div>
    <div class="col-md-2 col-xs-3">
        <div class="ultima-senha" title="{% trans %}Última senha{% endtrans %}">
            <span class="label label-default"></span>
        </div>
    </div>
</div>

<div id="triagem-servicos" class="row">
    {% for servicoUnidade in servicos %}
    <div id="triagem-servico-{{ servicoUnidade.servico.id }}" data-id="{{ servicoUnidade.servico.id }}" class="triagem-servico col-md-6">
        <div>
            <span class="text">
                <a href="javascript:void(0)"
                   title="{{ servicoUnidade.sigla }} - {{ servicoUnidade.servico.nome }}"
                   onclick="SGA.Triagem.servicoInfo({{ servicoUnidade.servico.id }}, '{{ servicoUnidade.servico.nome }}')">
                    {{ servicoUnidade.sigla }} - {{ servicoUnidade.servico.nome }}
                </a>
                <span class="servico">
                    <span class="fila">
                        <span class="badge">
                            <abbr id="total-aguardando-{{ servicoUnidade.servico.id }}" class="total" title="{% trans %}Aguardando atendimento{% endtrans %}">-</abbr>
                            &nbsp;/&nbsp;
                            <abbr id="total-senhas-{{ servicoUnidade.servico.id }}" class="total" title="{% trans %}Total de senhas do serviço{% endtrans %}">-</abbr>
                        </span>
                    </span>
                </span>
            </span>
            <span class="buttons">
                <button class="btn btn-primary"
                        data-id="{{ servicoUnidade.servico.id }}"
                        title="{% trans %}Distribuir senha normal{% endtrans %}"
                        onclick="SGA.Triagem.senhaNormal(this)">
                    {% trans %}Normal{% endtrans %}
                </button>
                {% if prioridades|length %}
                    <button class="btn btn-danger"
                            data-id="{{ servicoUnidade.servico.id }}"
                            title="{% trans %}Distribuir senha com prioridade{% endtrans %}"
                            onclick="SGA.Triagem.prioridade(this)">
                        {% trans %}Prioridade{% endtrans %}
                    </button>
                {% endif %}
            </span>
        </div>
    </div>
    {% else %}
        <p>{% trans %}Nenhum serviço habilitado para a unidade atual{% endtrans %}</p>
    {% endfor %}
</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>
    <a href="#dialog-triagem-config" class="btn btn-default" data-toggle="modal">
        <span class="glyphicon glyphicon-cog"></span>&nbsp;
        {% trans %}Configuração{% endtrans %}
    </a>
</p>

{# iframe para impressao, evitando popup #}
<iframe id="frame-impressao" width="300" height="150" style="display:none"></iframe>

{# dialog para exibir a senha gerada #}
<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>
        </div>
    </div>
</div>

{# dialog de configuracao #}
<div id="dialog-triagem-config" 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 %}Configuração{% endtrans %}</h4>
            </div>
            <div class="modal-body">
                <h4>{% trans %}Exibir serviços{% endtrans %}</h4>
                <div class="row exibir-servicos">
                    {% for servicoUnidade in servicos %}
                        <div class="col-sm-6">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" class="servico-{{ servicoUnidade.servico.id }}" value="{{ servicoUnidade.servico.id }}" checked> {{ servicoUnidade.sigla }} - {{ servicoUnidade.servico.nome }}
                                </label>
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

{# dialog para exibir informacoes do servico #}
<div id="dialog-servico" 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 %}Serviço{% endtrans %}</h4>
            </div>
            <div class="modal-body">
                <div>
                    <h4>{% trans %}Última senha{% endtrans %}</h4>
                    <p class="ultima-senha">
                        <span></span>
                        <a href="#" class="glyphicon glyphicon-print" title="{% trans %}Reimprimir{% endtrans %}"></a>
                    </p>
                </div>
                <div>
                    <h4>{% trans %}Nome original do serviço{% endtrans %}</h4>
                    <p class="nome"></p>
                </div>
                <div>
                    <h4>{% trans %}Descrição{% endtrans %}</h4>
                    <p class="descricao"></p>
                </div>
                <div>
                    <h4>{% trans %}Subserviços{% endtrans %}</h4>
                    <ul class="subservicos notempty"></ul>
                    <ul class="subservicos empty"><li>{% trans %}Não há subserviços{% endtrans %}</li></ul>
                </div>
            </div>
        </div>
    </div>
</div>

{# dialog para escolher a prioridade da senha #}
<div id="dialog-prioridade" 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 %}Prioridade{% endtrans %}</h4>
            </div>
            <div class="modal-body">
                <ul>
                    {% for prioridade in prioridades %}
                    <li>
                        <input id="prioridade-{{ prioridade.id }}" type="radio" name="prioridade" value="{{ prioridade.id }}" />
                        <label for="prioridade-{{ prioridade.id }}">{{ prioridade.nome }}</label>
                    </li>
                    {% endfor %}
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary"
                        onclick="SGA.Triagem.senhaPrioridade(this, function() { $('#dialog-prioridade').modal('hide'); });">
                    {% trans %}Gerar prioridade{% endtrans %}
                </button>
            </div>
        </div>
    </div>
</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.Triagem.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>

<script type="text/javascript">
    $('.triagem-servico').each(function(i,v) {
        var servico = $(v);
        SGA.Triagem.ids.push(servico.data('id'));
    });
    SGA.Triagem.ajaxUpdate();
    SGA.Triagem.prioridades = [{% for p in prioridades %}{{ p.id }},{% endfor %}];
    SGA.Triagem.imprimir = {% if unidade.statusImpressao %}true{% else %}false{% endif %};
    SGA.Triagem.init();
</script>
{% endblock %}