@extends('layouts.admin')

@section('styles')
<link rel="stylesheet" href="{{asset('plugins/datatable/css/dataTables.bootstrap4.min.css')}}">
@endsection
@section('content')
<div class="row">
    <div class="col text-center h4 my-3">Articulos DB</div>
</div>

<div class="row">
    <div class="col">

        <div class="card">
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table" id="table_id">
                        <thead>
                            <tr>
                                <th>##</th>

                                <th>nombre</th>
                                <th>cod_barras</th>
                                <th>descripcion</th>
                                <th>p_venta</th>
                                <th>p_costo</th>
                                <th>stock</th>
                                <th>stock_maximo</th>
                                <th>min_stock</th>
                                <th>img</th>
                                <th>img2</th>


                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($articulos as $art)
                            <tr id="row-{{$art->id}}">
                                <td>
                                    <a class="btn btn-warning btn-sm" onclick="update()">
                                        <i class="fa fa-refresh" aria-hidden="true"></i>
                                    </a>
                                </td>

                                <td> <input class="form-control form-control-sm" value="{{$art->nombre}}" name="nombre" /></td>
                                <td> <input class="form-control form-control-sm" value="{{$art->cod_barras}}" name="cod_barras" /></td>
                                <td> <textarea class="form-control form-control-sm" name="descripcion">{{$art->descripcion}}</textarea></td>
                                <td> <input class="form-control form-control-sm" value="{{$art->p_venta}}" name="p_venta" /></td>
                                <td> <input class="form-control form-control-sm" value="{{$art->p_costo}}" name="p_costo" /></td>
                                <td> <input class="form-control form-control-sm" value="{{$art->stock}}" name="stock" /></td>
                                <td> <input class="form-control form-control-sm" value="{{$art->stock_maximo}}" name="stock_maximo" /></td>
                                <td> <input class="form-control form-control-sm" value="{{$art->min_stock}}" name="min_stock" /></td>
                                <td> <input class="form-control form-control-sm" value="{{$art->img}}" name="img" /></td>
                                <td> <input class="form-control form-control-sm" value="{{$art->img2}}" name="img2" /></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</div>

@endsection

@section('scripts')
<script src="{{asset('plugins/datatable/js/jquery.dataTables.min.js')}}"></script>
<script src="{{asset('plugins/datatable/js/dataTables.bootstrap4.min.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function() {
        var table = $('#table_id').DataTable();
    });

    function update(id) {
        // 1. Objeto base con el ID y el Token CSRF
        var data = {
            'id': id,
        };

        // 2. Buscar dentro de la fila especifica (#row-ID)
        // Buscamos tanto inputs como textareas
        $(`#row-${id} input, #row-${id} textarea`).each(function() {
            // Agregamos al objeto data: nombre_campo = valor
            data[this.name] = $(this).val();
        });

        // 3. Petición AJAX
        $.ajax({
            url: "{{ route('articulo.updateDBAjax') }}", // Asegúrate de crear esta ruta
            type: "get",
            data: data,
            success: function(response) {
                // Éxito

                Swal.fire('Éxito', response.success, 'success');
                // O si usas SweetAlert: Swal.fire('Éxito', response.success, 'success');
                console.log(response);
            },
            error: function(xhr) {
                // Error
                console.log(xhr.responseText);
                alert("Error al actualizar");
            }
        });
    }
</script>
@endsection