@extends('layouts.app')

@section('title')
Auditoria
@endsection

@section('modals')
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content text-center">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel"><strong>Información Modificada</strong></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" style="margin-right: 2.5rem;">
                <ul>
                    <li style="list-style: none; padding: 1rem;"><strong>Información Original:</strong></li>
                    <li style="background-color: rgba(176, 176, 176, 0.4); list-style: none;"></li>
                    <li style="list-style: none; padding: 1rem;"><strong>Información Modificada:</strong></li>
                    <li style="background-color: rgba(5, 150, 11, 0.4); list-style: none;"></li>
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('content')
<div class="container p-5">
    <div class="card card-outline card-danger">
        <div class="card-title p-4 border-bottom">
            <div class="row">
                <div class="col-md-6">

                    <h4><i class="fa fa-th"></i> Auditoria </h4>
                </div>
            </div>
        </div>
        <div class="card-body">
            <h5 class="text-center"><b>Movimientos Registrados</b></h5>
            <table class="table table-bordered" id="tabla-auditoria">
                <thead>
                    <tr>
                        <th>Usuario</th>
                        <th>Acción</th>
                        <th>Módulo Modificado</th>
                        <th>Información</th>
                    </tr>
                </thead>
                <tbody id="tbody-auditoria">

                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

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

        verAuditoria();
        function verAuditoria() {
            $('#tbody-auditoria').html("");
            fetch(
                DIR+'/auditoria', {
                method: 'GET'
            }
            ).then(res => res.json()).then(function (data) {
                template = "";
                data.data.forEach(e => {

                    template += `
                            <tr>
                                <td> ${e.user.name}: ${e.user.email}</td>
                                <td> ${e.accion}</td>
                                <td> ${e.tabla_modificada}</td>
                                <td> 
                                    <button type="button" class="mostrar-data btn btn-success" data-v='${e.data_original}' data-n='${e.data_modificada}' data-toggle="modal" data-target="#exampleModal">
                                      Detalles
                                    </button>
                                </td>
                            </tr>
                    `;
                });

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

                $("table").DataTable({
                    "language": {
                        "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
                    },
                    responsive: true
                });


                $("#tabla-auditoria").DataTable();
            })
                .catch(function (err) {
                    console.log(err);
                })
        }
        $(document).on('click', '.mostrar-data', function () {
            var datos_v = JSON.parse($(this).attr("data-v"));
            var datos_n = JSON.parse($(this).attr("data-n"));

            let result_v = "";
            for (const key in datos_v) {

                if (datos_v[key] !== null) {
                    if (key != 'id' && key != 'oportunidad_acceso') {
                        if (key == 'created_at' || key == 'updated_at') {
                            result_v += `<li style="background-color: rgba(176, 176, 176, 0.4); list-style: none;">${key}: ${moment(new Date(datos_v[key]).toLocaleDateString('es-es'), 'DD/MM/YYYY').format('DD-MM-YYYY')}</li> `;
                        } else {
                            result_v += `<li style="background-color: rgba(176, 176, 176, 0.4); list-style: none;">${key}: ${datos_v[key]}</li> `;
                        }
                    }
                }
            }
            let result_n = "";
            for (const key in datos_n) {

                if (datos_n[key] !== null) {
                    if (key != 'id' && key != 'oportunidad_acceso') {
                        if (key == 'created_at' || key == 'updated_at') {
                            result_n += `<li style="background-color: rgba(5, 150, 11, 0.4); list-style: none;">${key}: ${moment(new Date(datos_n[key]).toLocaleDateString('es-es'), 'DD/MM/YYYY').format('DD-MM-YYYY')}</li> `;
                        } else {
                            result_n += `<li style="background-color: rgba(5, 150, 11, 0.4); list-style: none;">${key}: ${datos_n[key]}</li> `;
                        }
                    }
                }
            }
            $(".modal-body").html(`
            <strong>Información Original:</strong>
            <ul>
            ${result_v}
            </ul>
                <strong>Información Modificada:</strong>
            <ul>
            ${result_n}
            </ul>
                `);
        })
    });
</script>
@endsection