{% extends '::base.html.twig' %}
{% block menuTop %}

{% endblock %}

{% block dashboard %}
    <style>
        .btn-claro {
            color: #fff;
            background-color: #00569C;
            border-color: #3D59CA;
        }
        .btn-claro:hover, .btn-claro:focus {
            color: #fcfcfc;
            text-decoration: none;
       }        
    </style>
<script>
    $(function () {
              $("#generar").click(function(){
                $.isLoading({
                    text:       "Loading"
                });
                    $("#cantidad").html(0);  
                    reporteBateria();                
            });

           $('#Filtros_fechaIni').datepicker({
                    dateFormat: 'yy-mm-dd',
                    onClose: function( selectedDate ) {
                             $( "#Filtros_fechaFin" ).datepicker( "option", "minDate", selectedDate );

                    }
            }); 

            $('#Filtros_fechaFin').datepicker({
                    dateFormat: 'yy-mm-dd',
            });
            
            $("#clear").click(function(){
                $("#estado").val("TODOS");      
                $('#Filtros_fechaIni').val("");
                $('#Filtros_fechaFin').val("");  
            });             

            $('#generar').trigger('click');

        });
        
        function reporteBateria(){

            data = {};

                data['fechaIni'] = $("#Filtros_fechaIni").val();  
                data['fechaFin'] = $("#Filtros_fechaFin").val();    
               
                $("#statusMCPeru").load("{{ path('statusMCPeru',{'idproyectos':idproyectos}) }}?fechaIni="+$("#Filtros_fechaIni").val()+"&fechafin="+$("#Filtros_fechaFin").val());

                $.isLoading("hide");
      }     
       
      
</script>  
   <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{asset('js/jquery.isloading.js')}}" type="text/javascript"></script>
    <script src="{{ asset('js/tableExport.js') }}"></script>
    <script src="{{ asset('js/jquery.base64.js') }}"></script>
    <script src="{{ asset('js/jquery.numeric.js') }}"></script>
    <script src="{{ asset('js/jquery.form.js') }}"></script>
    
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                    <img id="logo" class="pull-right" src="{{ asset('images/telefonica.png') }}"  width="220" height="72" >

             </div>
        </div>
        <div class="row">
            <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaI' | trans}}: </label>  
                <input class="form-control" type="text" id="Filtros_fechaIni" value="{{ dateStart }}">
            </div>
            <div class="col-lg-2"  style="margin-top: 1%">
                <label>{{'monitor.etiqueta.fechaF' | trans}}: </label>  
                <input class="form-control" type="text" id="Filtros_fechaFin" value="{{ dateEnd }}">
            </div>
            <div class="col-lg-2" id="parametros" style="margin-top: 1%">
            </div>              
            <div class="col-lg-2" id="parametros" style="margin-top: 1%">
               <button class="btn btn-claro" id="generar">{{'ticketDetail.boton.generar' | trans}}</button>
               <button class="btn btn-claro" id="clear">{{'ticketDetail.boton.limpiar' | trans}}</button>
            </div>            
        </div>
         <div class="row">
                <div class="col-lg-12 text-center"  style="margin-top: 1%">
                    <h1>{{'ESTADO DE LOS CORRECTIVOS' | trans | upper}}</h1>
                 </div>

        </div>    

        <div class="col-lg-12">
            <div class="col-lg-12" id="statusMCPeru"></div>

        </div>
    </div>
{% endblock %}

    {% block javascripts %}
        <link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
        <link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
        <script src="{{ asset('js/jquery.formatCurrency-1.4.0.js') }}"></script>
        <script src="{{ asset('js/i18n/jquery.formatCurrency.all.js') }}"></script>
        <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('js/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('js/buttons.flash.min.js') }}"></script>
        <script src="{{ asset('js/jszip.min.js') }}"></script>
        <script src="{{ asset('js/pdfmake.min.js') }}"></script>
        <script src="{{ asset('js/vfs_fonts.js') }}"></script>
        <script src="{{ asset('js/buttons.html5.min.js') }}"></script>
        <script src="{{ asset('js/buttons.print.min.js') }}"></script>
    {% endblock %}