{% 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>

    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 () {
        $("#submodulo47").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('showOrdenesCompras',{'idproyectos':idproyectos}) }}",
                    "type": "POST",
                    data:  function( d ) {
                        d.idproveedor= $('#idproveedor').val();
                        d.idestados= $('#idestados').val();
                    }
                },
         columns: [
                    { "data": "ticket" },
                    { "data": "nombre" },
                    { "data": "tipo" },
                    { "data": "sitio" },
                    { "data": "nroActas" },
                    { "data": "ref" },
                    { "data": "items" },
                    { "data": "costoTotal" },
                    { "data": "cobroTotal" },
                    { "data": null}
                ],
        columnDefs: [
            { orderable: false, targets: [ 1 ] ,
            "targets": -1,
            "data": "idorden",
            "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'
                ]
            } );




            $("#btnConciliarProveedor").click(function() {
                nroActas = $("#nroActas").val();
                if(nroActas == ''){
                    alert('Debe Ingresar nro de Acta');
                    return false;
                }
                idorden = $(this).attr('idorden');
                tipo = $(this).attr('tipo');
                fechaEntrega = $("#fechaEntrega").val();
                fechaEjecucion = $("#fechaEjecucion").val();
                fechaInforme = $("#fechaInforme").val();
                years = $("#conciliarYear").val();
                mes = $("#conciliarMes").val();
                nroGuia = $("#nroGuia").val();
                userRecibe = $("#userRecibe").val();
                estadoOrden = $(this).attr('estadoOrden');
                $("#cargar").css('display','');
                $.ajax({
                    type: 'POST',
                    url: '{{ path('cambiarEstadoOrdenCompra',{'idproyectos':idproyectos}) }}',
                    data: {$idorden :idorden, $tipo:tipo, $fechaEntrega: fechaEntrega,$fechaInforme: fechaInforme, $years:years,  $mes:mes,
                            $fechaEjecucion:fechaEjecucion, $nroGuia: nroGuia, $userRecibe:userRecibe, $nroActas: nroActas, $estadoOrden : estadoOrden}
                }).done(function(data) {
                    $("#modalCoinciliarProv").modal('hide');


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

                });

            });
            $("#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 );
         $("#btnConciliarProveedor").attr('tipo', data.tipo);
         $("#btnConciliarProveedor").attr('idorden', data.idorden);
         $("#btnConciliarProveedor").attr('estadoOrden', data.estadoOrden);
        if(data.tipo=='REPUESTO'){
            $(".rowRepuesto").css('display','');
            $(".rowServicio").css('display','none');
            $(".rowServicio2").css('display','none');
        }else{
            if(data.idestados == 166){
            $(".rowServicio").css('display','');
            $(".rowServicio2").css('display','none');

            }else if(data.idestados == 106){
            $(".rowServicio").css('display','none');
            $(".rowServicio2").css('display','');

            }
            $(".rowRepuesto").css('display','none');

        }
        mesProveedor = data.mesProveedor;
        fecha = mesProveedor.split("-");
        $("#conciliarYear option[value='"+fecha[0]+"']").attr('selected','true');
         $("#conciliarYear").change();
        $("#conciliarMes option[value='"+fecha[1]+"']").attr('selected','true');
         $("#conciliarMes").change();
        $("#nroActas").val(data.nroActas);
        $("#nombProveedor").text(data.nombre);
        $("#nombTipo").text(data.tipo);
        $("#nombProveedor").text(data.nombre);
        $("#nombTipo").text(data.tipo);
        $("#fechaEntrega").val(data.fechaEntrega);
        $("#fechaInforme").val(data.fechaInforme);
        $("#fechaEjecucion").val(data.fechaEjecucion);
        $("#nroGuia").val(data.nroGuia);
        $("#userRecibe option[value='"+data.userRecibe+"']").attr('selected', true);
        $("#userRecibe").change();
        $.ajax({
        type:'POST',
        url: "{{ path('findOrdenCompra',{'idproyectos':idproyectos, 'idticket':0}) }}",
        data: {$idorden:data.idorden, $idticket : data.idticket  }
        }).done(function(json) {

                var obj = jQuery.parseJSON(json);
                var orden = obj.orden;
                var item = obj.items;
                if(orden[0].estado == "CONCILIADO"){
                    //$(".rowAbierto").css('display','none');

                }else{
                    //$(".rowAbierto").css('display','');
                }
                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].descripcion +"</td>";
                    tr += "<td>"+ item[i].tipo +"</td>";
                    tr += "<td>"+ selectCategoria +"</td>";
                    tr += "<td>"+ selectSistema +"</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><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><span id='cobroTotalTxt"+item[i].idTicketActividades+"'>"+ item[i].cobroTotal +"</span></td>";
                    tr += "</tr>";

                }

                $("#tbodyConciliar").empty();
                $("#tbodyConciliar").append(tr);
            $("#modalCoinciliarProv").modal();
         $("#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">ORDENES DE COMPRA</h1>
    <br>

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


                    <div class="col-lg-4 form-group">
                        <label>
                            Proveedor
                        </label>
                        <select class="form-control" id="idproveedor">
                            <option value="0"></option>
                            {% for proveedor in proveedores %}
                            <option value="{{ proveedor.idproveedor }}">{{ proveedor.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>

                     <div class="col-lg-4 form-group">
                        <label>
                            Estado
                        </label>
                        <select class="form-control" id="idestados">
                            <option value="0">ABIERTOS</option>
                            <option value="1">CERRADOS</option>
                        </select>
                    </div>


                <div class="col-lg-2  hidden-xs  col-md-4 col-sm-4">
                    <button type="button" class="btn btn-default" id="btnShowProveedor">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span> Buscar
                    </button>
                </div>

            </div>

        </div>

        <table id="example" class="display nowrap" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>TT PWM</th>
                <th>PROVEEDOR</th>
                <th>{{'ticketDetail.email.tipo' | trans | upper}}</th>
                <th>{{'ticketDetail.site' | trans | upper}}</th>
                <th>ACTA</th>
                <th>WO</th>
                <th>ITEMS</th>
                <th>COSTO TOTAL</th>
                <th>COBRO TOTAL</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" style="margin-top: 5px;">
                <div class="col-lg-8">
                    <label>PROVEEDOR</label>
                    <span id="nombProveedor"></span>
                </div>
                <div class="col-lg-4">
                    <label>{{'ticketDetail.email.tipo' | trans | upper}}</label>
                    <span id="nombTipo"></span>
                </div>
            </div>

                <div class="row">
                    <div class="col-lg-4">
                        <label>
                            NRO DE ACTA
                        </label>
                        <input class="form-control" value="" id="nroActas">
                    </div>
                    <div class="col-lg-4">
                        <label>
                            AKO CONCILIADO
                        </label>
                        <select class="form-control" id="conciliarYear">
                            <option value="{{ 'NOW'|date('Y') }}">{{ 'NOW'|date('Y') }}</option>
                            <option value="{{ 'NOW'|date('Y') -1 }}">{{ 'NOW'|date('Y') -1 }}</option>
                        </select>
                    </div>
                    <div class="col-lg-4">
                        <label>
                            {{'MES CONCILIADO' | trans}}
                        </label>
                        <select class="form-control" id="conciliarMes">
                            <option value="{{'month.january' | trans}}">{{'month.january' | trans}}</option>
                            <option value="{{'month.february' | trans}}">{{'month.february' | trans}}</option>
                            <option value="{{'month.march' | trans}}">{{'month.march' | trans}}</option>
                            <option value="{{'month.april' | trans}}">{{'month.april' | trans}}</option>
                            <option value="{{'month.may' | trans}}">{{'month.may' | trans}}</option>
                            <option value="{{'month.june' | trans}}">{{'month.june' | trans}}</option>
                            <option value="{{'month.july' | trans}}">{{'month.july' | trans}}</option>
                            <option value="{{'month.august' | trans}}">{{'month.august' | trans}}</option>
                            <option value="{{'month.september' | trans}}">{{'month.september' | trans}}</option>
                            <option value="{{'OCTUBRE' | trans}}">{{'OCTUBRE' | trans}}</option>
                            <option value="{{'month.november' | trans}}">{{'month.november' | trans}}</option>
                            <option value="{{'month.december' | trans}}">{{'month.december' | trans}}</option>
                        </select>
                    </div>
                </div>
            <div class="row" style="margin-top: 5px;">
                    <div class="col-lg-6 rowRepuesto">
                        <div class="form-group">
                        <label>FECHA ENTREGA</label>
                            <div class='input-group date datetimepicker1' >
                        <input type="text" class="form-control" id="fechaEntrega" data-date-format="YYYY-MM-DD" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                    </div>
                            </div></div>
                    <div class="col-lg-6 rowServicio">
                        <div class="form-group">
                        <label>FECHA EJECUCION</label>
                            <div class='input-group date datetimepicker1' >
                        <input type="text" class="form-control" id="fechaEjecucion" data-date-format="YYYY-MM-DD" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                    </div>
                            </div></div>
                    <div class="col-lg-6 rowServicio">
                        <div class="form-group">
                        <label>FECHA INFORME</label>
                            <div class='input-group date datetimepicker1' >
                        <input type="text" class="form-control" id="fechaInforme" data-date-format="YYYY-MM-DD" />
                            <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                            </span>
                    </div>
                            </div></div>
                    <div class="col-lg-6 rowRepuesto">
                        <label>Nro GUIA</label>
                        <input type="text" class="form-control" id="nroGuia">
                    </div>
                    </div>
                    <div class="row rowRepuesto" style="margin-top: 5px;">
                    <div class="col-lg-12">
                        <label>RECIBIDO POR:</label>
                                         <select class="js-example-basic-single" id="userRecibe">
                                         <option></option>
                                         {% for usuario in usuarios %}
                                            <option value="{{ usuario.iduser }}">{{ usuario.nombre }}</option>
                                         {% endfor %}
                        </select>
                    </div>
                </div>
            <div class="row" style="margin-top: 5px;">
                    <div class="col-lg-12">
                        <table class="tablesorter table-bordered">
                            <thead>
                            <tr>
                                <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 rowAbierto" data-dismiss="modal" id="btnConciliarProveedor">{{'ticketDetail.save' | trans}}</button>
            </div>
        </div>
    </div>
</div>

    </div>
{% endblock %}