<?= $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>Filtering by: <?= $title_section ?></span>
        </div>

        <div>
            <div>
                <?php if (plugin()->market) : ?>
                    <?= $this->insert("includes/form_search") ?>
                    <div class="p-1 bg-neutral-200 w-48">
                        <ul class="flex category_select">
                            <?php foreach (web()->shopping_groups as $group) : ?>
                                <li><a href="<?= __redirect("market/items/{$group['group']}") ?>"><span><?= $group['name'] ?></span> <img src="<?= __files("images/icon-market/{$group['group']}.png") ?>" alt=""></a></li>
                            <?php endforeach; ?>
                        </ul>
                    </div>

                    <div class="selects">
                        <ul class="flex classes_select">
                            <li>
                                <a href="<?= __redirect("market/items/class/dw") ?>"> <span>Soul Master</span> <img src="<?= __files("images/class/dw.webp") ?>"></a>
                            </li>
                            <li>
                                <a href="<?= __redirect("market/items/class/bk") ?>"> <span>Blade Knight</span> <img src="<?= __files("images/class/bk.webp") ?>"></a>
                            </li>
                            <li>
                                <a href="<?= __redirect("market/items/class/fe") ?>"> <span>Muse Elf</span> <img src="<?= __files("images/class/elf.webp") ?>"></a>
                            </li>
                            <li>
                                <a href="<?= __redirect("market/items/class/mg") ?>"> <span>Magic Gladiator</span> <img src="<?= __files("images/class/mg.webp") ?>"></a>
                            </li>
                            <li>
                                <a href="<?= __redirect("market/items/class/dl") ?>"> <span>Dark Lord</span> <img src="<?= __files("images/class/dl.webp") ?>"></a>
                            </li>
                            <li>
                                <a href="<?= __redirect("market/items/class/sum") ?>"> <span>Summoner</span> <img src="<?= __files("images/class/sum.webp") ?>"></a>
                            </li>
                            <li>
                                <a href="<?= __redirect("market/items/class/rf") ?>"> <span>Rage Fighter</span> <img src="<?= __files("images/class/rf.webp") ?>"></a>
                            </li>
                        </ul>

                        <div class="flex-s-c">
                            <ul class="flex select_tier">
                                <li>
                                    <a href="#" id="c" class="s-tier">Comum</a>
                                </li>
                                <li>
                                    <a href="#" id="r" class="s-tier">Raro</a>
                                </li>
                                <li>
                                    <a href="#" id="e" class="s-tier">Épico</a>
                                </li>
                            </ul>

                            <ul class="flex classes_select exc_select">
                                <li>
                                    <a href="<?= __redirect("market/items/exc/hp") ?>"> <span>Increase maximum life</span>
                                        <p>hp</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="<?= __redirect("market/items/exc/dmg") ?>"> <span>Damage Decrease</span>
                                        <p>dmg</p>
                                    </a>
                                </li>
                                <li>
                                    <a href="<?= __redirect("market/items/exc/ref") ?>"> <span>Reflect Decrease</span>
                                        <p>ref</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="result_items_market">
                        <?php if ($items) :  ?>


                            <div class="item-view flex-c-c">
                                <?php foreach ($items as $item) : ?>
                                    <div class="v-tier market-item <?= strtolower($item['tier']) ?>" id="<?= strtolower($item['tier']) ?>">
                                        <p class="name"><?= $item['details']['name'] ?></p>
                                        <div class="details preview">
                                            <img src="<?= __resources("items/{$item['details']['image']}"); ?>" alt="<?= $item['details']['name'] ?>" class="image <?= strtolower($item['tier']) ?>">
                                            <div class="informations">
                                                <?= $item['details']['description'] ?>
                                            </div>
                                        </div>
                                        <div class="flex-c-c">
                                            <?php if ($item['price']) : ?>
                                                <p class="price"><?= $item['price'] ?> HC</p>
                                            <?php endif; ?>
                                            <?php if ($item['zen']) : ?>
                                                <p class="price"><?= $item['zen'] ?> Zen</p>
                                            <?php endif; ?>
                                            <?php if ($item['soul']) : ?>
                                                <p class="price flex-c"><img src="<?= __files("images/jewels/soul.webp") ?>" alt=""><?= $item['soul'] ?> </p>
                                            <?php endif; ?>
                                            <?php if ($item['life']) : ?>
                                                <p class="price flex-c"><img src="<?= __files("images/jewels/life.webp") ?>" alt=""><?= $item['life'] ?> </p>
                                            <?php endif; ?>
                                            <?php if ($item['chaos']) : ?>
                                                <p class="price flex-c"><img src="<?= __files("images/jewels/chaos.webp") ?>" alt=""><?= $item['chaos'] ?> </p>
                                            <?php endif; ?>
                                            <?php if ($item['bless']) : ?>
                                                <p class="price flex-c"><img src="<?= __files("images/jewels/bless.webp") ?>" alt=""><?= $item['bless'] ?> </p>
                                            <?php endif; ?>
                                            <?php if ($item['creation']) : ?>
                                                <p class="price flex-c"><img src="<?= __files("images/jewels/creation.webp") ?>" alt=""><?= $item['creation'] ?> </p>
                                            <?php endif; ?>
                                            <?php if ($item['guardian']) : ?>
                                                <p class="price flex-c"><img src="<?= __files("images/jewels/guardian.webp") ?>" alt=""><?= $item['guardian'] ?> </p>
                                            <?php endif; ?>
                                            <?php if ($item['harmony']) : ?>
                                                <p class="price flex-c"><img src="<?= __files("images/jewels/harmony.webp") ?>" alt=""><?= $item['harmony'] ?> </p>
                                            <?php endif; ?>
                                        </div>
                                        <div class="action">
                                            <a class="button" href="javascript:void(0)" data-url="<?= __redirect('auth/market/buy/item/' . $item['id']) ?>" data-name="<?= $item['details']['name'] ?>">Comprar</a>
                                        </div>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php else : ?>
                            <div class="warning">Não há itens no mercado no momento</div>
                        <?php endif; ?>
                    </div>
                <?php else : ?>
                    <div class="warning">Função desabilitada pela administração</div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</main>

<script>
    var sTier = document.querySelectorAll('.s-tier');

    sTier.forEach(e => {

        e.onclick = el => {
            el.preventDefault();
            var target = el.target.getAttribute('id');
            var vTier = document.querySelectorAll('.v-tier');
            vTier.forEach(c => {
                var categoryID = c.getAttribute("id");
                if (target == categoryID) c.style.display = "block";
                else c.style.display = "none";
            })
        }
    })
</script>