@extends('layouts.default')

@section('scripts')
    <script>
        $(document).ready(function(){

        var storage_id = "calidad.{{{ $id }}}";
        var jsonData   = {};

        if  (localStorage.getItem(storage_id) != null) {
            jsonData = JSON.parse(localStorage.getItem(storage_id));
        } else {
            jsonData.nreguist        = {{{ $formula->NREGUIST }}};
            jsonData.IDFORMULA       = {{{ $planificacion->ID }}};
            jsonData.nombre_producto = '{{{ $formula->NOMBRE }}}';
            jsonData.observacion     = "{{{ preg_replace( "/(\r|\n|\r\n)+/", "\\r\\n",$formula->OBSERVACION) }}}";
            jsonData.volumen         = {{{ $formula->VOLUMEN }}};
            jsonData.vida_util       = {{{ $formula->VIDA_UTIL }}};
            jsonData.precio_venta    = {{{ $formula->PRECVTA }}};
            jsonData.NROVALE         = {{{ $planificacion->NROVALE }}};
            jsonData.NROGR           = {{{ $planificacion->NROGR }}};

            /* Si existe o no número de documento */
			var numero       = jsonData.NROVALE;
            var nroguia      = jsonData.NROGR; 
            $('#nrovale').val(numero);
			if (numero == 0)
            {
                $('#nrovale').attr('type', 'password');
			}
            else 
            {
                $('#nrovale').attr('type', 'text'); 
			}
            $('#nroguia').val(nroguia);
			if (nroguia == 0)
            {
                $('#nroguia').attr('type', 'password');
			}
            else 
            {
                $('#nroguia').attr('type', 'text'); 
			}

            var cantidadItems = 0;

            /* Recorre arreglo de materias primas */
            @foreach($detalles_formula as $index => $df)
                 var pregunta = '{{{ $df->PREGUNTA }}}';
                 if (pregunta != '')
                 {
                    cantidadItems = cantidadItems + 1;
                 }
            @endforeach

            /* Mensaje de error */
            if (cantidadItems < 1)
            {
                var mensaje = {'content' : 'Este producto no tiene creadas las preguntas de control de calidad, debe crearlas !!', "type" : "error", "timeout" : 100000};
                notification(mensaje, "big");
                localStorage.removeItem(storage_id);
                window.location = "{{ url('calidad/index') }}";
            }
            else
            {
               /* Recorre arreglo de materias primas */
               @foreach($detalles_formula as $index => $df)
                  if(!jsonData.hasOwnProperty('materias_primas')) {
                      jsonData.materias_primas = [];
                  }
                  jsonData.materias_primas.push({
                      ID: '{{{ $df->ID }}}',
                      PREGUNTA: '{{{ $df->PREGUNTA }}}',
                      RESPUESTA: '{{{ $df->RESPUESTA }}}',
                      rangos_inf: {{{ $df->rangos_inf }}},
                      TIPOPREGUNTA: '{{{ $df->TIPOPREGUNTA }}}',
                      rangos1:  {{{ $df->rangos1 }}},
                      rangos2:  {{{ $df->rangos2 }}},
                      opciones: '{{{ $df->opciones }}}',
                      opcion:   '{{{ $df->opcion }}}',
                  });
               @endforeach
            }
        }

        poblar_formula(jsonData);

            $(document).on('click', '.eliminar',function(e) {
                var el = $(this).parents('tr').eq(0);
                eliminar_item($(this));
            });

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

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

                /* Guarda en la memoria */
                jsonData.materias_primas[id_mp].RESPUESTA = RESPUESTA;

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

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

                /* Guarda en la memoria */
                var rangos1      = jsonData.materias_primas[id_mp].rangos1;
                var rangos2      = jsonData.materias_primas[id_mp].rangos2;

                /* Valida el rango ingresado */
                if (rangos_inf < rangos1 || rangos_inf > rangos2)
                {
                    var mensaje = {'content' : 'Valor no está entre los rangos permitidos!!', "type" : "error", "timeout" : 5000};
                    notification(mensaje, "big");
                }
                else
                {
                    /* Guarda en la memoria */
                    jsonData.materias_primas[id_mp].rangos_inf = rangos_inf;

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

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

                /* Guarda en la memoria */
                jsonData.materias_primas[id_mp].opcion = opcion;

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

            $('#form_guardar').on('submit', function() {
                var nrovale = $('#nrovale').val();
                var nroguia = $('#nroguia').val();

                /* Valida rangos */

                var errorderangos        = 0;
                if(jsonData.hasOwnProperty('materias_primas') && jsonData.materias_primas.length > 0) {
                    $.each(jsonData.materias_primas, function(i, v) {

                        var rangos_inf   = jsonData.materias_primas[i].rangos_inf;

                        /* Guarda en la memoria */
                        var rangos1      = jsonData.materias_primas[i].rangos1;
                        var rangos2      = jsonData.materias_primas[i].rangos2;

                        /* Valida el rango ingresado */
                        if (rangos_inf < rangos1 || rangos_inf > rangos2)
                        {
                            errorderangos = 1;
                        }
                    })
                }

                if (errorderangos == 1)
                {
                    var mensaje = {'content' : 'Valor no está entre los rangos permitidos!!', "type" : "error", "timeout" : 5000};
                        notification(mensaje, "big");
                }

                /* Graba */
                var id      = {{ $id }}

                $.get("{{ url('calidad/editar_calidad') }}", { id: id, nrovale: nrovale, nroguia: nroguia, data: JSON.stringify(jsonData)}, function(response) {
				    /* Limpia variables si se grabó bien */
                    jsonData = {};
                    localStorage.removeItem(storage_id);
					/* Mensaje */
                    success_notification(response);
					/* Vuelve a programa original */
                    window.location = "{{ url('calidad') }}";

                }, '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($('#control_calidad').find('.has-error').length > 0) $('a[href="#control_calidad"]').tab('show');
                    } else {
                      error_notification(response);
                    }
                });
                return false;
            });
            /* Botón Cancelar */
            $('#limpiar_formula').on('click', function() 
            {
                /* Confirma Cancelar */
                $.confirm({
                    title:"Confirmación para salir del control de calidad",
                    text: "<h1><b>¿Desea salir sin grabar el control de calidad?</b></h1>",
                    modalOptionsBackdrop: 'static',
                    confirm: function() {
                        console.log(JSON.stringify(jsonData));
                        clean_form_errors($('#formulario'));

                        jsonData = {};
                        localStorage.removeItem(storage_id);
                        window.location = "{{ url('calidad/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(nombre, lote, nreguist, cantidad) {
            var order = cantidad_items('.item-formula') + 1;
            var index = next_index('.item-formula');
            var id_item = 'item-' + index;
            var template = '<tr id="' + index  + '" class="item-formula" data-index="' + index + '">'+
                    '<td><input class="form-control" name="orden" type="text" value="' + order + '" readonly></td>'+
                    '<td><select id="materia_prima_' + index + '" name="MATERIA_PRIMA.' + index + '.NREGUIST_MATERIA_PRIMA" disabled></select></td>'+
                    '<td><input class="form-control" name="MATERIA_PRIMA.' + index + '.LOTE" type="text" value="' + lote + '" disabled></td>'+
                    '<td><input class="form-control" name="CANTIDAD' + index + '" id="CANTIDAD' + index + '" 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('#materia_prima_' + index, "{{  url('formulas/select_materias_primas') }}", 'Buscar materia prima');
            if(nombre != '') {
                $('#materia_prima_' + index).html('<option value="' + nreguist + '">' + nombre + '</option>').trigger('change');
            }

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

            /* Agrega resultados a la matriz */
            jsonData.materias_primas.push({
                ID: index,
                PREGUNTA: PREGUNTA,
                RESPUESTA: RESPUESTA,
            });
            /* Actualiza los valores */
            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 pregunta      = mp.hasOwnProperty('PREGUNTA')?mp.PREGUNTA:'';
            var respuesta     = mp.hasOwnProperty('RESPUESTA')?mp.RESPUESTA:'';
            var rangos_inf    = mp.hasOwnProperty('RESPUESTA')?mp.rangos_inf:'';
            var opciones      = mp.hasOwnProperty('RESPUESTA')?mp.opciones:'';
            var opcion        = mp.hasOwnProperty('RESPUESTA')?mp.opcion:'';

            var TIPOPREGUNTA  = mp.hasOwnProperty('TIPOPREGUNTA')?mp.TIPOPREGUNTA:''; 

            var desab         = 'disabled';
            var display1      = "";
            var display2      = "style = 'display: none;'";
            var display3      = "style = 'display: none;'";
            var campo         = '';

            if (TIPOPREGUNTA == 1)
            {
               var campo      = '';
            }

            if (TIPOPREGUNTA == 2)
            {
               var desab      = '';
               var display1   = "style = 'display: none;'";
               var display2   = '';
               var display3   = '';
               var campo      = '';
            }

            if (TIPOPREGUNTA == 3)
            {
               var desab       = '';
               var rangos_inf  = 0;
               var display1    = "style = 'display: none;'";
               var display2    = "style = 'display: none;'";
               var display3    = "";
               var arreglo     = opciones.split(', ');

               var campo       = '<td '+display3+'>';
               for(let i = 0; i < arreglo.length; i++)
               {
                   var linea   = arreglo[i];
                   var sel     = '';   
                   if (opcion == linea || (i == 0 && opcion == ''))
                   {
                       var sel = 'checked';
                   }
                   var campo  = campo + '<input name="opcion' + id +'" id="opcion' + id +'" type="radio" value="'+linea+'" '+sel+'> '+ linea + ' ';
               }
               var campo      = campo + '<input name="opcion' + id +'" id="opcion' + id +'" type="radio" style="display: none;" value="99999">';
               var campo      = campo + '</td>';
            }

            var template = '<tr id="' + id  + '" class="item-formula" data-index="' + id + '">'+
                    '<td><input class="form-control" name="PREGUNTA'  + id +'" type="text" value="' + pregunta + '" disabled></td>'+
                    '<td '+display1+'><input class="form-control" name="RESPUESTA' + id +'" id="RESPUESTA' + id +'" type="text" value="' + respuesta + '"></td>'+
                    '<td '+display2+'><input class="form-control" name="rangos_inf' + id +'" id="rangos_inf' + id +'" type="text" value="' + rangos_inf + '" ' + desab +'></td>'+
                    campo+
                    '</tr>';
            $('#sin-items').addClass('hide');
            $(template).appendTo('#contenido_formula');

        }

        //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('volumen')) {
                    $('#volumen_formula').val(data.volumen);
                }
                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(i, v);
                    })
                }
            }
        }

    </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">
                    Respuesta cuestionario control de calidad
                </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>
            </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', 'disabled' => true]) }}
                                </div>
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group" style='display: none;'>
                                <label for="" class="control-label">Nro.Vale</label>
                                {{ Form::hidden('nrovale', NULL, ['id' => 'nrovale', 'class' => 'form-control', 'disabled' => true]) }}
                            </div>
                            <div class="form-group">
                                <label for="" class="control-label">Nro.Guia Recepción</label>
                                {{ Form::hidden('nroguia', NULL, ['id' => 'nroguia', 'class' => 'form-control', 'disabled' => true]) }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <div class="form-group">
                                <label for="" class="control-label">Kilos</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</label>
                                {{ Form::text('VIDA_UTIL', NULL, ['id' => 'vida_util', 'class' => 'form-control', 'readonly' => true]) }}
                            </div>
                        </div>
                        <div class="col-md-2">
                            <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>
                    <br>
                    <div class="table-responsive">
                        <table class="table table-bordered">
                            <thead>
                                <tr>
                                    <th class="col-sm-7">Pregunta</th>
                                    <th class="col-sm-5">Respuesta</th>
                                </tr>
                            </thead>
                            <tbody id="contenido_formula">
                                <tr id="sin-items">
                                    <td colspan="7" class="text-align-center">No hay registros</td>
                                </tr>
                            </tbody>
                        </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="limpiar_formula">Cancelar</button>
                    </form>
                </div>
            </div>
        </div>
        <!-- end product -->
    </div>

@endsection