@extends('layouts.default')

@section('scripts')
    <script>
        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: "{{ $agua->DENSIDAD }}",
                        id: 1,
                        nombre: "{{ $agua->NOMBRE }}",
                        nreguist: "{{ $agua->NREGUIST }}",
                        orden: 1,
                        peso: "0"
                    }
                ]
            }
            //Almacena nombre producto en localStorage
            localStorage.setItem('formula', JSON.stringify(jsonData));
        }
        @endif

        poblar_formula(jsonData);

        $(document).ready(function(){
            $('#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 = $(this).val();
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', 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));
            });

            $(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');
                }
            });

            $(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(peso) / parseFloat(densidad);
                $(this).parents('tr').eq(0).find('input[name=volumen]').eq(0).val(parseFloat(volumen).toFixed(2));
                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 = $(this).val() || 0;
                var densidad = $(this).parents('tr').eq(0).find('input[name=densidad]').eq(0).val() || 0;
                var volumen = parseFloat(peso) / parseFloat(densidad);
                $(this).parents('tr').eq(0).find('input[name=volumen]').eq(0).val(parseFloat(volumen).toFixed(2));
                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 = peso;
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', 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(2));
                calcular_total_x('costo');
                calcular_margen_formula();
            });

            $(document).on('keyup', 'input[name="volumen"]', function() {
                var volumen = $(this).val() || 0;
                var densidad = $(this).parents('tr').eq(0).find('input[name=densidad]').eq(0).val() || 0;
                var peso = parseFloat(volumen) * parseFloat(densidad);
                $(this).parents('tr').eq(0).find('input[name$=PESO]').eq(0).val(parseFloat(peso).toFixed(2))
                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(2);
                //Almacena nombre producto en localStorage
                localStorage.setItem('formula', JSON.stringify(jsonData));
            });

            $(document).on('select2:select', 'select[name$="MATERIA_PRIMA"]', function() {
                var costo = $(this).select2('data')[0].costo || 0;
                var densidad = $(this).select2('data')[0].densidad || 1;
                $(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 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" type="text" value="1" disabled></td>'+
                    '<td><input class="form-control" name="MATERIA_PRIMA.' + index + '.PESO" type="text" value="0"></td>'+
                    '<td><input class="form-control" name="volumen" type="text" value="0"></td>'+
                    '<td><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: 1,
                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" type="text" value="' + parseFloat(densidad) + '" disabled></td>'+
                    '<td><input class="form-control" name="MATERIA_PRIMA.' + id + '.PESO" type="text" value="' + peso + '"></td>'+
                    '<td><input class="form-control" name="volumen" type="text" value="' + volumen + '"></td>'+
                    '<td><input type="hidden" name="costo_unidad" value="' + costo_unidad + '"><input class="form-control" name="costo" type="text" value="' + parseFloat(costo).toFixed(2) + '" 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(2));
            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;
            $('.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);
                } else {
                    value = $(el).find('input[name$=' + nombre + ']').eq(0).val() || 0;
                    cont = cont + parseFloat(value);
                }
            });
            if(nombre == 'densidad') cont = volumen_formula != 0 ? cont / volumen_formula : 0;
            $('#total_' + nombre).html(cont);
            return cont;
        }
        //calcular total agua
        function calcular_total_agua() {
            @if(!empty($agua))
            var cont = 0;
            var volumen_formula = $('#volumen_formula').val() || 0;
            $('.item-formula').each(function(index, el) {
                if(index != 0) {
                    volumen = $(el).find('input[name=volumen]').eq(0).val() || 0;
                    cont = cont + parseFloat(volumen);
                }
            });
            volumen_agua = volumen_formula - cont;
            $('#item-1').find('input[name="volumen"]').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('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();
            }
        }
        //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 type="text" class="form-control" name="PREGUNTA.' + index + '"></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');
            //Actualizamos variable jsonData
            if(jsonData.hasOwnProperty('preguntas_calidad') == false) {
                jsonData.preguntas_calidad = [];
            }
            jsonData.preguntas_calidad.push({
                id: index,
                orden: order,
                pregunta: ''
            });
            //Almacena nombre producto en localStorage
            localStorage.setItem('formula', JSON.stringify(jsonData));
        }
        //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 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>' +
                    '<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">
                    Agregar 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">Preguntas Control de Calidad</a>
                </li>
                <li role="presentation" 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-3">
                            <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-3">
                            <div class="form-group">
                                <label for="" class="control-label">Volumen (Lts)</label>
                                {{ Form::text('VOLUMEN', NULL, ['id' => 'volumen_formula', 'class' => 'form-control']) }}
                            </div>
                        </div>
                        <div class="col-md-3">
                            <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-3">
                            <div class="form-group">
                                <label for="" class="control-label">Precio Venta Unidad</label>
                                {{ Form::text('PRECVTA', NULL, ['id' => 'precio_venta', 'class' => 'form-control', 'disabled' => true]) }}
                            </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-5">Materia Prima</th>
                                    <th class="col-sm-1">Densidad</th>
                                    <th class="col-sm-1">Peso (Kg)</th>
                                    <th class="col-sm-1">Volumen (Lts)</th>
                                    <th class="col-sm-1">Costo</th>
                                    <th class="col-sm-2">Opciones</th>
                                </tr>
                            </thead>
                            <tbody id="contenido_formula">
                                @if(empty($agua))
                                <tr id="sin-items">
                                    <td colspan="7" class="text-align-center">No hay registros</td>
                                </tr>
                                @else

                                @endif
                            </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">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-9">Pregunta</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