{% extends 'base.html.twig' %}

{% block title %}Spieler erfassen | Dart Board{% endblock %}

{% block body %}
    {{ encore_entry_script_tags('playersHandler', null) }}

    {% set panelClass = 'rounded-[18px] border border-[#314254] bg-[linear-gradient(160deg,#182334,#121c29)] p-[1.2rem] shadow-[0_16px_36px_rgba(0,0,0,0.35)]' %}
    {% set inputClass = 'w-full rounded-[10px] border border-[#42566d] bg-[#0f1824] px-[0.78rem] py-[0.72rem] text-sm text-[#f6f3e8] outline-none transition placeholder:text-[#7f91a7] focus:border-[#1f9d62] focus:ring-2 focus:ring-[#1f9d62]/25' %}
    {% set buttonBaseClass = 'inline-flex cursor-pointer items-center justify-center rounded-[10px] border px-[0.95rem] py-[0.65rem] text-sm font-bold text-[#f6f3e8] transition disabled:cursor-not-allowed disabled:opacity-60' %}
    {% set ruleButtonClass = 'inline-flex min-h-[38px] cursor-pointer items-center justify-center rounded-full border border-[#4a5f78] bg-[#0f1824] px-[0.85rem] py-[0.45rem] text-[0.9rem] font-bold text-[#d6deea] transition hover:border-[#6f84a0] hover:bg-[#18273a]' %}
    {% set ruleButtonActiveClass = 'border-[#1f9d62] bg-[#1f9d62] text-white shadow-[0_0_0_2px_rgba(31,157,98,0.2)]' %}

    <div x-data="playersHandler({ redirectBasePath: '/games', selectedModeKey: '{{ selectedModeKey }}' })">
        <template x-if="loading">
            <div class="{{ panelClass }}">
                <p class="mt-[0.4rem] text-[#aab4c3]">Daten werden geladen...</p>
            </div>
        </template>

        <template x-if="!loading">
            <div class="grid gap-4">
                <section class="{{ panelClass }}">
                    <h1 class="m-0 font-space text-[#f6f3e8]">Spieler erfassen</h1>
                    <template x-if="selectedMode">
                        <p class="mt-[0.4rem] text-[#aab4c3]">Modus: <strong class="text-[#f6f3e8]" x-text="selectedMode.name"></strong> (<span x-text="selectedMode.type === 'ATW' ? 'Ziele 1-20 + Bull' : ('Startscore ' + selectedMode.startScore)"></span>)</p>
                    </template>
                    <template x-if="!selectedMode">
                        <p class="mt-[0.4rem] text-[#aab4c3]">Bitte zuerst einen Modus auswählen.</p>
                    </template>
                </section>

                <section class="{{ panelClass }}">
                    <div x-cloak x-show="errorMessage" class="mb-4 rounded-xl border border-[#b53d52] bg-[#37121a] px-4 py-3 font-semibold text-[#ffd6dd]" x-text="errorMessage"></div>

                    <form class="grid gap-4" @submit.prevent="createGame()">
                        <div class="mb-10" x-show="!selectedMode">
                            <label>Modus</label>
                            <select class="{{ inputClass }}" x-model="selectedModeKey" @change="selectedMode = modes.find(m => m.key === selectedModeKey) || null">
                                <option value="">Bitte wählen</option>
                                <template x-for="mode in modes" :key="mode.key">
                                    <option :value="mode.key" x-text="mode.name"></option>
                                </template>
                            </select>
                        </div>

                        <div class="grid gap-[0.8rem] min-[641px]:grid-cols-2" x-show="modeUsesThrowRules()">
                            <fieldset class="m-0 min-w-0 rounded-xl border border-[#3b4d60] bg-[#132233] p-3">
                                <legend class="px-[0.35rem] text-[0.88rem] font-bold text-[#c8b789]">In-Rule</legend>
                                <div class="flex flex-wrap gap-[0.55rem]">
                                    <template x-for="rule in throwRules" :key="'in_' + rule">
                                        <button type="button"
                                                class="{{ ruleButtonClass }}"
                                                :class="inRule === rule ? '{{ ruleButtonActiveClass }}' : ''"
                                                @click="inRule = rule"
                                                x-text="rule"></button>
                                    </template>
                                </div>
                            </fieldset>
                            <fieldset class="m-0 min-w-0 rounded-xl border border-[#3b4d60] bg-[#132233] p-3">
                                <legend class="px-[0.35rem] text-[0.88rem] font-bold text-[#c8b789]">Out-Rule</legend>
                                <div class="flex flex-wrap gap-[0.55rem]">
                                    <template x-for="rule in throwRules" :key="'out_' + rule">
                                        <button type="button"
                                                class="{{ ruleButtonClass }}"
                                                :class="outRule === rule ? '{{ ruleButtonActiveClass }}' : ''"
                                                @click="outRule = rule"
                                                x-text="rule"></button>
                                    </template>
                                </div>
                            </fieldset>
                        </div>
                        <p class="m-0 text-[0.9rem] text-[#aab4c3]" x-show="selectedMode && !modeUsesThrowRules()">Für diesen Modus gelten keine In-/Out-Regeln.</p>

                        <div class="grid gap-[0.55rem]">
                            <div class="hidden text-[0.84rem] text-[#9db0c6] min-[641px]:grid min-[641px]:items-center min-[641px]:gap-[0.6rem] min-[641px]:px-[0.2rem] min-[641px]:[grid-template-columns:1fr_120px_130px]">
                                <span>Name</span>
                                <span>Reihenfolge</span>
                                <span></span>
                            </div>

                            <template x-for="(player, index) in players" :key="index">
                                <div class="grid gap-[0.6rem] min-[641px]:items-center min-[641px]:[grid-template-columns:1fr_120px_130px]">
                                    <input type="text" class="{{ inputClass }}" x-model="player.name" @input.debounce.150ms="persistPlayerNames()" placeholder="Spielername" maxlength="60">
                                    <input type="number" class="{{ inputClass }}" x-model.number="player.position" min="0" step="1">
                                    <button type="button" class="{{ buttonBaseClass }} border-[#b53d52] bg-[#33141e] text-[#ffd6dd] hover:bg-[#431a27]" @click="removeRow(index)">Entfernen</button>
                                </div>
                            </template>
                        </div>

                        <div class="flex flex-col gap-[0.8rem] min-[641px]:flex-row min-[641px]:justify-between">
                            <button type="button" class="{{ buttonBaseClass }} border-[#42566d] bg-[#0f1824] text-[#f6f3e8] hover:border-[#566b86] hover:bg-[#1a2638]" @click="addRow">Spieler hinzufügen</button>
                            <button type="submit" class="{{ buttonBaseClass }} border-[#1f9d62] bg-[#1f9d62] text-[#f7f2dc] hover:border-[#16714a] hover:bg-[#16714a]" :disabled="isSubmitting" x-text="isSubmitting ? 'Erstelle Spiel...' : 'Spiel erstellen'"></button>
                        </div>
                    </form>
                </section>
            </div>
        </template>
    </div>
{% endblock %}
