@extends('fragments.validacionFullTemplate')
@section('titulo')
Validación de informes
@endsection
@section('contenido')

    <div class="container mt-5 pt-5">
        <div id="form-errors"></div>
        <div class="card text-center" style="/*margin-top: 50px;*/">
            <div class="card-header">
                Ingresar información del documento
            </div>
            
            <div class="card-body">
                <form method="POST" id="validacion">
                    {{ csrf_field() }}
                    <div class="form-group row">
                        <label for="nombre_empresa" class="col-sm-2 col-form-label">Empresa</label>
                        <div class="col-sm-10">
                        <input type="text" class="form-control" id="nombre_empresa" name="nombre_empresa">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="numero_informe" class="col-sm-2 col-form-label">Número de Informe</label>
                        <div class="col-sm-10">
                        <input type="text" class="form-control" id="numero_informe" name="numero_informe">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="fecha_emision" class="col-sm-2 col-form-label">Fecha de Entrega</label>
                        <div class="col-sm-10">
                        <input type="date" class="form-control second" id="fecha_emision" name="fecha_emision" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="muestra" class="col-sm-2 col-form-label">Muestra</label>
                        <div class="col-sm-10">
                        <input type="text" class="form-control second" id="muestra" name="muestra" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="marca" class="col-sm-2 col-form-label">Marca</label>
                        <div class="col-sm-10">
                        <input type="text" class="form-control second" id="marca" name="marca" readonly>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="modelo" class="col-sm-2 col-form-label">Modelo</label>
                        <div class="col-sm-10">
                        <input type="text" class="form-control second" id="modelo" name="modelo" readonly>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer text-muted">
                <button type="button" class="btn btn-success mini" id="validar" >Validar Documento </button>
            </div>
        </div>
    </div>
    
    @include('Validacion.Public.error')
    @include('Validacion.Public.correct')
    <script>
                var resultData = {};
        $(document).ready(function(){
            var ctrlDown = false,
            ctrlKey = 17,
            cmdKey = 91,
            vKey = 86,
            cKey = 67;
            $('#nombre_empresa').keyup(function(e) {
                recuperarData();
            });
            $('#numero_informe').keyup(function(e) {
                recuperarData();
            });
            $('#validar').click(function(){
                var data = {
                    'nombre_empresa': nombre_empresa = $('#nombre_empresa').val(),
                    'numero_informe': numero_informe = $('#numero_informe').val(),
                    'fecha_emision': fecha_emision = $('#fecha_emision').val(),
                    'muestra': muestra = $('#muestra').val(),
                    'marca': marca = $('#marca').val(),
                    'modelo': modelo = $('#modelo').val(),
                    '_token': _token = $('input[name="_token"]').val()
                    
                };
                
                $.ajax({

                    url:"{{ url('informes/validar') }}",
                    method:"POST",
                    data:data,
                    success:function(response){
                        result = JSON.parse(response); 
                        
                        if(result.success){
                            console.log("Validando...");
                            resultData = result.data;
                            $("#modalCorrecto").modal("show");
                            console.log( "CORRECTO");
                            console.log( resultData);
                            
                        }else{
                            $("#modalError").modal();
                        }
                    },
                    error: function(jqXhr){
                        if( jqXhr.status === 422 ) {
                            var errors = jqXhr.responseJSON;
                            errorsHtml = '<div class="alert alert-danger"><ul>';
                            
                            $.each( errors.errors, function( key, value ) {
                                errorsHtml += '<li>' + value[0] + '</li>'; //showing only the first error.
                            });
                            errorsHtml += '</ul></di>';
                            
                            $( '#form-errors' ).html( errorsHtml ); 
                        }
                    }

                });

            });
        });
        
        $('#modalCorrecto ').on('show.bs.modal', function () {
            $("#modal-form p").each(function(){
                input = $(this).attr('id'); // This is the jquery object of the input, do what you will
                if(input in resultData){
                    //$('#modal-form #'+input).val(resultData[input]);
                    //alert(resultData[input]);
                    if (resultData[input] != "null") {
                       
                        $('#modal-form #'+input).text(resultData[input]);
                    }
                    
                }
            });
            
        });

        const recuperarData = function (){
            let empresa = $('#nombre_empresa').val();
            let st = $('#numero_informe').val();
            if( empresa != '' && st != ''){
                ajaxValidacion(empresa, st);
            }else{
                console.log('falta');
            }
        }

        const ajaxValidacion = function(empresa, st){
            $.ajax({

                url:"{{ url('informes/validar/ajax') }}",
                method:"POST",
                data:{'empresa': empresa, 'st': st, '_token': _token = $('input[name="_token"]').val()},
                success:function(response){
                    
                        result = JSON.parse(response); 
                        
                        resultData = result.data;
                        if(result.success == true){
                            $( '#form-errors' ).html( '' );
                            llenarDatos(resultData);
                        }else{

                            $("#validacion :input").each(function(){
                                input = $(this).attr('id');
                                $('#validacion #'+input+'.second').val('');
                                    
                            });

                            errorsHtml = '<div class="alert alert-danger"><ul>';
                            $.each( result.msg, function( key, value ) {
                                errorsHtml += '<li>' + value + '</li>'; 
                            });
                            errorsHtml += '</ul></di>';
                            
                            $( '#form-errors' ).html( errorsHtml );
                        }
                        
                },
                error: function(jqXhr){
                    /*if( jqXhr.status === 422 ) {
                        var errors = jqXhr.responseJSON;
                        errorsHtml = '<div class="alert alert-danger"><ul>';
                        
                        $.each( errors.errors, function( key, value ) {
                            errorsHtml += '<li>' + value[0] + '</li>'; //showing only the first error.
                        });
                        errorsHtml += '</ul></di>';
                        
                        $( '#form-errors' ).html( errorsHtml ); 
                    }*/
                }

            });
        }

        const llenarDatos = function(resultData){
            console.log('funciona');
            $("#validacion :input").each(function(){
                input = $(this).attr('id');
                if(input in resultData){
                    $('#validacion #'+input).val(resultData[input]);
                }
           });
        }
        
    </script>
@endsection