<?= $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>Store</span>
        </div>
        <div>
            <div class="store flex-c-c">
                <?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>
</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>