@extends('layouts.app')

@section('title')
    Auditoria
@endsection

@section('modals')
@endsection

@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="container-fluid">
            <div class="row mb-2">
                <div class="col-sm-6">
                    <ol class="breadcrumb">
                        <a class="btn btn-outline-dark btn-sm" href="{{ route('home') }}">
                            <i class="fas fa-reply mr-1"></i>
                            Regresar
                        </a>
                        </li>
                    </ol>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content-header -->

    <div class="row justify-content-center">
        <div class="col-md-9">
            <div class="card card-outline card-info">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">
                            <h4><i class="fa fa-users"></i> Registros del Sistema</h4>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive" style="overflow-x: hidden">
                        <table class="table table-bordered table-sm table-striped" id="tabla-auditoria">
                            <thead class="text-center">
                                <th>N°</th>
                                <th>Usuario</th>
                                <th>Acción</th>
                                <th>Tabla</th>
                                <th>Fecha</th>
                                <th>Detalles</th>
                            </thead>
                            <tbody id="tbody-auditoria"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

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

            consultarRegistros();

            $(document).on("click", ".detalle", function () {
                var datos_v = JSON.parse($(this).attr("data-v")); //registro viejo
                var datos_n = JSON.parse($(this).attr("data-n")); //registro modificado
                console.log(datos_n);
                
            })

            function consultarRegistros() {

                fetch('auditoria/list/all', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Error en la consulta...');
                        }
                        return response.json();
                    })
                    .then(data => {
                        var num = 1;
                        var template = "";
                        data.data.forEach(e => {
                            // console.log(e);

                            template += `
                                        <tr>
                                            <td class="text-center"> ${num}</td>
                                            <td class="text-center"> ${e.user.name}</td>
                                            <td class="text-center"> ${e.accion}</td>
                                            <td class="text-center"> ${e.tabla_modificada}</td>
                                            <td class="text-center"> ${moment(e.created_at).format('DD-MM-YYYY, h:mm A')}</td>
                                            <td class="text-center"> 
                                                <button type="button" class="detalle btn btn-sm bg-gradient-navy" data-id="${e.id}" data-v='${e.data_original}' data-n='${e.data_modificada}' data-toggle="modal" data-target="#modal-user">
                                                  <i class="fas fa-info-circle"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    `;
                            num++;
                        });
                        //agregamos los datos a la tabla
                        $('#tabla-auditoria').DataTable().destroy();

                        $('#tbody-auditoria').html(template);

                        $("table").DataTable({
                            language: translate,
                            responsive: true
                        });

                    })
                    .catch(error => console.error('Error:', error));
            }

        });
    </script>
@endsection