<?= $this->layout('_theme', ['title' => $title, 'subtitle' => 'Todos os logs']); ?>

<div class="admin-form admin-datatable p-4 bg-gray-100 rounded-lg">
    <?php if ($items) : ?>
        <table id="tableitem" class="display" style="width:100%">
            <thead>
                <tr>
                    <th>Item</th>
                    <th>Conta</th>
                    <th>Shopping</th>
                    <th>Categoria</th>
                    <th>Data</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($items as $item) : ?>
                    <tr>
                        <td class="text-xs text-white" align="center">
                            <div class="details preview">
                                <p class="image"><?= $item['item_name']?></p>
                                <div class="image-a">
                                    <div class="informations">
                                        <?= $item['details']['description'] ?>
                                    </div>
                                </div>
                            </div>
                        </td>
                        <td class="text-xs" align="center"><?= $item['account'] ?></td>
                        <td class="text-xs" align="center"><?= $item['shopping'] ?></td>
                        <td class="text-xs" align="center"><?= $item['item_category'] ?></td>
                        <td class="text-xs" align="center"><?= date('d/m/Y', strtotime($item['created_at'])) ?></td>
                    </tr>
                <?php endforeach; ?>
            </tbody>

        </table>
    <?php else : ?>
        <div class="p-1 bg-yellow-300 text-sm rounded-full text-black text-center w-full">Não há nenhum log no momento</div>
    <?php endif ?>
    <script>
        var images = document.querySelectorAll(".preview .image");
        images.forEach(e => {
            e.onmousemove = event => {
                var x = event.clientX,
                    y = event.clientY;

                var preview = event.target.parentElement.querySelector(".informations");
                preview.style.top = (y + 15) + 'px';
                preview.style.left = (x + 15) + 'px';
                preview.style.display = "block";
            }

            e.onmouseout = event => {
                var preview = event.target.parentElement.querySelector('.informations');
                preview.style.top = '0px';
                preview.style.left = '0px';
                preview.style.display = "none";
            }
        });
    </script>
</div>