{% extends 'MainBundle:Master:template.html.twig' %}
{% block scripts %}
    {# CSS #}
    {#Bootstrap#}
    <link rel="stylesheet" href="{{ asset('bundles/main/css/bootstrap.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/indicator/css/bootstrap-select.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.bootstrap.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.responsive.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.tableTools.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/shedule/'~ hrk_skin ~'/dataTableCustom.css') }}"/>
    <link href="{{ asset('bundles/utilities/font-awesome-4.7.0/css/font-awesome.css') }}" rel="stylesheet" />
    <link rel="stylesheet" href="{{ asset('bundles/utilities/daterangepicker/daterangepicker.css') }}" />
    <link rel="stylesheet" href="{{ asset('bundles/indicator/css/analytics.css') }}"/>

    {# JS #}
    <script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
    <script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/js/IndicatorTechnologist.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/highcharts/highcharts.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/highcharts/data.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/highcharts/drilldown.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/highcharts/exporting.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/bootstrap/js/bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/js/bootstrap-select.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/datatable/js/jquery.dataTables.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/datatable/js/dataTables.tableTools.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/datatable/js/dataTables.responsive.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/datatable/js/dataTables.bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/js/jquery-numerator.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/js/export-csv.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/shedule/js/blockUI.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/utilities/daterangepicker/moment-with-locales.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/utilities/daterangepicker/daterangepicker.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/js/daterangepicker-config.js') }}"></script>
    <script>
        var SrcGif = '{{ asset('bundles/utilities/images/anim_gif.gif') }}';
        var SrcSwf = '{{ asset('bundles/indicator/datatable/swf/copy_csv_xls_pdf.swf') }}';
        var pleaseWait = "{{ 'messages.pleaseWait'|trans([], 'LocalizationBundle') }}";
        var asigUsuario = "{{ 'labels.indicadores.asigUsuario'|trans([], 'LocalizationBundle') }}";
        var total = "{{ 'labels.total'|trans([], 'LocalizationBundle') }}";
        var entregas = "{{ 'labels.entregas'|trans([], 'LocalizationBundle') }}";
        var search = "{{ 'labels.dataTable.search'|trans([], 'LocalizationBundle') }}";
        var lengthMenu = "{{ 'labels.dataTable.lengthMenu'|trans([], 'LocalizationBundle') }}";
        var info = "{{ 'labels.dataTable.info'|trans([], 'LocalizationBundle') }}";
        var infoFiltered = "{{ 'labels.dataTable.infoFiltered'|trans([], 'LocalizationBundle') }}";
        var InfoEmpty = "{{ 'labels.dataTable.InfoEmpty'|trans([], 'LocalizationBundle') }}";
        var loadingRecords = "{{ 'labels.dataTable.loadingRecords'|trans([], 'LocalizationBundle') }}";
        var zeroRecords = "{{ 'labels.dataTable.zeroRecords'|trans([], 'LocalizationBundle') }}";
        var emptyTable = "{{ 'labels.dataTable.emptyTable'|trans([], 'LocalizationBundle') }}";
        var first = "{{ 'labels.dataTable.paginate.first'|trans([], 'LocalizationBundle') }}";
        var previous = "{{ 'labels.dataTable.paginate.previous'|trans([], 'LocalizationBundle') }}";
        var next = "{{ 'labels.dataTable.paginate.next'|trans([], 'LocalizationBundle') }}";
        var last = "{{ 'labels.dataTable.paginate.last'|trans([], 'LocalizationBundle') }}";
        var errorAjax = "{{ 'messages.ajax.errorProcess'|trans([], 'LocalizationBundle') }}";
        var estTec = "{{ 'labels.indicadores.estudiosTec'|trans([],'LocalizationBundle') }}";
        var estMod = "{{ 'labels.indicadores.estudiosMod'|trans([],'LocalizationBundle') }}";
        var totalEst = "{{ 'labels.study.totalEstReal'|trans([],'LocalizationBundle') }}";
        var close = "{{ 'buuton.close'|trans([], 'LocalizationBundle') }}";
        var noDataRange = "{{ 'messages.noDataRange'|trans([], 'LocalizationBundle') }}";
    </script>
{% endblock %}

{% block content %}
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-body">
                <div class="spacer">
                    <div class="col-md-4">
                        <h3 class="panel-title">{{ 'menu.indTecnologo'|trans([],'LocalizationBundle') }}</h3>
                    </div>
                    <div class="col-md-8 spacer">
                        <div class="pull-right">
                            <button class="btn btn-primary" id="search">
                                <i class="fa fa-search" aria-hidden="true"></i>
                            </button>
                        </div>
                        <form id="IndTecForm">
                            <div class="col-md-5 pull-right">
                                <div id="reportrange" class="reportrange pull-right">
                                    <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
                                    <span></span> <b class="caret"></b>
                                </div>
                            </div>
                            <div class="col-md-5 pull-right">
                                <select class="form-control selectpicker" data-style="btn-default" multiple title='{{ 'labels.Headquarter.singular'|trans([],'LocalizationBundle') }}' data-actions-box="true" id="selSede" name="selSede" data-id="inpsede">
                                    <optgroup label="{{ 'messages.selectAll'|trans([],'LocalizationBundle') }}">
                                        {% for sede in HeadList %}
                                            <option>{{ sede.varHead }}</option>
                                        {% endfor %}
                                    </optgroup>
                                </select>
                                <input type="hidden" name="sede" id="inpsede"/>
                            </div>
                        </form>
                    </div>
                </div>

                {# Formulario de búsqueda
                <div class="col-md-12 spacer" style="margin-top:5px; padding:0;">
                    <form id="IndTecForm">
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputAmount">Icono FechaIn</label>
                            <div class="col-md-3">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                                    </div>
                                    <input name="fechaIni" id="fechaIni" readonly class="form-control datepicker" placeholder="{{ 'labels.date.dateIni'|trans([],'LocalizationBundle') }}">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only" for="exampleInputAmount">Icono FechaFin</label>
                            <div class="col-md-3">
                                <div class="input-group">
                                    <div class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar" aria-hidden="true"></span>
                                    </div>
                                    <input name="fechaFin" id="fechaFin" readonly class="form-control datepicker" placeholder="{{ 'labels.date.dateEnd'|trans([],'LocalizationBundle') }}">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only">Sede</label>
                            <div class="col-md-3">
                                <select class="form-control selectpicker" data-style="btn-primary" multiple
                                        title='{{ 'labels.Headquarter.singular'|trans([],'LocalizationBundle') }}'
                                        data-actions-box="true" id="selSede" name="selSede" data-id="inpsede">
                                    <optgroup label="{{ 'messages.selectAll'|trans([],'LocalizationBundle') }}">
                                        {% for sede in HeadList %}
                                            <option>{{ sede.varHead }}</option>
                                        {% endfor %}
                                    </optgroup>
                                </select>
                                <input type="hidden" name="sede" id="inpsede"/>
                            </div>
                        </div>
                    </form>
                    <div class="col-md-3">
                        <button class="btn btn-primary" id="search">{{ 'button.search'|trans([],'LocalizationBundle') }}</button>
                        <button class="btn btn-primary" id="del_date">{{ 'button.delete'|trans([],'LocalizationBundle') }}</button>
                    </div>
                </div>
                Fin Formulario de búsqueda #}

                <div class="clearfix"></div>
                {# Tablas generación gráficos #}
                {# Chart total estudios por tecnologo #}
                <table id="tableTec" class="hidden">
                    <thead>
                    <tr>
                        <th></th>
                        <th>{{ 'labels.indicadores.estudiosTec'|trans([],'LocalizationBundle') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{ estudiosTecnologo|raw }}
                    </tbody>
                </table>

                {# Chart2#}
                <table id="tableTecMod" class="hidden">
                    <thead>
                    <tr>
                        <th></th>
                        <th>{{ 'labels.indicadores.estudiosMod'|trans([],'LocalizationBundle') }}</th>
                    </tr>
                    </thead>
                    <tbody>
                    {{ estudioModalidad|raw }}
                    </tbody>
                </table>
                {# Tablas generación gráficos #}

                {# Total estudios #}
                <div class="col-md-12 spacer">
                    <div class="card">
                        <h5><strong style="font-size:30px;"
                                    class="tolec"></strong> {{ 'labels.study.totalEstReal'|trans([],'LocalizationBundle') }}
                            / <span id="fechaShow">{{ FechaShow }}</span></h5>
                        <h6><span id="sedeShow"> {{ sede }} </span></h6>
                    </div>
                </div>


                {# Charts #}

                {# tecnologos #}
                <div class="col-md-6">
                    <div class="card">
                        <div id="totalTec" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
                    </div>
                </div>
                {# modalidades #}
                <div class="col-md-6">
                    <div class="card">
                        <div id="totalTecMod" style="min-width: 300px; height: 600px; margin: 0 auto"></div>
                    </div>
                </div>
                {# Fin Charts #}
                <div class="col-md-12 spacer">
                    <div class="clearfix"></div>
                </div>


                {# Primera Tabla Consolidados Muestra todos los estudios y Tecnologos #}
                <div class="col-md-12">
                    <div class="card" id="div_table">
                        {{ TablaTecnologoMod|raw }}
                    </div>
                </div>


                {# Div creado para auto scroll no borrar #}
                <div id="end_table"></div>
                <div class="col-md-12">
                    <hr>
                </div>
                <div class="clearfix"></div>

                {# Segunda Tabla descripción por Tecnologo #}
                <div class="col-md-12">
                    <h4 class="panel-title"><span id="nom_tecnologo"></span></h4>
                    <div class="card" id="tabla_detalle" style="width:100%;">
                        <table id='estXtec' class='table table-striped table-bordered table-hover dt-responsive'
                               cellspacing='0' width='100%'></table>
                    </div>
                </div>
            </div>
            {# Fin Segunda Tabla descripción por tecnologo #}
        </div>
    </div>
    </div>

    <script>
        moment.locale('{{ app.request.locale }}');
        {# date rangepicker #}
        var config_daterangepicker = {
            locale_moment: '{{ app.request.locale }}',
            today: '{{ 'labels.today'|trans([], 'LocalizationBundle') }}',
            yesterday: '{{ 'labels.yesterday'|trans([], 'LocalizationBundle') }}',
            last7days: '{{ 'labels.last7days'|trans([], 'LocalizationBundle') }}',
            last30days: '{{ 'labels.last30days'|trans([], 'LocalizationBundle') }}',
            thisMonth: '{{ 'labels.thisMonth'|trans([], 'LocalizationBundle') }}',
            lastMonth: '{{ 'labels.lastMonth'|trans([], 'LocalizationBundle') }}',
            ranges: {
                '{{ 'labels.today'|trans([], 'LocalizationBundle') }}': [moment(), moment()],
                '{{ 'labels.yesterday'|trans([], 'LocalizationBundle') }}': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '{{ 'labels.last7days'|trans([], 'LocalizationBundle') }}': [moment().subtract(6, 'days'), moment()],
                '{{ 'labels.last30days'|trans([], 'LocalizationBundle') }}': [moment().subtract(29, 'days'), moment()],
                '{{ 'labels.thisMonth'|trans([], 'LocalizationBundle') }}': [moment().startOf('month'), moment().endOf('month')],
                '{{ 'labels.lastMonth'|trans([], 'LocalizationBundle') }}': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            locale: {
                customRangeLabel: '{{ 'labels.customRange'|trans([], 'LocalizationBundle') }}',
                daysOfWeek: [
                    '{{ 'days.label.su'|trans([], 'LocalizationBundle') }}',
                    '{{ 'days.label.mo'|trans([], 'LocalizationBundle') }}',
                    '{{ 'days.label.tu'|trans([], 'LocalizationBundle') }}',
                    '{{ 'days.label.we'|trans([], 'LocalizationBundle') }}',
                    '{{ 'days.label.th'|trans([], 'LocalizationBundle') }}',
                    '{{ 'days.label.fr'|trans([], 'LocalizationBundle') }}',
                    '{{ 'days.label.sa'|trans([], 'LocalizationBundle') }}',
                ],
                monthNames: [
                    '{{ 'month.january'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.february'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.march'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.april'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.may'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.june'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.july'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.august'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.september'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.october'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.november'|trans([], 'LocalizationBundle') }}',
                    '{{ 'month.december'|trans([], 'LocalizationBundle') }}',
                ],
                firstDay: 1
            }
        };

        $('.tolec').numerator({
            easing: 'linear', // easing options.
            duration: 1500, // the length of the animation.
            toValue: {{ TotalLecturas }} // animate to this value.
        });
    </script>

{% endblock %}