<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Add Wordling Game') }}" :buttons="$buttons" :isFilterable="false" />
        <div class="mt-4">
            <form action="{{ route('admin.games.wordling.store') }}" method="POST" class="form-submit-add">
                @csrf

                <div
                    class="grid border border-neutral-30 dark:border-neutral-500 rounded p-4 xl:p-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <div class="form-group">
                        <label for="game_type" class="block text-sm font-medium mb-2">{{ __('Game Type') }}</label>
                        <select name="game_type" id="game_type" class="w-full text-input" required>
                            @foreach ([['name' => 'Wordling Min', 'value' => 'wordling_min'], ['name' => 'Wordling Main', 'value' => 'wordling_main'], ['name' => 'Wordling Max', 'value' => 'wordling_max']] as $type)
                                <option value="{{ $type['value'] }}" {{ old('game_type', 'wordling_main') == $type['value'] ? 'selected' : '' }}>
                                    {{ $type['name'] }}
                                </option>
                            @endforeach
                        </select>
                        @error('game_type')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="input-group">
                        <x-admin::label for="game_date">
                            {{ __('Game Date') }}
                        </x-admin::label>
                        <input type="text" class="date-picker text-input" name="game_date"
                            value="{{ old('game_date', now()->format('Y-m-d')) }}" />
                        <x-admin::input-error name="game_date" />
                    </div>

                    <div class="form-group">
                        <label for="secret_word" class="block text-sm font-medium mb-2">{{ __('Secret Word') }}</label>
                        <input type="text" name="secret_word" id="secret_word" class="w-full text-input"
                            value="{{ old('secret_word') }}" placeholder="{{ __('Enter secret word') }}" required
                            minlength="3" maxlength="7" />
                        @error('secret_word')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Max Attempts -->
                    <div class="form-group">
                        <label for="max_attempts"
                            class="block text-sm font-medium mb-2">{{ __('Max Attempts') }}</label>
                        <input type="number" name="max_attempts" id="max_attempts" class="w-full text-input"
                            value="{{ old('max_attempts', 6) }}" min="1" max="20" required />
                        @error('max_attempts')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Status -->
                    <div class="form-group">
                        <label for="status" class="block text-sm font-medium mb-2">{{ __('Status') }}</label>
                        <select name="status" id="status" class="w-full text-input" required>
                            {{-- use from my enum --}}
                            @foreach (\App\Enums\GameEnum::cases() as $enum)
                                <option value="{{ $enum->value }}" {{ old('status', 'active') == 'active' ? 'selected' : '' }}>
                                    {{ $enum->label() }}
                                </option>
                            @endforeach
                        </select>
                        @error('status')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="md:col-span-2 lg:col-span-3">
                        <div class="flex items-center justify-end mt-4">
                            <button type="submit" class="btn btn-primary">
                                {{ __('Save Game') }}
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    @push('scripts')
        @vite('resources/admin/js/game/game.js')
    @endpush
</x-admin-app-layout>