<?= $this->layout('_layout', ['title' => $title]); ?>

<main class="main">
    <?= $this->insert('includes/aside_info') ?>

    <div class="content">
        <div class="h2-title h2-title-content flex-s-c">
            <span>Vip's and Coin's Packages</span>
        </div>

        <?php if (plugin()->packages) : ?>
<!--
            <div class="mb-4">
            <div>
                <div class="store flex">
                    <?php $cont = 0;
                    foreach (packages as $index => $package) : $cont++; ?>
                        <div class="list">
                            <div style="background: url(<?= __files('store/bg/' . $package['banner']) ?>) top center; height:240px"></div>
                            <div class="infos">
                                <h1><?= $package['name'] ?></h1>
                                <h1>R$ <?= number_format($package['price'], 2, ',', '.') ?></h1>

                                <a href="javascript:void(0)" class="button package-store button-store-<?= $cont ?>" data-url="<?= __redirect("auth/store/buy/package") ?>" data-id="<?= $index ?>">Comprar</a>
                                <ul role="list">
                                    <?php foreach ($package['details'] as $info) : ?>
                                        <li class="details-preview"><?= $info['name'] ?>
                                            <div class="preview">
                                                <div class="image">
                                                    <img src="<?= __files('store/mini/' . $info['info']['image']) ?>" alt="imagem item">
                                                </div>
                                                <h1><?= $info['name'] ?></h1>
                                                <p><?= $info['info']['text'] ?></p>
                                            </div>
                                        </li>
                                    <?php endforeach; ?>
                                </ul>
                            </div>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
sla da onde ta puxando isso -->
            <div class="packages flex-c-c2 my-characters-market auctions-info">
                <?php if (__login()) : ?>
                    
					<?php if ($packages) : foreach ($packages as $package) : ?>
                            <div class="package" style="width: 260px;">
                                <p class="name">Cod: (<?= $package['id'] ?>) - <?= $package['title'] ?></p>
                                    <img src="<?= web()->logo ?>" width="120">
                                    
                               <?php if ($package['id'] >= 3) { $color = "orange"; } else { $color = "white"; } ?>


                                
                                <p class="py-1" style="text-align:center; margin:15px; color:<?=$color?>"><?= $package['description'] ?></p>
                                <p class="name">R$<?= $package['price'] ?>.00 </p>
                                <br>
                                <a class="button" href="javascript:void(0)" data-url="<?= __redirect('buy/package') ?>" data-id="<?= $package['id'] ?>" data-name="<?= $package['title'] ?>">Comprar</a>
                            </div>
                        <?php endforeach; ?>
                    
					<?php endif; ?>
                <?php else : ?>
				<p style="color:orange"> Você precisa estar logado para visualizar os pacotes. </p>
				<?php endif; ?>
            </div>
        <?php endif; ?>
    </div>
</main>


<script>
    var images = document.querySelectorAll(".details-preview");
    images.forEach(e => {
        e.onmousemove = event => {
            var x = event.clientX,
                y = event.clientY;

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

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