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

{% block head %}
    {{ parent() }}
    <script>
        var servicosUnidade = {{ services|json_encode() | raw }};
        var statuses = {{ statuses|json_encode() | raw }};
        var tiposAtendimento = {{ tiposAtendimento|json_encode() | raw }};
    </script>
    <script src="{{ resources('js/angular.min.js', module.chave) }}"></script>
    <script src="{{ resources('js/app.js', module.chave) }}"></script>
{% endblock %}

{% block content %}
    {{ parent() }}
    
    <div class="vetor-module" ng-app="vetor">
        <div class="module-content" ng-controller="dashboardCtrl as ctrl">
            {% if not unidade %}
                <div>
                    <p>Nenhuma unidade escolhida</p>
                </div>
            {% else %}
                <ul class="nav nav-tabs" role="tablist">
                    <li role="presentation" class="active">
                        <a href="#tab-general" role="tab" data-toggle="tab">{% trans %}Geral{% endtrans %}</a>
                    </li>
                    <li role="presentation">
                        <a href="#tab-times" role="tab" data-toggle="tab">{% trans %}Tempos{% endtrans %}</a>
                    </li>
                    <li role="presentation">
                        <a href="#tab-users" role="tab" data-toggle="tab">{% trans %}Atendentes{% endtrans %}</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="tab-general">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="box-info" style="background-color: #00c0ef">
                                    <span class="glyphicon glyphicon-time"></span>
                                    <div class="box-info-content">
                                        <b>[[ ctrl.general.data.status[5] ]]<small> / [[ ctrl.general.pct(ctrl.general.data.status[5]) ]]%</small></b>
                                        <small>{% trans %}Não compareceu{% endtrans %}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="box-info" style="background-color: #dd4b39">
                                    <span class="glyphicon glyphicon-remove"></span>
                                    <div class="box-info-content">
                                        <b>[[ ctrl.general.data.status[6] ]]<small> / [[ ctrl.general.pct(ctrl.general.data.status[6]) ]]%</small></b>
                                        <small>{% trans %}Senha cancelada{% endtrans %}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="box-info" style="background-color: #f39c12">
                                    <span class="glyphicon glyphicon-flag"></span>
                                    <div class="box-info-content">
                                        <b>[[ ctrl.general.data.status[7] ]]<small> / [[ ctrl.general.pct(ctrl.general.data.status[7]) ]]%</small></b>
                                        <small>{% trans %}Erro triagem{% endtrans %}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <div class="box-info" style="background-color: #49bf67">
                                    <span class="glyphicon glyphicon-ok"></span>
                                    <div class="box-info-content">
                                        <b>[[ ctrl.general.data.status[8] ]]<small> / [[ ctrl.general.pct(ctrl.general.data.status[8]) ]]%</small></b>
                                        <small>{% trans %}Encerrado{% endtrans %}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-4">
                                <h4 class="text-center">{% trans %}Atendimentos por serviço{% endtrans %}</h4>
                                <canvas id="servicesChart" height="200" style="width: 100%"></canvas>
                            </div>
                            <div class="col-md-4">
                                <h4 class="text-center">{% trans %}Atendimentos por situação{% endtrans %}</h4>
                                <canvas id="statusChart" height="200" style="width: 100%"></canvas>
                            </div>
                            <div class="col-md-4">
                                <h4 class="text-center">{% trans %}Atendimentos por atendente{% endtrans %}</h4>
                                <canvas id="usersChart" height="200" style="width: 100%"></canvas>
                            </div>
                        </div>
                        
                        <div class="row">
                            <h4 class="text-center">{% trans %}Senhas geradas por minuto{% endtrans %}</h4>
                            <canvas id="timeChart" height="100" style="width: 100%"></canvas>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab-times">
                        <div class="filter">
                            <div class="row">
                                <div class="col-md-8">
                                    <div class="radio-inline">
                                        <label><input type="radio" ng-model="ctrl.status" ng-change="ctrl.forceTimesUpdate()" value="0" checked> Todos</label>
                                    </div>
                                    <div class="radio-inline">
                                        <label><input type="radio" ng-model="ctrl.status" ng-change="ctrl.forceTimesUpdate()" value="1"> Em espera</label>
                                    </div>
                                    <div class="radio-inline">
                                        <label><input type="radio" ng-model="ctrl.status" ng-change="ctrl.forceTimesUpdate()" value="2"> Em andamento</label>
                                    </div>
                                    <div class="radio-inline">
                                        <label><input type="radio" ng-model="ctrl.status" ng-change="ctrl.forceTimesUpdate()" value="3"> Encerrados</label>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="{% trans %}Buscar{% endtrans %}" ng-model="ctrl.serviceSearch">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row period">
                            <div class="col-md-4 item sun" title="00h00 - 11h59">
                                <div class="col-sm-4">
                                    <h4>Total <span class="badge">[[ ctrl.times.periods.p1.count ]]</span></h4>
                                </div>
                                <div class="col-sm-4">
                                    <h4>
                                        <abbr title="{% trans %}Tempo médio de espera{% endtrans %}">{% trans %}TME{% endtrans %}</abbr> 
                                        <span class="badge">[[ ctrl.times.periods.p1.tme|timeFormat ]]</span>
                                    </h4>
                                </div>
                                <div class="col-sm-4">
                                    <h4>
                                        <abbr title="{% trans %}Tempo médio de atendimento{% endtrans %}">{% trans %}TMA{% endtrans %}</abbr> 
                                        <span class="badge">[[ ctrl.times.periods.p1.tma|timeFormat ]]</span>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-md-4 item sun2" title="12h00 - 17h59">
                                <div class="col-sm-4">
                                    <h4>Total <span class="badge">[[ ctrl.times.periods.p2.count ]]</span></h4>
                                </div>
                                <div class="col-sm-4">
                                    <h4>
                                        <abbr title="{% trans %}Tempo médio de espera{% endtrans %}">{% trans %}TME{% endtrans %}</abbr> 
                                        <span class="badge">[[ ctrl.times.periods.p2.tme|timeFormat ]]</span>
                                    </h4>
                                </div>
                                <div class="col-sm-4">
                                    <h4>
                                        <abbr title="{% trans %}Tempo médio de atendimento{% endtrans %}">{% trans %}TMA{% endtrans %}</abbr> 
                                        <span class="badge">[[ ctrl.times.periods.p2.tma|timeFormat ]]</span>
                                    </h4>
                                </div>
                            </div>
                            <div class="col-md-4 item moon" title="18h00 - 23h59">
                                <div class="col-sm-4">
                                    <h4>Total <span class="badge">[[ ctrl.times.periods.p3.count ]]</span></h4>
                                </div>
                                <div class="col-sm-4">
                                    <h4>
                                        <abbr title="{% trans %}Tempo médio de espera{% endtrans %}">{% trans %}TME{% endtrans %}</abbr> 
                                        <span class="badge">[[ ctrl.times.periods.p3.tme|timeFormat ]]</span>
                                    </h4>
                                </div>
                                <div class="col-sm-4">
                                    <h4>
                                        <abbr title="{% trans %}Tempo médio de atendimento{% endtrans %}">{% trans %}TMA{% endtrans %}</abbr> 
                                        <span class="badge">[[ ctrl.times.periods.p3.tma|timeFormat ]]</span>
                                    </h4>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-3 service-box" ng-repeat="service in ctrl.times.services|filter:ctrl.serviceSearch|orderBy: '-total'">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <span class="badge">[[ service.sigla ]]</span>&nbsp; [[ service.name ]]
                                    </div>
                                    <div class="panel-body">
                                        <div class="queue-times row">
                                            <div class="col-sm-4 info">
                                                <span class="count">
                                                    [[ service.count_1 ]]
                                                </span>
                                                <small> &lt;= 15min</small>
                                            </div>
                                            <div class="col-sm-4 warning">
                                                <span class="count">
                                                    [[ service.count_15 ]]
                                                </span>
                                                <small> &gt; 15min</small>
                                            </div>
                                            <div class="col-sm-4 danger">
                                                <span class="count">
                                                    [[ service.count_30 ]]
                                                </span>
                                                <small> &gt; 30min</small>
                                            </div>
                                        </div>
                                        <div class="info row">
                                            <div class="col-sm-5 users">
                                                <span class="glyphicon glyphicon-file"></span>
                                                <span class="count" title="Total de senhas">
                                                    [[ service.total ]]
                                                </span>
                                            </div>
                                            <div class="col-sm-7 avg">
                                                <span class="glyphicon glyphicon-time"></span>
                                                <ul>
                                                    <li class="count">
                                                        <abbr title="{% trans %}Tempo médio de espera{% endtrans %}">{% trans %}TME{% endtrans %}</abbr> [[ service.tme | timeFormat ]]
                                                    </li>
                                                    <li class="count">
                                                        <abbr title="{% trans %}Tempo médio de atendimento{% endtrans %}">{% trans %}TMA{% endtrans %}</abbr> [[ service.tma | timeFormat ]]
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div role="tabpanel" class="tab-pane" id="tab-users">
                        <div class="filter">
                            <div class="row">
                                <div class="col-md-4 col-md-offset-8">
                                    <div class="input-group">
                                        <input type="text" class="form-control" placeholder="{% trans %}Buscar{% endtrans %}" ng-model="ctrl.userSearch">
                                        <span class="input-group-addon">
                                            <span class="glyphicon glyphicon-search"></span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="users-container">
                            <div class="user-box" ng-repeat="item in ctrl.users|filter:ctrl.userSearch|orderBy: 'local'">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <label class="badge">
                                            <span class="glyphicon glyphicon-home"></span> &nbsp;
                                            [[item.local]]
                                        </label>
                                        [[item.user.nome]] ([[item.user.login]])
                                    </div>
                                    <div class="panel-body">
                                        <div class="form-group">
                                            <label class="control-label">{% trans %}Tipo de Atendimento{% endtrans %}</label>
                                            <select id="tipo_atendimento" name="tipo" class="form-control config-tipo-atendimento" ng-model="item.tipo" ng-change="ctrl.changeTipo(item)">
                                                {% for v,l in tiposAtendimento %}
                                                <option value="{{ v }}">{{ l }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div ng-hide="item.last" class="text-center">
                                            <em class="text-muted">{% trans %}Nenhum atendimento{% endtrans %}</em>
                                        </div>
                                        <div ng-show="item.last" class="atendimento">
                                            <b>
                                                <span class="glyphicon glyphicon-file"></span>
                                                {% trans %}Último atendimento{% endtrans %}
                                            </b>
                                            <ul>
                                                <li>[[item.last.senha]]</li>
                                                <li>[[item.last.servico]]</li>
                                                <li>[[item.last.nomePrioridade]]</li>
                                                <li>[[item.last.nomeStatus]]</li>
                                            </ul>
                                        </div>
                                    </div>
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>
                                                    <span class="glyphicon glyphicon-list"></span>
                                                    {% trans %}Serviços{% endtrans %}
                                                </th>
                                                <th></th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr ng-hide="item.services.length">
                                                <td colspan="2">
                                                    <em class="text-muted">{% trans %}Nenhum serviço{% endtrans %}</em>
                                                </td>
                                            </tr>
                                            <tr ng-repeat="service in item.services">
                                                <td>[[service.nome]]</td>
                                                <td>
                                                    <a href="javascript:" title="{% trans %}Remover serviço{% endtrans %}" class="text-danger" ng-click="ctrl.removeService(item, service)">
                                                        <span class="glyphicon glyphicon-remove"></span>
                                                    </a>
                                                </td>
                                            </tr>
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td colspan="2" class="text-center">
                                                    <a href="javascript:" ng-click="ctrl.showServiceModal(item)">
                                                        <span class="glyphicon glyphicon-plus"></span>
                                                        {% trans %}Adicionar{% endtrans %}
                                                    </a>
                                                </td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                                                    
                <div id="services-modal" 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 %}Adicionar{% endtrans %}</h4>
                            </div>
                            <div class="modal-body">
                                <div class="form-group">
                                    <label for="add-service">{% trans %}Serviço{% endtrans %}</label>
                                    <select id="add-service" class="form-control" ng-model="ctrl.su" ng-options="su.sigla + ' - ' + su.servico.nome for su in ctrl.servicosUnidade">
                                    </select>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" ng-click="ctrl.addService()">{% trans %}Adicionar{% endtrans %}</button>
                            </div>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}