<div class="box box-solid box-primary">
    <div class="box-header" style="text-align:center;">
        <h2 class="box-title" style="font-weight: bold;">
            Agregar un Servicio:
        </h2>
    </div>
    <div class="box-body">
        <div class="col-md-12" id="Servicios">
            <div class="col-md-2">
                <div class="form-group">
                    <label for="categoriaServicio">Seleccione una Categoria:</label>
                    <select id="categoriaServicio" name="categoriaServicio" class="js-example-basic-single form-control" style="height: 35px !important; width: 100% !important; text-transform: uppercase;"  onchange="cargarServicios($('#frm-cotizaciones-{{ hash_vista }}'));">
                        <optgroup label="Categorias">
                            {% for Categorias in Categorias %}
                            <option value="{{ Categorias.categoriaID }}">{{ Categorias.categoriaTITULO }}</option>
                            {% endfor %}
                            <option value="0">OTROS</option>
                        </optgroup>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="ServiciosCargados">Seleccione un Servicio:</label>
                    <select id="ServiciosCargados" name="ServiciosCargados" class="js-example-basic-single form-control" style="height: 35px !important; width: 100% !important; text-transform: uppercase;"  onchange="mostrarServicio($('#frm-cotizaciones-{{ hash_vista }}'),this.options[this.selectedIndex].text);">
                        <optgroup label="Servicios">
                        </optgroup>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="descripcionServicio">Descripción:</label>
                    <input type="text" class="form-control" id="descripcionServicio" placeholder="Descripción del Serivicio" style="height: 35px !important;" maxlength="70">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="Cantidad">Cantidad:</label>
                    <input type="number" class="form-control" id="Cantidad" placeholder="Cantidad del servicio" style="height: 35px !important;" min="1" max="99">
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="valorServicio">Valor Unitario:</label>
                    <div class="input-group">
                        <span class="input-group-addon"><i class="fa fa-dollar"></i></span>
                        <input type="number" class="form-control" id="valorServicio" placeholder="Valor del servicio" style="height: 35px !important;">
                    </div>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label for="Iva">Iva aplicado:</label>
                    <div class="input-group">
                        <input type="number" class="form-control" id="Iva" readonly value="0,19" placeholder="0.19" style="height: 35px !important;">
                        <span class="input-group-addon">%</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-12" style="text-align: center;">
            {{ boton('nuevo',null, 'agregarServicio()', 'Agregar Servicio' ) }}
            <!--a class="btn btn-primary"  onclick="agregarServicio($('#cotizacion-{{ hash_vista }}'))"><i class="fa fa-plus" aria-hidden="true"></i> Agregar Servivio</a-->
        </div>
    </div>
</div>

<script type="text/javascript" >

    var item_ID = "0";
    
    function cargarServicios(form) {
        ejecutarOperacion("ventas","cotizaciones", "servicios", "categoria=" +  form.find("#categoriaServicio").val(),
        function (datos){
            if(datos.Servicios){
            var Servicios = datos.Servicios;
            var num_servicios = Servicios.length;
           form.find("#ServiciosCargados option").remove();
            for (i = 0; i < num_servicios; i++) {
                form.find("#ServiciosCargados").append("<option value='"+Servicios[i].servicioID+"'>"+Servicios[i].servicioTITULO+"</option>");
            }
            }else {
                form.find("#ServiciosCargados").append("<option value='0'>Seleccione</option>");
            }
        });
    }
    
    function reset_campos() {
        $("#frm-cotizaciones-{{ hash_vista }} #descripcionServicio").val("");
        $("#frm-cotizaciones-{{ hash_vista }} #Cantidad").val("");
        $("#frm-cotizaciones-{{ hash_vista }} #valorServicio").val("");
    }
    
    function mostrarServicio(form, servicio) {
        form.find("#descripcionServicio").val(servicio);
    }
    
    function agregarServicio () {
        var Categoria = $("#frm-cotizaciones-{{ hash_vista }} #categoriaServicio").val();
        var Servicio = $("#frm-cotizaciones-{{ hash_vista }} #ServiciosCargados").val();
        var descripcionServicio = $("#frm-cotizaciones-{{ hash_vista }} #descripcionServicio").val();  
        var Cantidad = $("#frm-cotizaciones-{{ hash_vista }} #Cantidad").val();
        var Valor = $("#frm-cotizaciones-{{ hash_vista }} #valorServicio").val();
        var vlrservicio = (parseFloat(Cantidad) * parseFloat(Valor));
        var iva = 0.19;
        var vlriva = Math.round(parseFloat(vlrservicio) * parseFloat(iva));
        iva = "19";
        var total = (parseFloat(vlrservicio) + parseFloat(vlriva));
        if (descripcionServicio !== "" && Cantidad !== "" && Valor !== "") {
            valorBruto = $("#frm-cotizaciones-{{ hash_vista }} #valorBruto").val();
            IVA = $("#frm-cotizaciones-{{ hash_vista }} #IVA").val();
            valorNeto = $("#frm-cotizaciones-{{ hash_vista }} #valorNeto").val();
            valorBruto = (parseInt(valorBruto) + parseInt(vlrservicio));
            IVA = (parseFloat(IVA) + parseFloat(vlriva));
            valorNeto = (parseFloat(valorBruto) + parseFloat(IVA));
            $("#frm-cotizaciones-{{ hash_vista }} #valorBruto").val(valorBruto);
            $("#frm-cotizaciones-{{ hash_vista }} #IVA").val(IVA);
            $("#frm-cotizaciones-{{ hash_vista }} #valorNeto").val(valorNeto);
            agregarItemTablaServicios(Categoria, Servicio, descripcionServicio, Cantidad, Valor, iva, vlriva, item_ID);
           // swal('Exito!','SE AGREGÓ EL ITEM A LA LISTA',"success");   
            reset_campos();
            item_ID = "0";
        }else{
            swal("Error!", 'INGRESA TODOS LOS DATOS OBLIGATORIOS', "error"); 
        }
    }
    
    function agregarItemTablaServicios(Categoria, Servicio, descripcionServicio, Cantidad, Valor, iva, vlriva, ItemID = null  ){
        var htmlItemServicio = "" +
            "<input type='hidden' class='idItemServicios' name='servicioID[]' value='"+Servicio+"' /> " +
            "<input type='hidden' name='categoriaID["+Servicio+"]' value='"+Categoria+"' /> " +
            "<input type='hidden' name='ItemID["+Servicio+"]' value='"+ItemID+"' /> " +
            "<input type='hidden' name='itemCANTIDAD["+Servicio+"]' value='"+Cantidad+"' /> " +
            "<input type='hidden' name='itemVLRUNITARIO["+Servicio+"]' value='"+Valor+"' /> " +
            "<input type='hidden' name='itemDESCRIPCION["+Servicio+"]' value='"+descripcionServicio+"' /> " +
            "<input type='hidden' name='itemVLRIMPUESTOS["+Servicio+"]' value='"+vlriva+"' /> " +
            "<input type='hidden' name='itemIMPUESTO["+Servicio+"]' value='"+iva+"' /> " +
                "<button type='button' class='btn btn-danger borrarServicio' title='Eliminar Item' onclick='eliminar(this);'>"+
                "<i class='fa fa-trash-o' aria-hidden='true'></i>"+
                "</button> "+
                "<button type='button' class='btn btn-warning editarServicio' title='Editar Item' onclick='editar(this," + ItemID + "," + Categoria + "," + Servicio + ")'>"+
                "<i class='fa fa-pencil-square-o' aria-hidden='true'></i>"+
                "</button>";
        var total = parseFloat(Valor) * parseFloat(Cantidad);
        total = total + parseFloat(vlriva);
        tabladeItems.row.add( [
                htmlItemServicio,
                descripcionServicio,
                Cantidad,
                Valor,
                iva+"%",
                vlriva,
                total
                ] ).draw( false );
    }
    
    $(document).ready(function() {
        $('.js-example-basic-single').select2({
            placeholder: "Seleccione...",
            width: 'resolve'
        });
    });
</script>