{% 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/indicadorPlacas.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 urlSearchPlates = '{{ path('indicador_placas') }}';
        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 pleaseWait = "{{ 'messages.pleaseWait'|trans([], 'LocalizationBundle')}}";
        var porTamano = "{{ 'labels.porTamano'|trans([], 'LocalizationBundle')}}";
        var numberPlates = "{{ 'labels.numberPlates'|trans([], 'LocalizationBundle')}}";
        var placasUsuario = "{{ 'labels.placasUsuario'|trans([], 'LocalizationBundle')}}";
        var placasModalidad = "{{ 'labels.placasModalidad'|trans([], 'LocalizationBundle')}}";
        var title = "{{ 'menu.IndPlacas'|trans([], 'LocalizationBundle') }}";
    </script>
    <style>
        .input-group input{
        height:34px;
        border-radius: 4px;
        }
        table th {
            text-transform: uppercase;
            text-align: center;
        }
        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;
        }
        tr.group,
        tr.group:hover {
            background-color: #ddd !important;
        }
        div.DTTT { margin-bottom: 0.5em; float: right; }
        div.dataTables_wrapper { clear: both; }
        .well {
            margin-top:0;
            margin-bottom:0;
            padding-top:0;
            padding-bottom:0;
            color:#ffffff;
            transition: all 0.3s ease-in-out;
        }
        .well h2 {
            margin-top:0;
            padding-top:5px;
        }
        .total{
            background:#5c9bd1;
        }
        .total:hover{
            background:#378bd3;
        }

        .buenas{
            background:#44b6ae;
        }
        .buenas:hover{
            background:#1da097;
        }
        .malas{
            background:#f2807f;
        }
        .malas:hover{
            background:#ed4342;
        }
        .mainwell{
            background: -webkit-linear-gradient(left, #5c9bd1 , #88d4f4); 
            background: -moz-linear-gradient(right, #5c9bd1, #88d4f4); 
            background: linear-gradient(to right, #5c9bd1 , #88d4f4); 
            color:#fff;
        }
        .mainwell h4 {
            color:#fff;
        }
        .glyphicon-ok:before {
            content: "\e013";
        }
        .check-mark {
            color:#888;
        }
    </style>
{% endblock %}
{% block content %}
{# Container fluid #}
<div class="container-fluid">
    {# Panel #}
    <div class="panel panel-primary">
        <div class="panel-heading">
          <h3 class="panel-title">{{ 'menu.IndPlacas'|trans([], 'LocalizationBundle') }}</h3>
        </div>
        {# Panel body #}
        <div class="panel-body">
            {# Formulario de búsqueda #}
            <div class="row">
                <div class="col-md-12">
                    <form id="formClear" >

                        <div class="form-group">
                            <label class="sr-only">Icono FechaIn</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="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 required" placeholder="{{ 'labels.date.dateEnd'|trans([], 'LocalizationBundle') }}">
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only">{{ 'labels.role.technologist'|trans([], 'LocalizationBundle') }}</label>
                            <div class="col-md-3">
                                <select class="form-control selectpicker" id="usuario" data-style="btn-primary" data-actions-box="true" data-id="selUser" data-live-search="true" multiple title='{{ 'labels.role.technologist'|trans([], 'LocalizationBundle') }}'>
                                    {% for usuarios in users %}
                                        <option value="{{ usuarios.id }}" >{{ usuarios.firstname }} {{ usuarios.lastname }}</option>
                                    {% endfor %}
                                </select>
                                <input type="hidden" name="selUser"  id="selUser" class="required" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="sr-only">{{ 'labels.Headquarter.singular'|trans([], 'LocalizationBundle') }}</label>
                            <div class="col-md-3">
                                <select class="form-control selectpicker" id="sede" data-style="btn-primary" data-id="selSede" data-actions-box="true" data-live-search="true" multiple title='{{ 'labels.Headquarter.singular'|trans([], 'LocalizationBundle') }}'>
                                    {% for sede in sedes %}
                                        <option value="{{ sede.idHeadquarter }}" >{{ sede.varHead }}</option>
                                    {% endfor %}
                                </select>
                                <input type="hidden" name="selSede" id="selSede" class="required" />
                            </div>
                        </div>
                    </form>
                    <div class="col-md-2">
                        <button class="btn btn-primary" id="search" ><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span> {{ 'button.search'|trans([], 'LocalizationBundle') }}</button>
                        <button class="btn btn-danger" id="clear" ><span class="glyphicon glyphicon-remove-circle" aria-hidden="true"></span> {{ 'button.delete'|trans([], 'LocalizationBundle') }}</button>
                    </div>

                    <div class="clearfix"></div>
                    <div class="col-md-12"><hr></div>
                </div>
            </div>{# Fin Formulario de búsqueda #}

            {# Barra de resultados #}
            <div class="col-md-12" style="margin-bottom:10px">
                <div class="well mainwell">
                    <h4>{{ 'labels.results'|trans([], 'LocalizationBundle') }} <span class="rangoFec" >{{ fechaIni }} - {{ fechaFin }}</span> <span class="glyphicon glyphicon-stats pull-right" aria-hidden="true" style="font-size:20px;"></span></h4>
                </div>
            </div> {# Fin Barra de resultados #}
            
            {# Cuadros Total de placas #}
            <div class="col-md-4">
                <div class="well total">
                    <span class="glyphicon glyphicon-modal-window pull-right" aria-hidden="true" style="font-size:40px; margin-top:15px;"></span>
                    <h2 id="totalPlacas" >{{ totalPlacas }}</h2><h5>{{ 'labels.totalPlates'|trans([], 'LocalizationBundle') }}</h5> 
                </div>
            </div>
            <div class="col-md-4">
                <div class="well buenas">
                    <span class="glyphicon glyphicon-ok-sign pull-right" aria-hidden="true" style="font-size:40px; margin-top:15px;"></span>
                    <h2 id="tPlacasB" >{{ tPlacasB }}</h2><h5>{{ 'labels.totalgoodPlates'|trans([], 'LocalizationBundle') }}</h5>
                </div>
            </div>
            <div class="col-md-4">
                <div class="well malas">
                    <span class="glyphicon glyphicon-remove-sign pull-right" aria-hidden="true" style="font-size:40px; margin-top:15px;"></span>
                    <h2 id="tPlacasM" >{{ tPlacasM }}</h2><h5>{{ 'labels.totalbadPlates'|trans([], 'LocalizationBundle') }}</h5>
                </div>
            </div>{# Fin Cuadros Total de placas #}
            

            {# Graficos #}
            <div class="col-md-12" style="margin-top:20px;">
                <div class="panel panel-default">
                    <div class="panel-heading">
                      <h3 class="panel-title">{{ 'messages.graficoMes'|trans([], 'LocalizationBundle') }}</h3>
                    </div>
                    <div class="panel-body">
                        <div class="col-md-12">
                             <div id="placas_tamanos"  style="min-width: 310px; min-height: 400px; margin: 0 auto"></div>
                        </div>
                        <div class="col-md-12">
                            <div id="placas_usuarios" style="min-width: 310px; min-height: 400px; margin: 0 auto"></div>
                        </div>
                        <div class="col-md-12">
                            <div id="placas_modalidades" style="min-width: 310px; min-height: 400px; margin: 0 auto"></div>
                        </div>
                    </div>
                </div>
            </div>{# Fin Graficos #}
            
            {# Tabla creacion del grafico tamaños#}
            <table id="datatable_tamanos" class="hidden">
                {{ TabSize|raw }}
            </table>{# Tabla creacion del grafico tamaños #}
            
            {# Tabla creacion del grafico 1#}
            <table id="datatable_usuarios" class="hidden">
                {{ TabPlacasUsuario|raw }}
            </table>{# Tabla creacion del grafico 1#}
            
            {# Tabla creacion del grafico 2#}
            <table id="datatable_modalidades" class="hidden">
                {{ TabPlacasMod|raw }}
            </table>{# Fin Tabla creacion del grafico 2#}

            {# Tabla de resultados #}
            <div class="col-md-12" >
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title">
                            {{ 'labels.placasUsuario'|trans([], 'LocalizationBundle') }} <span class="rangoFec" >{{ fechaIni }} - {{ fechaFin }}</span>
                        </h3>
                    </div>
                    <div class="panel-body" id="divPlacasDetalle" >
                        {{ TabDetPlacas|raw }}                                
                    </div>
                </div>
            </div>{# Fin Tabla de resultados #}        
        </div>{# Fin Panel body #}
    </div>{# Fin Panel #}
</div>{# Fin Container fluid #}

{% endblock %}