<?= $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>Viewing character details: <?= $character->name ?></span>
        </div>


        <div class="flex-c-c align-start gap-10">
            <div>
                <?php if (plugin()->market) : ?>
                    <?php if ($character) :  ?>
                        <div class="item-view flex gap-5 justify-center py-3 flex-wrap">
                            <div class="details-advertise">
                                <img src="<?= __avatar(json_decode($character->description)->avatar) ?>" alt="<?= $character->name ?>" width="100" height="100">
                                <div class=" flex-c-c gap-5">
                                <div class="information">
                                    <p class="info">Força: <span><?= json_decode($character->description)->strength ?></span></p>
                                    <p class="info">Agilidade: <span><?= json_decode($character->description)->dexterity ?></span></p>
                                    <p class="info">Vitalidade: <span><?= json_decode($character->description)->vitality ?></span></p>
                                    <p class="info">Energia: <span><?= json_decode($character->description)->energy ?></span></p>
                                </div>
                                <div class="information">
                                    <p class="info">Resets: <span><?= json_decode($character->description)->resets ?></span></p>
                                    <p class="info">NResets: <span><?= json_decode($character->description)->mresets ?></span></p>
                                    <p class="info">Kills: <span><?= json_decode($character->description)->killer ?></span></p>
                                    <p class="info">Hero: <span><?= json_decode($character->description)->hero ?></span></p>
                                </div>
                            </div>
                            <br>

                            <div class="inventory market-item" style="background: url('<?= __resources('assets/img/inventory.png') ?>')">
                                <?php foreach ($inventory as $key => $inv) : ?>

                                    <div>
                                        <div class="details preview <?= $inv['class'] ?>">
                                            <img src="<?= __resources("items/{$inv['details']->image}"); ?>" alt="<?= $inv['details']->name ?>" class="image-inventory ">
                                            <div class="informations">
                                                <?= $inv['description'] ?>
                                            </div>
                                        </div>
                                    </div>


                                <?php endforeach; ?>
                            </div>

                        </div>
                        <div class="w-80">
                            <form action="<?= __redirect("auth/market/buy/character") ?>" method="post" class="p-2 m-auto w-full">
                                <?= __csrf(); ?>
                                <div class="bg-neutral-600 rounded-md p-3">
                                    <p class="warning">Character value: <span class="px-2 py-1 bg-orange-600 rounded-md"><?= $character->price ?> <?= market['coin_name'] ?></span></p>
                                </div>
                                <input type="hidden" name="char" value="<?= $character->name ?>">
                                <input type="hidden" name="id_char" value="<?= $character->id ?>">
                                <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"> Comprar</button>
                            </form>
                        </div>
            </div>
        <?php else : ?>
            <div class="p-1 bg-yellow-300 text-sm rounded-full text-black text-center w-full">There are no characters on the market at the moment</div>
        <?php endif; ?>
    <?php else : ?>
        <div class="p-1 bg-yellow-300 text-sm rounded-full text-black text-center w-full">Function disabled by administration</div>
    <?php endif; ?>
        </div>
    </div>
    </div>
</main>
<script>
    var images = document.querySelectorAll(".preview .image-inventory");
    images.forEach(e => {
        e.onmousemove = event => {
            var x = event.clientX,
                y = event.clientY;

            var preview = event.target.parentElement.querySelector(".informations");
            preview.style.top = (y + 15) + 'px';
            preview.style.left = (x + 15) + 'px';
            preview.style.display = "block";
        }

        e.onmouseout = event => {
            var preview = event.target.parentElement.querySelector('.informations');
            preview.style.top = '0px';
            preview.style.left = '0px';
            preview.style.display = "none";
        }
    });
</script>