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

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

        <div class="h2-title h2-title-content flex-s-c">
            <span>Character: <?= $character->name ?></span>
        </div>
        <?php if (plugin()->market) : ?>

            <div class="information warning">
                <strong>Atenção:</strong> verifique se <strong>há itens que não estejam equipados</strong>
                <br> no seu inventário, não nos resposabilizamos se for items a mais para o comprador.
            </div>
            <br>
            <br>
            <div class="flex-c-c align-start gap-10">
                <div class="details-advertise">
                    <img src="<?= __avatar($character->image) ?>" alt="<?= $character->name ?>" width="100" height="">
                    <div class="flex-c-c gap-5">
                        <div class="information">
                            <div class="info"> Resets: <span><?= $character->resets ?></span></div>
                            <div class="info"> MResets: <span><?= $character->mresets ?></span></div>
                            <div class="info"> Killer: <span><?= $character->killer ?></span></div>
                            <div class="info"> Hero: <span><?= $character->hero ?></span></div>
                        </div>
                        <div class="information">
                            <div class="info"> Força: <span><?= $character->strength ?></span></div>
                            <div class="info"> Agilidade: <span><?= $character->dexterity ?></span></div>
                            <div class="info"> Vitalidade: <span><?= $character->vitality ?></span></div>
                            <div class="info"> Energia: <span><?= $character->energy ?></span></div>
                        </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 object-contain">
                                    <div class="informations">
                                        <?= $inv['description'] ?>
                                    </div>
                                </div>
                            </div>


                        <?php endforeach; ?>
                    </div>

                </div>
                <div class="w-80">
                    <form action="<?= __redirect("auth/market/advertise/character") ?>" method="post" class="p-2 m-auto w-full">
                        <?= __csrf(); ?>
                        <input type="hidden" name="char" value="<?= $character->name ?>">
                        <div class="fields">
                            <div class="fieldGroup">
                                <span>Valor a cobrar <sup>*</sup></span>
                                <input class="py-1 px-3 rounded-full border border-neutral-300 block w-full focus:outline-none focus:bg focus:bg-neutral-100" type="number" name="price" required autocomplete="off" placeholder="0">
                            </div>
                        </div>

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