{% extends 'MainBundle:Master:template.html.twig' %}
{% block title %}HIRUKO Indicador de Radiólogos{% endblock %}
{% 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/indicatorStudiesRadiologist.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/indicator/datatable/js/jquery.dataTables.min.js') }}"></script>  
    <script type="text/javascript" src="{{ asset('bundles/indicator/datatable/js/dataTables.tableTools.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/datatable/js/dataTables.responsive.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/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 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 estRad = "{{ 'labels.indicadores.estudiosRad'|trans([],'LocalizationBundle') }}";
        var estMod = "{{ 'labels.indicadores.estudiosMod'|trans([],'LocalizationBundle') }}";
        var totalEst = "{{ 'labels.study.totalEstReal'|trans([],'LocalizationBundle') }}";
        var totalLectRad = "{{ 'labels.indicadores.lecturasRad'|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">
                        <h4 class="panel-title">{{ 'menu.IndRadiologo'|trans([],'LocalizationBundle') }}</h4>
                    </div>
                    {# Formulario de búsqueda #}
                    <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="IndRadForm">
                            <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>
                    {# Fin Formulario de búsqueda #}
                </div>
                <div class="clearfix"></div>

                {# Total estudios #}
                <div class="col-md-12 spacer">
                    <div class="card">
                        <div class="row">
                            <div class="col-md-12">
                               <h5 class="text-uppercase"><span class="tolec"></span> <span>{{ 'labels.lecturas.total'|trans([],'LocalizationBundle') }} </span>  <span id="fechaShow">/ {{ FechaShow }}</span></h5>
                                <h6><span id="sedeShow"> {{ sede }} </span></h6>
                            </div>
                        </div>
                    </div>
                </div>

                {# Charts #}
                <div class="col-md-6">
                    <div class="card">
                        <div id="totalRad" style="min-width: 310px; height: 600px; margin: 0 auto"></div>
                    </div>
                </div>

                <table id="tableRad" class="hide" >
                    <thead>
                        <tr>
                            <th></th>
                            <th>{{ 'labels.indicadores.lecturasRad'|trans([],'LocalizationBundle') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ estudiosRadiologo|raw }}
                    </tbody>
                </table>
                <div class="col-md-6">
                    <div class="card">
                        <div id="totalMod" style="min-width: 300px; height: 600px; margin: 0 auto"></div>
                    </div>
                </div>

                <table id="tableMod" class="hide">
                    <thead>
                        <tr>
                            <th></th>
                            <th>{{ 'labels.indicadores.estudiosMod'|trans([],'LocalizationBundle') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ estudioModalidad|raw }}
                    </tbody>
                </table>
                {# Fin Charts #}
                <div class="clearfix"></div>
                <div class="spacer"></div>

                {# Primera Tabla Consolidados Muestra todos los estudios y Radiólogos #}
                <div class="col-md-12">
                    <div class="card">
                        <div id="div_table">
                            {{ TablaRadiologoMod|raw }}
                        </div>
                    </div>
                </div>
                {# Div creado para auto scroll no borrar #}
                <div id="end_table"></div>
                <div class="clearfix"></div>

                {# Segunda Tabla descripción por Radiólogo #}
                <div class="col-md-12" id="div_detalle">
                    <div class="card">
                        <h2><span id="nom_radiologo"></span></h2>
                        <div id="tabla_detalle">
                            <table id='estXrad' class='table table-striped table-bordered table-hover dt-responsive' cellspacing='0' width='100%'></table>
                        </div>
                    </div>
                </div> {# Fin Segunda Tabla descripción por Radiólogo #}
            </div>
        </div>
    </div>

    <script>
        var UrlSwf = '{{ asset('bundles/shedule/datatable/swf/copy_csv_xls_pdf.swf') }}';
        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 %}