{% extends 'MainBundle:Master:template.html.twig' %}
{% block scripts %}
    {# CSS #}
    {#Bootstrap#}
    <link rel="stylesheet" href="{{ asset('bundles/utilities/bootstrap-3.3.7/css/bootstrap.min.css') }}"/>
    <link rel="stylesheet" href="{{ asset('bundles/shedule/datatable/css/dataTables.bootstrap.css') }}" >
    <link rel="stylesheet" href="{{ asset('bundles/indicator/css/bootstrap-select.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 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/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/bootstrap-select.js') }}"></script>
    
    <script type="text/javascript" src="{{ asset('bundles/indicator/js/dashboard.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/datepicker-es.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 url_search_date = '{{ path("search_date_dashboard") }}';
        var url_detail_dashboard = '{{ path("DetailInformationPatientHeader", {'per':' '}) }}';
        var title_time = '{{ 'labels.study.waiting'|trans([], 'LocalizationBundle') }}';
        var UpdatePending = '{{ 'labels.status.UpdatePending'|trans([], 'LocalizationBundle') }}';
        var ReadingPending = '{{ 'labels.status.ReadingPending'|trans([], 'LocalizationBundle') }}';
        var TranscriptionPending = '{{ 'labels.status.TranscriptionPending'|trans([], 'LocalizationBundle') }}';
        var ValidationPending = '{{ 'labels.status.ValidationPending'|trans([], 'LocalizationBundle') }}';
        var study = '{{ 'labels.study.plural'|trans([], 'LocalizationBundle') }}';
        var UrlDashBoardSearch= '{{ path("indicator_dashBoard") }}';  
        var documento = '{{ 'labels.document.doc'|trans([], 'LocalizationBundle') }}';
        var dias = '{{ 'labels.date.days'|trans([], 'LocalizationBundle') }}';
        var document = '{{ 'labels.time.plural'|trans([], 'LocalizationBundle') }}';
    </script>
{% endblock %}
{% block content %}
    <div class="container-fluid">
        <div class="panel panel-default">
            <div class="panel-body">
                {# Formulario de búsqueda #}
                <div class="spacer">
                    <div class="col-md-4">
                        <h4 class="panel-title"> {{ 'menu.board'|trans([], 'LocalizationBundle') }} - <span id="sede">{{ sede }}</span></h4>
                    </div>
                    <div class="col-md-8">
                        <div class="pull-right">
                            <button class="btn btn-primary" id="search"><i class="fa fa-search" aria-hidden="true"></i></button>
                        </div>
                        <form id="dashBoardForm">
                            <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" id="sede" name="sede" data-id="selSede" data-actions-box="true" data-style="btn-default" data-live-search="true" title='{{ 'labels.Headquarter.singular'|trans([], 'LocalizationBundle') }}'>
                                    {% for sedes in Headquarter %}
                                        <option>{{ sedes.varHead }}</option>
                                    {% endfor %}
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
                {# Fin Formulario de búsqueda #}
                <div class="col-md-12"><hr></div>
                {# tablas contenedoras de datos para crear los charts #}
                <table id="tableTotModPie" class="hidden" >
                    <thead>
                        <tr>
                            <th></th>
                            <th>{{ 'labels.lecturas.porModalidad'|trans([], 'LocalizationBundle') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ estudioModalidadPie|raw }}
                    </tbody>
                </table>
                <table id="tableTotModCol" class="hidden" >
                    {{ estudioModalidadCol|raw }}
                </table> 
                <table id="tableRad" class="hidden" >
                    <thead>
                        <tr>
                            <th></th>
                            <th>{{ 'labels.lecturas.porMedico'|trans([], 'LocalizationBundle') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ estudiosRadiologo|raw }}
                    </tbody>
                </table>
                <table id="tableTec" class="hidden" >
                    <thead>
                        <tr>
                            <th></th>
                            <th>{{ 'labels.study.studyBy'|trans([], 'LocalizationBundle') }}{{ 'labels.role.technologist'|trans([], 'LocalizationBundle') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ estudiosTecnologo|raw }}
                    </tbody>
                </table>
                {# <table id="tableEst" class="hidden" >
                    <thead>
                        <tr>
                            <th></th>
                            <th>{{ 'labels.numPacientes'|trans([], 'LocalizationBundle') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ estudiosXestado|raw }}
                    </tbody>
                </table> #}
                {# fin de tablas #}
                {# Totales #}
                <div class="col-md-3">
                    <div class="panel panel-default totalest">
                        <div class="panel-body">
                            <h2 style="margin:0;padding:0;" ><span class="toagenda" ></span></h2><h4 style="margin:0;padding:0;">{{ 'labels.totalAgendados'|trans([], 'LocalizationBundle') }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel panel-default totalest">
                        <div class="panel-body" data-toggle="tooltip" title="{{ 'messages.totalImgTec'|trans([], 'LocalizationBundle') }}" >
                            <h2 style="margin:0;padding:0;"><span class="tottec"></span></h2><h4 style="margin:0;padding:0;">{{ 'labels.study.total'|trans([], 'LocalizationBundle') }}{{ 'labels.role.tecnologos'|trans([], 'LocalizationBundle') }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel panel-default totalest">
                        <div class="panel-body" data-toggle="tooltip" title="{{ 'messages.totalLectRealizadas'|trans([], 'LocalizationBundle') }}" >
                            <h2 style="margin:0;padding:0;"><span class="torad"></span></h2><h4 style="margin:0;padding:0;">{{ 'labels.lecturas.total'|trans([], 'LocalizationBundle') }}{{ 'labels.role.radiologos'|trans([], 'LocalizationBundle') }}</h4>
                        </div>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="panel panel-default totalest">
                        <div class="panel-body" data-toggle="tooltip" title="{{ 'messages.totalEstCompletos'|trans([], 'LocalizationBundle') }}" >
                            <h2 style="margin:0;padding:0;"><span class="totec"></span></h2><h4 style="margin:0;padding:0;">{{ 'labels.totalEstAtendidos'|trans([], 'LocalizationBundle') }}</h4>
                        </div>
                    </div>
                </div>

               {# Fin Totales #}
               <div class="clearfix"></div>
               

                {# Chart Tecnologo#}
                <div class="col-md-6">
                    <div class="card">
                        <div id="total_tec" style="min-width: 300px; min-height: 400px; margin: 0 auto"></div>
                    </div>
                </div>
               
               {# Chart modalidad Columnas#}
               <div class="col-md-6">
                   <div class="card">
                        <div id="totalModCol" style="min-width: 300px; min-height: 400px; margin: 0 auto"></div>
                   </div>
               </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="spacer"></div>
                    </div>
                </div>

                {# Chart Radiologo#}
               <div class="col-md-6">
                    <div class="card">
                        <div id="total_rads" style="min-width: 300px; min-height: 450px; margin: 0 auto"></div>
                    </div>
               </div>
                {# Chart Modalidad pie#}
                <div class="col-md-6">
                    <div class="card">
                        <div id="totalModPie" style="min-width: 300px; min-height: 450px; margin: 0 auto"></div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="spacer"></div>
                    </div>
                </div>

                {# Chart Estados #}
                {#<div class="col-md-12">
                    <div class="card">
                        <div id="toestados" style="min-width: 300px; min-height: 400px; margin: 0 auto"></div>
                    </div>
                </div>#}
                <div class="row">
                    <div class="col-md-12">
                        <div class="spacer"></div>
                    </div>
                </div>
                 {# Titulo de pendientes #}
                <div class="col-md-12">
                    <div class="breadcrumb" style="min-height:40px;">
                        <div class="col-md-6" >
                            <p style="font-size:14px; padding:0; text-transform: uppercase;">
                                <strong>{{ 'messages.estadoGlobal'|trans([], 'LocalizationBundle') }}: <span id="spanSede" >{{ sede }}</span></strong>
                            </p>
                        </div>
                        <div class="pull-right" style="margin-top:5px;" >
                            {{ intervalos|raw }}
                        </div>
                    </div>
                </div>
                {# Fin Titulo de pendientes#}
                
                {# Estados - Primer Dashboard #}
               
                <div class="clearfix"></div>
                <div class="col-md-3">
                    <div class="card">
                        <div id="divAsistPie" ></div>
                        <br>
                        <div id="divAsistCol" ></div>
                        <button type="button" class="btn btn-primary form-control detailG down" style="margin-bottom: 10px; padding-bottom: 5px;"  data-toggle="collapse" data-target="#detGlobal0"><span class="glyphicon glyphicon-chevron-down" ></span></button>
                        <div id="detGlobal0" class="collapse">
                            {{ tabDetAsist|raw }}
                        </div>
                        <div id="tablasAsistencial" class="hide" >
                            {{ tabAsistencial|raw }}
                            {{ tabAsisTiempo|raw }}
                        </div>
                    </div>
                </div>
                        
                <div class="col-md-3">
                    <div class="card">
                        <div id="divLectPie" ></div>
                        <br>
                        <div id="divLectCol" ></div>
                        <button type="button" class="btn btn-primary form-control detailG down" style="margin-bottom: 10px; padding-bottom: 5px;"  data-toggle="collapse" data-target="#detGlobal1"><span class="glyphicon glyphicon-chevron-down" ></span></button>
                        <div id="detGlobal1" class="collapse">
                            {{ tabDetLect|raw }}
                        </div>
                        <div id="tablasLectura" class="hide" >
                            {{ tabLectura|raw }}
                            {{ tabLectTiempo|raw }}
                        </div>
                    </div>
                </div>
                        
                <div class="col-md-3">
                    <div class="card">
                        <div id="divTransPie" ></div>
                        <br>
                        <div id="divTransCol" ></div>
                        <button type="button" class="btn btn-primary form-control detailG down" style="margin-bottom: 10px; padding-bottom: 5px;"  data-toggle="collapse" data-target="#detGlobal2"><span class="glyphicon glyphicon-chevron-down" ></span></button>
                        <div id="detGlobal2" class="collapse">
                            {{ tabDetTrans|raw }}
                        </div>
                        <div id="tablasTranscripcion" class="hide" >
                            {{ tabTranscripcion|raw }}
                            {{ tabTransTiempo|raw }}
                        </div>
                    </div>
                </div>
                        
                <div class="col-md-3">
                    <div class="card">
                        <div id="divValidPie" ></div>
                        <br>
                        <div id="divValidCol" ></div>
                        <button type="button" class="btn btn-primary form-control detailG down" style="margin-bottom: 10px; padding-bottom: 5px;"  data-toggle="collapse" data-target="#detGlobal3"><span class="glyphicon glyphicon-chevron-down" ></span></button>
                        <div id="detGlobal3" class="collapse">
                            {{ tabDetValid|raw }}
                        </div>
                        <div id="tablasValidacion" class="hide" >
                            {{ tabValidacion|raw }}
                            {{ tabValidTiempo|raw }}
                        </div>
                    </div>
                </div>
                {# dialog_detail #}         
                <div id="dialog_detail" style="min-height: 780px; overflow: hidden;" title="{{ 'labels.details'|trans([], 'LocalizationBundle') }}">
                    <div id="progressbar"></div>
                </div>{# Fin dialog_detail #}
            </div>{# Fin Panel body #}
        </div>{# Fin Panel Primary #}
    </div>
    {# Fin container-fluid #}

    {# Scripts #}
    <script>
        var SrcGif = '{{ asset('bundles/utilities/images/anim_gif.gif') }}';
        var wait = '{{ 'messages.pleaseWait'|trans([], 'LocalizationBundle') }}';
        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
            }
        };

        $(document).ready(function() {
            $('[data-toggle="tooltip"]').tooltip();
            $('select#sede').val("{{ sede }}");
            $('.selectpicker').selectpicker('refresh');

            // script para grafico de total por modalidad pie
            $('#totalModPie').highcharts({
                data: {
                    table: 'tableTotModPie'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            align: 'left',
                            enabled: true
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                colors: ['#00486b', '#00547c', '#00668d', '#0079a7', '#0096b6', '#6aafd8', '#86c4ea', '#aed7f0', '#b8cad2', '#effbff', '#35dbff', '#64e4ff', '#8febff', '#adf0ff', '#cff7ff'],
                chart: {
                    type: 'pie'
                },
                title: {
                    text: '{{ 'labels.lecturas.total'|trans([], 'LocalizationBundle') }}{{ 'modalities.modality'|trans([], 'LocalizationBundle') }}',
                    align: 'left'
                },
                yAxis: {
                    allowDecimals: false,
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toUpperCase();
                    }
                }
            });

            // total de modalidades columnas
            $('#totalModCol').highcharts({
                data: {
                    table: 'tableTotModCol'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            align: 'left',
                            enabled: true
                        }
                    }
                },
                credits: {
                    enabled: false
                },
                colors: ['#00486b', '#00547c', '#00668d', '#0079a7', '#0096b6', '#6aafd8', '#86c4ea', '#aed7f0', '#b8cad2', '#effbff', '#35dbff', '#64e4ff', '#8febff', '#adf0ff', '#cff7ff'],
                chart: {
                    type: 'column'
                },
                title: {
                    text: '{{ 'labels.lecturas.total'|trans([], 'LocalizationBundle') }}{{ 'modalities.modality'|trans([], 'LocalizationBundle') }}',
                    align: 'left'
                },
                yAxis: {
                    allowDecimals: false,
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toUpperCase();
                    }
                }
            });

            // total por radiologo
            $('#total_rads').highcharts({
                data: {
                    table: 'tableRad'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            align: 'left',
                            enabled: true
                        }
                    }
                },
                colors: ['#67B7DC'],
                credits: {
                    enabled: false
                },
                chart: {
                    type: 'bar'
                },
                title: {
                    text: '{{ 'labels.lecturas.totalvalidadas'|trans([], 'LocalizationBundle') }}',
                    align: 'left'
                },
                legend: {
                    enabled: false
                },
                yAxis: {
                    allowDecimals: false,
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toUpperCase();
                    }
                }
            });

            $('#total_tec').highcharts({
                data: {
                    table: 'tableTec'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            align: 'left',
                            enabled: true
                        }
                    }
                },
                colors: ['#67B7DC'],
                credits: {
                    enabled: false
                },
                chart: {
                    type: 'bar'
                },
                title: {
                    text: '{{ 'labels.study.studyBy'|trans([], 'LocalizationBundle') }}{{ 'labels.role.technologist'|trans([], 'LocalizationBundle') }}',
                    align: 'left'
                },
                legend: {
                    enabled: false
                },
                yAxis: {
                    allowDecimals: false,
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toUpperCase();
                    }
                }
            });

            $('#toestados').highcharts({
                data: {
                    table: 'tableEst'
                },
                plotOptions: {
                    series: {
                        dataLabels: {
                            align: 'left',
                            enabled: true
                        }
                    }
                },
                colors: ['#5c9bd1'],
                credits: {
                    enabled: false
                },
                chart: {
                    type: 'column'
                },
                title: {
                    text: '{{ 'labels.total'|trans([], 'LocalizationBundle') }} {{ 'labels.patient.plural'|trans([], 'LocalizationBundle') }}{{ 'labels.porEstado'|trans([], 'LocalizationBundle') }}',
                    align: 'left'
                },
                yAxis: {
                    allowDecimals: false,
                    title: {
                        text: ''
                    }
                },
                tooltip: {
                    formatter: function () {
                        return '<b>' + this.series.name + '</b><br/>' +
                            this.point.y + ' ' + this.point.name.toUpperCase();
                    }
                }
            });

            $('.toagenda').numerator({
                easing: 'linear', // easing options.
                duration: 2000, // the length of the animation.
                toValue: {{ totalAgendados }} // animate to this value.
            });

            $('.totec').numerator({
                easing: 'linear', // easing options.
                duration: 2000, // the length of the animation.
                toValue: {{ totalAtendidos }} // animate to this value.
            });

            $('.tottec').numerator({
                easing: 'linear', // easing options.
                duration: 2000, // the length of the animation.
                toValue: {{ totalEstTec }} // animate to this value.
            });

            $('.torad').numerator({
                easing: 'linear', // easing options.
                duration: 2000, // the length of the animation.
                toValue: {{ totalLecturas }} // animate to this value.
            });

            // cambio de fechas para los graficos
            $('#search').click(function () {
                $.blockUI({message: '<h3>' + wait + '', baseZ: 99999});
                $.ajax({
                    url: UrlDashBoardSearch,
                    type: 'POST',
                    data: $('#dashBoardForm').serialize() + '&fechaIni=' + $('#reportrange').data('daterangepicker').startDate.format('YYYY-MM-DD') +
                    '&fechaFin=' + $('#reportrange').data('daterangepicker').endDate.format('YYYY-MM-DD'),
                    success: function (data) {
                        var obj = JSON.parse(data);
                        $.unblockUI();
                        $('#tableRad tbody').html(obj.estudiosRadiologo);
                        $('#tableTec tbody').html(obj.estudiosTecnologo);
                        // $('#tableEst tbody').html(obj.estudiosXestado);
                        $('#tableTotModPie tbody').html(obj.estudioModalidadPie);
                        $('#tableTotModCol').html(obj.estudioModalidadCol);
                        $('.toagenda').html(obj.totalAgendados);
                        $('.totec').html(obj.totalAtendidos);
                        $('.tottec').html(obj.totalEstTec);
                        $('.torad').html(obj.totalLecturas);
                        $('#fecha').html(obj.fechaIni + ' - ' + obj.fechaFin + ' Sede: ' + obj.sede);
                        $('#sede').html(obj.sede);

                        $('#tablasAsistencial').html('');
                        $('#tablasLectura').html('');
                        $('#tablasTranscripcion').html('');
                        $('#tablasValidacion').html('');
                        $('#spanSede').html('');

                        $('#detGlobal0').html('');
                        $('#detGlobal1').html('');
                        $('#detGlobal2').html('');
                        $('#detGlobal3').html('');

                        var tablasAsistencial = obj.tabAsistencial + obj.tabAsisTiempo;
                        var tablasLectura = obj.tabLectura + obj.tabLectTiempo;
                        var tablasTranscripcion = obj.tabTranscripcion + obj.tabTransTiempo;
                        var tablasValidacion = obj.tabValidacion + obj.tabValidTiempo;


                        $('#tablasAsistencial').html(tablasAsistencial);
                        $('#tablasLectura').html(tablasLectura);
                        $('#tablasTranscripcion').html(tablasTranscripcion);
                        $('#tablasValidacion').html(tablasValidacion);

                        $('#detGlobal0').html(obj.tabDetAsist);
                        $('#detGlobal1').html(obj.tabDetLect);
                        $('#detGlobal2').html(obj.tabDetTrans);
                        $('#detGlobal3').html(obj.tabDetValid);
                        $('#spanSede').html(obj.sede);

                        graficoPie('divAsistPie', 'asistPie', UpdatePending);
                        graficoCol('divAsistCol', 'asistCol', title_time, study);

                        graficoPie('divLectPie', 'lectPie', ReadingPending);
                        graficoCol('divLectCol', 'lectCol', title_time, study);

                        graficoPie('divTransPie', 'transPie', TranscriptionPending);
                        graficoCol('divTransCol', 'transCol', title_time, study);

                        graficoPie('divValidPie', 'validPie', ValidationPending);
                        graficoCol('divValidCol', 'validCol', title_time, study);
                        // script para grafico de total por modalidad pie

                        $('#totalModPie').highcharts({
                            data: {
                                table: 'tableTotModPie'
                            },
                            plotOptions: {
                                series: {
                                    dataLabels: {
                                        align: 'left',
                                        enabled: true
                                    }
                                }
                            },
                            credits: {
                                enabled: false
                            },
                            chart: {
                                type: 'pie'
                            },
                            colors: ['#00486b', '#00547c', '#00668d', '#0079a7', '#0096b6', '#6aafd8', '#86c4ea', '#aed7f0', '#b8cad2', '#effbff', '#35dbff', '#64e4ff', '#8febff', '#adf0ff', '#cff7ff'],
                            title: {
                                text: '{{ 'labels.lecturas.total'|trans([], 'LocalizationBundle') }}{{ 'modalities.modality'|trans([], 'LocalizationBundle') }}',
                                align: 'left'
                            },
                            yAxis: {
                                allowDecimals: false,
                                title: {
                                    text: ''
                                }
                            },
                            tooltip: {
                                formatter: function () {
                                    return '<b>' + this.series.name + '</b><br/>' +
                                        this.point.y + ' ' + this.point.name.toUpperCase();
                                }
                            }
                        });

                        // total de modalidades columnas
                        $('#totalModCol').highcharts({
                            data: {
                                table: 'tableTotModCol'
                            },
                            plotOptions: {
                                series: {
                                    dataLabels: {
                                        align: 'left',
                                        enabled: true
                                    }
                                }
                            },
                            credits: {
                                enabled: false
                            },
                            colors: ['#00486b', '#00547c', '#00668d', '#0079a7', '#0096b6', '#6aafd8', '#86c4ea', '#aed7f0', '#b8cad2', '#effbff', '#35dbff', '#64e4ff', '#8febff', '#adf0ff', '#cff7ff'],
                            chart: {
                                type: 'column'
                            },
                            title: {
                                text: '{{ 'labels.lecturas.total'|trans([], 'LocalizationBundle') }}{{ 'modalities.modality'|trans([], 'LocalizationBundle') }}',
                                align: 'left'
                            },
                            yAxis: {
                                allowDecimals: false,
                                title: {
                                    text: ''
                                }
                            },
                            tooltip: {
                                formatter: function () {
                                    return '<b>' + this.series.name + '</b><br/>' +
                                        this.point.y + ' ' + this.point.name.toUpperCase();
                                }
                            }
                        });

                        $('#total_rads').highcharts({
                            data: {
                                table: 'tableRad'
                            },
                            plotOptions: {
                                series: {
                                    dataLabels: {
                                        align: 'left',
                                        enabled: true
                                    }
                                }
                            },
                            colors: ['#67B7DC'],
                            credits: {
                                enabled: false
                            },
                            chart: {
                                type: 'bar'
                            },
                            title: {
                                text: '{{ 'labels.lecturas.totalvalidadas'|trans([], 'LocalizationBundle') }}',
                                align: 'left'
                            },
                            legend: {
                                enabled: false
                            },
                            yAxis: {
                                allowDecimals: false,
                                title: {
                                    text: ''
                                }
                            },
                            tooltip: {
                                formatter: function () {
                                    return '<b>' + this.series.name + '</b><br/>' +
                                        this.point.y + ' ' + this.point.name.toUpperCase();
                                }
                            }
                        });

                        $('#total_tec').highcharts({
                            data: {
                                table: 'tableTec'
                            },
                            plotOptions: {
                                series: {
                                    dataLabels: {
                                        align: 'left',
                                        enabled: true
                                    }
                                }
                            },
                            colors: ['#67B7DC'],
                            chart: {
                                type: 'bar'
                            },
                            credits: {
                                enabled: false
                            },
                            title: {
                                text: '{{ 'labels.study.studyBy'|trans([], 'LocalizationBundle') }}{{ 'labels.role.technologist'|trans([], 'LocalizationBundle') }}',
                                align: 'left'
                            },
                            legend: {
                                enabled: false
                            },
                            yAxis: {
                                allowDecimals: false,
                                title: {
                                    text: ''
                                }
                            },
                            tooltip: {
                                formatter: function () {
                                    return '<b>' + this.series.name + '</b><br/>' +
                                        this.point.y + ' ' + this.point.name.toUpperCase();
                                }
                            }
                        });

                        $('#toestados').highcharts({
                            data: {
                                table: 'tableEst'
                            },
                            plotOptions: {
                                series: {
                                    dataLabels: {
                                        align: 'left',
                                        enabled: true
                                    }
                                }
                            },
                            colors: ['#67B7DC'],
                            chart: {
                                type: 'column'
                            },
                            credits: {
                                enabled: false
                            },
                            title: {
                                text: '{{ 'labels.total'|trans([], 'LocalizationBundle') }} {{ 'labels.patient.plural'|trans([], 'LocalizationBundle') }}{{ 'labels.porEstado'|trans([], 'LocalizationBundle') }}',
                                align: 'left'
                            },
                            yAxis: {
                                allowDecimals: false,
                                title: {
                                    text: ''
                                }
                            },
                            tooltip: {
                                formatter: function () {
                                    return '<b>' + this.series.name + '</b><br/>' +
                                        this.point.y + ' ' + this.point.name.toUpperCase();
                                }
                            }
                        });
                    }
                })
                return false;
            });
        });
    </script>
{% endblock %}