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

        <?= $this->insert('user/_user'); ?>

        <div class="h2-title h2-title-content flex-s-c">
            <span>Advertise item: <?= $item['name'] ?></span>
        </div>
        <?php if (plugin()->market) : ?>
            <div class="information warning">
                For all sales, the server will be charged 20%, and the user will earn 80% of the value of the item.
            </div>
            <br>
            <div class="flex-c-c gap-10 align-start">
                <div class="details-advertise">
                    <img src="<?= __resources("items/{$item['image']}"); ?>" alt="<?= $item['name'] ?>" class="w-24 h-24 object-contain m-auto">
                    <div class="preview">
                        <?= $item['description'] ?>
                    </div>
                </div>
                <div class="form-advertise">
                    <form action="<?= __redirect("auth/market/advertise/item") ?>" method="post" class="p-2 m-auto w-full">
                        <?= __csrf(); ?>

                        <div class="buttons">
                            <a href="javascript:void(0)" id="coins" class="active">Coins</a>
                            <a href="javascript:void(0)" id="jewels">Jewels</a>
                        </div>

                        <input type="hidden" name="hex" value="<?= $item['hex'] ?>">
                        <div class="fields coins">
                            <div class="fieldGroup">
                                <span>Zen <sup>*</sup></span>
                                <input type="number" name="zen" autocomplete="off" placeholder="0">
                            </div>
                            <div class="fieldGroup">
                                <span><?= market['coin_name'] ?><sup>*</sup></span>
                                <input type="number" name="hcoin" autocomplete="off" placeholder="0">
                            </div>
                        </div>

                        <div class="jewels">
                            <div class="flex-c">
                                <div class="name flex-c gap-5"><img src="<?= __files("images/jewels/soul.webp") ?>" alt=""> Soul</div>
                                <input type="number" name="soul" autocomplete="off" placeholder="0">
                            </div>
                            <div class="flex-c">
                                <div class="name flex-c gap-5"><img src="<?= __files("images/jewels/bless.webp") ?>" alt=""> Bless</div>
                                <input type="number" name="bless" autocomplete="off" placeholder="0">
                            </div>
                            <div class="flex-c">
                                <div class="name flex-c gap-5"><img src="<?= __files("images/jewels/life.webp") ?>" alt=""> Life</div>
                                <input type="number" name="life" autocomplete="off" placeholder="0">
                            </div>
                            <div class="flex-c">
                                <div class="name flex-c gap-5"><img src="<?= __files("images/jewels/chaos.webp") ?>" alt=""> Chaos</div>
                                <input type="number" name="chaos" autocomplete="off" placeholder="0">
                            </div>
                            <div class="flex-c">
                                <div class="name flex-c gap-5"><img src="<?= __files("images/jewels/creation.webp") ?>" alt=""> Creation</div>
                                <input type="number" name="creation" autocomplete="off" placeholder="0">
                            </div>
                            <div class="flex-c">
                                <div class="name flex-c gap-5"><img src="<?= __files("images/jewels/harmony.webp") ?>" alt=""> Harmony</div>
                                <input type="number" name="harmony" autocomplete="off" placeholder="0">
                            </div>
                            <div class="flex-c">
                                <div class="name flex-c gap-5"><img src="<?= __files("images/jewels/guardian.webp") ?>" alt=""> Guardian</div>
                                <input type="number" name="guardian" autocomplete="off" placeholder="0">
                            </div>
                        </div>
                        <input type="hidden" name="name_item" value="<?= $item['name'] ?>">

                        <button class="rounded-full py-1 px-4 bg-orange-500 text-white block mt-4 mx-auto text-sm border-2 border-orange-400 hover:bg-orange-700 transition ease-in-out duration-500" type="submit"> Anunciar</button>
                    </form>
                </div>
            </div>
        <?php else : ?>
            <div class="p-1 bg-yellow-500 text-white text-center">Função desabilitada pela administração</div>
        <?php endif; ?>
    </div>
</main>

<script>
    var coins = document.querySelector('#coins');
    var jewels = document.querySelector('#jewels');

    coins.onclick = fn => {
        document.querySelector(".form-advertise .buttons .active").classList.remove("active")
        fn.target.classList.add('active');
        document.querySelector(".form-advertise .jewels").style.display = 'none'
        document.querySelector(".form-advertise .coins").style.display = 'block'
    }
    jewels.onclick = fn => {
        document.querySelector(".form-advertise .buttons .active").classList.remove("active")
        fn.target.classList.add('active');
        document.querySelector(".form-advertise .jewels").style.display = 'block'
        document.querySelector(".form-advertise .coins").style.display = 'none'
    }
</script>