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

{% block head %}
    {{ parent() }}
    <link rel="stylesheet" type="text/css" href="{{ resources('css/datepicker3.css', module.chave) }}" />
{% endblock %}

{% block moduleContent %}
<div>
    <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-hoje" data-toggle="tab">{% trans %}Hoje{% endtrans %}</a></li>
        <li><a href="#tab-graficos" data-toggle="tab">{% trans %}Gráficos{% endtrans %}</a></li>
        <li><a href="#tab-relatorios" data-toggle="tab">{% trans %}Relatórios{% endtrans %}</a></li>
    </ul>
    <div id="tabs" class="tab-content">
        <div id="tab-hoje" class="tab-pane active">
            <h2 class="chart-title">{% trans %}Atendimentos realizados em {{ now }}{% endtrans %}</h2>
            {% for unidade in unidades %}
            <div class="chart-unidade">
                <div class="wrap">
                    <h3 class="title">{{ unidade.nome }}</h3>
                    <div id="atendimentos-status-{{ unidade.id }}" class="chart pie atendimentos status">
                        <span class="loading">{% trans %}Atendimentos por situação{% endtrans %}</span>
                    </div>
                    <div id="atendimentos-servicos-{{ unidade.id }}" class="chart pie atendimentos status">
                        <span class="loading">{% trans %}Atendimentos por serviço{% endtrans %}</span>
                    </div>
                    <script type="text/javascript">
                        SGA.Estatisticas.Grafico.today({{ unidade.id }}, {
                            status: "{% trans %}Atendimentos por situação{% endtrans %}",
                            servicos: "{% trans %}Atendimentos por serviço{% endtrans %}"
                        });
                    </script>
                </div>
            </div>
            {% endfor %}
        </div>
        <div id="tab-graficos" class="tab-pane">
            <form id="chart-form" action="#" onsubmit="return false">
                <div class="form-group required">
                    <label for="chart-id">{% trans %}Gráfico{% endtrans %}</label>
                    <select id="chart-id" name="grafico" class="form-control">
                        <option value="">{% trans %}Selecione{% endtrans %}</option>
                        {% for k, v in graficos %}
                        <option value="{{ k }}" data-opcoes="{{ v.opcoes }}">{{ v.titulo }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group required option unidade" style="display:none">
                    <label for="chart-unidade">{% trans %}Unidade{% endtrans %}</label>
                    <select id="chart-unidade" name="unidade" class="form-control">
                        <option value="0">{% trans %}Todas{% endtrans %}</option>
                        {% for unidade in unidades %}
                        <option value="{{ unidade.id }}">{{ unidade.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group required option date date-range" style="display:none">
                    <label for="chart-dataInicial">{% trans %}Data inicial{% endtrans %}</label>
                    <input id="chart-dataInicial" name="inicial" type="text" class="form-control datepicker" value="{{ now }}" />
                </div>
                <div class="form-group required option date-range" style="display:none">
                    <label for="chart-dataFinal">{% trans %}Data final{% endtrans %}</label>
                    <input id="chart-dataFinal" name="final" type="text" class="form-control datepicker" value="{{ now }}" />
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary" onclick="SGA.Estatisticas.Grafico.gerar()">
                        {% trans %}Gerar gráfico{% endtrans %}
                    </button>
                </div>
                <div id="chart-result"></div>
            </form>
        </div>
        <div id="tab-relatorios" class="tab-pane">
            <form id="report-form" action="{{ baseUrl() }}/modules/{{ module.chave }}/relatorio" method="get" target="_blank" onsubmit="return SGA.Estatisticas.Relatorio.gerar()">
                <input type="hidden" id="report-hidden-inicial" name="inicial" />
                <input type="hidden" id="report-hidden-final" name="final" />
                <div class="form-group required">
                    <label for="report-id">{% trans %}Relatório{% endtrans %}</label>
                    <select id="report-id" name="relatorio" class="form-control">
                        <option value="">{% trans %}Selecione{% endtrans %}</option>
                        {% for k,v in relatorios %}
                        <option value="{{ k }}" data-opcoes="{{ v.opcoes }}">{{ v.titulo }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group required option unidade" style="display:none">
                    <label for="report-unidade">{% trans %}Unidade{% endtrans %}</label>
                    <select id="report-unidade" name="unidade" class="form-control">
                        <option value="0">{% trans %}Todas{% endtrans %}</option>
                        {% for unidade in unidades %}
                        <option value="{{ unidade.id }}">{{ unidade.nome }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group required option date date-range" style="display:none">
                    <label for="report-dataInicial">{% trans %}Data inicial{% endtrans %}</label>
                    <input id="report-dataInicial" type="text" class="form-control datepicker" value="{{ now }}" />
                </div>
                <div class="form-group required option date-range" style="display:none">
                    <label for="report-dataFinal">{% trans %}Data final{% endtrans %}</label>
                    <input id="report-dataFinal" type="text" class="form-control datepicker" value="{{ now }}" />
                </div>
                <div class="form-group">
                    <button type="submit" class="btn btn-primary">{% trans %}Gerar relatório{% endtrans %}</button>
                </div>
            </form>
        </div>
    </div>
    <script type="text/javascript" src="{{ resources('js/highcharts.js', module.chave) }}"></script>
    <script type="text/javascript" src="{{ resources('js/highcharts.exporting.js', module.chave) }}"></script>
    <script type="text/javascript" src="{{ resources('js/bootstrap-datepicker.js', module.chave) }}"></script>
    <script type="text/javascript" src="{{ resources('js/bootstrap-datepicker.pt-BR.js', module.chave) }}"></script>
    <script type="text/javascript">
        // unidades
        SGA.Estatisticas.unidades = {% autoescape false %}{{ unidadesJson }}{% endautoescape %};
        // tab graficos
        $("#chart-id").on('change', function() {
            SGA.Estatisticas.Grafico.change($(this));
        });
        // tab relatorios
        $("#report-id").on('change', function() {
            SGA.Estatisticas.Relatorio.change($(this));
        });
        $(".datepicker" ).datepicker({
            language: 'pt-BR',
            format: '{% trans %}dd/mm/yyyy{% endtrans %}'
        });
        SGA.Form.validate('report-form');
    </script>
</div>
{% endblock %}