@extends('menu/menu')
@section('content')
<div class="container-fluid">
    <div class="container">
        <h1>Accesorios</h1>
        <div class="row reex" style="height: auto">
            <div class="container col-4 form-group" style="margin-top: 10px">
                <label for="">
                    <h2>ID</h2>
                </label>
                <input type="" class="form-control" id="id_accesorio" placeholder="ID" name="" value="" oninput="myFunction()">
            </div>
            <div class="container col-4 form-group" style="margin-top: 10px">
                <label for="">
                    <h2>Número de parte</h2>
                </label>
                <input type="" class="form-control" id="articulo" placeholder="Número de parte" name="" value="" oninput="myFunction()">
            </div>
            <div class="container col-4 form-group" style="margin-top: 10px">
                <label for="">
                    <h2>Nombre de la pieza</h2>
                </label>
                <input type="" class="form-control" id="keywords" placeholder="Nombre de la pieza" name="" value="" oninput="myFunction()">
            </div>
        </div>
        <div class="col-md-12 mt-5 col-sm-12 col-xs-12" style="margin-left: 0%">
            <div class="conteiner row rein table-responsive" style=" border: 5px solid  #e8f5fe; ">
                <table class="table table-bordered table-responsive-lg table-striped table-hover" style="margin: 0" id="gridData">
                    <tbody>
                        <thead>
                            <th scope="col">ID</th>
                            <th scope="col">Número de parte</th>
                            <th scope="col">Nombre de la pieza</th>
                        </thead>
                    <tbody id="agregar_accesorios">
                        @foreach ($accesorios as $key => $los_datos)
                        <tr>
                            <td>
                                {{$los_datos->id}}
                            </td>
                            <td>
                                {{$los_datos->articulo}}
                            </td>
                            <td>
                                {{$los_datos->descripcion}}
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection
<script>
    function myFunction() {
        descripcion = $('#keywords').val();
        id = $('#id_accesorio').val();
        articulo = $('#articulo').val();
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: 'POST',
            url: "{{ route('go.search_accesorios2') }}",
            data: {
                'id': id,
                'articulo': articulo,
                'descripcion': descripcion
            },
            success: function(data) {
                $('#agregar_accesorios').empty();
                $(data).each(function(i, v) {
                    $('#agregar_accesorios').append(
                        '<tr>' +
                        '<td>' + v.id + '</td>' +
                        '<td>' + v.articulo + '</td>' +
                        '<td>' + v.descripcion + '</td>' +
                        '</tr');
                })
            },
            error: function(xhr, status) {
                alert('Disculpe, Ha ocurrido un problema, Intente mas tarde');
            }
        });
    };
</script>