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

<div class="p-1 bg-neutral-100/80">
    <div class="p-1 text-neutral-900 uppercase font-semibold bg-neutral-200/50 rounded-sm">
        <?= $title_shopping ?>
    </div>

    <div class=" justify-between gap-10 mt-4 items-start">
        <?php if (__login()) : ?>
<div style="padding: 4px; background-color: #333; width: 192px;">
    <ul>
        <?php foreach ($categories as $group) : ?>
            <li>
                <a 
                    style="display: block; margin-top: 4px; margin-left: auto; margin-right: auto; padding: 8px; background-color: #444; color: #fff; font-size: 12px; text-align: center; border: 2px solid #666; border-radius: 4px; transition: background-color 0.5s ease-in-out;" 
                    href="<?= __redirect("kit/shop/{$category}/{$group->slug}") ?>"
                    onmouseover="this.style.backgroundColor='#666'" 
                    onmouseout="this.style.backgroundColor='#444'"
                >
                    <?= $group->name ?>
                </a>
            </li>
        <?php endforeach; ?>
    </ul>
</div>


            <div class="w-full">
                <?php if (!empty($items)) : ?>
                    <div class="flex gap-5 flex-wrap mb-10">
                        <button id="geral" class="bg-orange-500 rounded-sm text-[11px] text-white py-0.5 px-2 hover:bg-orange-700 select-category focus:bg-orange-800"> Geral</button>
                        <?php foreach (characters['classes'] as $class) : ?>
                            <button id="<?= $class['short_name'] ?>" class="bg-orange-500 rounded-sm text-[11px] text-white py-0.5 px-2 hover:bg-orange-700 select-category focus:bg-orange-800"> <?= $class['name'] ?></button>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>

                <div class="flex justify-center items-start gap-10 flex-wrap w-full">
                    <?php if (!empty($items)) : foreach ($items as $item) : ?>
                            <div class="item text-center p-3 bg-neutral-200/60 border-2 border-neutral-200 rounded-xs text-xs w-40 category" id="<?= $item['class'] ?>">
                                <p class="p-1 bg-neutral-600 rounded-xs text-white relative"><?= $item['name'] ?> <span class=" bg-neutral-900 rounded-md px-1.5 absolute -top-2 -right-2 text-[10px]"><?= $item['class'] ?></span></p>
                                <div class="my-4">
                                    <img src="<?= __resources("kits/{$item['image']}") ?>" class="w-24 h-24 object-contain m-auto">
                                </div>
                                <p class="p-1 bg-neutral-600 rounded-xs text-white"><?= $item['price'] ?> <span><?= $coin['coin_name'] ?></span></p>
                                <div class="action">
                                    <a class="rounded-xs bg-orange-500 text-white p-1 block mt-4 hover:bg-orange-700 transition ease-in-out duration-500" href="javascript:void(0)" data-url="<?= __redirect("shopping/buy/kit/item") ?>" data-name="<?= $item['name'] ?>" data-item="<?= $item['id'] ?>">Comprar</a>
                                </div>
                            </div>
                        <?php endforeach;
                    else : ?>
                        <p class="p-1 bg-yellow-300 text-sm rounded-full text-black text-center w-full"><?= $alert ?></p>
                    <?php endif; ?>
                </div>
            <?php else : ?>
                <div class="p-1 bg-yellow-300 text-sm rounded-full text-black text-center w-full">Você precisa estar logado em sua conta, para continuar com a compra</div>
            <?php endif; ?>
            </div>

    </div>

</div>

<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>