WowPress-Tailwind/theme/template-parts/components/raid-signup.php

<?php

use WoWPress\Frontend\Icon;
use WoWPress\Frontend\ToggleButton;
use WoWPress\Models\Signup;

$id = "raidSignup_" . uniqid();

global $user;
$chars = [];
if (!empty($this->character->user->ID)) {
    $chars = $this->character->user->characters()->where('raidchar', true)->get();
}

if (empty($chars) || empty($chars->first())) {
    $chars = [$this->character];
}


?>

<div>
    <div class="flex <?= $vertical ? "flex-col" : "flex-row" ?> border border-<?= $this->character->color ?> shadow" x-data="{open : false}">
        <button <?= ($doSignup && $this->character->can_edit) ? 'x-on:click="open = true"' : '' ?> class="btn btn-outline btn-<?= $this->character->color ?> w-full">
            <img src="<?= $this->character->classIcon ?>" class="h-8"><?= $this->character->name ?></button>
        <?php if ($showStatus) : ?>
            <div class="border border-<?= $this->character->color ?> bg-<?= $this->getStatus()->color ?> bg-opacity-25 flex flex-row text-<?= $this->getStatus()->color ?> items-center justify-center p-auto gap-1"><?= Icon::get($this->getStatus()->icon) ?>
                <?= $vertical ? $this->getStatus()->name : "" ?>
            </div>
        <?php endif; ?>
        <?php if ($showRole) : ?>
            <div class="border border-<?= $this->character->color ?> bg-<?= $this->getRole()->color ?> bg-opacity-25 flex flex-row text-<?= $this->getRole()->color ?> items-center justify-center p-auto gap-1"><?= Icon::get($this->getRole()->icon) ?>
                <?= $vertical ? $this->getRole()->name : "" ?>
            </div>
        <?php endif; ?>

        <?php if ($doSignup && $this->character->can_edit) : ?>
            <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 -->
                        <form id="<?= $id ?>" action="/request" method="POST">
                            <?php wp_nonce_field('signupRaid', 'signupRaid_nonce'); ?>
                            <input type="hidden" name="action" value="signupRaid">
                            <input type="hidden" name="raid_id" value="<?= $this->raid->ID ?>">

                            <div class="grid p-auto gap-auto">

                                <?php foreach ($chars as $key => $character) :
                                ?>
                                    <div class="hidden lg:block">
                                        <?php
                                        (new ToggleButton([
                                            'type' => 'radio',
                                            'name' => 'raid_character',
                                            'value' => $character->ID,
                                            'text' => $character->name,
                                            'color' => $character->color,
                                            'icon_yes' => 'o-check',
                                            'checked' => $character->ID == $this->character->ID,
                                            'row' => false,
                                        ]))->render();
                                        ?>
                                    </div>
                                <?php



                                endforeach; ?>
                            </div>
                            <div class="grid grid-cols-2 gap-auto p-auto">

                                <div class="col-span-2 text-center hidden lg:block">Anwesenheit</div>
                                <?php
                                foreach ($this->getStatusList(true) as $key => $status) {
                                    (new ToggleButton([
                                        'type' => 'radio',
                                        'name' => 'raid_status',
                                        'text' => $status->name,
                                        'color' => $status->color,
                                        'icon_yes' => $status->icon,
                                        'value' => $key,
                                        'checked' => $key == $this->status,
                                        'row' => false,
                                    ]))->render();
                                }
                                ?>
                                <div class="col-span-2 text-center hidden lg:block">Rolle</div>
                                <?php
                                foreach ($this->getRoleList() as $key => $role) {
                                    (new ToggleButton([
                                        'type' => 'radio',
                                        'name' => 'raid_role',
                                        'text' => $role->name,
                                        'color' => $role->color,
                                        'icon_yes' => $role->icon,
                                        'value' => $key,
                                        'checked' => $key == $this->role,
                                        'row' => false,
                                    ]))->render();
                                }
                                ?>
                                <div class="col-span-2 text-center">Kommentar</div>
                                <div class="flex flex-col gap-auto col-span-2">
                                    <input type="text" name="comment" class="w-full bg-glass text-white border border-white" placeholder="Kommentar eingeben...">
                                    <button type="submit" x-on:click="open = false" class="btn btn-outline btn-monk">
                                        <?= Icon::get('o-paper-airplane') ?>
                                        Speichern
                                    </button>
                                </div>
                            </div>
                            <!-- Modal Footer -->
                        </form>
                    </div>
                </div>
            </template>
        <?php endif; ?>
    </div>
    <?php if ($showComment) : ?>
        <div class="p-auto bg-glass shadow flex flex-col xl:flex-row items-center gap-2">
            <div>
                <?= Icon::get('o-chat-bubble-bottom-center-text') ?>
            </div>
            <div class="text-wrap">
                <?= $this->comment ?>
            </div>
        </div>
    <?php endif; ?>
</div>