{% extends "@NovosgaTriage/base.html.twig" %}

{% trans_default_domain 'NovosgaTriageBundle' %}

{% block body %}
    <div class="row">
        <div class="col-sm-12">
            <h1>
                <i class="fa fa-print" aria-hidden="true"></i>
                {{ 'title'|trans }}
                <small>
                    {{ 'subtitle'|trans }}
                </small>
            </h1>
        </div>
    </div>
    
    <hr>
    
    <div id="triagem" v-cloak>
        <div id="infobar" class="row">
            <div class="col-md-10 col-9">
                <div class="row">
                    <div class="col-3">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fa fa-credit-card"></i>
                                </span>
                            </div>
                            <label for="cliente-documento" class="sr-only">{{ 'label.customer.id'|trans }}</label>
                            <input type="text" id="cliente-documento" list="documentos" class="form-control" maxlength="30" placeholder="{{ 'label.customer.id'|trans }}" v-model="cliente.documento" 
                                   v-on:input="fetchClients"
                                   v-on:change="changeClient"
                                   v-on:blur="changeClient">
                            <datalist id="documentos">
                                <option v-for="cliente in clientes" v-bind:value="cliente.documento">
                            </datalist>
                        </div>
                    </div>
                    <div class="col-9">
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">
                                    <i class="fa fa-user"></i>
                                </span>
                            </div>
                            <label for="cliente-nome" class="sr-only">{{ 'label.name'|trans }}</label>
                            <input type="text" id="cliente-nome" class="form-control" maxlength="100" placeholder="{{ 'label.name'|trans }}" v-model="cliente.nome" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-2 col-3">
                <div class="ultima-senha" title="{% trans %}Última senha{% endtrans %}" v-if="ultimaSenha">
                    <button v-bind:class="{ 'btn btn-sm':true, 'btn-primary': ultimaSenha.prioridade.peso===0, 'btn-danger': ultimaSenha.prioridade.peso>0 }" v-on:click="showTicket(ultimaSenha)">
                        <i class="fa fa-print"></i>&nbsp;
                        {%- verbatim -%}
                            {{ultimaSenha.senha.format}}
                        {%- endverbatim -%}
                    </button>
                </div>
            </div>
        </div>

        <div id="triagem-servicos" class="row">
            <div class="col-md-12" v-if="servicos.length === 0">
                <div class="jumbotron text-center">
                    <h1><i class="fa fa-frown-o"></i></h1>
                    <p>Nenhum serviço habilitado para a sua unidade.</p>
                </div>
            </div>
            <div class="col-md-12" v-if="servicos.length > 0 && servicosHabilitados.length===0">
                <div class="jumbotron text-center">
                    <h1><i class="fa fa-frown-o"></i></h1>
                    <p>Nenhum serviço marcado para exibição. Clique em <b>Configurações</b> abaixo para marcar os seriços desejados.</p>
                </div>
            </div>
            <div class="triagem-servico col-md-6" v-for="su in servicosHabilitados">
                <div class="card">
                    <div class="card-body">
                        <a href="#" v-on:click.prevent="showServicoInfo(su.servico.id)">
                            {%- verbatim -%}
                                {{su.sigla}} - {{su.servico.nome}}
                            {%- endverbatim -%}
                        </a>
                        <span class="badge badge-pill badge-secondary" title="{% trans %}Aguardando atendimento{% endtrans %} / {% trans %}Total de senhas do serviço{% endtrans %}">
                            {%- verbatim -%}
                                {{totais[su.servico.id] ? totais[su.servico.id].fila : '-'}}
                            {%- endverbatim -%}
                            &nbsp;/&nbsp;
                            {%- verbatim -%}
                                {{totais[su.servico.id] ? totais[su.servico.id].total : '-'}}
                            {%- endverbatim -%}
                        </span>
                        <span class="buttons pull-right">
                            <button class="btn btn-primary" title="{% trans %}Distribuir senha normal{% endtrans %}" v-on:click.prevent="distribuiSenhaNormal(su.servico.id)">
                                {% trans %}Normal{% endtrans %}
                            </button>
                            {% if prioridades|length %}
                                <button class="btn btn-danger" title="{% trans %}Distribuir senha com prioridade{% endtrans %}" v-on:click.prevent="showPrioridades(su.servico.id)" v-if="su.prioridade">
                                    {{ 'label.priority'|trans }}
                                </button>
                            {% endif %}
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <p class="links">
            <a href="#dialog-busca" class="btn btn-secondary" data-toggle="modal">
                <i class="fa fa-search"></i>&nbsp;
                {% trans %}Consultar senha{% endtrans %}
            </a>
            <a href="#dialog-triagem-config" class="btn btn-secondary" data-toggle="modal">
                <i class="fa fa-cog"></i>&nbsp;
                {% trans %}Configuração{% endtrans %}
            </a>
            <a href="#dialog-agendamentos" class="btn btn-secondary" data-toggle="modal">
                <i class="fa fa-calendar"></i>&nbsp;
                {% trans %}Agendamentos{% endtrans %}
            </a>
        </p>

        {# iframe para impressao, evitando popup #}
        <iframe id="frame-impressao" width="0" height="0" style="border: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">
                        <h5 class="modal-title">{{ 'label.ticket'|trans }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body" v-if="atendimento">
                        <div class="field">
                            <h4>{{ 'label.ticket.number'|trans }}</h4>
                            <p class="numero">
                                {%- verbatim -%}
                                    {{atendimento.senha.format}}
                                {%- endverbatim -%}
                            </p>
                        </div>
                        <div class="field">
                            <h4>{{ 'label.service'|trans }}</h4>
                            <p class="servico">
                                {%- verbatim -%}
                                    {{atendimento.servico.nome}}
                                {%- endverbatim -%}
                            </p>
                        </div>
                        <div class="field">
                            <h4>{{ 'label.priority'|trans }}</h4>
                            <p class="nome-prioridade">
                                {%- verbatim -%}
                                    {{atendimento.prioridade.nome}}
                                {%- endverbatim -%}
                            </p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" v-on:click.prevent="reprint(atendimento)">
                            <i class="fa fa-print"></i> 
                            {% trans %}Imprimir{% endtrans %}
                        </button>
                    </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 modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{% trans %}Configuração{% endtrans %}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-sm-8">
                                <fieldset>
                                    <legend>{% trans %}Serviços{% endtrans %}</legend>
                                    <div class="checkbox" v-for="su in servicos">
                                        <label>
                                            <input type="checkbox" v-model="su.habilitado" v-on:change="saveConfig"> 
                                            {% verbatim %}
                                                {{ su.sigla }} - {{ su.servico.nome }}
                                            {% endverbatim %}
                                        </label>
                                    </div>
                                </fieldset>
                            </div>
                            <div class="col-sm-4">
                                <fieldset>
                                    <legend>{% trans %}Impressão{% endtrans %}</legend>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" v-model="config.imprimir" v-on:change="saveConfig"> 
                                            {% trans %}Habilitar impressão{% endtrans %}
                                        </label>
                                    </div>
                                    <div class="checkbox">
                                        <label>
                                            <input type="checkbox" v-model="config.exibir" v-on:change="saveConfig"> 
                                            {% trans %}Exibir senha gerada{% endtrans %}
                                        </label>
                                    </div>
                                </fieldset>
                            </div>
                        </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 modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{{ 'label.service'|trans }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body" v-if="servicoInfo">
                        <table class="table table-bordered">
                            <tbody>
                                <tr>
                                    <th>
                                        {{ 'label.name'|trans }}
                                    </th>
                                    <td>
                                        {%- verbatim -%}
                                            {{servicoInfo.nome}}
                                        {%- endverbatim -%}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        {% trans %}Última senha{% endtrans %}
                                    </th>
                                    <td>
                                        <button class="btn btn-secondary" title="{% trans %}Reimprimir{% endtrans %}" 
                                                v-on:click.prevent="reprint({ id: servicoInfo.senhaId })" v-if="servicoInfo.senhaId">
                                            {%- verbatim -%}
                                                {{servicoInfo.senha}}
                                            {%- endverbatim -%}
                                            &nbsp;
                                            <i class="fa fa-print"></i>
                                        </button>
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        {{ 'label.description'|trans }}
                                    </th>
                                    <td>
                                        {%- verbatim -%}
                                            {{servicoInfo.descricao}}
                                        {%- endverbatim -%}
                                    </td>
                                </tr>
                                <tr>
                                    <th>
                                        {{ 'label.subservices'|trans }}
                                    </th>
                                    <td>
                                        <ul class="subservicos notempty" v-if="servicoInfo.subservicos.length">
                                            <li v-for="servico in servicoInfo.subservicos">
                                                {%- verbatim -%}
                                                    {{servico}}
                                                {%- endverbatim -%}
                                            </li>
                                        </ul>
                                        <ul class="subservicos empty" v-if="!servicoInfo.subservicos.length">
                                            <li>{% trans %}Não há subserviços{% endtrans %}</li>
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </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">
                        <h5 class="modal-title">{{ 'label.priority'|trans }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <ul>
                            <li v-for="p in prioridades">
                                <label>
                                    <input type="radio" v-bind:value="p" v-model="prioridade">
                                    {% verbatim %}
                                        {{ p.nome }}
                                    {% endverbatim %}
                                </label>
                            </li>
                        </ul>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" v-on:click.prevent="distribuiSenhaPrioritaria">
                            {% trans %}Gerar prioridade{% 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">
                        <h5 class="modal-title">{{ 'modal.search'|trans }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <form class="row" role="form" v-on:submit.prevent="consultar">
                            <div class="col-3">
                                <div class="input-group">
                                    <input type="text" maxlength="10" class="form-search form-control" placeholder="{{ 'modal.search.placeholder'|trans }}" v-model="search">
                                    <div class="input-group-append">
                                        <button type="submit" class="btn btn-primary" title="{{ 'modal.search.button.submit'|trans }}">
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                        <hr>
                        <div class="result">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>{{ 'label.ticket.number'|trans }}</th>
                                        <th>{{ 'label.service'|trans }}</th>
                                        <th>{{ 'label.ticket.arrival_date'|trans }}</th>
                                        <th>{{ 'label.ticket.start_date'|trans }}</th>
                                        <th>{{ 'label.ticket.end_date'|trans }}</th>
                                        <th>{{ 'label.triage'|trans }}</th>
                                        <th>{{ 'label.ticket.user'|trans }}</th>
                                        <th>{{ 'label.status'|trans }}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% verbatim %}
                                        <tr v-for="atendimento in searchResult">
                                            <td>
                                                {{atendimento.senha.format}}
                                            </td>
                                            <td>
                                                {{atendimento.servico.nome}}
                                            </td>
                                            <td>
                                                <span v-if="atendimento.dataChegada">
                                                    {{moment(atendimento.dataChegada, 'YYYY-MM-DD hh:mm:ss').format(dateTimeFormat)}}
                                                </span>
                                            </td>
                                            <td>
                                                <span v-if="atendimento.dataInicio">
                                                    {{moment(atendimento.dataInicio, 'YYYY-MM-DD hh:mm:ss').format(dateTimeFormat)}}
                                                </span>
                                            </td>
                                            <td>
                                                <span v-if="atendimento.dataFim">
                                                    {{moment(atendimento.dataFim, 'YYYY-MM-DD hh:mm:ss').format(dateTimeFormat)}}
                                                </span>
                                            </td>
                                            <td>
                                                {{atendimento.triagem}}
                                            </td>
                                            <td>
                                                {{atendimento.usuario}}
                                            </td>
                                            <td>
                                                {{atendimento.status}}
                                            </td>
                                        </tr>
                                    {% endverbatim %}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
                                
        {# dialog agendamentos #}
        <div id="dialog-agendamentos" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">{% trans %}Agendamento{% endtrans %}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>{{ 'label.service'|trans }}</label>
                            <select class="form-control" v-on:change="loadAgendamentos" v-model="servicoAgendamento">
                                <option value=""></option>
                                <option v-bind:value="s.servico.id" v-for="s in servicos">
                                    {%- verbatim -%}
                                        {{ s.sigla }} - {{ s.servico.nome }}
                                    {%- endverbatim -%}
                                </option>
                            </select>
                        </div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>{{ 'label.date'|trans }}</th>
                                    <th>{{ 'label.time'|trans }}</th>
                                    <th>{{ 'label.name'|trans }}</th>
                                    <th>{{ 'label.customer.id'|trans }}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                {% verbatim %}
                                    <tr v-for="agendamento in agendamentos" v-bind:class="{ 'table-success': !!agendamento.dataConfirmacao }">
                                        <td>
                                            {{moment(agendamento.data, 'YYYY-MM-DD').format(dateTime)}}
                                        </td>
                                        <td>
                                            {{agendamento.hora}}
                                        </td>
                                        <td>
                                            {{agendamento.cliente.nome}}
                                        </td>
                                        <td>
                                            {{agendamento.cliente.documento}}
                                        </td>
                                        <td>
                                            <button type="button" class="btn btn-default" 
                                                    title="{% trans %}Confirmar presença{% endtrans %}" 
                                                    v-on:click="agendamentoConfirm(agendamento)"
                                                    v-if="!agendamento.dataConfirmacao">
                                                <i class="fa fa-check"></i>
                                            </button>
                                        </td>
                                    </tr>
                                {% endverbatim %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link type="text/css" rel="stylesheet" href="{{ asset('bundles/novosgatriage/css/style.css') }}">
{% endblock %}    

{% block javascripts %}
    {{ parent() }}
    <script>
        var servicos       = {{ servicos|json_encode()|raw }},
            prioridades    = {{ prioridades|json_encode()|raw}},
            usuario        = {{ usuario|json_encode()|raw }},
            unidade        = {{ unidade|json_encode()|raw }},
            dateTime       = '{{ 'MM/DD/YYYY'|trans }}';
            dateTimeFormat = '{{ 'MM/DD/YYYY HH:mm:ss'|trans }}',
            wsSecret       = '{{ wsSecret }}';
    </script>
    <script type="text/javascript" src="{{ asset('bundles/novosgatriage/js/lodash.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/novosgatriage/js/script.js') }}"></script>
{% endblock %}