{% extends "base.html.twig"%}

{% block menuTop %}
    <div class="col-lg-12 col-xs-12" >
        <div>

            {{ render(controller("PortalBundle:Default:topModule",{'idproyectos':idproyectos,'idmodule':idmodule})) }}

        </div>


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


    <script>
        $(function(){

            $('.datetimepicker1').datetimepicker();


            var table = $('#example').DataTable( {
                dom: 'Bfrtip',
                "ajax": {
                    "url": "{{ path('findSitesATT',{'idproyectos':idproyectos}) }}",
                    "type": "POST",
                    data:  function( d ) {
                        d.idproceso= $('#idproceso').val();
                        d.fromDate= $('#fromDate').val();
                        d.toDate= $('#toDate').val();
                    }
                },
                columns: [
                    { "data": "idticket", visible:false },
                    { "data": "proceso" },
                    { "data": "wbs" },
                    { "data": "sitio" },
                    { "data": "continuus_id" },
                    { "data": "caspr_id" },
                    { "data": "vendor" },
                    { "data": "vendorType" },
                    { "data": "startDate" }
                ],

                "aaSorting": [[3,'asc']],
                lengthMenu: [
                    [  50, 100, -1 ],
                    [  '50 rows', '100 rows', 'Show all' ]
                ],
                buttons: [ {
                    extend: 'excel',
                    text: function ( dt, button, config ) {
                        return dt.i18n( 'buttons.excel', 'Donwload Template' );
                    },
                    title: 'Template AT&T update'
                }

                ]
            } );

            $("#idproceso").change(function () {
                $("#tbody").empty();
                $("#cargar").css('display','');
                table.ajax.reload(function ( json ) {
                    $("#cargar").css('display','none');
                });
            });
            $('.datetimepicker1').datetimepicker().on('dp.change', function (ev) {
                $("#tbody").empty();
                $("#cargar").css('display','');
                table.ajax.reload(function ( json ) {
                    $("#cargar").css('display','none');
                });
            });




            $("#fileExcel").fileinput({
                uploadUrl: "{{path('updateATTDate',{'idproyectos':idproyectos,'idmodule':idmodule,'idsubmodulo':idsubmodulo})}}", // server upload action
                uploadAsync: false,
                minFileCount: 1,
                maxFileCount: 1,
                overwriteInitial: true,
                uploadExtraData: function() {
                    return {
                        idproceso: $("#idproceso").val()
                    };
                },
                showPreview: false
            });

            $('#fileExcel').on('filebatchpreupload', function(event, data, previewId, index) {
                //alert('entro')
                $("#cargar").css('display', '');
            });

            $('#fileExcel').on('filebatchuploaderror', function(event, data, previewId, index) {
                var form = data.form, files = data.files, extra = data.extra,
                        response = data.response, reader = data.reader;
                console.log('File batch upload success');

                $(".loading").hide();

            });


            $('#fileExcel').on('filebatchuploadsuccess', function(event, data, previewId, index) {
              /*  var form = data.form, files = data.files, extra = data.extra,
                        response = data.response, reader = data.reader;
                console.log(response.consulta);
                obj =  JSON.parse(response.consulta);
                var tr = "";

                for(i=0;i< obj.length; i++){
                    tr += "<tr><td>" +obj[i].idsitio+"</td><td>" +obj[i].sistema+"</td><td>" +obj[i].responsable+"</td></tr>";

                }
                $("#tbody").append(tr)
                $('#example').DataTable( {
                    dom: 'Bfrtip',
                    lengthMenu: [
                        [  25, 50, -1 ],
                        [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                    ],
                    buttons: [
                        'pageLength','copy', 'csv', 'excel', 'pdf', 'print'
                    ]
                } );*/
               // alert ( response.nada );
                swal({
                            title: "File was Uploaded and process are success",
                            text: "", type: "success"},
                        function () {
                            $('#myModalCausas').modal('hide');
                            //location.reload();
                        });
                table.ajax.reload(function ( json ) {
                    $("#cargar").css('display','none');
                });1
            });

        })
    </script>

    <div class="panel panel-primary" style="margin-top: 1%; margin-right: 10%; margin-left: 10%">
        <div class="panel-heading">{{'ticket.masive.upload' | trans}}</div>
        <div class="panel-body">
            <input id="fileExcel" type="file" name="file" class="file-loading" >
        </div>
    </div>
    <br>

    <div class="panel panel-info" >
        <div class="panel-heading">Sites</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-lg-12">
                    <div class="col-lg-2"><label>Select Project</label></div>
                    <div class="col-lg-3">
                        <select id="idproceso">
                            <option value="">All</option>
                            {% for project in projects %}
                                <option value="{{ project.idproceso }}">{{ project.proceso }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-lg-1"><label>From:</label></div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class='input-group date datetimepicker1' >
                                <input id="fromDate" type='text' class="form-control" data-date-format="YYYY-MM-DD" value="{{ "now"|date('Y-m-d') }}"  />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-1"><label>to:</label></div>
                    <div class="col-lg-2">
                        <div class="form-group">
                            <div class='input-group date datetimepicker1' >
                                <input id="toDate" type='text' class="form-control" value="{{ "now"|date('Y-m-d') }}" data-date-format="YYYY-MM-DD" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <table id="example" class="display nowrap" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th>id</th>
                        <th>Project Name</th>
                        <th>WBS</th>
                        <th>Network Element</th>
                        <th>Continuus ID</th>
                        <th>PACE/CASPER ID</th>
                        <th>Vendor</th>
                        <th>Vendor Type</th>
                        <th>Forecast Date</th>
                    </tr>
                    </thead>
                    <tbody id="tbody">
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <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-1.12.4.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 %}