<?= $this->layout('_theme', ['title' => $title, 'subtitle' => 'Adicionar nova item']); ?>

<div class="p-4 bg-gray-100 rounded-lg">
    <form action="<?= __redirect('administration/auth/add/new/kit/category/all/' . $category) ?>">
        <div>
            <p class="px-1 py-3 text-[13px]">Nome do kit<sup>*</sup></p>
            <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="name" placeholder="Nome do item" maxlength="80">
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Imagem do kit<sup>*</sup></p>
            <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="file" name="image">
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Preço do kit<sup>*</sup></p>
            <input class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100" type="text" name="price" placeholder="Preço do item">
        </div>

        <div>
            <p class="px-1 py-3 text-[13px]">Classe<sup>*</sup></p>
            <select name="class" class="rounded-sm p-2 my-1 text-xs w-full border border-neutral-400 focus:outline-none focus:bg focus:bg-neutral-100">
                <option value="geral"> - Geral (Todas as classes)</option>
                <?php foreach (characters['classes'] as $class) : ?>
                    <option value="<?= $class['short_name'] ?>"> - <?= $class['name'] ?></option>
                <?php endforeach; ?>
            </select>
        </div>

        <button class="rounded-lg py-3 px-6 bg-sky-500 text-white block mt-4 mx-auto text-sm border-2 border-sky-400 hover:bg-sky-700 transition ease-in-out duration-500" type="submit">Adicionar</button>
    </form>
</div>

<div class="mt-4"></div>

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

<div class="flex flex-wrap gap-5 justify-center">
    <?php if ($listkit) : foreach ($listkit as $kit) : ?>
            <div class="bg-gray-100 p-2 rounded-lg w-full max-w-xs text-[13px] text-center category" id="<?= $kit->class ?>">
                <p class="bg-neutral-800 text-white p-1 rounded-lg"><?= $kit->name ?> <span class="bg-sky-500 px-1.5 py-0.5 rounded-sm"><?= ucfirst($kit->class) ?></span></p>
                <div class="mt-4">
                    <img src="<?= __resources("kits/{$kit->image}") ?>" class="w-28 h-32 object-container mx-auto">
                </div>
                <div class="actions flex gap-5 justify-center mt-4">
                    <a class="bg-yellow-500 text-neutral-900 p-1 px-2 rounded-sm inline-block hover:bg-yellow-300" href="<?= __redirect("administration/shopping/to/add/items/kit/{$kit->id}") ?>" class="button-warning"> <i class="fas fa-cogs"></i> </a>
                    <a class="bg-sky-500 text-neutral-900 p-1 px-2 rounded-sm inline-block hover:bg-sky-300 text-white" href="<?= __redirect("administration/shopping/to/edit/kit/{$kit->id}") ?>" class="button-warning"> <i class="far fa-edit"></i> </a>
                    <p class="button-danger bg-red-500 text-white p-1 px-2 rounded-sm inline-block cursor-pointer hover:bg-red-300" class="px-1 py-3 text-[13px]" class="button-danger"> <i class="far fa-trash-alt"></i>
                        <a class="hidden bg-red-500 absolute top-0 left-0 text-white p-1 rounded-sm hover:bg-red-300" href="<?= __redirect("administration/shopping/to/remove/kit/all/{$kit->id}/{$category}") ?>">Continuar?</a>
                    </p>
                </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á kits adicionada no momento</div>
    <?php endif; ?>

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