<script lang="ts">
    import { onMount } from "svelte";
    import { urlG } from "../stores/urlStore";
    import type { LogDetalleDto, LogDto } from "../types";

    let {onClose, log}: {onClose: ()=>boolean, log:LogDto} = $props();
    let token:string = sessionStorage.getItem("token")||"";

    let detalles: LogDetalleDto[] = $state([]);
    async function obtenerDetalles() {
        try{
            const r = await fetch($urlG+"/api/Logs/detalle?fecha="+log.fecha+"&idusuario="+log.dniusuario, {
                method:"GET",
                headers: {
                    "Auth": token,
                }
            });
            let data = await r.json();
            if (r.ok) {
                detalles = data;
                return;
            }
        }catch{}
    }
    onMount(()=>{
        obtenerDetalles();
    });
</script>

<div class="modal fade show" tabindex="-1" role="dialog" style="display: block; background-color: rgba(0, 0, 0, 0.5);">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="exampleModalLabel">Detalles Log</h1>
                <button class="btn-close" onclick={onClose} aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <table class="table table-striped" style="table-layout: fixed; width: 100%;">
                    <thead>
                        <tr>
                            <th style="word-wrap: break-word;">Fecha</th>
                            <th style="word-wrap: break-word;">Tabla</th>
                            <th style="word-wrap: break-word;">Columna</th>
                            <th style="word-wrap: break-word;">Valor Viejo</th>
                            <th style="word-wrap: break-word;">Valor Nuevo</th>
                        </tr>
                    </thead>
                    <tbody>
                    {#each detalles as d}
                        <tr>
                            <td style="word-wrap: break-word;">{d.fecha}</td>
                            <td style="word-wrap: break-word;">{d.nombreTabla}</td>
                            <td style="word-wrap: break-word;">{d.columna}</td>

                            <td style="word-wrap: break-word;">
                                {#if d.columna == "Contraseña"}
                                    *
	                            {:else}
                                    {d.valorAnterior}
                                {/if}
                            </td>

                            <td style="word-wrap: break-word;">
                                {#if d.columna == "Contraseña"}
                                    *
                                {:else}
                                    {d.valorNuevo}
                                {/if}
                            </td>
                        </tr>
                    {/each}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
