<?= $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>Perfil do personagem: <?= $data['name'] ?></span>
        </div>

        <div class="items-start gap-5">
            <div>
                <?php if ($character = $data) : ?>
                    <div class="inventory inventory-preview">
                        <!-- class="market-item" -->
                        <div class="flex-s-c">
                            <div class="info-char flex-c">
                                <div class="flex-c">
                                    <span>Level</span>
                                    <span><?= $character['level'] ?></span> |
                                </div>
                                <div class="flex-c">
                                    <span>M.Level</span>
                                    <span><?= $character['mlevel'] ?></span>
                                </div>
                            </div>

                            <img src="<?= __files('images/hero-logo.png') ?>" alt="" width="75">

                            <div class="info-char flex-c">
                                <div class="flex-c">
                                    <span>Resets</span>
                                    <span><?= $character['resets'] ?></span> |
                                </div>
                                <div class="flex-c">
                                    <span>M.Resets</span>
                                    <span><?= $character['mresets'] ?></span>
                                </div>
                            </div>
                        </div>
                        <div style="position: relative;margin-top:4rem">
                            <div class="flex-s-c">
                                <div class="left">
                                    <div class="flex-c">
                                        <div class="i-helm"></div>
                                        <div class="i-pet"></div>
                                    </div>
                                    <div class="flex-c">
                                        <div class="i-armor"></div>
                                        <div class="i-pendant"></div>
                                    </div>
                                    <div class="flex-c">
                                        <div class="i-sword"></div>
                                        <div class="i-ring-1"></div>
                                        <div class="i-pants"></div>
                                    </div>
                                </div>

                                <div class="character">
                                    <div class="names">
                                        <h1><?= $character['name'] ?></h1>
                                        <p><?= $character['class'] ?></p>
                                        <?php if ($character['guild'] != '-') : ?>
                                            <h1>Guid <span><?= $character['guild'] ?></span> <img src="<?= $character['guild_mark'] ?>" alt="" width="15" height="15"></h1>
                                        <?php endif; ?>
                                    </div>
                                    <img src="<?= __files('images/classes/big/' . strtolower($character['class_short']) . '.png') ?>" alt="" width="270" height="310" style="position: absolute;top: 0;left: 190px;">
                                </div>

                                <div class="right">
                                    <div class="flex-c">
                                        <div class="i-wing"></div>
                                    </div>
                                    <div class="flex-c">
                                        <div class="i-gloves"></div>
                                    </div>
                                    <div class="flex-c">
                                        <div class="i-boots"></div>
                                        <div class="i-ring-2"></div>
                                        <div class="i-shield"></div>
                                    </div>
                                </div>
                            </div>


                            <?php foreach ($data['inventory'] as $key => $inv) : ?>



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


                            <?php endforeach; ?>

                        </div>
                        <div class="slideInfo-stats stats-character">
                            <div class="stats">
                                <span class="stats-name">Strength</span>
                                <span class="stats-bar stat-green"><span style="width: <?= round(($character['strength'] / 280) - 132) > 0 ? round(($character['strength'] / 280) - 132)  : 0 ?>%; max-width: 140px;"></span></span>
                                <span class="stats-number stat-green"><?= $character['strength'] ?></span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Dextetiry</span>
                                <span class="stats-bar stat-red"><span style="width:<?= round(($character['dexterity'] / 280) - 132) > 0 ? round(($character['dexterity'] / 280) - 132)  : 0 ?>%; max-width: 140px;"></span></span>
                                <span class="stats-number stat-red"><?= $character['dexterity'] ?></span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Vitality</span>
                                <span class="stats-bar stat-yellow"><span style="width:<?= round(($character['vitality'] / 280) - 132) > 0 ? round(($character['vitality'] / 280) - 132)  : 0 ?>%; max-width: 140px;"></span></span>
                                <span class="stats-number stat-yellow"><?= $character['vitality'] ?></span>
                            </div>
                            <div class="stats">
                                <span class="stats-name">Energy</span>
                                <span class="stats-bar stat-yellow"><span style="width:<?= round(($character['energy'] / 280) - 132) > 0 ? round(($character['energy'] / 280) - 132)  : 0 ?>%; max-width: 140px;"></span></span>
                                <span class="stats-number stat-yellow"><?= $character['energy'] ?></span>
                            </div>
                            <?php if ($character['class_short'] == "DL" or $character['class_short'] == 'LE') : ?>
                                <div class="stats">
                                    <span class="stats-name">Command</span>
                                    <span class="stats-bar stat-red"><span style="width:<?= round(($character['leadership'] / 280) - 132) > 0 ? round(($character['leadership'] / 280) - 132)  : 0 ?>%; max-width: 140px;"></span></span>
                                    <span class="stats-number stat-red"><?= $character['leadership'] ?></span>
                                </div>
                            <?php endif; ?>
                        </div>
                    </div>

                <?php else : ?>
                    <div class="warning">Não foi possível carregar os detalhes do personagem</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>