@extends('layouts.admin')

@section('styles')
    <link rel="stylesheet" href="{{ asset('plugins/datatable/css/dataTables.bootstrap4.min.css') }}">
    <style>
        /* Marca el campo en amarillo si ha sido editado */
        .field-edited {
            background-color: #fff3cd !important;
            border-color: #ffeeba !important;
            font-weight: bold;
        }

        /* Animación de éxito cuando se guarda la fila */
        .row-updated {
            background-color: #d4edda !important;
            transition: background-color 1.5s ease;
        }
    </style>
@endsection

@section('content')
    <div class="row">
        <div class="col text-center h4 my-3">Artículos DB</div>
    </div>

    <div class="row">
        <div class="col">
            <div class="card shadow-sm">
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table align-middle" id="table_id">
                            <thead>
                                <tr>
                                    <th>##</th>
                                    <th>Nombre</th>
                                    <th>Cód. Barras</th>
                                    <th>Descripción</th>
                                    <th>P. Venta</th>
                                    <th>P. Costo</th>
                                    <th>Stock</th>
                                    <th>Stock Máx.</th>
                                    <th>Min. Stock</th>
                                    <th>Img</th>
                                    <th>Img2</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($articulos as $art)
                                    <tr id="row-{{ $art->id }}">
                                        <td>
                                            <button type="button" class="btn btn-warning btn-sm"
                                                onclick="update({{ $art->id }})" title="Guardar cambios">
                                                <i class="fa fa-refresh" aria-hidden="true"></i>
                                            </button>
                                        </td>
                                        <td><input class="form-control form-control-sm track-change"
                                                value="{{ $art->nombre }}" name="nombre" /></td>
                                        <td><input class="form-control form-control-sm track-change"
                                                value="{{ $art->cod_barras }}" name="cod_barras" /></td>
                                        <td>
                                            <textarea class="form-control form-control-sm track-change" name="descripcion">{{ $art->descripcion }}</textarea>
                                        </td>
                                        <td><input class="form-control form-control-sm track-change"
                                                value="{{ $art->p_venta }}" name="p_venta" /></td>
                                        <td><input class="form-control form-control-sm track-change"
                                                value="{{ $art->p_costo }}" name="p_costo" /></td>
                                        <td><input class="form-control form-control-sm track-change"
                                                value="{{ $art->stock }}" name="stock" /></td>
                                        <td><input class="form-control form-control-sm track-change"
                                                value="{{ $art->stock_maximo }}" name="stock_maximo" /></td>
                                        <td><input class="form-control form-control-sm track-change"
                                                value="{{ $art->min_stock }}" name="min_stock" /></td>
                                        <td><input class="form-control form-control-sm track-change"
                                                value="{{ $art->img }}" name="img" /></td>
                                        <td><input class="form-control form-control-sm track-change"
                                                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();

            // 1. Guardar el valor inicial de cada campo al cargar la página
            $('#table_id').find('input, textarea').each(function() {
                $(this).data('initial-value', $(this).val());
            });

            // 2. Detectar cambios en tiempo real
            $('#table_id').on('input change', '.track-change', function() {
                var input = $(this);
                var initialValue = input.data('initial-value');

                // Si el valor actual es diferente al inicial, resalta en amarillo
                if (input.val() !== initialValue) {
                    input.addClass('field-edited');
                } else {
                    input.removeClass('field-edited');
                }
            });
        });

        function update(id) {
            var data = {
                'id': id
            };
            var $row = $(`#row-${id}`);

            // Recopilar datos de la fila
            $row.find('input, textarea').each(function() {
                data[this.name] = $(this).val();
            });

            $.ajax({
                url: "{{ route('articulo.updateDBAjax') }}",
                type: "get",
                data: data,
                success: function(response) {
                    // Notificación rápida
                    Swal.fire({
                        icon: 'success',
                        title: 'Actualizado',
                        text: response.success || 'Artículo actualizado correctamente',
                        timer: 1500,
                        showConfirmButton: false
                    });

                    // 3. Limpiar el resalte amarillo y actualizar los nuevos valores base
                    $row.find('input, textarea').each(function() {
                        $(this).data('initial-value', $(this).val());
                        $(this).removeClass('field-edited');
                    });

                    // 4. Efecto de parpadeo verde en la fila guardada
                    $row.addClass('row-updated');
                    setTimeout(function() {
                        $row.removeClass('row-updated');
                    }, 1500);
                },
                error: function(xhr) {
                    console.error(xhr.responseText);
                    Swal.fire('Error', 'No se pudo actualizar el registro', 'error');
                }
            });
        }
    </script>
@endsection