<div class="box box-solid box-primary">
    <div class="box-header" style="text-align:center;">
        <h2 class="box-title" style="font-weight: bold;">
            Servicios:
        </h2>
    </div>
    <div class="box-body">
        <div class="col-md-12 table-responsive">
            <table class="table table-striped table-bordered" cellspacing="0" width="100%"style=" border-bottom: #fff;" id="tablaItems">
                <thead>
                    <tr>
                        <th>Acciones</th>
                        <th>Descripción</th>
                        <th>Cantidad</th>
                        <th>Vlr. Unitario</th>
                        <th>%IVA</th>
                        <th>Vlr. IVA</th>
                        <th>Total</th>
                    </tr>
                </thead>
                <tbody>
                    {% if CotizacionEditar.Items %}
                        {% for item in CotizacionEditar.Items %}
                            <tr>
                                <td>
                                    <input type="hidden" class="idItemServicios" name="servicioID[]" value="{{item.servicioID}}"/>
                                    <input type="hidden" name="categoriaID[{{item.servicioID}}]" value="{{item.categoriaID}}" />
                                    <input type="hidden" name="ItemID[{{item.servicioID}}]" value="{{item.itemID}}" />
                                    <input type="hidden" name="itemCANTIDAD[{{item.servicioID}}]" value="{{item.itemCANTIDAD}}" /> 
                                    <input type="hidden" name="itemVLRUNITARIO[{{item.servicioID}}]" value="{{item.itemVLRUNITARIO}}" />
                                    <input type="hidden" name="itemDESCRIPCION[{{item.servicioID}}]" value="{{item.itemDESCRIPCION}}" />
                                    <input type="hidden" name="itemVLRIMPUESTOS[{{item.servicioID}}]" value="{{item.itemVLRIMPUESTOS}}" />
                                    <input type="hidden" name="itemIMPUESTO[{{item.servicioID}}]" value="{{item.itemIMPUESTO}}"/>
                                    <button type="button" class="btn btn-danger borrarServicio" onclick="eliminar($('#cotizacion-{{ hash_vista }}'),this)" title="Eliminar Item"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
                                    <button type="button" class="btn btn-warning editarServicio" title="Editar Item" onclick="editar($('#frm-cotizaciones-{{ hash_vista }}'),this,{{item.itemID}},{{item.categoriaID}},{{item.servicioID}})"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
                                </td>
                                <td>{{item.itemDESCRIPCION}}</td>
                                <td>{{item.itemCANTIDAD}}</td>
                                <td>{{item.itemVLRUNITARIO}}</td>
                                <td>{{ (item.itemIMPUESTO)|number_format(2, ',', '.') }}%</td>
                                <td>{{item.itemVLRIMPUESTOS}}</td>
                                <td>{{((item.itemCANTIDAD * item.itemVLRUNITARIO)+item.itemVLRIMPUESTOS)|number_format(2, ',', '.')}}</td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<script type="text/javascript">
    var jason = "";
    var tabladeItems = $("#cotizacion-{{ hash_vista }} #tablaItems").DataTable();

    
    $(document).ready(function(){
        
           {% for item in CotizacionEditar.Items %}
                var bruto = parseFloat({{item.itemCANTIDAD}})*parseFloat({{item.itemVLRUNITARIO}});
                var total = parseFloat(bruto) + parseFloat({{item.itemVLRIMPUESTOS}});
                var valorBruto = $("#frm-cotizaciones-{{ hash_vista }} #valorBruto").val();
                var IVA = $("#frm-cotizaciones-{{ hash_vista }} #IVA").val();
                var valorNeto = $("#frm-cotizaciones-{{ hash_vista }} #valorNeto").val();
                valorBruto = (parseFloat(valorBruto) + parseFloat(bruto));
                IVA = (parseFloat(IVA) + parseFloat({{item.itemVLRIMPUESTOS}}));
                valorNeto = (parseFloat(valorBruto) + parseFloat(IVA));
                
           /*     agregarItemTablaServicios(
                    {{item.categoriaID}}, 
                    {{item.servicioID}}, 
                    "{{item.itemDESCRIPCION}}", 
                    {{item.itemCANTIDAD}}, 
                    {{item.itemVLRUNITARIO}}, 
                    {{item.itemIMPUESTO}},   
                    {{item.itemVLRIMPUESTOS}}, 
                    {{item.itemID}}
                );
            */    
                $("#frm-cotizaciones-{{ hash_vista }} #valorBruto").val(valorBruto);
                $("#frm-cotizaciones-{{ hash_vista }} #IVA").val(IVA);
                $("#frm-cotizaciones-{{ hash_vista }} #valorNeto").val(valorNeto);
            {% endfor %}
    });
    
    function eliminar(form,servicio) {
        var valores = new Array();
        form.find(servicio).parents("tr").find("td").each(function () {
            valores.push($(this).html() + "\n");
        });
        valorBruto = form.find("#valorBruto").val();
        IVA = form.find("#IVA").val();
        valorNeto = form.find("#valorNeto").val();
        valorBruto = (parseInt(valorBruto) - (parseInt(valores[2]) * parseFloat(valores[3])));
        IVA = (parseFloat(IVA) - parseFloat(valores[5]));
        valorNeto = (parseFloat(valorBruto) + parseFloat(IVA));
        valorNeto = Math.round(valorNeto);
        form.find("#valorBruto").val(valorBruto);
        form.find("#IVA").val(IVA);
        form.find("#valorNeto").val(valorNeto);
        tabladeItems.row( $(servicio).parents('tr') ).remove().draw();
    }
    
    
    function editar(form,datos,itemID,categoria,servicio) {
        item_ID = itemID;
        var valores = new Array();
        form.find(datos).parents("tr").find("td").each(function () {
            valores.push($(this).html()); 
        });
        form.find("#categoriaServicio").val(categoria).change();
        cargarServicios(form);
        setTimeout(AdjuntarServicio,1000);
        function AdjuntarServicio() {
            form.find("#ServiciosCargados").val(servicio).change();
            tabladeItems = form.find("#tablaItems").DataTable();
            tabladeItems.row( $(datos).parents('tr') ).remove().draw();
            tabladeItems.draw();
        }
        setTimeout(AdjuntarDescripcion,1000);
        function AdjuntarDescripcion() {
            form.find("#descripcionServicio").val(valores[1]);
        }   
        
        form.find("#Cantidad").val( parseInt(valores[2]));
        form.find("#valorServicio").val( parseInt(valores[3]));
        valorBruto = form.find("#valorBruto").val();
        IVA = form.find("#IVA").val();
        valorNeto = form.find("#valorNeto").val();
        valorBruto = (parseInt(valorBruto) - (parseInt(valores[2]) * parseFloat(valores[3])));
        IVA = (parseFloat(IVA) - parseFloat(valores[5]));
        valorNeto = (parseFloat(valorBruto) + parseFloat(IVA));
        valorNeto = Math.round(valorNeto);
        form.find("#valorBruto").val(valorBruto);
        form.find("#IVA").val(IVA);
        form.find("#valorNeto").val(valorNeto);
    }
     
</script>