@extends('layouts.default')

@section('scripts')
    <script>
        var storage_id = "formula.{{{ $id }}}";
        var jsonData = {};
        if(localStorage.getItem(storage_id) != null) {
            jsonData = JSON.parse(localStorage.getItem(storage_id));
        } else {
            jsonData.nreguist = {{{ $formula->NREGUIST }}};
            jsonData.nombre_producto = '{{{ $formula->NOMBRE }}}';
            @foreach($detalles_formula as $index => $df)
               if(!jsonData.hasOwnProperty('materias_primas')) {
                   jsonData.materias_primas = [];
               }
               jsonData.materias_primas.push({
                   ID: {{{ $index + 1 }}},
                   NOMBRE:'{{{ $df->NOMBRE }}}',
                   NREGUIST_MP: {{{ $df->NREGUIST_MP }}},
                   CANTIDAD: {{{ $df->CANTIDAD }}},
               });
            @endforeach
        }

        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));
                }
            });

            setup_select2('#producto_id', "{{ url('envases/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(storage_id, JSON.stringify(jsonData));
            });

            // Cuando cambia la cantidad
            $(document).on('change', 'input[name*="CANTIDAD"]', function() {
			    /* Ve cual es el indice de la línea */
                var itemString    = $(this).attr("name");
                var id_mp         = itemString.replace("CANTIDAD", "");
                var CANTIDAD      = $('input[name=CANTIDAD'+id_mp+']').val();

                jsonData.materias_primas[id_mp].CANTIDAD = CANTIDAD;
                //Almacena nombre producto en localStorage
                localStorage.setItem(storage_id, JSON.stringify(jsonData));
            });

            $(document).on('select2:select', 'select[name*="envase"]', function() {
                /* Ve cual es el indice de la línea */
                var itemString   = $(this).attr("name");
                var id_mp        = itemString.replace("envase", "");

                jsonData.materias_primas[id_mp].NOMBRE      = $(this).select2('data')[0].text;
                jsonData.materias_primas[id_mp].NREGUIST_MP = $(this).select2('data')[0].id;
                //Almacena nombre producto en localStorage
                localStorage.setItem(storage_id, JSON.stringify(jsonData));
                $(this).html('');
            });

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

            $('#form_guardar').on('submit', function() {
                clean_form_errors($('#formulario'));
                console.log(jsonData.materias_primas);
                $.post("{{ url('envases/agregar_envases') }}", {data: JSON.stringify(jsonData)}, function(response) {
                    jsonData = {};
                    localStorage.removeItem(storage_id);
                    success_notification(response);
                    window.location = "{{ url('envases') }}/" + 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;
            });


            /* Botón Cancelar */
            $('#Cancelar').on('click', function() 
            {
                /* Confirma Cancelar */
                $.confirm({
                    title:"Confirmación para salir del detalle de envases",
                    text: "<h1><b>¿Desea salir sin grabar detalle de envases?</b></h1>",
                    modalOptionsBackdrop: 'static',
                    confirm: function() {
                        console.log(JSON.stringify(jsonData));
                        clean_form_errors($('#formulario'));

                        jsonData = {};
                        localStorage.removeItem(storage_id);
                        window.location = "{{ url('envases/index') }}";

                        return false;
                    },
                    cancel: function() {
                        return false;
                    },
                    confirmButton: "Deseo Salir",
                    cancelButton: "No",
                    confirmButtonClass: 'btn-success',
                    cancelButtonClass: 'btn-danger'
                });
            });


        });

        //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 index    = $('.item-formula').length;
            var id_item  = 'item-' + index;
            var template = '<tr id="' + id_item  + '" class="item-formula" data-index="' + index + '">'+
                    '<td><select id="envase' + index + '" name="envase' + index + '"></select></td>'+
                    '<td><input class="form-control" name="CANTIDAD' + index + '" id="CANTIDAD' + index + '" type="text" value="1"></td>'+
                    '<td>' +
                    '<button class="btn btn-danger eliminar" type="button"><i class="fa fa-trash"></i></button>&nbsp;' +
                    '</td>'+
                    '</tr>';
            $('#sin-items').addClass('hide');
            $(template).appendTo('#contenido_formula');
            setup_select2('#envase' + index, "{{  url('envases/select_envases') }}", 'Buscar envase');
            //Actualizamos variable jsonData
            if(jsonData.hasOwnProperty('materias_primas') == false) {
                jsonData.materias_primas = [];
            }
            jsonData.materias_primas.push({
                ID: index,
                NOMBRE: '',
                NREGUIST_MP: 0,
                CANTIDAD: 1
            });
            //Almacena nombre producto en localStorage
            localStorage.setItem(storage_id, JSON.stringify(jsonData));
        }
        //Agrega una nueva fila en la tabla desde jsonData
        function agregar_item_jsonData(i, mp) {
            var id = i;
            var id_item = 'item-' + id;
            var nombre   = mp.hasOwnProperty('NOMBRE')?mp.NOMBRE:'';
            var cantidad = mp.hasOwnProperty('CANTIDAD')?mp.CANTIDAD:'';
            var nreguist_mp = mp.hasOwnProperty('NREGUIST_MP')?mp.NREGUIST_MP:'';
            var template = '<tr id="' + id_item  + '" class="item-formula" data-index="' + id + '">'+
                    '<td><select id="envase' + id + '" name="envase' + id + '"></select></td>'+
                    '<td><input class="form-control" name="CANTIDAD' + id + '" id="CANTIDAD' + id + '" type="text" value="' + cantidad + '"></td>'+
                    '<td>' +
                    '<button class="btn btn-danger eliminar" type="button"><i class="fa fa-trash"></i></button>&nbsp;' +
                    '</td>'+
                    '</tr>';
            $('#sin-items').addClass('hide');
            $(template).appendTo('#contenido_formula');
            setup_select2('#envase' + id, "{{  url('envases/select_envases') }}", 'Buscar envase');
            if(nombre != '') {
                $('#envase' + id).html('<option value="' + nreguist_mp + '">' + 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(storage_id, JSON.stringify(jsonData));
            calcular_total_x('costo');
            calcular_margen_formula();
        }
        //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);
                }
            });
            $('#total_' + nombre).html(cont);
            return cont;
        }
        //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;
        }
        //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('materias_primas') && data.materias_primas.length > 0) {
                    $.each(data.materias_primas, function(i, v) {
                        agregar_item_jsonData(i, v);
                    })
                }
                calcular_total_x('costo');
                calcular_margen_formula();
            }
        }
    </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 Envases
                </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">Envases y/o contenido</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-12">
                            <div id="select_producto" class="row">
                                <div class="form-group col-sm-2">
                                     <label for="producto_id" class="control-label">Nombre del Producto</label>
                                </div>
                                <div class="form-group col-sm-6">
                                    {{ Form::select('NREGUIST_PROD_TERMINADO', [], NULL, ['id' => 'producto_id', 'class' => 'form-control', 'disabled'=>true]) }}
                                </div>
                            </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 Envase y producto elaborado</button>
                        </div>
                    </div>
                    <br>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="col-sm-9">Producto</th>
                                    <th class="col-sm-9">Cantidad</th>
                                    <th class="col-sm-3">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_costo">0</td>
                                <td></td>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </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="Cancelar">Cancelar</button>
                    </form>
                </div>
            </div>
        </div>
        <!-- end product -->
    </div>

@endsection