<?= $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><?= $title_shopping ?></span>
        </div>

        <div class="flex justify-between gap-10 mt-4 items-start">
            <?php if (__login()) : ?>
                <div>
                    <ul class="flex-c-c gap-10">
                        <?php foreach (web()->shopping_groups as $group) : ?>
                            <li><a class="button" href="<?= __redirect("shop/{$category}/{$group['group']}") ?>"><?= $group['name'] ?></a></li>
                        <?php endforeach; ?>
                    </ul>
                </div>

                <div class="content-shopping">
                    <?php if (!empty($items)) :  ?>
                        <div class="flex-c-c gap-10">
                            <a href="javascript:void(0)" id="geral" class="select-category"> Geral</a>
                            <?php foreach (characters['classes'] as $class) : ?>
                                <a href="javascript:void(0)" id="<?= $class['short_name'] ?>" class="select-category"> <?= $class['name'] ?></a>
                            <?php endforeach; ?>
                        </div>

                        <div class="flex-c-c gap-10 list-items">
                            <?php foreach ($items as $item) : ?>
                                <div class="item category" id="<?= $item['class'] ?>">
                                    <p><?= $item['name'] ?> <span class="class"><?= $item['class'] ?></span></p>
                                    <div class="my-4">
                                        <img src="<?= __resources("items/{$item['image']}") ?>">
                                    </div>
                                    <p><?= $item['price'] ?> <span><?= $coin['coin_name'] ?></span></p>
                                    <a class="button" href="<?= __redirect("shop/{$category}/{$group_item}/item/details/{$item['id']}") ?>">Comprar</a>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    <?php
                    else : ?>
                        <p class="warning"><?= $alert ?></p>
                    <?php endif; ?>
                <?php else : ?>
                    <div class="warning">You need to be logged into your account to continue with the purchase</div>
                <?php endif; ?>
                </div>

        </div>

    </div>
</main>

<script>
    $buttons = document.querySelectorAll(".select-category");
    console.log($buttons);

    $buttons.forEach(e => {
        e.onclick = event => {
            var targetID = event.target.getAttribute("id");
            var category = document.querySelectorAll(".category");
            category.forEach(c => {
                var categoryID = c.getAttribute("id");
                if (targetID == categoryID) c.style.display = "block";
                else c.style.display = "none";
            })
        }
    })
</script>