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

{% endblock %}

{% block dashboard %}
<style>

    .wrapper{padding-bottom:50px;}
    .header{background:#000000;}.header .container{padding-bottom:20px;}.header .container h1{color:#FFF;line-height:50px;margin-top:30px;margin-bottom:0;}
    .header .container h3{color:#E0E0E0;font-size:16px;margin-top:-5px;}.header .container h3 a{color:#66aacc;}.header .container h3 a:hover{color:#b3d5e6;}
    .top-menu{position:absolute;z-index:9999;}.top-menu .nav-list{background:rgba(255, 255, 255, 0.8);border:1px solid #CCC;margin:20px;position:fixed;right:0;}
    pre,.well{background:#FFFFFF;}
    .syntax-container{background:#FCFCFC;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;border:1px solid #e3e3e3;margin-bottom:30px;padding-bottom:20px;}
    .isloading-wrapper.isloading-right{margin-left:10px;}
    .isloading-overlay{position:relative;text-align:center;}.isloading-overlay .isloading-wrapper{background:#FFFFFF;-webkit-border-radius:7px;-webkit-background-clip:padding-box;-moz-border-radius:7px;-moz-background-clip:padding;border-radius:7px;background-clip:padding-box;display:inline-block;margin:0 auto;padding:10px 20px;top:10%;z-index:9000;}

    /*Glyphicon Spinner*/
    .glyphicon-spin {
        -animation: spin .9s infinite linear;
        -webkit-animation: spin2 .9s infinite linear;
    }

    @-webkit-keyframes spin2 {
        from { -webkit-transform: rotate(0deg);}
        to { -webkit-transform: rotate(360deg);}
    }

    @keyframes spin {
        from { transform: scale(1) rotate(0deg);}
        to { transform: scale(1) rotate(360deg);}
    }

    .btn-claro {
        color: #fff;
        background-color: #aa0001;
        border-color: #e06a70;

    }

    .bg-claro {
        color: #fff !important;
        background-color: #aa0001 !important;
        background: #aa0001 !important;
    }

    .btn-claro:hover, .btn-claro:focus {
        color: #fcfcfc;
        text-decoration: none;

    }

    .table th{
        font-size: 7pt;
    }
    .table td{
        font-size: 7pt;
    }

    .btn-yellow {
        background-color: #ffff0c;
        color: #000000;
        background-image: -moz-linear-gradient(top, #ecea19, #ecea19);
        background-image: -ms-linear-gradient(top, #ecea19, #ecea19);
        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ecea19), to(#ecea19));
        background-image: -webkit-linear-gradient(top, #ecea19, #ecea19);
        background-image: -o-linear-gradient(top, #ecea19, #ecea19);
        background-image: linear-gradient(top, #ecea19, #ecea19);
        background-repeat: repeat-x;
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#'78cd51, endColorstr='#'5AAD34, GradientType=0);
        border-color: #ecea19 #ffff0c #ecea19;
        border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
    }
    .btn-yellow {
        color: #fff;
        background-color: #FFFF00;
        border-color: #ecea19;
    }

    .col-lg-12{
        padding-left: 5px;
    }
    tr {cursor:pointer}

    .double-scroll {
        width: 100%;
    }
    /*.td-si-accerreo, .td-combus-submin
    {
        text-decoration: underline;
    } */
    .btn-yellow {
        color: #fff;
        background-color: #000000;
        border-color: #ecea19;
    }
    .btn-orange {
        color: #fff;
        background-color: rgb(255, 165, 0) !important;
        border-color: #ecea19;
    }

    .pagination
    {
        width: 100%;
    }

    input[type="search"]{
        display: block;
        width: 100%;
        height: 28px;
        padding: 6px 12px;
        font-size: 12px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

    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;
    }
    .datepicker {
        z-index: 1600 !important; /* has to be larger than 1050 */
    }
    .bs-datepicker-container { z-index: 3000; }

    .imageCell {
        height: 100px;
        min-width: 100px;
        background-position: center!important;
        background-repeat: no-repeat!important;
        background-size: cover!important;
    }

    /* ===================== FILE INPUT ===================== */
    .file-area {
        width: 100%;
        position: relative;
        border: 1px dashed #ccc;
    }

    .file-area input[type=file] {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
        cursor: pointer;
    }

    .file-area .file-dummy {
        width: 100%;
        padding: 30px;
        background: rgba(255, 255, 255, 0.2);
        border: 2px dashed rgba(255, 255, 255, 0.2);
        text-align: center;
        transition: background 0.3s ease-in-out;
    }

    .file-area .file-dummy .success {
        display: none;
    }

    .file-area:hover .file-dummy {
        background: rgba(255, 255, 255, 0.1);
    }

    .file-area input[type=file]:focus + .file-dummy {
        outline: 2px solid rgba(255, 255, 255, 0.5);
        outline: -webkit-focus-ring-color auto 5px;
    }

    .file-area input[type=file]:valid + .file-dummy {
        border-color: rgba(0, 255, 0, 0.4);
        background-color: rgba(0, 255, 0, 0.3);
    }

    .file-area input[type=file]:valid + .file-dummy .success {
        display: inline-block;
    }

    .file-area input[type=file]:valid + .file-dummy .default {
        display: none;
    }

</style>
<link rel="stylesheet" href="{{ asset('css/jquery.dataTables.min.css')}}">
<link rel="stylesheet" href="{{ asset('css/buttons.dataTables.min.css')}}">
<link rel="stylesheet" href="{{ asset('select2/css/select2.min.css')}}">
<script src="{{ asset('select2/js/select2.full.min.js') }}"></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>
<script src="{{ asset('datatables/moment.min.js') }}"></script>
<script src="{{ asset('datatables/js/datatables.min.js') }}"></script>
<script src="{{ asset('datatables/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('datatables/js/dataTables.bootstrap.min.js') }}"></script>
<script src="{{ asset('datatables/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('datatables/js/buttons.bootstrap.min.js') }}"></script>
<script src="{{ asset('datatables/js/buttons.flash.min.js') }}"></script>
<script src="{{ asset('datatables/js/buttons.html5.min.js') }}"></script>
<script src="{{ asset('datatables/js/buttons.colVis.min.js') }}"></script>
<script src="{{ asset('datatables/js/jszip.min.js') }}"></script>
<script src="{{ asset('datatables/js/datetime-moment.js') }}"></script>
<script src="{{ asset('js/jquery.doubleScroll.js') }}"></script>
<script>
    var table;

    $(function () {

      $(document).on("click", ".downloadTemplate", function () {
        var data = {};
        data['idproyectos'] =  ""+{{idproyectos}};

        var ruta = `{{path('DownloadFacturacionEricsson')}}?idproyectos=${ data['idproyectos']}`
        //window.open(ruta);
        $('#downloadTemplate').attr("href",ruta);

        //alert(ruta);
      });

      $('#tbody tr .edit').live('click',function(){
          $("#txtComentariosE").val('');
          var po_number = $(this).data('po_number');
          var gr_number = $(this).data('gr_number');

          $('#modalEditFac').modal('show');
          $('#txtcmbPoE').val(po_number);
          $('#txtcmbGrE').val(gr_number);
          llenarMontosE();

      });

      $("#buscar").click(function () {
        createTableDt();
        buildDatatable();
        /*if ( ! $.fn.DataTable.isDataTable( '#example' ) ) {
            createTableDt();
            buildDatatable();
        }else{
            table.ajax.reload();
        }*/
      });

      $("#txtNmrPo").change(function(){
        $("#txtNmrGr").val('');
        $("#txtNmrFacf").val('');

        if ($('#txtNmrPo').val().length == 0){

        }else {
          createTableDt();
          buildDatatable();
        }

      });

      $("#txtNmrGr").change(function(){
        $("#txtNmrPo").val('');
        $("#txtNmrFacf").val('');

        if ($('#txtNmrGr').val().length == 0){

        }else {
          createTableDt();
          buildDatatable();
        }

      });

      $("#txtNmrFacf").change(function(){
        $("#txtNmrPo").val('');
        $("#txtNmrGr").val('');

        if ($('#txtNmrFacf').val().length == 0){

        }else {
          createTableDt();
          buildDatatable();
        }

      });

      $('#txtFechFac').datepicker({
        dateFormat: 'yy-mm-dd',
         beforeShow: function () {
              setTimeout(function () {
                  $('.ui-datepicker').css('z-index', 99999);
              }, 0);
          }
      });

      $('#txtFechFacE').datepicker({
        dateFormat: 'yy-mm-dd',
         beforeShow: function () {
              setTimeout(function () {
                  $('.ui-datepicker').css('z-index', 99999);
              }, 0);
          }
      });

      /*$('#Filtros_fechaIni').datepicker({
          dateFormat: 'yy-mm-dd',
      });*/

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

        $(".fileinput-remove-button").trigger("click");

        $("#modalMasive").modal();

      });

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

        clickNewAsp();

      });

      $("#btnEditM").click(function () {
        $('#txtNmrFac').attr("readonly",false);
        $('#txtFechFac').attr("readonly",false);
        $('#txtFechFac').attr("disabled",false);

      });


      $("#fileExcel").fileinput({

          uploadUrl: "{{path('cargaTemplateGt',{'idproyectos':idproyectos,'idmodule':idmodule,'idsubmodulo':1})}}", // server upload action
          uploadAsync: false,
          minFileCount: 1,
          maxFileCount: 5,
          overwriteInitial: false,
          uploadExtraData: function() {
              return {
                  idproceso: $("#idproceso").val()
              };
          },
          showPreview: true,
          previewFileExtSettings: {
              'doc': function (ext) {
                  return ext.match(/(doc|docx)$/i);
              },
              'xls': function (ext) {
                  return ext.match(/(xls|xlsx)$/i);
              },
              'ppt': function (ext) {
                  return ext.match(/(ppt|pptx)$/i);
              }
          }
      });

      $('#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');
          alert('llego');

      });

      $('#fileExcel').on('filebatchuploadsuccess', function(event, data, previewId, index) {
          var form = data.form, files = data.files, extra = data.extra,
                  response = data.response, reader = data.reader;
         $("#modalMasive").modal('hide');
      });

      $("#btnSaveContinue").click(function(){
        var nmrPo = $("#cmbPo").val();
        var nmrGr = $("#cmbGr").val();
        var mntT = $("#txtMontoTotalGr").val();
        var mntTI = $("#txtMontoTotalIvaGr").val();
        var nmrFac = $("#txtNmrFac").val();
        var fechFac = $("#txtFechFac").val();
        var comentario = $("#txtComentarios").val();
        /*alert(nmrPo);
        alert(nmrGr);
        alert(mntT);
        alert(mntTI);
        alert(nmrFac);
        alert(fechFac);
        alert(comentario);*/
        /*if ($('#txtNmrFac').val().length == 0) {
          swal({title: "", text: "Debe de Ingresar un Número de Factura", type: "warning"});
       }else {
       }*/
        $.isLoading("show");
        $.ajax({
        url: '{{ path('updateFacEricsson',{'idproyectos':idproyectos}) }}',
        type: "POST",
        data: {nmrPo: nmrPo, nmrGr: nmrGr, mntT: mntT, mntTI: mntTI,
              nmrFac: nmrFac, fechFac: fechFac, comentario: comentario}, //fechFac: fechFac,
        success: function(response){
              $.isLoading("hide");
              if (response.resultados == 'bien') {
                swal({
                            title: "Información Guardada",
                            type: "success",
                            confirmButtonColor: "#55DD6B",
                            confirmButtonText: "Continuar"
                    });
              }
              $.isLoading("hide");
              $('#modalEditAspEntrega').modal('hide');
        }
       });
      });


      $("#btnSave").click(function(){
        var nmrPo = $("#txtcmbPoE").val();
        var nmrGr = $("#txtcmbGrE").val();
        var mntT = $("#txtMontoTotalGrE").val();
        var mntTI = $("#txtMontoTotalIvaGrE").val();
        var nmrFac = $("#txtNmrFacE").val();
        var comentario = $("#txtComentariosE").val();
        var fechFac = $("#txtFechFacE").val();
        var comentarioH = $("#txtHistoricoComentarios").val();
        /*alert(nmrPo);
        alert(nmrGr);
        alert(mntT);
        alert(mntTI);
        alert(nmrFac);
        alert(fechFac);
        alert(comentario);
        alert(comentarioH);*/
        /*if ($('#txtNmrFacE').val().length == 0) {
          swal({title: "", text: "Debe de Ingresar un Número de Factura", type: "warning"});
       }else {
       }*/
       $.isLoading("show");
       $.ajax({
       url: '{{ path('updateFacEricsson2',{'idproyectos':idproyectos}) }}',
       type: "POST",
       data: {nmrPo: nmrPo, nmrGr: nmrGr, mntT: mntT, mntTI: mntTI,
             nmrFac: nmrFac, fechFac: fechFac, comentario: comentario, comentarioH: comentarioH}, //fechFac: fechFac,
       success: function(response){
             $.isLoading("hide");
             if (response.resultados == 'bien') {
               swal({
                           title: "Información Guardada",
                           type: "success",
                           confirmButtonColor: "#55DD6B",
                           confirmButtonText: "Continuar"
                   });
             }
             $.isLoading("hide");
             $('#modalEditFac').modal('hide');
       }
     });
      });

      $("#btnSaveExit").click(function(){
          $('#modalEditAspEntrega').modal('hide');
      });

      $("#btnExit").click(function(){
          $('#modalEditFac').modal('hide');
      });


    });

    $(document).ready(function() {

      $("#form-incidencias").submit(function (e) {
          var formData = new FormData(document.getElementById("form-incidencias"));
          $.ajax({
              url: "{{ path('cargaTemplateGtFac',{'idproyectos':idproyectos,'idmodule':idmodule})}}",
              type: "post",
              dataType: "html",
              data: formData,
              beforeSend: function () {
                  $.isLoading({text: "Loading"});
                  $("#process-incidencias").prop("disabled", true);
              },
              complete: function () {
                  $.isLoading("hide");
                  $("#process-incidencias").prop("disabled", false);
                  $("#file-incidencias").val("");
                  $("#response-incidencias").html("Se ha cargado con éxito");
              },
              error: function (res) {
                  console.log(res);
              },
              cache: false,
              contentType: false,
              processData: false
          }).done(function (res) {
             console.log(res);
          });
          e.preventDefault(); // avoid to execute the actual submit of the form.
      });
        //loadListaAsp();
        llenarPO();
        llenarFac();

        $('#Select1').change(function(){
          llenarGR();
          //cargarSelect2();
        });

        $('#cmbPo').change(function(){
          llenarGrM();
        });

        $('#cmbGr').change(function(){
          llenarMontos();
        });

    });

    function loadListaAsp(){
        var data = {};
        data['idproyectos']={{ idproyectos }};
        //$.isLoading("hide");
        $("#cmbAsp option").remove();
        $.getJSON('{{path('getListAspPR')}}',data, function (data) {
            var asp  = data.list;
            $("#cmbAsp").append('<option value="-1">Seleccione</option>');
            for (var i = 0; i < asp.length; i++) {
                $("#cmbAsp").append('<option value="'+asp[i]['valor']+'">' +asp[i]['nombre']+ '</option>');
            }
        });
    };

    function llenarPO() {
        $("#selectPo option").remove();
        var data = {};
        data['idproyectos'] =  ""+{{idproyectos}};
        //$.isLoading("hide");
        $.getJSON('{{path('selectPoFac')}}', data, function (data) {
            var selectPO = data.po;
              $("#selectPo").append('<option value="0">Seleccionar PO</option>');
              //$("#selectPo").append('<option value="all">TODOS</option>');
            for (var i = 0; i < selectPO.length; i++) {
                $("#selectPo").append('<option value="' + selectPO[i]['po_number'] + '">' + selectPO[i]['po_number'] + '</option>');
            }
        });
    };

    function llenarGR() {
        $("#selectGr option").remove();
        //var selected = $('#selectPo').val();
        var data = {};
        data['idproyectos'] =  ""+{{idproyectos}};
        data['numberPo'] = + $('#selectPo').val();
        $.getJSON('{{path('selectGrFac')}}', data, function (data) {
            var selectGr = data.gr;
              $("#selectGr").append('<option value="0">Seleccionar GR</option>');
            for (var i = 0; i < selectGr.length; i++) {
                $("#selectGr").append('<option value="' + selectGr[i]['gr_number'] + '">' + selectGr[i]['gr_number'] + '</option>');
            }
        });
    };

    function llenarFac() {
        $("#selectFac option").remove();
        var data = {};
        data['idproyectos'] =  ""+{{idproyectos}};
        $.getJSON('{{path('selectFac')}}', data, function (data) {
            var selectFac = data.fac;
              $("#selectFac").append('<option value="0">Seleccionar #Factura</option>');
            for (var i = 0; i < selectFac.length; i++) {
                $("#selectFac").append('<option value="' + selectFac[i]['reference_invoice'] + '">' + selectFac[i]['reference_invoice'] + '</option>');
            }
        });
    };

    //////////////////////////Modal Add Factura/////////////////////////////////

    function llenarPoM() {
        $("#cmbPo option").remove();
        var data = {};
        data['idproyectos'] =  ""+{{idproyectos}};
        //$.isLoading("hide");
        $.getJSON('{{path('selectPoM')}}', data, function (data) {
            var selectPoM = data.poM;
              $("#cmbPo").append('<option value="0">Seleccionar PO</option>');
            for (var i = 0; i < selectPoM.length; i++) {
                $("#cmbPo").append('<option value="' + selectPoM[i]['po_number'] + '">' + selectPoM[i]['po_number'] + '</option>');
            }
        });
    };

    function llenarGrM() {
        $("#cmbGr option").remove();
        $(".txtMontoTotalGr").val('');
        $(".txtMontoTotalIvaGr").val('');
        $("#txtNmrFac").val('');
        $("#txtFechFac").val('');

        //var selected = $('#selectPo').val();
        var data = {};
        data['idproyectos'] =  ""+{{idproyectos}};
        data['numberPo'] = + $('#cmbPo').val();
        //$.isLoading("hide");
        $.getJSON('{{path('selectGrM')}}', data, function (data) {
            var selectGrM = data.gr;
              $("#cmbGr").append('<option value="0">Seleccionar GR</option>');
            for (var i = 0; i < selectGrM.length; i++) {
                $("#cmbGr").append('<option value="' + selectGrM[i]['gr_number'] + '">' + selectGrM[i]['gr_number'] + '</option>');
            }
        });
    };

    function llenarMontos() {
      $("#txtNmrFac").val('');
      $("#txtFechFac").val('');
        var data = {};
        data['idproyectos'] =  ""+{{idproyectos}};
        data['numberPo'] = + $('#cmbPo').val();
        data['numberGr'] = + $('#cmbGr').val();
        //$.isLoading("hide");
        $.getJSON('{{path('inputsMontos')}}', data, function (data) {
            var inputsMontos = data.iptM;
            var t =  inputsMontos[0]['total'];
            var fac = inputsMontos[0]['factura'];
            var fechafac = inputsMontos[0]['fechafac'];
            //alert(fac);
            //alert(fechafac);
            var total = parseFloat(t);
            var totalIva = total + parseFloat(total*12/100);
            var totalF = parseFloat((t).replace(/,/g, ""))
                    .toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");//(total).toFixed(2);
            var totalIvaF = (totalIva).toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");

            $('#txtMontoTotalGr').attr("value",totalF);
            $('#txtMontoTotalIvaGr').attr("value",totalIvaF);
            $('#txtNmrFac').attr("value",fac);
            $('#txtFechFac').attr("value",fechafac);
            //$('#txtMontoTotalGr').html(new Intl.NumberFormat('en-IN').format(total));
            //if (($('#txtNmrGr').val().length == 0) || ($('#txtNmrGr') == null)){
            if (fac == null){
              $('#txtNmrFac').attr("readonly",false);
            }else {
              $('#txtNmrFac').attr("readonly",true);
            }

            if (fac == null){
              $('#txtFechFac').attr("readonly",false);
            }else {
              $('#txtFechFac').attr("readonly",true);
            }
        });
    };

    function llenarMontosE() {
        //$("#cmbGr option").remove();
        //var facC = $('#txtNmrFac').val();
        var data = {};
        data['idproyectos'] =  ""+{{idproyectos}};
        data['numberPo'] = + $('#txtcmbPoE').val();
        data['numberGr'] = + $('#txtcmbGrE').val();
        //$.isLoading("hide");
        $.getJSON('{{path('inputsMontosE')}}', data, function (data) {
            var inputsMontos = data.iptM;
            var t =  inputsMontos[0]['total'];
            var fac = inputsMontos[0]['factura'];
            var fechafac = inputsMontos[0]['fechafac'];
            var comentario = inputsMontos[0]['comentario'];
            //alert(fac);
            //alert(facC);
            var total = parseFloat(t);
            var totalIva = total + parseFloat(total*12/100);
            var totalF = parseFloat((t).replace(/,/g, ""))
                    .toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");//(total).toFixed(2);
            var totalIvaF = (totalIva).toFixed(2)
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");

            $('#txtMontoTotalGrE').attr("value",totalF);
            $('#txtMontoTotalIvaGrE').attr("value",totalIvaF);
            $('#txtNmrFacE').attr("value",fac);
            $('#txtFechFacE').attr("value",fechafac);
            $('#txtHistoricoComentarios').attr("value",comentario);
            //$('#txtMontoTotalGrE').html(new Intl.NumberFormat('en-IN').format(t));
            //if (($('#txtNmrGr').val().length == 0) || ($('#txtNmrGr') == null)){
            /*if (fac == null){
              $('#txtNmrFac').attr("readonly",false);
            }else {
              $('#txtNmrFac').attr("readonly",true);
            }*/
        });
    };

    ////////////////////////////////////////////////////////////////////////////
    function clickNewAsp(){
      $("#cmbPo").val('');
      $("#cmbGr").val('');
      $("#txtMontoTotalGr").val('');
      $("#txtMontoTotalIvaGr").val('');
      $("#txtNmrFac").val('');
      //$("#Filtros_fechaIni").val('');
      $("#txtComentarios").val('');
      $('#titleModalEditAspEntrega').html('{{'Agregar Factura' | trans}}');
      llenarPoM();
      $('#modalEditAspEntrega').modal('show');

    }

    function createTableDt(){
        var strHeader = '';
        var strTable = '<table id="example" class="display nowrap" width="100%"><thead><tr>';
        strHeader = '<th>Vendor</th><th>Número de PO</th>' +
                '<th>Número de GR</th><th>Número de Factura</th><th>Total</th><th>Acciones</th>';
        strTable += strHeader + '</tr></thead><tbody id="tbody"></tbody></table>';
        $('#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(){
      var selectPo = $('#txtNmrPo').val();
      var selectGr = $('#txtNmrGr').val();
      var selectFac = $('#txtNmrFacf').val();
      /*var selectGr = $('#selectPo').val();
      var selectGr = $('#selectGr').val();*/
      //alert(selectPo);
      //alert(selectGr);
      //alert(selectFac);
        var columnas = [ { "data": "vendor_name"},{ "data": "po_number"},
            { "data": "gr_number"},{ "data": "reference_invoice"},{ "data": "total" }, { "data": null}
        ];
        table = $('#example').DataTable( {
            dom: '<"row" <"col-sm-12 text-right"B>> <"row" <"col-sm-6 "l> <"col-sm-6"f>>rtip',
            scrollY: '40vh',
            scrollX: true,
            scrollCollapse: false,
            scroller: true,
            orderCellsTop: true,
            "ajax": {
                "type": "POST",
                "url": '{{ path('getFac',{'idproyectos':idproyectos}) }}',
                "data": {'selectPo': selectPo, 'selectGr': selectGr, 'selectFac': selectFac }
                //"url": "{{ path('getFac')}}",
                /*data:  function( d ) {
                    d.idproyectos= {{ idproyectos }}
                }*/
            },
            columns: columnas,
            columnDefs: [ {
                "targets": -1,
                "data": null,
                "searchable": false,
                "orderable": false,
                "className": 'dt-body-center',
                "processing": true,
                "language": {
                    // Replace the Processing... text with an AJAX-loader
                    "processing": "<div class='table-loading'><img src='{{ asset('images/spiral.gif') }}' /></div>"
                },
                "render": function ( data, type, row ) {
                    //return htmlSql;
                    return '<div class="btn-group btn-group-sm"> ' +
                            '<a data-vendor_name="' + row['vendor_name'] + '" ' +
                            'data-po_number="' +  row['po_number'] + '" ' +
                            'data-gr_number="' +  row['gr_number'] + '" ' +
                            'data-reference_invoice="' +  row['reference_invoice'] + '" ' +
                            ' href="javascript:void(0);" class="btn btn-info edit" data-toggle="tooltip" ' +
                            'data-title="Editar" title="Editar" data-container="body">'+
                            '<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span></a>' +
                            '</div>';
                }
            } ],
            lengthMenu: [[10, 25, 50, 100, 250, 500], [10, 25, 50, 100, 250, 500]],
            buttons: [
              /*{
                  extend:'excel',
                  exportOptions: {
                      columns: [ 0,1,2,3,4]
                  },
                  text: '<strong>Exportar Tabla</strong>',
                  title: '{{"Facturacion Ericsson" | trans}}',
                  className: 'bg-primary'
              },*/
                /*{
                    text: '<strong><span class="glyphicon glyphicon-plus"></span> Agregar Numero de Factura</strong>',
                    action: function ( e, dt, node, config ) {
                        clickNewAsp();
                    },
                    className: 'bg-primary'
                },*/
            ]
        } );
    }

</script>

    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <img id="logo" class="pull-right" src="{{ asset('images/elogo.png') }}"  width="220" height="90" >
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <h1 class="text-center">
                    <b id="titleReport"><i class="fa fa-file-text-o"></i> Facturación Ericsson</b>
                </h1>
            </div>
        </div>
      </br>
      </br>
        <!--<div class="col-lg-2" id="Select1">
          <select id="selectPo" name="selectPo"  class="form-control">
          </select>
        </div>

        <div class="col-lg-2" id="Select2">
          <select id="selectGr" name="selectGr"  class="form-control">
          </select>
        </div>

        <div class="col-lg-2" id="Select3">
          <select id="selectFac" name="selectFac"  class="form-control">
          </select>
        </div>-->

        <div class="col-lg-2">
            <label for="txtNmrPo" class="control-label">Número de PO</label>
            <input type="text" id="txtNmrPo" class="required form-control" maxlength="130">
        </div>
        <div class="col-lg-2">
            <label for="txtNmrGr" class="control-label">Número de GR</label>
            <input type="text" id="txtNmrGr" class="required form-control" maxlength="130">
        </div>
        <div class="col-lg-2">
            <label for="txtNmrFacf" class="control-label">Número de Factura</label>
            <input type="text" id="txtNmrFacf" class="required form-control" maxlength="130">
        </div>
        <br />
        <br />
        <br />
        <!--<div class="col-lg-2">
            <button class="btn btn-info" id="buscar">Buscar</button>
        </div>-->
        {% if is_granted("ROLE_USER_CAJA_ADMIN") %}
        <div class="btn-group pull-right">
            <button class="btn btn-success" id="btnModalMasive">Cargar Template</button>
        </div>
      </br>
      </br>
        <div class="col-lg-offset-9"  style="margin-top: 1%">
            <div class="btn-group pull-right">
                <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><i class="fa fa-bars"></i> {{'Exportar datos de la tabla' | trans}}</button>
                <ul class="dropdown-menu" role="menu">



                    <!--<li><a href="#" onclick="$('#primer_reporte').tableExport({type: 'excel', escape: 'false'});"> <img src={#{ asset("images/xls.png")}#} width="24px"> XLS</a></li>-->
                      <li><a class="downloadTemplate" href="{{ path("DownloadFacturacionEricsson")}}" id="downloadTemplate"> <img src={{ asset("images/xls.png")}} width="24px"> XLS</a></li>


                </ul>
            </div>
        </div>
        {% endif %}
        <!--<div class="btn-group pull-right">
            <button class="btn btn-info" id="btnAddFac">Agregar Factura</button>
        </div>-->
        <div class="row">
            <div id="datatable" class="col-sm-12">

            </div>
        </div>
    </div>

    <div id="modalEditAspEntrega" class="modal fade modal-edit-asp-entrega" tabindex="-1"
         role="dialog" aria-labelledby="editAspEntregaDataLabel">
        <div class="modal-dialog modal-lg" 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>
                    <h2 class="modal-title" id="editAspEntregaDataLabel">
                        <b><span id="titleModalEditAspEntrega">{{'Edit' | trans}}</span></b>
                    </h2>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12">
                            <div class="modal-message alert hidden"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group">
                                <input id="txtId" type="hidden">
                                <input id="txtIdProyectos" type="hidden" value="{{ idproyectos }}">
                                <label for="cmbPo" class="control-label">Número de PO</label>
                                <div id="divPo">
                                    <select id="cmbPo" class=" form-control" style="width: 100%">
                                    </select>
                                </div>
                                <!--<input type="text" id="txtPo" class="required form-control" maxlength="130">-->
                            </div>
                        </div>
                        <div class="col-xs-12">
                            <div class="form-group">
                                <input id="txtId" type="hidden">
                                <input id="txtIdProyectos" type="hidden" value="{{ idproyectos }}">
                                <label for="cmbGr" class="control-label">Número de GR</label>
                                <div id="divGr">
                                    <select id="cmbGr" class=" form-control" style="width: 100%">
                                    </select>
                                </div>
                                <!--<input type="text" id="txtGr" class="required form-control" maxlength="130">-->
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label for="txtMontoTotalGr" class="control-label">Monto Total GR</label>
                                <!--<input type="text" id="txtMontoTotalGr" class="required form-control" maxlength="130">-->
                                <input id ="txtMontoTotalGr" type="text" class="form-control numeric txtMontoTotalGr" value="" readonly="true">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label for="txtMontoTotalIvaGr" class="control-label">Monto Total GR con Iva</label>
                                <!--<input type="text" id="txtMontoTotalIvaGr" class="required form-control" maxlength="130">-->
                                <input id ="txtMontoTotalIvaGr" type="text" class="form-control numeric txtMontoTotalIvaGr" value="" readonly="true">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label for="txtNmrFac" class="control-label">Número de Factura</label>
                                <input type="text" id="txtNmrFac" class="required form-control"  readonly="" maxlength="130">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label for="txtFechFac" class="control-label">Fecha de Factura</label>
                                <!--<input type="text" id="txtFechFac" class="required form-control" readonly="true" maxlength="130">-->
                                <input class="form-control" type="text" id="txtFechFac" value="" disabled = "true">
                            </div>
                        </div>
                        <!--<div class="col-xs-6">
                            <label>Fecha de Factura :</label> </br>
                            <input class="form-control" type="text" id="Filtros_fechaIni" value="{{ dateStart }}">
                        </div>-->
                        <div class="col-lg-2">
                              <button class="btn btn-info" id="btnEditM">
                                <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>
                              </button>
                        </div>

                        <div class="col-xs-12">
                            <div class="form-group">
                                <label for="txtComentarios" class="control-label">Comentarios</label>
                                <textarea required id="txtComentarios" class="comentarioV form-control" name="comentario"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btnSaveContinue" type="button" class="btn btn-success">Guardar</button>
                    <button id="btnSaveExit" type="button" class="btn btn-danger">Cancelar</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div id="modalEditFac" class="modal fade modal-edit-fac" tabindex="-1"
         role="dialog" aria-labelledby="editAspEntregaDataLabel">
        <div class="modal-dialog modal-lg" 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>
                    <h2 class="modal-title" id="editFacLabel">
                        <b><span id="titlemodalEditFac">{{'Editar Informacion' | trans}}</span></b>
                    </h2>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-12 col-sm-12">
                            <div class="modal-message alert hidden"></div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label for="txtcmbPoE" class="control-label">Número de PO</label>
                                <!--<input type="text" id="txtMontoTotalGr" class="required form-control" maxlength="130">-->
                                <input id ="txtcmbPoE" type="text" class="form-control numeric txtcmbPoE" value="" readonly="true">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label for="txtcmbGrE" class="control-label">Número de GR</label>
                                <!--<input type="text" id="txtMontoTotalGr" class="required form-control" maxlength="130">-->
                                <input id ="txtcmbGrE" type="text" class="form-control numeric txtcmbGrE" value="" readonly="true">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label for="txtMontoTotalGrE" class="control-label">Monto Total GR</label>
                                <!--<input type="text" id="txtMontoTotalGr" class="required form-control" maxlength="130">-->
                                <input id ="txtMontoTotalGrE" type="text" class="form-control numeric txtMontoTotalGrE" value="" readonly="true">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label for="txtMontoTotalIvaGrE" class="control-label">Monto Total GR con Iva</label>
                                <!--<input type="text" id="txtMontoTotalIvaGr" class="required form-control" maxlength="130">-->
                                <input id ="txtMontoTotalIvaGrE" type="text" class="form-control numeric txtMontoTotalIvaGrE" value="" readonly="true">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label for="txtNmrFacE" class="control-label">Número de Factura</label>
                                <input type="text" id="txtNmrFacE" class="required form-control" maxlength="130">
                            </div>
                        </div>
                        <div class="col-xs-6">
                            <div class="form-group">
                                <label for="txtFechFacE" class="control-label">Fecha de Factura</label>
                                <input class="form-control" type="text" id="txtFechFacE" value="">
                                <!--<input type="text" id="txtFechFacE" class="required form-control" maxlength="130">-->
                            </div>
                        </div>
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label for="txtHistoricoComentarios" class="control-label">Historico de Comentarios</label>
                                <textarea required id="txtHistoricoComentarios" class="txtHistoricoComentarios form-control" name="txtHistoricoComentarios" readonly="true" style=" HEIGHT: 150px"></textarea>
                            </div>
                        </div>
                        <div class="col-xs-12">
                            <div class="form-group">
                                <label for="txtComentariosE" class="control-label">Agregar Comentario</label>
                                <textarea required id="txtComentariosE" class="comentarioE form-control" name="comentarioE"></textarea>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btnSave" type="button" class="btn btn-success">Guardar</button>
                    <button id="btnExit" type="button" class="btn btn-danger">Cancelar</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade" id="modalMasive" tabindex="-1" role="dialog" aria-labelledby="modalMasive">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header btn-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel"><B>CARGAR TEMPLATE</B></h4>
                </div>
                <div class="modal-body">

                 <!--<div class="row">
                     <div class="col-lg-8"  style="margin-top: 1%">
                     <form id="form-incidencias" name="form-incidencias" method="post" action="{{ path('cargaTemplateGtFac',{'idproyectos':idproyectos,'idmodule':idmodule})}}" enctype="multipart/form-data">
                         <!--<label class="control-label"> Archivo: Entregable por Sitio</label>//
                         <div class="file-area">
                             <input type="file" name="file" id="file-incidencias" required="required"/>
                             <div class="file-dummy">
                                 <span class="success">Great, your files are selected.</span>
                                 <span class="default">Please select some files.</span>
                             </div>
                         </div>
                     <div class="col-lg-2"  style="margin-top: 1%">
                         <button type="submit" id="process-incidencias" class="btn btn-success" style="margin-top:8px;"> Cargar </button>
                     </div>
                     </form>
                     <div id="response-incidencias"></div>
                     </div>
                 </div>-->
                    <div class="panel panel-default divFF">
                        <div class="panel-heading">{{'ticket.masive.upload' | trans}}</div>
                        <div id="divF"class="panel-body divF">
                            <input id="fileExcel" type="file" name="file" class="file-loading">
                        </div>

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