@extends('layouts.default')

@section('scripts')
    <script>
        var storage_id = 'formula';
        var jsonData = {};
        if(localStorage.getItem('formula') != null) {
            jsonData = JSON.parse(localStorage.getItem('formula'));
        }
        @if(!empty($agua))
        else {
            jsonData = {
                materias_primas: [
                    {
                        costo_unidad: "0.00",
                        densidad: 1,
                        id: 1,
                        nombre: "{{ $agua->NOMBRE }}",
                        nreguist: "{{ $agua->NREGUIST }}",
                        orden: 1,
                        peso: 1000,
                        volumen: 0
                    }
                ]
            }
            //Almacena nombre producto en localStorage
            localStorage.setItem('formula', JSON.stringify(jsonData));
        }

        @endif

        poblar_formula(jsonData);
        
        $(document).ready(function(){

            var LITROS          = $('#LITROS').val();
            var volumen_formula = $('#volumen_formula').val();
            var vida_util       = $('#vida_util').val();
            var DENSIDAD        = $('#DENSIDAD').val();
            var CAMBIOS         = $('#CAMBIOS').val();

            if (DENSIDAD == '' || DENSIDAD == 0 || DENSIDAD == null)
            {
                $('#DENSIDAD').val(1);
                jsonData.DENSIDAD = 1;
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            }

            /* Cuando Volumen formula es 0 o null o espacios */
            if (LITROS == '' || LITROS == 0 || LITROS == null)
            {
                $('#LITROS').val(1);
                //Actualizamos variable jsonData
                jsonData.LITROS = LITROS;
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            }

            if (volumen_formula == '' || volumen_formula == 0 || volumen_formula == null)
            {
                $('#volumen_formula').val(1000);
                //Actualizamos variable jsonData
                jsonData.volumen_formula = 1000;
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            }

            if (vida_util == '' || vida_util == 0 || vida_util == null)
            {
                $('#vida_util').val(365);
                jsonData.vida_util = 365;
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            }
            /* Cuando Volumen formula es 0 o null o espacios */
            if (CAMBIOS == '' || CAMBIOS == 0 || CAMBIOS == null)
            {
                $('#CAMBIOS').val('');
                //Actualizamos variable jsonData
                jsonData.CAMBIOS = CAMBIOS;
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            }

            $('#agregar_item').on('click', function() {
               agregar_item();
            });

            $(document).on('click', '.eliminar',function(e) {
                var el = $(this).parents('tr').eq(0);
                if(el.hasClass('item-formula')) {
                    eliminar_item($(this));
                } else {
                    eliminar_pregunta(el);
                }
            });

            setup_select2('#producto_id', "{{ url('formulas/select_productos') }}", 'Seleccionar producto');

            $('#producto_id').on('select2:select', function() {
                var nreguist = $(this).select2('data')[0].id;
                var nombre_prod = $(this).select2('data')[0].text;
                var precio_venta = $(this).select2('data')[0].precio_venta || 0;
                $('#precio_venta').val(precio_venta);
                jsonData.nreguist = nreguist;
                jsonData.nombre_producto = nombre_prod;
                jsonData.precio_venta = precio_venta;
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            });

            $('#observacion').on('keyup', function() {
                //Actualizamos variable jsonData
                jsonData.observacion = $(this).val();
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            });

            $('#volumen_formula').on('keyup', function() {
                //Actualizamos variable jsonData
                jsonData.volumen_formula = $(this).val();
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
                calcular_total_agua();
                calcular_total_x('densidad');
            });

            $('#LITROS').on('keyup', function() {
                //Actualizamos variable jsonData
                jsonData.LITROS = $(this).val();

                DENSIDAD             = $('#DENSIDAD').val();
                volumen_formula      = (($(this).val()/1000) * DENSIDAD);

                $('#volumen_formula').val(volumen_formula);
                //Almacena nombre producto en localStorage
                localStorage.setItem(storage_id, JSON.stringify(jsonData));
                calcular_total_agua();
                calcular_total_x('densidad');
            });

            $('#vida_util').on('keyup', function() {
                //Actualizamos variable jsonData
                jsonData.vida_util = $(this).val();
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            });

            $('#DENSIDAD').on('keyup', function() {
                //Actualizamos variable jsonData
                jsonData.DENSIDAD = $(this).val();

                //Actualizamos variable jsonData
                console.log(jsonData.materias_primas);
                if (jsonData.hasOwnProperty('materias_primas') && jsonData.materias_primas.length > 0) {
                    $.each(jsonData.materias_primas, function(i, v) {
                        if (jsonData.materias_primas[i].nombre != "{{ $agua->NOMBRE }}")
                        {
                            var id          = jsonData.materias_primas[i].id;
                            var densidad    = $('#DENSIDAD').val() || 0;
                            var volumen_lin = jsonData.materias_primas[i].volumen;
                            var peso        = parseFloat(volumen_lin) * parseFloat(densidad);
                            $('#PESO'+id).val(parseFloat(peso).toFixed(3));
                            $('#densidad'+id).val(parseFloat(densidad).toFixed(3));

                            calcular_total_x('densidad');
                            calcular_total_x('volumen');
                            //Actualizamos variable jsonData
                            jsonData.materias_primas[i].densidad = parseFloat(densidad).toFixed(3);
                            jsonData.materias_primas[i].peso     = parseFloat(peso).toFixed(3);
                            //Almacena nombre producto en localStorage
                            localStorage.setItem('formula', JSON.stringify(jsonData));
                        }
                    })
                }

                //Almacena nombre producto en localStorage
                localStorage.setItem(storage_id, JSON.stringify(jsonData));
            });

            $('#CAMBIOS').on('keyup', function() {
                //Actualizamos variable jsonData
                jsonData.CAMBIOS = $(this).val();
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            });

            $(document).on('click', '.mover-arriba', function() {
                moverArriba($(this).parents('tr').eq(0));
                if($(this).parents('tr').eq(0).hasClass('item-formula')) {
                    calcular_orden('.item-formula');
                } else {
                    calcular_orden('.item-pregunta');
                }
            });

            $(document).on('click', '.mover-abajo', function() {
                moverAbajo($(this).parents('tr').eq(0));
                if($(this).parents('tr').eq(0).hasClass('item-formula')) {
                    calcular_orden('.item-formula');
                } else {
                    calcular_orden('.item-pregunta');
                }
            });

            /* Rango Minimo */
            $(document).on('change', 'input[name*="rango_inf"]', function() {
                var rango_inf = $(this).val() || 0;
                //Actualizamos variable jsonData
                var id_mp = $(this).parents('tr').eq(0).data('index');
                var index_arr_mp = jsonData.preguntas_calidad.map(function(d) {return d['id']}).indexOf(id_mp);
                jsonData.preguntas_calidad[index_arr_mp].rango_inf = rango_inf;
                //Almacena nombre producto en localStorage
                localStorage.setItem(storage_id, JSON.stringify(jsonData));
                console.log(jsonData);
            });

            /* Rango Mayor */
            $(document).on('change', 'input[name*="rango_may"]', function() {
                var rango_may = $(this).val() || 0;
                //Actualizamos variable jsonData
                var id_mp = $(this).parents('tr').eq(0).data('index');
                var index_arr_mp = jsonData.preguntas_calidad.map(function(d) {return d['id']}).indexOf(id_mp);
                jsonData.preguntas_calidad[index_arr_mp].rango_may = rango_may;
                //Almacena nombre producto en localStorage
                localStorage.setItem(storage_id, JSON.stringify(jsonData));
                console.log(jsonData);
            });

            /* Opciones */
            $(document).on('change', 'input[name*="opciones"]', function() {
                var opciones = $(this).val() || 0;
                //Actualizamos variable jsonData
                var id_mp = $(this).parents('tr').eq(0).data('index');
                var index_arr_mp = jsonData.preguntas_calidad.map(function(d) {return d['id']}).indexOf(id_mp);
                jsonData.preguntas_calidad[index_arr_mp].opciones = opciones;
                //Almacena nombre producto en localStorage
                localStorage.setItem(storage_id, JSON.stringify(jsonData));
                console.log(jsonData);
            });

            /* Tipo de Pregunta */
            $("[id*='tipo_pregunta_']").on("change", function(){
                var tipo_pregunta = $(this).val() || 0;
                //Actualizamos variable jsonData
                var id_mp = $(this).parents('tr').eq(0).data('index');
                var index_arr_mp = jsonData.preguntas_calidad.map(function(d) {return d['id']}).indexOf(id_mp);
                jsonData.preguntas_calidad[index_arr_mp].tipo_pregunta = tipo_pregunta;

                /* Ve cual es el indice de la línea */			
                var itemString  = $(this).attr("name");
                var indice      = itemString.replace("tipo_pregunta_", "");
                
                /* Texto */
                if (tipo_pregunta == 1)
                {
                   $("#rango_inf_"+indice).val(0);
                   $("#rango_may_"+indice).val(0);
                   $("#opciones_"+indice).val('');

                   $("#rango_inf_"+indice).attr('disabled', true);
                   $("#rango_may_"+indice).attr('disabled', true);
                   $("#opciones_"+indice).attr('disabled',  true);
                }
                if (tipo_pregunta == 2)
                {
                   $("#opciones_"+indice).val('');
                   /* Rangos */
                   $("#rango_inf_"+indice).attr('disabled', false);
                   $("#rango_may_"+indice).attr('disabled', false);
                   $("#opciones_"+indice).attr('disabled',  true);
                }
                if (tipo_pregunta == 3)
                {
                   $("#rango_inf_"+indice).val(0);
                   $("#rango_may_"+indice).val(0);
                   /* Rangos */
                   $("#rango_inf_"+indice).attr('disabled', true);
                   $("#rango_may_"+indice).attr('disabled', true);
                   $("#opciones_"+indice).attr('disabled',  false);
                }

                //Almacena nombre producto en localStorage
                localStorage.setItem(storage_id, JSON.stringify(jsonData));
                console.log(jsonData);
            });

            $(document).on('change', 'input[name="densidad"]', function() {
                var densidad = $(this).val() || 0;
                var peso     = $(this).parents('tr').eq(0).find('input[name$=PESO]').eq(0).val() || 0;
                var volumen  = parseFloat((parseFloat(peso) / parseFloat(densidad))).toFixed(3);
                $(this).parents('tr').eq(0).find('input[name=volumen]').eq(0).val(parseFloat(volumen).toFixed(3));
                calcular_total_agua();
                calcular_total_x('densidad');
                calcular_total_x('volumen');
                calcular_costo($(this).parents('tr').eq(0));
                calcular_margen_formula();
                //Actualizamos variable jsonData
                var id_mp = $(this).parents('tr').eq(0).data('index');
                var index_arr_mp = jsonData.materias_primas.map(function(d) {return d['id']}).indexOf(id_mp);
                jsonData.materias_primas[index_arr_mp].densidad = densidad;
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            });

            $(document).on('keyup', 'input[name*="PESO"]', function() {
                var peso_lin    = $(this).val() || 0;
                var densidad    = $(this).parents('tr').eq(0).find('input[name=densidad]').eq(0).val() || 0;
                var volumen     = parseFloat((parseFloat(peso_lin) / parseFloat(densidad))).toFixed(3);
                $(this).parents('tr').eq(0).find('input[name*=volumen]').eq(0).val(parseFloat(volumen).toFixed(3))
                
                /* Ve cual es el indice de la línea */			
                var itemString  = $(this).attr("name");

                var codigo      = itemString.replace("PESO", "");
                
                var codArt      = $('#materia_prima_'+codigo).val();

                /* Calcula Saldos */
                var volumen_formula = $('#volumen_formula').val();
                var LITROS          = $('#LITROS').val() * 1000;

                var totalVolumen = 0;
                var totalPeso    = 0;                
                $('.item-formula').each(function(index, el) {
                    if ($(el).data('index') != 1) 
                    {
                        volumen2     = $(el).find('input[name*=volumen]').eq(0).val() || 0;
                        totalVolumen = totalVolumen + parseFloat(volumen2);

                        PESO         = $(el).find('input[name*=PESO]').eq(0).val() || 0;
                        totalPeso    = totalPeso + parseFloat(PESO);
                    }
                });

                /* Saldo excede al valor del volumen */
/*                if (totalVolumen > LITROS)
                {
                    $('#volumen'+codigo).val(0);
                    $('#PESO'+codigo).val(0);
                    mensaje     = {'content' : 'La suma de peso es mayor a '+LITROS, "type" : "error", "timeout" : 5000};
                    notification(mensaje, "big");
                }
*/
                /* Calculos */
                if ($(this).parents('tr').eq(0).data('index') != 1)
                calcular_total_agua();
                calcular_total_x('PESO');
                calcular_total_x('volumen');
                calcular_total_x('densidad');
                calcular_costo($(this).parents('tr').eq(0));
                calcular_margen_formula();

                //Actualizamos variable jsonData
                var id_mp        = $(this).parents('tr').eq(0).data('index');
                var index_arr_mp = jsonData.materias_primas.map(function(d) {return d['id']}).indexOf(id_mp);
                jsonData.materias_primas[index_arr_mp].peso     = parseFloat(peso_lin).toFixed(3);
                jsonData.materias_primas[index_arr_mp].densidad = densidad;
                jsonData.materias_primas[index_arr_mp].volumen  = volumen;

                console.log(jsonData.materias_primas);
                //Almacena nombre producto en localStorage
                localStorage.setItem(storage_id, JSON.stringify(jsonData));
            });

            $(document).on('change', 'input[name*="PESO"]', function() {
                var peso_lin    = $(this).val() || 0;
                var densidad    = $(this).parents('tr').eq(0).find('input[name=densidad]').eq(0).val() || 0;
                var volumen     = parseFloat((parseFloat(peso_lin) / parseFloat(densidad))).toFixed(3);

                $(this).parents('tr').eq(0).find('input[name*=volumen]').eq(0).val(parseFloat(volumen).toFixed(3))
                
                /* Ve cual es el indice de la línea */			
                var itemString  = $(this).attr("name");

                var codigo      = itemString.replace("PESO", "");
                
                var codArt      = $('#materia_prima_'+codigo).val();

                /* Calcula Saldos */
                var volumen_formula = $('#volumen_formula').val();
                var LITROS          = $('#LITROS').val() * 1000;
                
                var totalVolumen = 0;
                var totalPeso    = 0;
                var volumen2     = 0;
                $('.item-formula').each(function(index, el) {
                    if ($(el).data('index') != 1) 
                    {
                        volumen2     = $(el).find('input[name*=volumen]').eq(0).val() || 0;
                        totalVolumen = totalVolumen + parseFloat(volumen2);

                        PESO         = $(el).find('input[name*=PESO]').eq(0).val() || 0;
                        totalPeso    = totalPeso + parseFloat(PESO);
                    }
                });

                /* Calculos */
                if ($(this).parents('tr').eq(0).data('index') != 1)

                /* Saldo excede al valor del volumen */
                if (totalVolumen > LITROS)
                {
                    $('#volumen'+codigo).val(0);
                    $('#PESO'+codigo).val(0);
                    mensaje     = {'content' : 'La suma de volumen es mayor a '+LITROS, "type" : "error", "timeout" : 5000};
                    notification(mensaje, "big");
                }

                calcular_total_agua();
                calcular_total_x('PESO');
                calcular_total_x('volumen');
                calcular_total_x('densidad');
                calcular_costo($(this).parents('tr').eq(0));
                calcular_margen_formula();

                //Actualizamos variable jsonData
                var id_mp        = $(this).parents('tr').eq(0).data('index');
                var index_arr_mp = jsonData.materias_primas.map(function(d) {return d['id']}).indexOf(id_mp);
                jsonData.materias_primas[index_arr_mp].peso     = parseFloat(peso_lin).toFixed(3);
                jsonData.materias_primas[index_arr_mp].densidad = densidad;
                jsonData.materias_primas[index_arr_mp].volumen  = volumen;

                //Almacena nombre producto en localStorage
                localStorage.setItem(storage_id, JSON.stringify(jsonData));
            });


            $(document).on('change', 'input[name="costo_unidad"]', function() {
                var costo_unidad = $(this).val() || 0;
                var peso = $(this).parents('tr').eq(0).find('input[name=peso]').eq(0).val() || 0;
                var costo = costo_unidad * peso;
                $(this).parents('tr').eq(0).find('input[name=costo]').eq(0).val(parseFloat(costo).toFixed(3));
                calcular_total_x('costo');
                calcular_margen_formula();
            });


            $(document).on('keyup', 'input[name*="volumen"]', function() {
               var volumen_lin = $(this).val() || 0;

               var densidad    = $(this).parents('tr').eq(0).find('input[name=densidad]').eq(0).val() || 0;

               var peso        = parseFloat((parseFloat(volumen_lin) * parseFloat(densidad))).toFixed(3);

               $(this).parents('tr').eq(0).find('input[name$=PESO]').eq(0).val(parseFloat(peso).toFixed(3))

               /* Ve cual es el indice de la línea */			
               var itemString  = $(this).attr("name");
               var codigo      = itemString.replace("volumen", "");

               var codArt      = $('#materia_prima_'+codigo).val();

               /* Calcula Saldos */
               var volumen_formula = $('#volumen_formula').val();
               var LITROS          = $('#LITROS').val();

               var totalVolumen = 0;
               $('.item-formula').each(function(index, el) {
                   if ($(el).data('index') != 1) 
                   {
                       volumen = $(el).find('input[name*=volumen]').eq(0).val() || 0;
                       totalVolumen = totalVolumen + parseFloat(volumen);
                   }
               });

               /* Saldo excede al valor del volumen */
               if (totalVolumen > LITROS)
               {
                   $('#volumen'+codigo).val(0);
                   mensaje     = {'content' : 'La suma de volumen es mayor a '+LITROS, "type" : "error", "timeout" : 5000};
                   notification(mensaje, "big");
               }

               /* Calculos */
               if ($(this).parents('tr').eq(0).data('index') != 1)
               calcular_total_agua();
               calcular_total_x('PESO');
               calcular_total_x('volumen');
               calcular_total_x('densidad');
               calcular_costo($(this).parents('tr').eq(0));
               calcular_margen_formula();

               //Actualizamos variable jsonData
               var id_mp        = $(this).parents('tr').eq(0).data('index');
               var index_arr_mp = jsonData.materias_primas.map(function(d) {return d['id']}).indexOf(id_mp);
               jsonData.materias_primas[index_arr_mp].peso     = parseFloat(peso).toFixed(3);
               jsonData.materias_primas[index_arr_mp].densidad = densidad;
               jsonData.materias_primas[index_arr_mp].volumen  = volumen_lin;

               //Almacena nombre producto en localStorage
               localStorage.setItem(storage_id, JSON.stringify(jsonData));

               console.log(jsonData.materias_primas);
            });

            $(document).on('select2:select', 'select[name$="MATERIA_PRIMA"]', function() {
                var costo = $(this).select2('data')[0].costo || 0;
                var densidad = $(this).select2('data')[0].densidad || 0;            
                $(this).parents('tr').eq(0).find('input[name=costo_unidad]').eq(0).val(parseFloat(costo)).trigger('change');
                $(this).parents('tr').eq(0).find('input[name=densidad]').eq(0).val(parseFloat(densidad)).trigger('change');
                //Actualizamos variable jsonData
                var id_mp = $(this).parents('tr').eq(0).data('index');
                var index_arr_mp = jsonData.materias_primas.map(function(d) {return d['id']}).indexOf(id_mp);
                jsonData.materias_primas[index_arr_mp].nombre = $(this).select2('data')[0].text;
                jsonData.materias_primas[index_arr_mp].nreguist = $(this).select2('data')[0].id;
                jsonData.materias_primas[index_arr_mp].costo_unidad = costo;
                jsonData.materias_primas[index_arr_mp].densidad = densidad;
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
                $(this).html('');
            });

            $('#btn_agregar_pregunta').on('click', function() {
                agregar_pregunta();
            });

            $(document).on('keyup', 'input[name^="PREGUNTA"]', function() {
                var pregunta = $(this).val();
                //Actualizamos variable jsonData
                var id_mp = $(this).parents('tr').eq(0).data('index');
                var index_arr_mp = jsonData.preguntas_calidad.map(function(d) {return d['id']}).indexOf(id_mp);
                jsonData.preguntas_calidad[index_arr_mp].pregunta = pregunta;
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            });

            $('#limpiar_formula').on('click', function() {
                localStorage.removeItem('formula');
                window.location = "{{ url('formulas') }}";
            });

            $('#form_guardar').on('submit', function() {
                clean_form_errors($('#formulario'));
                $.post("{{ url('formulas/agregar') }}", {data: JSON.stringify(jsonData)}, function(response) {
                    jsonData = {};
                    localStorage.removeItem('formula');
                    success_notification(response);
                    window.location = "{{ url('formulas') }}/" + response.message.id;
                }, 'json').fail(function(response) {
                    if(response.status != 409) {
                        show_form_errors(response, $('#formulario'));
                        if($('#datos_formula').find('.has-error').length > 0) $('a[href="#datos_formula"]').tab('show');
                        else if($('#instrucciones_fabricacion').find('.has-error').length > 0) $('a[href="#instrucciones_fabricacion"]').tab('show');
                        else if($('#control_calidad').find('.has-error').length > 0) $('a[href="#control_calidad"]').tab('show');
                    } else {
                        error_notification(response);
                    }
                });
                return false;
            });
        });

        //Retorna la cantidad de filas en tabla
        function cantidad_items(nom_item) {
            return $(nom_item).length
        }
        //Retorna el siguiente indice para la creacion de una nueva fila en la tabla
        function next_index(nom_item) {
            var cant = cantidad_items(nom_item);
            if(cant == 0) return 1;
            return $(nom_item).map(function(){return $(this).data('index');}).get().sort(function(a, b){return b-a})[0] + 1;
        }
        //Agrega una nueva fila en la tabla materias primas
        function agregar_item() {
            var order = cantidad_items('.item-formula') + 1;
            var index = next_index('.item-formula');
            var id_item = 'item-' + index;
            var densidad = $('#DENSIDAD').val() || 0;

            var template = '<tr id="' + id_item  + '" class="item-formula" data-index="' + index + '">'+
                    '<td><input class="form-control" name="orden" type="text" value="' + order + '" disabled></td>'+
                    '<td><select id="materia_prima_' + index + '" name="MATERIA_PRIMA.' + index + '.NREGUIST_MATERIA_PRIMA"></select></td>'+
                    '<td><input class="form-control" name="densidad" id="densidad' + index + '" type="text" value="'+densidad+'" disabled></td>'+
                    '<td><input class="form-control" name="PESO' + index + '" id="PESO' + index + '" type="text" value="0"></td>'+
                    '<td><input class="form-control" name="volumen' + index + '" id="volumen' + index + '" type="text" value="0" disabled></td>'+
                    '<td style="display: none;"><input type="hidden" name="costo_unidad" value="0"><input class="form-control" name="costo" type="text" value="0" disabled></td>'+
                    '<td>' +
                    '<button class="btn btn-danger eliminar" type="button"><i class="fa fa-trash"></i></button>&nbsp;' +
                    '<button class="btn btn-warning mover-arriba" type="button"><i class="fa fa-arrow-up"></i></button>&nbsp;' +
                    '<button class="btn btn-warning mover-abajo" type="button"><i class="fa fa-arrow-down"></i></button>' +
                    '</td>'+
                    '</tr>';
            $('#sin-items').addClass('hide');
            $(template).appendTo('#contenido_formula');

            setup_select2('#materia_prima_' + index, "{{  url('formulas/select_materias_primas') }}", 'Buscar materia prima');
            //Actualizamos variable jsonData
            if(jsonData.hasOwnProperty('materias_primas') == false) {
                jsonData.materias_primas = [];
            }

            jsonData.materias_primas.push({
                id: index,
                orden: order,
                densidad: densidad,
                peso:0
            });
            //Almacena nombre producto en localStorage
            localStorage.setItem('formula', JSON.stringify(jsonData));
        }
        //Agrega una nueva fila en la tabla desde jsonData
        function agregar_item_jsonData(mp) {
            var id           = mp.id;
            var id_item      = 'item-' + id;
            var orden        = mp.orden;
            var nombre       = mp.hasOwnProperty('nombre')?mp.nombre:'';
            var nreguist     = mp.hasOwnProperty('nreguist')?mp.nreguist:'';
            var densidad     = mp.hasOwnProperty('densidad')?mp.densidad:1;
            var peso         = mp.hasOwnProperty('peso')?mp.peso:0;
            var costo_unidad = mp.hasOwnProperty('costo_unidad')?mp.costo_unidad:0;
            var volumen      = parseFloat(peso) / parseFloat(densidad);
            var costo        = volumen * costo_unidad;

            var template     = '<tr id="' + id_item  + '" class="item-formula" data-index="' + id + '">'+
                    '<td><input class="form-control" name="orden" type="text" value="' + orden + '" disabled></td>'+
                    '<td><select id="materia_prima_' + id + '" name="MATERIA_PRIMA.' + id + '.NREGUIST_MATERIA_PRIMA"></select></td>'+
                    '<td><input class="form-control" name="densidad" id="densidad' + id + '" type="text" value="' + parseFloat(densidad).toFixed(3) + '" disabled></td>'+
                    '<td><input class="form-control" name="PESO' + id + '" id="PESO' + id + '" type="text" value="' + peso + '"></td>'+
                    '<td><input class="form-control" name="volumen' + id + '" id="volumen' + id + '" type="text" value=' + volumen + ' disabled></td>'+
                    '<td style="display: none;"><input type="hidden" name="costo_unidad" value="' + costo_unidad + '"><input class="form-control" name="costo" type="text" value="' + parseFloat(costo).toFixed(3) + '" disabled></td>'+
                    '<td>' +
                    '<button class="btn btn-danger eliminar" type="button"><i class="fa fa-trash"></i></button>&nbsp;' +
                    '<button class="btn btn-warning mover-arriba" type="button"><i class="fa fa-arrow-up"></i></button>&nbsp;' +
                    '<button class="btn btn-warning mover-abajo" type="button"><i class="fa fa-arrow-down"></i></button>' +
                    '</td>'+
                    '</tr>';
            $('#sin-items').addClass('hide');
            $(template).appendTo('#contenido_formula');
            setup_select2('#materia_prima_' + id, "{{  url('formulas/select_materias_primas') }}", 'Buscar materia prima');
            if(nombre != '') {
                $('#materia_prima_' + id).html('<option value="' + nreguist + '">' + nombre + '</option>').trigger('change');
            }

        }

        //Elimina fila de la tabla
        function eliminar_item(el) {
            var cant_items = cantidad_items('.item-formula') - 1;
            var id_mp = $(el).parents('tr').eq(0).data('index');
            var index_arr_mp = jsonData.materias_primas.map(function(d) {return d['id']}).indexOf(id_mp);
            jsonData.materias_primas.splice(index_arr_mp, 1);
            el.parents('tr').eq(0).remove();
            if(cant_items == 0) {
                $('#sin-items').removeClass('hide');
                delete jsonData.materias_primas;
            }
            localStorage.setItem('formula', JSON.stringify(jsonData));
            calcular_orden('.item-formula');
            calcular_total_agua();
            calcular_total_x('densidad');
            calcular_total_x('PESO');
            calcular_total_x('volumen');
            calcular_total_x('costo');
            calcular_margen_formula();
        }
        //recalcula el orden de cada fila
        function calcular_orden(nom_item) {
            var orden = 1;
            $(nom_item).each(function(index, el) {
                $(el).find('input[name=orden]').eq(0).val(orden);
                if(nom_item == '.item-formula') {
                    var index_arr_mp = jsonData.materias_primas.map(function(d) {return d['id']}).indexOf($(el).data('index'));
                    jsonData.materias_primas[index_arr_mp].orden = orden;
                } else if(nom_item == '.item-pregunta') {
                    var index_arr_mp = jsonData.preguntas_calidad.map(function(d) {return d['id']}).indexOf($(el).data('index'));
                    jsonData.preguntas_calidad[index_arr_mp].orden = orden;
                }
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
                orden = orden + 1;
            });
        }
        //calcula campo costo de un item de la formula especifico
        function calcular_costo(elem) {
            var volumen = elem.find('input[name=volumen]').eq(0).val() || 0;
            var costo_unidad = elem.find('input[name=costo_unidad]').eq(0).val() || 0;
            var costo = costo_unidad * volumen;
            elem.find('input[name=costo]').eq(0).val(parseFloat(costo).toFixed(3));
            calcular_total_x('costo');
        }
        //recalcula el orden de cada fila
        function calcular_total_x(nombre) {
            var cont = 0;
            var volumen_formula = $('#volumen_formula').val() || 0;
            var totVolumen      = 0;
            $('.item-formula').each(function(index, el) {
                if(nombre == 'densidad') {
                    volumen    = $(el).find('input[name*=volumen]').eq(0).val() || 0;
                    densidad   = $(el).find('input[name*=densidad]').eq(0).val() || 0;
                    value      = volumen * densidad;
                    cont       = cont + parseFloat(value);
                    totVolumen = totVolumen + parseFloat(volumen);
                } else {
                    value = $(el).find('input[name*=' + nombre + ']').eq(0).val() || 0;
                    cont = cont + parseFloat(value);
                }
            });
            if(nombre == 'densidad') 
            {
                cont = volumen_formula != 0 ? volumen_formula / totVolumen : 0;

                $('#DENSIDAD').val(parseFloat(cont).toFixed(3));
                jsonData.DENSIDAD = parseFloat(cont).toFixed(3);
            }

            $('#total_' + nombre).html(parseFloat(cont).toFixed(3));

            /* Peso Total */
            if(nombre == 'PESO') 
            {
                $('#volumen_formula').val(parseFloat(cont).toFixed(3));
                jsonData.volumen_formula = parseFloat(cont).toFixed(3);
            }
            cont       = parseFloat( cont ).toFixed(3);

            return cont;
        }
        //calcular total agua
        function calcular_total_agua() {
            if (jsonData.volumen_formula == 0 || jsonData.volumen_formula == null || jsonData.volumen_formula == '')
            {
                jsonData.volumen_formula = 1000;
            }

            volumen_formula = $('#LITROS').val() * 1000;
            if (volumen_formula == '' || volumen_formula == null || volumen_formula == 0)
            {
                volumen_formula  = 1000;
            }

            @if(!empty($agua))
                var cont    = 0;
                var LITROS  = jsonData.LITROS; //$('#volumen_formula').val();

                $('.item-formula').each(function(index, el) {
                    var indx    = index + 1;
                    if($(el).data('index') != 1) {
                        volumen = $('#volumen'+indx).val();
                        if (volumen  == '' || volumen == null)
                        {
                            volumen  = 0;
                        }
                        cont       = cont + parseFloat(volumen);
                    }
                });
                volumen_agua = volumen_formula - cont;
                $('#item-1').find('input[name="volumen1"]').val(volumen_agua);
                $('#item-1').find('input[name="PESO1"]').val(volumen_agua).trigger('keyup');
            @endif
        }
        //calcular margen
        function calcular_margen_formula() {
            var precio_venta_total = $('#precio_venta').val() * calcular_total_x('PESO');
            var costo_total = calcular_total_x('costo');
            var margen_total = precio_venta_total - costo_total;
            $('#precio_total_formula').html(currency(precio_venta_total.toString()));
            $('#costo_total_formula').html(currency(costo_total.toString()));
            $('#margen_total_formula').html(currency(margen_total.toString()));
        }
        //permite mantener el tamaño de una fila al momento de moverla (sortable)
        function fixWidthHelper(e, ui) {
            ui.children().each(function() {
                $(this).width($(this).width());
            });
            return ui;
        }
        //desplaza hacia arriba una fila
        function moverArriba(el) {
            var usa_agua = {{ !empty($agua) ? 'true' : 'false' }};
            if(el.prev()) {
                if(el.prev().data('index') != 1)
                    el.insertBefore(el.prev());
                else if(!usa_agua)
                    el.insertBefore(el.prev());
            }
        }
        //desplaza hacia abajo una fila
        function moverAbajo(el) {
            if(el.next()) {
                el.insertAfter(el.next());
            }
        }
        //pobla los campos desde jsonData en caso de que hayan datos guardados en localStorage
        function poblar_formula(data) {
            if(!$.isEmptyObject(data)) {
                if(data.hasOwnProperty('nombre_producto')) {
                    var option = '<option value="' + data.nreguist + '">' + data.nombre_producto + '</option>';
                    $('#producto_id').html(option).trigger('change');
                }
                if(data.hasOwnProperty('precio_venta')) {
                    $('#precio_venta').val(data.precio_venta);
                }
                if(data.hasOwnProperty('observacion')) {
                    $('#observacion').val(data.observacion);
                }
                if(data.hasOwnProperty('volumen')) {
                    $('#volumen_formula').val(data.volumen);
                }
                if(data.hasOwnProperty('DENSIDAD')) {
                    $('#DENSIDAD').val(data.DENSIDAD);
                }
                if(data.hasOwnProperty('CAMBIOS')) {
                    $('#CAMBIOS').val(data.CAMBIOS);
                }
                if(data.hasOwnProperty('vida_util')) {
                    $('#vida_util').val(data.vida_util);
                }
                if(data.hasOwnProperty('materias_primas') && data.materias_primas.length > 0) {
                    data.materias_primas.sort(function (a, b) {
                        return a.orden - b.orden;
                    });
                    $.each(data.materias_primas, function(i, v) {
                        agregar_item_jsonData(v);
                    })
                }
                if(data.hasOwnProperty('preguntas_calidad') && data.preguntas_calidad.length > 0) {
                    data.preguntas_calidad.sort(function (a, b) {
                        return a.orden - b.orden;
                    });
                    $.each(data.preguntas_calidad, function(i, v) {
                        agregar_pregunta_jsonData(v);
                    })
                }
                @if(!empty($agua))
                $('#item-1 input').attr('disabled', true);
                $('#item-1 button').remove();
                $('#materia_prima_1').prop('disabled', true);
                $('#item-1').find('.select2-selection').css('background-color', '#eee');
                @endif
                calcular_total_agua();
                calcular_total_x('densidad');
                calcular_total_x('PESO');
                calcular_total_x('volumen');
                calcular_total_x('costo');
                calcular_margen_formula();
            }
        }

        // Seleccionar Pregunta
        function SelectChangedPregunta(index, valor) {
             var tipo_pregunta = $("#tipo_pregunta_"+index).val();

             /* Ve cual es el indice de la línea */			
             var indice      = jsonData.preguntas_calidad.map(function(d) {return d['id']}).indexOf(index);
             //Actualizamos variable jsonData
             jsonData.preguntas_calidad[indice].tipo_pregunta = tipo_pregunta;

             /* Texto */
             if (tipo_pregunta == 1)
             {
                   $("#rango_inf_"+index).val(0);
                   $("#rango_may_"+index).val(0);
                   $("#opciones_"+index).val('');

                   $("#rango_inf_"+index).attr('disabled', true);
                   $("#rango_may_"+index).attr('disabled', true);
                   $("#opciones_"+index).attr('disabled',  true);
             }
             if (tipo_pregunta == 2)
             {
                   $("#opciones_"+index).val('');
                   /* Rangos */
                   $("#rango_inf_"+index).attr('disabled', false);
                   $("#rango_may_"+index).attr('disabled', false);
                   $("#opciones_"+index).attr('disabled',  true);
             }
             if (tipo_pregunta == 3)
             {
                   $("#rango_inf_"+index).val(0);
                   $("#rango_may_"+index).val(0);
                   /* Rangos */
                   $("#rango_inf_"+index).attr('disabled', true);
                   $("#rango_may_"+index).attr('disabled', true);
                   $("#opciones_"+index).attr('disabled',  false);
             }

             //Almacena nombre producto en localStorage
             localStorage.setItem(storage_id, JSON.stringify(jsonData));
             console.log(jsonData);
        }

        //Agrega una nueva fila en la tabla preguntas control calidad
        function agregar_pregunta() {
            var order    = cantidad_items('.item-pregunta') + 1;
            var index    = next_index('.item-pregunta');
            var id_item  = 'item-pregunta-' + index;
            var template = '<tr id="' + id_item  + '" class="item-pregunta" data-index="' + index + '">'+
                    '<td><input class="form-control"              name = "orden" type="text" value="'   + order + '" disabled></td>' +
                    '<td><input class="form-control"              name = "PREGUNTA.'      + index + '" type="text"></td>' +
                    '<td><select id="tipo_pregunta_' + index + '" name = "tipo_pregunta_' + index + '" class="form-control" onchange="SelectChangedPregunta('+index+', '+this.value+');" ><option value="1" selected>Texto</option><option value="2">Por rangos</option><option value="3">Texto Opción</option></select></td>' +
                    '<td><input type="text" class="form-control"  name = "rango_inf_'     + index + '" id = "rango_inf_'  + index  + '" value="0" disabled></td>' +
                    '<td><input type="text" class="form-control"  name = "rango_may_'     + index + '" id = "rango_may_'  + index  + '" value="0" disabled></td>' +
                    '<td><input class="form-control" name="opciones_' + index + '" id="opciones_' + index + '" type="text" value=""></td>' +
                    '<td>'  +
                    '<button class="btn btn-danger eliminar"      type="button"><i class="fa fa-trash"></i></button>&nbsp;' +
                    '<button class="btn btn-warning mover-arriba" type="button"><i class="fa fa-arrow-up"></i></button>&nbsp;' +
                    '<button class="btn btn-warning mover-abajo"  type="button"><i class="fa fa-arrow-down"></i></button>' +
                    '</td>' +
                    '</tr>';

            //Actualizamos variable jsonData
            if (jsonData.hasOwnProperty('preguntas_calidad') == false) {
                jsonData.preguntas_calidad = [];
            }

            jsonData.preguntas_calidad.push({
                id:            index,
                orden:         order,
                pregunta:      '',
                tipo_pregunta: "1",
                rango_inf:     0,
                rango_may:     0,
                opciones:      '',
            });

            //Almacena nombre producto en localStorage
            localStorage.setItem('formula', JSON.stringify(jsonData));

            $('#sin_preguntas').addClass('hide');

            $(template).appendTo('#preguntas_calidad');

        }

        //Agrega una nueva pregunta en la tabla desde jsonData
        function agregar_pregunta_jsonData(mp) {
            var id             = mp.id;
            var id_item        = 'item-pregunta-' + id;
            var orden          = mp.orden;
            var pregunta       = mp.hasOwnProperty('pregunta')?mp.pregunta:'';

            var tipo_pregunta  = mp.tipo_pregunta;
            var rango_inf      = mp.rango_inf;
            var rango_may      = mp.rango_may;
            var opciones       = mp.opciones;

            var valor1         = '';
            var valor2         = '';
            var valor3         = '';
            var disab1         = '';
            var disab2         = '';

            if (tipo_pregunta == 1)
            {
               var valor1      = 'selected';
               var valor2      = '';
               var valor3      = '';
               var rango_inf   = 0;
               var rango_may   = 0;
               var disab1      = 'disabled';
               var disab2      = 'disabled';
            }
            if (tipo_pregunta == 2)
            {
               var valor1      = '';
               var valor2      = 'selected';
               var valor3      = '';
               var disab1      = '';
               var disab2      = 'disabled';

            }
            if (tipo_pregunta == 3)
            {
               var valor1      = '';
               var valor2      = '';
               var valor3      = 'selected';
               var rango_inf   = 0;
               var rango_may   = 0;
               var valor2      = '';
               var disab1      = 'disabled';
               var disab2      = '';
            }

            var template = '<tr id="' + id_item  + '" class="item-pregunta" data-index="' + id + '">'+
                    '<td><input class="form-control" name="orden" type="text" value="' + orden + '" disabled></td>'+
                    '<td><input class="form-control" name="PREGUNTA.' + id + '" type="text" value="' + pregunta + '"></td>'+
                    '<td><select id="tipo_pregunta_' + id + '" name="tipo_pregunta_' + id + '" class="form-control" onchange="SelectChangedPregunta('+id+', '+this.value+');" ><option value="1" '+valor1+'>Texto</option><option value="2" '+valor2+'>Por rangos</option><option value="3" '+valor3+'>Texto Opción</option></select></td>' +
                    '<td><input type="text" class="form-control" name="rango_inf_' + id + '" id="rango_inf_' + id + '" value="'+rango_inf+'" '+disab1+'></td>'+
                    '<td><input type="text" class="form-control" name="rango_may_' + id + '" id="rango_may_' + id + '" value="'+rango_may+'" '+disab1+'></td>'+
                    '<td><input class="form-control" name="opciones_' + id + '" id="opciones_' + id + '" type="text" '+disab2+' value="'+opciones+'"></td>' +
                    '<td>' +
                    '<button class="btn btn-danger eliminar" type="button"><i class="fa fa-trash"></i></button>&nbsp;' +
                    '<button class="btn btn-warning mover-arriba" type="button"><i class="fa fa-arrow-up"></i></button>&nbsp;' +
                    '<button class="btn btn-warning mover-abajo" type="button"><i class="fa fa-arrow-down"></i></button>' +
                    '</td>'+
                    '</tr>';
            $('#sin_preguntas').addClass('hide');
            $(template).appendTo('#preguntas_calidad');
        }
        //Elimina pregunta
        function eliminar_pregunta(el) {
            var cant_items = cantidad_items('.item-pregunta') - 1;
            var id_mp = el.data('index');
            var index_arr_mp = jsonData.preguntas_calidad.map(function(d) {return d['id']}).indexOf(id_mp);
            jsonData.preguntas_calidad.splice(index_arr_mp, 1);
            el.remove();
            if(cant_items == 0) {
                $('#sin_preguntas').removeClass('hide');
                delete jsonData.preguntas_calidad;
            }
            localStorage.setItem('formula', JSON.stringify(jsonData));
            calcular_orden('.item-pregunta');
        }
    </script>
@endsection

@section('content')
<div class="col-sm-12 col-md-12 col-lg-12">
        <!-- product -->
        <div id="formulario" class="product-content product-wrap clearfix product-deatil">
            <div class="col-sm-12">
                <h1 class="page-title">
                    Editar Fórmula
                </h1>
            </div>
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#datos_formula" aria-controls="datos_formula" role="tab" data-toggle="tab">Datos Fórmula</a>
                </li>
                <li role="presentation" class="">
                    <a href="#instrucciones_fabricacion" aria-controls="instrucciones_fabricacion" role="tab" data-toggle="tab">Instrucciones Fabricación</a>
                </li>
                <li role="presentation" class="">
                    <a href="#control_calidad" aria-controls="control_calidad" role="tab" data-toggle="tab">Parámetros Control de Calidad</a>
                </li>
<!--
                <li role="presentation" style="display: none;" class="">
                    <a href="#margen_ganancia" aria-controls="margen_ganancia" role="tab" data-toggle="tab">Margen de Ganancia</a>
                </li>
    -->
            </ul>
            <br><br>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="datos_formula">
                    <div class="row">
                        <div class="col-md-4">
                            <div id="select_producto" class="row">
                                <div class="form-group col-sm-12">
                                    <label for="producto_id" class="control-label">Nombre del Producto</label>
                                    {{ Form::select('NREGUIST_PROD_TERMINADO', [], NULL, ['id' => 'producto_id', 'class' => 'form-control']) }}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="" class="control-label">Volumen (Lts)</label>
                                {{ Form::text('LITROS', NULL, ['id' => 'LITROS', 'class' => 'form-control']) }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="" class="control-label">Peso (grs)</label>
                                {{ Form::text('VOLUMEN', NULL, ['id' => 'volumen_formula', 'class' => 'form-control', 'readonly' => 'true']) }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="" class="control-label">Vida útil (días)</label>
                                {{ Form::text('VIDA_UTIL', NULL, ['id' => 'vida_util', 'class' => 'form-control']) }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="" class="control-label">Densidad</label>
                                {{ Form::text('DENSIDAD', NULL, ['id' => 'DENSIDAD', 'class' => 'form-control', 'readonly'=>true]) }}
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="" class="control-label">Cambios en Formula:</label>
                                {{ Form::textarea('CAMBIOS', NULL, ['id' => 'CAMBIOS', 'class' => 'form-control', 'rows' => 3, 'cols' => 50]) }}
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <button id="agregar_item" class="btn btn-primary"><i class="fa fa-plus"></i> Agregar Materia Prima</button>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="col-sm-1">Orden</th>
                                    <th class="col-sm-6">Materia Prima</th>
                                    <th class="col-sm-1">Densidad</th>
                                    <th class="col-sm-1">Peso (Grs)</th>
                                    <th class="col-sm-1">Volumen (cc)</th>
                                    <th class="col-sm-1" style='display: none;'>Costo</th>
                                    <th class="col-sm-2">Opciones</th>
                                </tr>
                            </thead>
                            <tbody id="contenido_formula">
                                <tr id="sin-items">
                                    <td colspan="7" class="text-align-center">No hay registros</td>
                                </tr>
                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="2">Totales</td>
                                <td id="total_densidad">0</td>
                                <td id="total_PESO">0</td>
                                <td id="total_volumen">0</td>
                                <td id="total_costo" style='display: none;'>0</td>
                                <td></td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
                <div class="tab-pane" id="instrucciones_fabricacion" role="tabpanel">
                    <div class="form-group">
                        <label for="observacion" class="control-label">Ingresar Instrucciones</label>
                        {{  Form::textarea('OBSERVACION', NULL, ['id' => 'observacion', 'class' => 'form-control', 'rows' => 15]) }}
                    </div>
                </div>
                <div class="tab-pane" id="control_calidad" role="tabpanel">
                    <div class="row">
                        <div class="col-sm-12">
                            <button id="btn_agregar_pregunta" class="btn btn-primary"><i class="fa fa-plus"></i>Agregar Pregunta</button>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                            <tr>
                                <th class="col-sm-1">Orden</th>
                                <th class="col-sm-3">Pregunta</th>
                                <th class="col-sm-2">Tipo Pregunta</th>
                                <th class="col-sm-1">Rango Inf</th>
                                <th class="col-sm-1">Rango May</th>
                                <th class="col-sm-2">Opciones</th>
                            </tr>
                            </thead>
                            <tbody id="preguntas_calidad">
                            <tr>
                                <td id="sin_preguntas" colspan="3" class="text-center">Sin Preguntas</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="tab-pane" id="margen_ganancia" role="tabpanel">
                    <table class="table">
                        <thead>
                        <tr>
                            <th>Precio Total Venta Fórmula</th>
                            <th>Costo Total Fórmula</th>
                            <th>Margen Total de Ganancia</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td id="precio_total_formula"></td>
                            <td id="costo_total_formula"></td>
                            <td id="margen_total_formula"></td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <br>
            <div class="row pull-right">
                <div class="col-sm-12">
                    <form id="form_guardar">
                        <button type="submit" class="btn btn-success">Guardar</button>
                        <button type="button" class="btn btn-danger" id="limpiar_formula">Cancelar</button>
                    </form>
                </div>
            </div>
        </div>
        <!-- end product -->
    </div>

@endsection