<?= $this->layout('_theme', ['title' => $title, 'subtitle' => 'Gerenciar todas as categorias']); ?>


<div class="flex gap-5 flex-wrap justify-center mb-10">
    <?php if ($categories) : foreach ($categories as $c) : ?>
            <button id="<?= $c['name'] ?>" class="bg-sky-500 rounded-sm text-[13px] text-white py-0.5 px-2 hover:bg-sky-700 select-category"><?= $c['name'] ?></button>
    <?php endforeach;
    endif; ?>
</div>

<?php if ($categories) : foreach ($categories as $c) : ?>
        <div class="p-1 bg-gray-200 mb-4 pb-2 category" id="<?= $c['name'] ?>">
            <h2 class="p-2 bg-neutral-700 text-center uppercase mb-4 text-white text-xs">Categoria: <?= $c['name'] ?></h2>
            <div class="flex flex-wrap gap-5 justify-center">
                <?php foreach ($c['category'] as $category) : ?>
                    <div class="bg-gray-100 p-2 rounded-sm w-[300px] text-[13px] text-center">
                        <p class="bg-neutral-800 text-white p-1 rounded-sm text-xs"><?= $category->name ?></p>
                        <div class="actions flex gap-5 justify-center mt-4">
                            <a class="bg-yellow-500 text-neutral-900 py-1 px-2 text-white rounded-sm inline-block hover:bg-yellow-300" href="<?= __redirect("administration/shopping/to/edit/kit/category/{$category->id}") ?>" class="button-warning"> <i class="far fa-edit"></i </a>
                                <a class="bg-sky-500 text-white text-neutral-900 py-1 px-2 text-white rounded-sm inline-block hover:bg-sky-300" href="<?= __redirect("administration/shopping/add/new/kit/category/{$category->id}") ?>" class="button-warning"><i class="fas fa-boxes"></i></a>
                                <p class="button-danger bg-gray-500 text-white py-1 px-2 text-white rounded-sm inline-block cursor-pointer hover:bg-gray-300"> <i class="fas fa-trash-alt"></i>
                                    <a class="hidden bg-gray-500 absolute top-0 left-0 text-white py-1 px-2 text-white rounded-sm hover:bg-gray-300" href="<?= __redirect("administration/shopping/to/remove/kit/category/{$category->id}") ?>">Continuar?</a>
                                </p>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        </div>

    <?php endforeach;
else : ?>
    <div class="p-1 bg-yellow-300 text-sm rounded-full text-black text-center w-full">Não há categorias adicionada no momento</div>
<?php endif; ?>

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