{% extends "base.html.twig"%}
{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/templateOneBlock.css')}}">
{% endblock %}
{% block titulo %} - <a href="{{path('projectInitial',{ 'idproyectos':idproyectos})}}">{{proyectos.proyecto}}</a> - <a href="{{path(modulo.path,{ 'idproyectos':idproyectos,'idmodule':idmodule})}}">{{modulo.modulo}}</a>{% endblock %}
{% block menuTop %}
    <div class="col-lg-12 col-xs-12" >

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



    </div>
{%endblock %}        


{%block dashboard %}

    <style>
.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}


        .js-example-basic-single{
            width: 100%;
        }
        .js-example-basic-single .select2-arrow {
            background: white !important;
            background-image: none !important;
            border-left: none !important;
            margin-top: 5px !important;
        }
        .js-example-basic-single .select2-choice{
            display: block;
            width: 100%;
            height: 34px;
            padding: 6px 12px;
            font-size: 14px;
            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;
        }
        .js-example-basic-single .select2-choice:focus{
            border-color:#66afe9;
            outline:0;
            -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
            box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
        }
    </style>
    <script>

        var poTotal = new Array();
        var grTotal = new Array();
        var montoSubTotal = new Array();
        var idticketActividadesCheck = new Array();
        var montoTotal = 0;


        function deleteGR(po, gr, monto){

            var i = poTotal.indexOf("" + po + "");
            poTotal.splice(i, 1);
            var i = grTotal.indexOf("" + gr + "");
            grTotal.splice(i, 1);
            var i = montoSubTotal.indexOf("" + monto + "");
            montoSubTotal.splice(i, 1);
            montoTotal = parseFloat(montoTotal) - parseFloat(monto);

            $("#"+po+""+gr+""+monto).remove();
            $("#textTotal2").text(montoTotal);
        };

        //var valorTotal = 0;
    function checkItems(costoTotal, idticketactividades){


            valorTotal = $("#valorTotal").val();
            //alert(valorTotal);
            if($("#check"+idticketactividades).is(':checked')){
                valorTotal = parseFloat(valorTotal) + parseFloat(costoTotal);
                idticketActividadesCheck.push("" + idticketactividades + "");

            }else{
                var i = idticketActividadesCheck.indexOf("" + idticketactividades + "");
                idticketActividadesCheck.splice(i, 1);
                valorTotal = parseFloat(valorTotal) - parseFloat(costoTotal);

            }
            $("#valorTotal").val(valorTotal);

            $("#textTotal").text(valorTotal);
            //alert(valorTotal);

        }
    function saveCategoria(idticketactividades){
        idcategoria = $("#idcategoria"+idticketactividades).val();
        $.ajax({
        type: 'POST',
        url: '{{ path('changeDatosItems', {'idproyectos': idproyectos} ) }}',
        data: {$idticketactividades: idticketactividades, $opc: 'categoria', $valor: idcategoria}
        });
    }
    function saveSistema(idticketactividades){
        idsistemna = $("#idsistema"+idticketactividades).val();
        $.ajax({
        type: 'POST',
        url: '{{ path('changeDatosItems', {'idproyectos': idproyectos} ) }}',
        data: {$idticketactividades: idticketactividades, $opc: 'sistema', $valor: idsistemna}
        });
    }
    function saveCantidad(idticketactividades){
        cantidad = $("#cantidad"+idticketactividades).val();
        $.ajax({
        type: 'POST',
        url: '{{ path('changeDatosItems', {'idproyectos': idproyectos} ) }}',
        data: {$idticketactividades: idticketactividades, $opc: 'cantidad', $valor: cantidad}
        });
        $("#costoTotalTxt"+idticketactividades).text(cantidad*$("#costoUnidad"+idticketactividades).val());
        $("#cobroTotalTxt"+idticketactividades).text(cantidad*$("#cobroUnidad"+idticketactividades).val());
    }
    function saveCostoUnidad(idticketactividades){
        costoUnidad = $("#costoUnidad"+idticketactividades).val();
        $.ajax({
        type: 'POST',
        url: '{{ path('changeDatosItems', {'idproyectos': idproyectos} ) }}',
        data: {$idticketactividades: idticketactividades, $opc: 'costoUnidad', $valor: costoUnidad}
        });
        $("#costoTotalTxt"+idticketactividades).text(costoUnidad*$("#cantidad"+idticketactividades).val());
    }
    function saveCobroUnidad(idticketactividades){
        cobroUnidad = $("#cobroUnidad"+idticketactividades).val();
        $.ajax({
        type: 'POST',
        url: '{{ path('changeDatosItems', {'idproyectos': idproyectos} ) }}',
        data: {$idticketactividades: idticketactividades, $opc: 'cobroUnidad', $valor: cobroUnidad}
        });
        $("#cobroTotalTxt"+idticketactividades).text(cobroUnidad*$("#cantidad"+idticketactividades).val());
    }
        $(function () {
        $("#submodulo49").addClass('active');

            $(".js-example-basic-single").select2({
                placeholder: "Elegir...",
                allowClear: true
            });

        var nowDate = new Date();
        var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);


            $('.datetimepicker1').datetimepicker({
                maxDate: today});
            var table = $('#example').DataTable( {
                dom: 'Bfrtip',
                "ajax": {
                    "url": "{{ path('showLiquidarServiciosCLARO',{'idproyectos':idproyectos}) }}",
                    "type": "POST",
                    data:  function( d ) {
                        d.wo= $('#wo').val();
                        d.tas= $('#tas').val();
                    }
                },
         columns: [
                    { "data": "ticket" },
                    { "data": "ref" },
                    { "data": "sitio" },
                    { "data": "costoTotal" },
                    { "data": "cobroTotal" },
                    { "data": null}
                ],
        columnDefs: [
            { orderable: false, targets: [ 1 ] ,
            "targets": -1,
            "data": "idticket",
            "defaultContent": "<button class='btn btn-info'><i class='fa fa-search' aria-hidden='true'></i></button>"
            }
        ],
                lengthMenu: [
                    [  25, 50, -1 ],
                    [ '10 rows', '25 rows', '50 rows', 'Show all' ]
                ],
                buttons: [
                    'pageLength','copy', 'csv', 'excel', 'pdf', 'print'
                ]
            } );




            $("#btnShowProveedor").click(function () {
                $("#cargar").css('display','');
                table.ajax.reload(function ( json ) {
                $("#cargar").css('display','none');
                });

            });


         $('#example tbody').on( 'click', 'button', function () {
         $("#cargar").css('display','');
        var data = table.row( $(this).parents('tr') ).data();
        //alert( data.idticket +"'PROVEEDOR: "+ data.nombre );
         $("#btnLiquidarServicio").attr('idticket', data.idticket);
        $.ajax({
        type:'POST',
        url: "{{ path('findItemsTicket',{'idproyectos':idproyectos}) }}",
        data: { $idticket : data.idticket  }
        }).done(function(json) {

                var obj = jQuery.parseJSON(json);
                var orden = obj.orden;
                var item = obj.items;
                tr = "";
                for(i=0;i< item.length; i++){

                selectCategoria  = '<select class="form-control" id="idcategoria'+item[i].idTicketActividades+'" onchange="saveCategoria('+item[i].idTicketActividades+')">'
                            selectCategoria  += '<option></option>'
                            {% for categoria in categorias %}
                            if(item[i].categoria == '{{ categoria.categoria }}'){
                            selectCategoria  +='<option value="{{ categoria.idcategoria }}" selected>{{ categoria.categoria }}</option>'

                            }else{
                            selectCategoria  +='<option value="{{ categoria.idcategoria }}">{{ categoria.categoria }}</option>'

                            }
                            {% endfor %}
                       selectCategoria  += '</select>'


                        selectSistema  ='<select class="form-control" id="idsistema'+item[i].idTicketActividades+'"  onchange="saveSistema('+item[i].idTicketActividades+')">'
                            selectSistema  +='<option></option>'
                            {% for sistema in sistemas %}
                            if(item[i].sistema == '{{ sistema.sistema }}'){
                            selectSistema  +='<option value="{{ sistema.idsistema }}" selected>{{ sistema.sistema }}</option>'

                            }else{
                            selectSistema  +='<option value="{{ sistema.idsistema }}">{{ sistema.sistema }}</option>'

                            }
                            {% endfor %}
                        selectSistema  +='</select>'

                    tr += "<tr>";
                    tr += "<td>"+ item[i].proveedor +"</td>";
                    tr += "<td>"+ item[i].descripcion +"</td>";
                    tr += "<td>"+ item[i].tipo +"</td>";
                    tr += "<td>"+ item[i].categoria +"</td>";
                    tr += "<td>"+ item[i].sistema +"</td>";
                    tr += "<td><input class='form-control' id='cantidad"+item[i].idTicketActividades+"' value="+item[i].cantidad+" style='width:80px'  onchange='saveCantidad("+item[i].idTicketActividades+")'></td>";
                    tr += "<td>"+ item[i].costoUnidad +"</td>";
                    //tr += "<td><input class='form-control' id='costoUnidad"+item[i].idTicketActividades+"' value="+item[i].costoUnidad+" style='width:80px'  onchange='saveCostoUnidad("+item[i].idTicketActividades+")'></td>";
                    tr += "<td><span id='costoTotalTxt"+item[i].idTicketActividades+"'>"+ item[i].costoTotal +"</span></td>";
                    tr += "<td>"+ item[i].cobroUnidad +"</td>";
                    //tr += "<td><input class='form-control' id='cobroUnidad"+item[i].idTicketActividades+"' value="+item[i].cobroUnidad+" style='width:80px'  onchange='saveCobroUnidad("+item[i].idTicketActividades+")'></td>";
                    tr += "<td><span id='cobroTotalTxt"+item[i].idTicketActividades+"'>"+ item[i].cobroTotal +"</span></td>";
                    tr += "</tr>";

                }

                $("#tbodyConciliar").empty();
                $("#tbodyConciliar").append(tr);
            $("#modalCoinciliarProv").modal();
         $("#cargar").css('display','none');
        })


        } );

            $("#btnLiquidarServicio").click(function () {
                mes = $("#mesLiquidar").val();
                years = $("#yearLiquidar").val();
                idticket  = $("#btnLiquidarServicio").attr('idticket');

                $("#cargar").css('display','');
                $.ajax({
                    type: 'POST',
                    url: '{{ path('liquidarServiciosCLARO',{'idproyectos':idproyectos}) }}',
                    data: { $idticket :idticket,$mes: mes, $years: years }
                }).done(function(data) {
                    $("#modalCoinciliarProv").modal('hide');


                    table.ajax.reload(function ( json ) {
                        $("#cargar").css('display','none');
                    });

                });

            })










        });





    </script>

    <div class="col-sm-12  col-md-12 col-lg-12 col-xs-12">
    <br><br>
    <h1 style="text-align: center">{{'LIQUIDACION SERVICIOS' | trans}}</h1>

        <div class="col-xs-12 col-md-12 col-lg-12  "  id="search-ticket"  style=" padding: 5px;">

            <div class="col-lg-4 col-lg-offset-2">
                <input class="form-control" placeholder="WO" id="wo">
            </div>

            <div class="col-lg-4">
                <div class="input-group">
                    <input class="form-control" placeholder="TAS" id="tas">

      <span class="input-group-btn">
                    <button type="button" class="btn btn-default" id="btnShowProveedor">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
                    </button>
      </span>
                    </div>
                </div>



            </div>

        </div>

        <table id="example" class="display nowrap" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>TT PWM</th>
                <th>WO/TAS</th>
                <th>{{'ticketDetail.site' | trans}}</th>
                <th>VALOR PROVEEDOR</th>
                <th>VALOR CLIENTE</th>
                <th></th>
            </tr>
            </thead>
            <tbody id="tbody">
            </tbody>
        </table>
        <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>


<div class="modal modal-wide fade" id="modalCoinciliarProv" tabindex="-1" role="dialog" aria-labelledby="modalLPU" style="width: 80%" >
    <div class="modal-dialog" 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="exampleModalLabel">CONCILIAR PROVEEDOR</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-lg-4">
                        <label>
                            SELECCIONE AÑO
                        </label>
                        <select class="form-control" id="yearLiquidar">
                            <option>{{ 'NOW'|date('Y') }}</option>
                            <option>{{ 'NOW'|date('Y') -1 }}</option>
                        </select>
                        </div>
                    <div class="col-lg-4">
                        <label>
                            {{'Seleccione Mes' | trans | upper}}
                        </label>
                        <select class="form-control" id="mesLiquidar">
                            <option>{{'month.january' | trans}}</option>
                            <option>{{'month.february' | trans}}</option>
                            <option>{{'month.march' | trans}}</option>
                            <option>{{'month.april' | trans}}</option>
                            <option>{{'month.may' | trans}}</option>
                            <option>{{'month.june' | trans}}</option>
                            <option>{{'month.july' | trans}}</option>
                            <option>{{'month.august' | trans}}</option>
                            <option>{{'month.september' | trans}}</option>
                            <option>{{'month.october' | trans}}</option>
                            <option>{{'month.november' | trans}}</option>
                            <option>{{'month.december' | trans}}</option>
                        </select>
                    </div>
                </div>
            <div class="row" style="margin-top: 5px;">
                    <div class="col-lg-12">
                        <table class="tablesorter table-bordered">
                            <thead>
                            <tr>
                                <th>PROVEEDOR</th>
                                <th>ITEM</th>
                                <th>ESPECIALIDAD</th>
                                <th>{{'site.category' | trans}}</th>
                                <th>SISTEMA</th>
                                <th>{{'Cantidad' | trans | upper}}</th>
                                <th>VALOR UNIDAD</th>
                                <th>VALOR TOTAL</th>
                                <th>COBRO UNIDAD</th>
                                <th>COBRO TOTAL</th>
                            </tr>
                            </thead>
                            <tbody id="tbodyConciliar">

                            </tbody>

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

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
                <button type="button" class="btn btn-info" data-dismiss="modal" id="btnLiquidarServicio">LIQUIDAR</button>
            </div>
        </div>
    </div>
</div>








    <div class="modal modal-wide fade" id="modalAsignarGR" tabindex="-1" role="dialog" aria-labelledby="modalLPU" style="width: 80%" >
    <div class="modal-dialog" 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="exampleModalLabel">{{'ticketDetail.assign' | trans | upper}} GR</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                        <div class="col-lg-6">
                            <div class="input-group">
                            <select class="form-control" id="idproveedorConciliar">
                                <option value="0">Seleccione Proveedor</option>
                                {% for proveedor in proveedores %}
                                    <option value="{{ proveedor.idproveedor }}">{{ proveedor.nombre }}</option>
                                {% endfor %}
                            </select>
                                  <span class="input-group-btn">
                                    <button class="btn btn-default" type="button" id="btnShowOrdenesConciliadas">{{'inbox.search' | trans}}</button>
                                  </span>
                                </div>
                        </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <table id="example2" class="display nowrap" cellspacing="0" width="100%">
                            <thead>
                            <tr>
                                <th>PROVEEDOR</th>
                                <th>SISTEMA</th>
                                <th>NRO. ACTA</th>
                                <th>CANTIDAD ORDENES</th>
                                <th>COSTO TOTAL</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody id="tbody2">
                            </tbody>
                        </table>
                    </div>
                </div>


            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
            </div>
        </div>
    </div>
</div>



    <div class="modal modal-wide fade" id="modalShowItemsAsignarGR" tabindex="-1" role="dialog" aria-labelledby="modalLPU" style="width: 80%" >
        <div class="modal-dialog" 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="exampleModalLabel">{{'ticketDetail.assign' | trans | upper}} GR</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-4 col-lg-offset-2" style="font-size: 16px">
                            <label>VALOR TOTAL A PAGAR</label>
                            <span id="textTotal"></span>
                            </div>
                            <div class="col-lg-4" style="font-size: 16px">
                                <label>VALOR GRs</label>
                                <span id="textTotal2"></span>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="col-lg-4" style="padding: 0">
                                <input class="form-control" placeholder="INGRESE PO" id="po">
                            </div>
                            <div class="col-lg-4" style="padding: 0">
                                <input class="form-control" placeholder="INGRESE GR" id="gr">
                            </div>
                            <div class="col-lg-4" style="padding: 0">
                                <div class="input-group">
                                    <input class="form-control" placeholder="MONTO" id="monto">
                                <span class="input-group-btn">
                                    <button class="btn btn-success" type="button" id="btnAddPOGR">{{'inbox.add' | trans | upper}}</button>
                                  </span>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <table class="display nowrap col-lg-12" id="tbodyPOGR">
                                <thead>
                                    <tr class="btn-info">
                                        <th>PO</th>
                                        <th>GR</th>
                                        <th>VALOR</th>
                                        <th></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-12">
                            <input type="hidden" id="valorTotal">
                            <table id="example3" class="tablesorter" cellspacing="0" width="100%">
                                <tr>
                                    <th></th>
                                    <th>ITEM</th>
                                    <th>ESPECIALIDAD</th>
                                    <th>{{'site.category' | trans}}</th>
                                    <th>SISTEMA</th>
                                    <th>{{'Cantidad' | trans | upper}}</th>
                                    <th>VALOR UNIDAD</th>
                                    <th>VALOR TOTAL</th>
                                    <th>COBRO UNIDAD</th>
                                    <th>COBRO TOTAL</th>
                                </tr>
                                <tbody id="tbody3">
                                </tbody>
                            </table>
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">{{'monitorii.close' | trans}}</button>
                    <button type="button" class="btn btn-info"  id="btnAsignarGR">{{'ticketDetail.assign' | trans | upper}} GR</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}