{% extends '::base.html.twig' %}
{% block menuTop %}
    <div class="col-lg-6 col-xs-12" >
        <div class="container" id="menuTop">
            {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}
        </div>
    </div>

{%endblock %}     

{% block dashboard %}

    <div class="container" style="margin: 7% 5% 5% 5%">

        <form id="reporteDetalle">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Reporte Detalle Electricidad</h3>
                </div>
                <div class="panel-body">

                    <div class="col-lg-5">

                        <div class="form-group">

                            <label for="" class="col-lg-4 control-label">Periodo Inicio</label>

                            <div class="col-lg-8 col-xs-9">
                                <select class="form-grou ajaxChange" role-path="{{path('cargaFechaFin')}}" element="fechaFin" id="fechaInicio" name="fechaInicio">

                                    {% for entity in entities %}
                                        <option value="{{entity.fechainicio  |date(" Y-m-d") }}">{{entity.descripcion}}</option>
                                    {%endfor%}
                                </select>
                            </div>


                        </div>

                    </div> 
                    <div class="col-lg-5">

                        <div class="form-group">

                            <label for="" class="col-lg-4 control-label">Periodo Fin</label>

                            <div class="col-lg-8 col-xs-9">
                                <select class="form-grou" name="fechaFin" id="fechaFin">


                                    <option value=""></option>

                                </select>

                            </div>


                        </div>

                    </div> 

                    <div class="col-lg-2">

                        <div class="form-group">

                            <input type="submit" id="generate" class="btn btn-primary" value="Generar Reporte">

                        </div>




                        <div class="form-group hidden" id="reporte" >

                            <input type="button" class="btn btn-primary" value="Descargar Reporte" onClick="window.location = '../../../../../template/Detalle Suministro .xlsx';">

                        </div>


                    </div>

                </div> 

            </div>
        </form>

    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Progress</h4>
                </div>
                <div class="modal-body">
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped active"  role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
                            0%
                        </div>
                    </div>
                    <div class="modal-footer">
                        <span id="ingresados"></span> / <span id="total"></span>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        window.pollingPeriod = 1000;
        window.progressInterval;

        $('.ajaxChange').change(function () {

            var opc = {
                "url": $(this).attr('role-path'),
                "element": $(this).attr('element'),
                "data": $(this).val(),
                "key": $(this).attr("id")
            };

            //console.log(opc.key);
            var json = {};
            json[opc.key] = opc.data;

            $.ajax({
                url: opc.url,
                data: json,
                beforeSend: function () {

                    $("#" + opc.element).after('<img class="loading" width="16" src="{{asset('images/spiral.gif')}}" />');
                }
            }).done(function (data) {
                $("#" + opc.element).find('option:not("option[value=""]")').remove();
                $(".loading").hide();
                $.each(data, function (index, value) {

                    $.each(value, (function (key, valor) {

                        $("#" + opc.element).append('<option value=' + '"' + valor.value + '"' + '>' + valor.nombre + '</option>');
                    }));
                });
            });
        });




        $("#generate").click(function () {

            $.ajax({
                url: '{{path('reportedetalle_process')}}',
                data: {fechaInicio: $("#fechaInicio").val(),
                    fechaFin: $("#fechaFin").val()},
                beforeSend: function () {
                    $('#myModal').modal();
                  //  window.progressInterval = setInterval(updateProgress, window.pollingPeriod);
                }

            }).done(function (data) {
                clearInterval(window.progressInterval);
                $('.progress-bar').css('width', 100 + '%').attr('aria-valuenow', 100).text(100 + '%');
                $('#myModal').modal('hide');
                $('.progress-bar').css('width', 0 + '%').attr('aria-valuenow', 0).text(0 + '%');
                swal("Ya puede descargar el archivo", "", 'warning');
                $('#reporte').removeClass('hidden');
            }).error(function (data) {
                clearInterval(window.progressInterval);
                $('#output').html('Uh oh, something went wrong');
            });
            return false;
        });

        $("#reporte").click(function () {

            $('#reporte').addClass('hidden');

        });


        function updateProgress() {
            var total = 0;
            var ingresados = 0;
            var porcentaje = 0;
            $.getJSON('{{asset('template/progress.json')}}', function (data) {

                ingresados = isNaN(data.ingresados) ? ingresados = 0 : ingresados = data.ingresados;
                total = isNaN(data.total) ? total = 0 : total = data.total;
                porcentaje = ingresados / total;
                porcentaje = isNaN(porcentaje) ? porcentaje = 0 : porcentaje;
                porcentaje = Math.round(porcentaje * 100);
                console.log(porcentaje);
                $('.progress-bar').css('width', porcentaje + '%').attr('aria-valuenow', porcentaje).text(porcentaje + '%');
                $("#ingresados").text(ingresados);
                $("#total").text(total);
            }).error(function (data) {
                clearInterval(window.progressInterval);
                $('#output').html('Uh oh, something went wrong');
            });
        }
    </script>


{%endblock %}