{% 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') }}"/>


    {# JS #}
    <script type="text/javascript" src="{{ asset('bundles/indicator/js/indicadorCitas.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/shedule/js/blockUI.js') }}"></script>
    <script type="text/javascript" src="{{ asset('bundles/indicator/js/export-csv.js') }}"></script>
    <script>
        var SrcSwf = '{{ asset('bundles/indicator/datatable/swf/copy_csv_xls_pdf.swf') }}';
        var SrcGif = '{{ asset('bundles/utilities/images/anim_gif.gif') }}';
        var url_search_date = '{{ path('indicador_citas_filtro') }}';
        var urlDetalleCita = '{{ path('indicador_detalle_citas') }}';
        var wait = "{{ 'messages.pleaseWait'|trans([], 'LocalizationBundle')}}";
        var accionUsuario = "{{ 'messages.accionUsuario'|trans([], 'LocalizationBundle')}}";
        var numCitas = "{{ 'labels.numberOf'|trans([], 'LocalizationBundle')}} {{ 'labels.appointment.plural'|trans([], 'LocalizationBundle')}}";
        var citas = "{{ 'labels.appointment.plural'|trans([], 'LocalizationBundle')}}";
        var totalCitas = "{{ 'menu.totalCitas'|trans([], 'LocalizationBundle')}}";
        var asignadas = "{{ 'labels.status.asignadas'|trans([], 'LocalizationBundle') }}";
        var canceladas = "{{ 'labels.status.canceladas'|trans([], 'LocalizationBundle') }}";
        var confirmadas = "{{ 'labels.status.confirmadas'|trans([], 'LocalizationBundle') }}";
        var totalAcciones = "{{ 'messages.totalAcciones'|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')}}";
    </script>
    <style>
        table th {
            text-transform: uppercase;
        }
        table td a{
            color:#69a5d7;
            text-transform: uppercase;
        }
        table td a:hover{
            color:#0388f6;
            text-decoration: none;
        }
        table td {
            color:#8896a0;
        }
        tfoot input {
            width: 100%;
            padding: 3px;
            box-sizing: border-box;
        }
        tfoot {
            display: table-header-group;
        }

        div.DTTT { margin-bottom: 0.5em; float: right; }
        div.dataTables_wrapper { clear: both; }
        .input-group input{
                height:34px;
                border-radius: 4px;
        }

        .error{
            border:2px solid #FF0000;
        }
        .glyphicon-ok:before {
            content: "\e013";
        }
        .check-mark {
            color:#888;
        }

    </style>
{% endblock %}
{% block content %}
    {# container fluid #}
        <div class="container-fluid">
            {# panel primary #}
            <div class="panel panel-primary">
                <div class="panel-heading">
                  <h3 class="panel-title">{{ 'menu.indicitas'|trans([], 'LocalizationBundle') }}</h3>
                </div>
                {# panel body #}
                <div class="panel-body">

                    {# Formulario de búsqueda #}
                    <div class="col-md-12">
                        <form id="formClear" >                        
                            <div class="form-group">
                                <label class="sr-only">Icono FechaIn</label>
                                <div class="col-md-2" style="margin:0;padding:0;">
                                    <div class="input-group">
                                        <div class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></div>
                                        <input name="dateInit" id="dateInit" readonly class="form-control datepicker required" placeholder="{{ 'labels.date.dateIni'|trans([], 'LocalizationBundle') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="sr-only">Icono FechaFin</label>
                                <div class="col-md-2">
                                    <div class="input-group">
                                        <div class="input-group-addon"><span class="glyphicon glyphicon-calendar" aria-hidden="true"></span></div>
                                        <input name="dateEnd" id="dateEnd" readonly class="form-control datepicker" placeholder="{{ 'labels.date.dateEnd'|trans([], 'LocalizationBundle') }}">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="sr-only">Usuario</label>
                                <div class="col-md-2">
                                    <select class="form-control selectpicker" id="usuario" data-actions-box="true" data-id="selUsuario" multiple data-style="btn-primary" data-live-search="true" title='{{ 'labels.role.usuario'|trans([], 'LocalizationBundle') }}'>
                                        {% for users in Usuarios %}
                                            <option value="{{ users.id }}" >{{ users.firstname }} {{ users.lastname }}</option>
                                        {% endfor %}
                                    </select>
                                    <input type="hidden" id="selUsuario" class="required" />                                    
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="sr-only">{{ 'labels.action'|trans([], 'LocalizationBundle') }}</label>
                                    <div class="col-md-2" style="margin:0; padding:0;">
                                        <select class="form-control selectpicker" id="accion" data-actions-box="true" data-id="selAccion" data-style="btn-primary" multiple title='Acci&oacute;n'>
                                            <option value="ASIGNACION" >{{ 'labels.status.asignacion'|trans([], 'LocalizationBundle') }}</option>
                                            <option  value="CANCELACION" >{{ 'labels.status.cancelacion'|trans([], 'LocalizationBundle') }}</option>
                                            <option value="CONFIRMACION" >{{ 'labels.status.confirmacion'|trans([], 'LocalizationBundle') }}</option>
                                            <option value="MODIFICACION" >{{ 'labels.status.modificacion'|trans([], 'LocalizationBundle') }}</option>
                                        </select>
                                        <input type="hidden" id="selAccion" class="required" />                                        
                                    </div>
                            </div>
                            <div class="form-group">
                                <label class="sr-only">{{ 'labels.Headquarter.singular'|trans([], 'LocalizationBundle') }}</label>
                                <div class="col-md-2">
                                    <select class="form-control selectpicker" id="sede" data-style="btn-primary" data-actions-box="true" data-id="selSede" data-live-search="true" multiple title='{{ 'labels.Headquarter.singular'|trans([], 'LocalizationBundle') }}'>
                                        <option></option>
                                        {% for Sedes in hqList %}
                                            <option>{{ Sedes.varHead }}</option>
                                        {% endfor %}
                                    </select>
                                    <input type="hidden" id="selSede" class="required" />
                                </div>
                            </div>
                                    
                        </form>
                        <div class="col-md-2">
                            <button class="btn btn-primary" id="search" >{{ 'button.search'|trans([], 'LocalizationBundle') }}</button>
                            <button class="btn btn-primary" id="clear" >{{ 'button.delete'|trans([], 'LocalizationBundle') }}</button>
                        </div>

                    </div>
                    {# Fin Formulario de búsqueda #}


                    <div class="clearfix" style="margin-bottom:20px;"></div>
                    {# Charts #}
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h3 class="panel-title">{{ 'messages.resultadosRango'|trans([], 'LocalizationBundle') }} <span class="RangoFechas" >{{ fecShow }}</span> </h3>
                            </div>
                            <div class="panel-body">
                                <div class="col-md-6">
                                    <div id="citas_usuarios" style="min-width: 310px; min-height: 450px; margin: 0 auto"></div>
                                </div>
                                <div class="col-md-6">
                                    <div id="dona" style="min-width: 310px; min-height: 450px; margin: 0 auto"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {# Fin charts #}

                           {# Tabla gráfico 1#}
                            <table id="oportunidad" class="hidden">
                                {{ resultData|raw }}                                
                            </table>

                            {# Tabla grafico 2 #}
                            <table id="tabladona" class="hidden">
                                {{ totalAcciones|raw }}
                            </table>


                    <div class="clearfix"></div>

                    {# Tabla acciones citas #}
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                              <h3 class="panel-title">{{ 'messages.accionAsignaciones'|trans([], 'LocalizationBundle') }} <span class="RangoFechas" >{{ fecShow }}</span></h3>
                            </div>
                            <div class="panel-body" id="divTpersAccion" >
                                {{ TpersAccion|raw }}                            
                            </div>
                        </div>
                    </div>{# Fin tabla acciones #}
                </div>{# fin panel body #}
            </div>{# fin panel primary #}
        </div>{# Fin container fluid #}
        <div id="divModales" >
            
        </div>
        {# Fin Modal detalle #} 

{% endblock %}