<?php


use WoWPress\Api\BattleNet;
use WoWPress\Database\Cache;
use WoWPress\Frontend\Icon;
use WoWPress\Models\Character;
use WoWPress\Models\CharacterList;

global $widget_area;
set_sidebar_status('top', false);

$characters = Character::orderBy('rank')->get();
get_header();

?>
<div class="top-title flex flex-row gap-2" style="margin-top:calc(-1 * var(--wowp-gap))">
    <div class="text-3xl font-bold bg-glass shadow p-3 text-center w-full">
        <?= $GLOBALS['wowpress']['page_title'] ?>
    </div>
</div>

<section id="primary" x-data="{char:null}">
    <main id="main">
        <div class="flex flex-col gap-10">
            <?php foreach ($list->characters()->get()->groupBy('ID') as $character) : ?>
                <div class="flex flex-row gap-2 flex-wrap">
                    <div class="bg-glass shadow p-auto text-center xl:w-1/4">
                        <div class="text-2xl"><?php $character->first()->classButton ?></div>
                    </div>
                    <div class="bg-glass shadow p-auto flex-grow xl:flex-grow-0 text-2xl flex flex-col items-center justify-center">
                        <?= $character->count() ?>x
                    </div>
                    <div class="hidden flex-grow xl:grid gap-2" style=" grid-template-columns: repeat(auto-fill, 24%);">
                        <?php foreach ($character as $listItem) : ?>
                            <?php if (current_user_can('wowpress_edit_raids')) : ?>
                                <div class="bg-glass shadow p-auto flex-grow text-center border border-<?= $list->border_color ? $list->border_color . "-500" : 'white' ?>" x-data="{open:false}" @click="open=!open">
                                    <div><?= format_date($listItem->pivot->date) ?></div>
                                    <div><?= $listItem->pivot->comment ?></div>
                                    <template x-teleport="body">
                                        <div x-show="open" class="fixed inset-0 px-2 z-10 overflow-hidden flex items-center justify-center">
                                            <div x-show="open" x-on:click="open = false" x-transition:enter="transition-opacity ease-out duration-300" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity ease-in duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="absolute inset-0 bg-deepblue bg-opacity-75 transition-opacity"></div>
                                            <!-- Modal Content -->
                                            <div x-show="open" x-transition:enter="transition-transform ease-out duration-300" x-transition:enter-start="transform scale-75" x-transition:enter-end="transform scale-100" x-transition:leave="transition-transform ease-in duration-300" x-transition:leave-start="transform scale-100" x-transition:leave-end="transform scale-75" class="bg-glass border shadow overflow-hidden max-w-md w-full sm:w-96 md:w-1/2 lg:w-2/3 xl:w-1/3 z-50">
                                                <!-- Modal Body -->
                                                 <div class="p-auto flex flex-col gap-2 items-center justify-center">
                                                 <form id="removeListItem<?= $listItem->pivot->ID ?>" action="/request" method="POST" class="hidden">
                                                    <?php wp_nonce_field('removeListItem', 'removeListItem_nonce'); ?>
                                                    <input type="hidden" name="action" value="removeListItem">
                                                    <input type="hidden" name="item_id" value="<?= $listItem->pivot->ID ?>">
                                                    <!-- Modal Footer -->
                                                </form>
                                                <?php $listItem->classButton?>
                                                <div class="text-center w-full p-auto border border-white">Eintrag vom <?=format_date($listItem->pivot->date)?></div>
                                                <button type="submit" form="removeListItem<?= $listItem->pivot->ID ?>" class="btn btn-red w-full">Löschen</button>

                                                 </div>
                                                
                                            </div>
                                        </div>
                                    </template>
                                </div>

                            <?php else : ?>
                                <div class="bg-glass shadow p-auto flex-grow text-center border border-<?= $list->border_color ? $list->border_color . "-500" : 'white' ?>">
                                    <div><?= format_date($listItem->pivot->date) ?></div>
                                    <div><?= $listItem->pivot->comment ?></div>
                                </div>
                            <?php endif; ?>
                        <?php endforeach ?>
                        <?php
                        if (current_user_can('wowpress_edit_raids')) :
                        ?>
                            <button @click="char=<?= $listItem->ID ?>" class="btn btn-<?= $list->border_color ?>"><?= Icon::get('o-plus') ?></button>
                        <?php
                        endif;
                        ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </div>
    </main><!-- #main -->
    <?php
    if (current_user_can('wowpress_edit_raids')) : ?>

        <template x-teleport="#sidebar_right">
            <div class="bg-glass shadow p-auto order-1">
                <h4 class="text-xl font-bold text-center mb-2">Charakter hinzufügen</h4>
                <form action="/request" method="POST">
                    <div class="flex flex-col gap-2">
                        <?php wp_nonce_field('addCharToList', 'addCharToList_nonce'); ?>
                        <input type="hidden" name="action" value="addCharToList">
                        <input type="hidden" name="list_id" value="<?= $list->ID ?>">
                        <select name="character_ID" id="" x-model="char" class="bg-white bg-opacity-0 border-alliance">
                            <option value="null" selected disabled>Charakter auswählen</option>
                            <?php
                            foreach (Character::all() as $char) :
                            ?>
                                <option value="<?= $char->ID ?>"><?= $char->name ?> - <?= $char->realm ?></option>
                            <?php
                            endforeach;
                            ?>
                        </select>
                        <input type="text" class="bg-white bg-opacity-0 border-alliance" placeholder="Kommentar" name="comment">
                        <input type="date" name="date" id="" class="bg-white bg-opacity-0 border-alliance">
                        <button type="submit" class="btn btn-outline btn-<?= $list->border_color ?>"><?= Icon::get('o-plus') ?> Hinzufügen</a>
                    </div>
                </form>
            </div>
        </template>
    <?php
    endif;
    ?>
</section><!-- #primary -->

<?php

get_footer();
