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

{% endblock %}

{% block dashboard %}

<style>
    input {
        -webkit-appearance: textfield;
        background-color: white;
        -webkit-rtl-ordering: logical;
        cursor: text;
        padding: 0px;
        border-width: 1px;
        border-style: solid;
        border-color: black !important;
        border-image: initial;
    }
    .dataTables_length select {
        width: 60px;
    }
    .dataTables_length label {
        font-weight: normal;
    }
    div.dt-buttons {
        position: relative !important;
        float: right !important;
        margin-right: -5px !important;
    }
</style>
<script>

    {% if idproyectos >= 1000 %}

    var columnaSupply = [
        {'data': 'proyecto' },{'data': 'Customer_PO' }, {'data': 'Verdi_Site_Name' }, {'data': 'Ord_Qty' }, {'data': 'POD_Qty' },
        {'data': 'Material' }, {'data': 'Short_Text' }, {'data': 'Material_w' }
    ];

    {% else %}
        {% if idproyectos == 230 or idproyectos== 241 or idproyectos==236 %}
            var columnaSupply = [
                {'data': 'proyecto' },{'data': 'Customer_PO' }, {'data': 'Verdi_Site_Name' }, {'data': 'Contract_No' }, {'data': 'Sales_Order' },
                {'data': 'SO_Date' }, {'data': 'SO_Value' }, {'data': 'SO_Item' }, {'data': 'Ord_Qty' }, {'data': 'POD_Qty' },
                {'data': 'Material' }, {'data': 'Short_Text' }, {'data': 'Status' }, {'data': 'Planned_GI' }, {'data': 'Shipping_point' },
                {'data': 'Delivery' }, {'data': 'Shipment' }, {'data': 'Requested_Delivery_Date' }, {'data': 'ETA' },
                {'data': 'ATA' }, {'data': 'At_Wh' }, {'data': 'Shipment_Status' }
            ];
        {%else%} //Proyectos Nuevos
            var columnaSupply = [
                {'data': 'proyecto' },{'data': 'Customer_PO' },{'data': 'SO_Date' },{'data': 'POD_Qty' },{'data': 'Material' }, {'data': 'Short_Text' }
            ];            
        {% endif %}
    {% endif %}

    var strFileTypes = "*.xlsx";
    var arrFileTypes = ['xlsx'];

    $(document).ready(function(){

        $('#msjFileTypes').html('Seleccionar archivos: ' + strFileTypes);
        $("#fileToUpload").fileinput({
            uploadUrl: "{{ path("uploadFileInventoryPR") }}",
            uploadAsync: false,
            minFileCount: 1,
            maxFileCount: 1,
            allowedFileExtensions: arrFileTypes,
            overwriteInitial: false,
            showPreview: false,
            showCancel: false,
            uploadExtraData: function() {
                return {
                    tipoArchivo: $("#tipoArchivo").val(),
                    proyecto   : $("#cmbProyecto").val(),
                    idproyectos: {{ idproyectos }}
            };
            },
            previewFileExtSettings: {
                'xls': function (ext) {
                    return ext.match(/(xls|xlsx)$/i);
                }
            },
            progress: '<div class="progress">\n' +
            '    <div class="progress-bar progress-bar-success progress-bar-striped text-center" role="progressbar" aria-valuenow="{percent}" aria-valuemin="0" aria-valuemax="100" style="width:{percent}%;">\n' +
            '        {status}\n' +
            '     </div>\n' +
            '</div>',
        });
        $('#fileToUpload').on('filecleared', function(event) {
            /*$('#previewContent').hide();
            $("#tableData").html('');*/
        });
        $('#fileToUpload').on('filepreajax', function(event, previewId, index) {
            //console.log('File pre ajax triggered: ');
            $("#cargar").css('display','');
        });
        $('#fileToUpload').on('filebatchuploaderror', function(event, data, previewId, index) {
            var form = data.form;
            var files = data.files;
            var extra = data.extra;
            var response = data.response;
            //console.log(data);
            swal("Error!", response.error + "<br>Please contact the administrator", "error");
            $('#fileToUpload').fileinput('clear');
            $('#fileToUpload').fileinput('reset');
            $('#modalfileUpload').modal('hide');
            $("#cargar").css('display','none');
            //$('#previewContent').hide();
            //$("#tableData").html('');
        });

        $('#fileToUpload').on('filebatchuploadsuccess', function(event, data, previewId, index) {
            var form = data.form;
            var files = data.files;
            var filename = data.filenames[0];
            var extra = data.extra;
            var response = data.response;
//            console.log(filename);
//            console.log(data);
//            console.log('File batch upload success');
            swal("Good Job!", "Upload success", "success");
            $('#modalfileUpload').modal('hide');
            table.ajax.reload(function ( json ) {
                $("#cargar").css('display','none');
            });
            //$('#previewContent').css('display','');
            //$('#tableTitle').html("<b><i class='fa fa-archive'></i> Contenido del Archivo " + filename + "</b>");
            //tabla = createTable(response.nodeData);
            //$("#tableData").html(tabla);
        });
        {%if (is_granted('ROLE_ADMIN_SUPPLY'))%}
        $('#btnUpload').on("click", function () {
            $('#modalfileUpload').modal('show');
        });
        {% endif %}

        $('#tipoArchivo').on("change", function () {
            var tipo = $('#tipoArchivo').val();
            if (tipo == 'SUPPLY-REPORT') {
                $('#divProyecto').removeClass('hide');
                $('#divProyecto').addClass('show');
            }else{
                $('#divProyecto').removeClass('show');
                $('#divProyecto').addClass('hide');

            }

        });

        $('#tipoReporte').change(function() {
            var tipoReporte = $('#tipoReporte').val();
            var html = '<i class="fa fa-file-text-o"></i> '
                    + $('#tipoReporte option:selected').text().toUpperCase();
            $('#titleReport').html(html);
            createTable(tipoReporte);
            switch (tipoReporte){
                case 'SUPPLY-REPORT':
                    buildDatatable(columnaSupply);
                    break;
            }
        });

        //buildDatatable(columnaStock);
        $('#tipoReporte').change();
    });

    function createTable(tipoReporte){

      {% if idproyectos>=1000 %}

      var strHeader = '';
      var strFooter = '';
      var strTable = '<table id="example" class="display nowrap" width="100%"><thead><tr>';
      switch (tipoReporte){
          case 'SUPPLY-REPORT':
              strHeader = '<th>Project</th><th>PO</th><th>Setting</th>' +
                          '<th class="sum">Qty Required</th><th class="sum">Qty PO</th><th>Code</th><th>Description</th><th>Code W</th>';
              strFooter = '<tfoot><tr><th></th><th></th><th></th>' +
                          '<th class="sum">0</th><th class="sum">0</th><th></th><th></th></tr></tfoot>';
              break;
      }

      strTable += strHeader + '</tr></thead><tbody id="tbody"></tbody>' + strFooter + '</table>';

      {% elseif idproyectos==230 or idproyectos==241 or idproyectos==236 %}
              var strHeader = '';
              var strFooter = '';
              var strTable = '<table id="example" class="display nowrap" width="100%"><thead><tr>';
              switch (tipoReporte){
                  case 'SUPPLY-REPORT':
                      strHeader = '<th>Project</th><th>Customer PO</th><th>Verdi Site Name</th><th>Contract No</th>' +
                                  '<th>Sales Order</th><th>SO Date</th><th>SO Value</th><th>SO Item</th>' +
                                  '<th class="sum">Ord Qty</th><th class="sum">POD Qty</th><th>Material</th><th>Short Text</th>' +
                                  '<th>Status</th><th>Planned GI</th><th>Shipping point</th><th>Delivery</th>' +
                                  '<th>Shipment</th><th>Requested Delivery Date</th><th>ETA</th><th>ATA</th>' +
                                  '<th>At Wh</th><th>Shipment Status</th>';
                      strFooter = '<tfoot><tr><th></th><th></th><th></th><th></th><th></th><th></th><th></th>' +
                                  '<th class="sum">0</th><th class="sum">0</th><th></th><th></th>' +
                                  '<th></th><th></th>' +
                                  '<th></th><th></th><th></th><th></th><th></th><th></th></tr></tfoot>';
                      break;
              }

              strTable += strHeader + '</tr></thead><tbody id="tbody"></tbody>' + strFooter + '</table>';
          {%else%}
              var strHeader = '';
              var strFooter = '';
              var strTable = '<table id="example" class="display nowrap" width="100%"><thead><tr>';
              switch (tipoReporte){
                  case 'SUPPLY-REPORT':
                      strHeader = '<th>Project</th><th>Customer PO</th><th>SO Date</th><th class="sum">POD Qty</th><th>Material</th><th>Short Text</th>';
                      strFooter = '<tfoot><tr><th></th><th></th><th></th><th></th><th></th><th></th></tfoot>';
                      break;        
              }

              strTable += strHeader + '</tr></thead><tbody id="tbody"></tbody>' + strFooter + '</table>';                      
      {% endif %}
        $('#datatable').empty();
        $('#datatable').html(strTable);
        $('#example thead tr').clone(true).appendTo( '#example thead' );
        $('#example thead tr:eq(1) th').each( function (i) {
            var title = $(this).text();
            $(this).html( '<input type="text" style="width: 100%; margin: 0px; padding: 0px;"/>' );

            $( 'input', this ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value ) {
                    table
                            .column(i)
                            .search( this.value )
                            .draw();
                }
            } );
        } );
    }

    function buildDatatable(columnas){
        table = $('#example').DataTable( {
            dom: '<"row" <"col-md-12 text-right"B>> <"row" <"col-md-6 "l> <"col-md-6"f>>rtip',
            //scrollY: '60vh',
            scrollX: false,
            scrollCollapse: false,
            scroller: true,
            orderCellsTop: true,
            "ajax": {
                "url": "{{ path('showInlineReportInventory',{'idproyectos':idproyectos}) }}",
                "type": "POST",
                data:  function( d ) {
                    d.tipoReporte= $("#tipoReporte").val(),
                    d.proyecto   = $("#cmbProyecto").val()
                }
            },
            footerCallback: function(row, data, start, end, display) {
                var api = this.api();
                api.columns('.sum', {
                    page: 'current'
                }).every(function() {
                    var sum = this
                            .data()
                            .reduce(function(a, b) {
                                var x = parseInt(a) || 0;
                                var y = parseInt(b) || 0;
                                return x + y;
                            }, 0);
                    $(this.footer()).html(sum);
                });
            },
            columns: columnas,
            lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
            buttons: [
                {
                    extend:'excel',
                    title: $('#tipoReporte').val(),
                }
            ]
        } );
    }
</script>
    <div class="row" style="padding-bottom: 10px;">
        <div class="form-group col-md-3 col-md-offset-9">
            <select class="form-control pull-right" id="tipoReporte">
                <option value="SUPPLY-REPORT">Reporte de Suministros</option>
            </select>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <h2 class="text-center text-primary">
                <b id="titleReport"><i class="fa fa-file-text-o"></i> REPORTE DE SUMINISTROS</b>
            </h2>
        </div>
    </div>
    {%if (is_granted('ROLE_ADMIN_SUPPLY'))%}
    <div class="row" style="padding-bottom: 10px;">
        <div class="col-sm-12 text-right">
            <button id="btnUpload" type="button" class="btn btn-primary"  aria-label="Upload File" title="Upload File">
                <span class="fa fa-upload" aria-hidden="true"></span>
            </button>
        </div>
    </div>
    {%endif%}
    <div class="row">
        <div id="datatable" class="col-sm-12" style="overflow-x: scroll">
            <table id="example" class="display nowrap" width="100%">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Warehouse Location</th>
                    <th>Customer</th>
                    <th>Batch</th>
                    <th>Storage Bin</th>
                    <th>Handling Unit</th>
                    <th>Product Number</th>
                    <th>Product Description</th>
                    <th>Serial Number</th>
                    <th>On Hand Qty</th>
                    <th>Allocated Qty</th>
                    <th>Available Qty</th>
                    <th>On Hold Qty</th>
                    <th>Uom</th>
                    <th>Stock Type</th>
                    <th>Abc Indicator</th>
                    <th>Qty In Alternate Uom</th>
                    <th>Po Customer</th>
                </tr>
            </thead>
            <tbody id="tbody">

            </tbody>
        </table>
        </div>
    </div>

    <div class="modal fade" id="modalfileUpload" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header  bg-primary">
                  <button class="btn btn-warning">
                  <a href="{{ asset('Template_Supply.xlsx')  }}" download="Template_Supply.xlsx" style="float: left;" title="Template Supply">
                      <img src={{ asset("images/xls.png")}} width="24px"> Descargar Template
                  </a></button>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h2 class="modal-title text-center" id="myModalLabel">
                        <i class="fa fa-upload"></i> Upload File
                    </h2>
                </div>

                <div class="modal-body">
                    <div class="row" style="padding-bottom: 10px;">
                        <div class="form-group col-md-4">
                            <label for="tipoArchivo">File Type: </label>
                            <select class="form-control pull-right" id="tipoArchivo">
                                <option value="SUPPLY-REPORT">Supply Report File</option>
                            </select>
                        </div>
                        <div id="divProyecto" class="form-group col-md-8">
                            <label for="cmbProyecto">Project: </label>
                            <select class="form-control pull-right" id="cmbProyecto" name="cmbProyecto">
                                <option value="TODOS">{{"inbox.all" | trans}}</option>
                                {% if idproyectos >=1000 %}
                                {%for proceso in procesos%}
                                    <option value="{{proceso.proceso}}">{{proceso.proceso}}</option>
                                {%endfor%}
                                {% endif %}
                                {% if idproyectos==230 %}
                                <option value="LTE2019PH1,LTE2019PH2,LTE2019PH3">LTE 2019</option>
                                <option value="MELA_EPR_CLARO_5G">MELA_EPR_CLARO_5G</option>
                                {% endif %}
                                {% if idproyectos==236 %}
                                    <option value="BNI_MILLICOM_SWAP LTE">BNI_MILLICOM_SWAP LTE</option>
                                {% endif %}
                                {% if idproyectos==241 %}
                                    <option value="AMERICA MOVIL EL SALVADOR">SV AMX 2020</option>
                                {% endif %}
                            </select>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <input id="fileToUpload" type="file" name="file" class="file-loading">
                            <small id="msjFileTypes" class="form-text text-muted"></small>
                        </div>
                    </div>
                </div>

                <div class="modal-footer">
                    <button id="closemodal" type="button" class="btn btn-default" data-dismiss="modal">
                            <i class="fa fa-lg fa-times text-danger"></i>
                    </button>
                </div>

            </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-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 %}