<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Add New Badge') }}" :buttons="$buttons" :isFilterable="false" />
        <div class="mt-4">
            <form action="{{ route('admin.games.badges.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 gap-4">

                    <!-- Badge Name -->
                    <div class="form-group">
                        <label for="badge_name" class="block text-sm font-medium mb-2">{{ __('Badge Name') }} <span
                                class="text-red-500">*</span></label>
                        <input type="text" name="badge_name" id="badge_name" class="w-full text-input"
                            value="{{ old('badge_name') }}" placeholder="{{ __('Enter badge name') }}" required />
                        @error('badge_name')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

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

                    <!-- Badge Order -->
                    <div class="form-group">
                        <label for="badge_order" class="block text-sm font-medium mb-2">{{ __('Display Order') }} <span
                                class="text-red-500">*</span></label>
                        <input type="number" name="badge_order" id="badge_order" class="w-full text-input"
                            value="{{ old('badge_order', $nextOrder) }}" min="0" required />
                        <small class="text-gray-500">{{ __('Lower numbers appear first') }}</small>
                        @error('badge_order')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Badge Image -->
                    <div class="input-group" id="badge_image">
                        <x-admin::label for="badge_image">{{ __('Badge Image') }}</x-admin::label>
                        <x-admin::file-uploader type="text" name="badge_image" />
                        <x-admin::input-error name="badge_image" />
                    </div>
                    <!-- Badge Description -->
                    <div class="form-group md:col-span-2">
                        <label for="badge_description"
                            class="block text-sm font-medium mb-2">{{ __('Badge Description') }}</label>
                        <textarea name="badge_description" id="badge_description" class="w-full text-input" rows="3"
                            placeholder="{{ __('Enter badge description (optional)') }}">{{ old('badge_description') }}</textarea>
                        @error('badge_description')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- Submit Button -->
                    <div class="md:col-span-2">
                        <div class="flex items-center justify-end mt-4">
                            <button type="submit" class="btn btn-primary">
                                {{ __('Save Badge') }}
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@push('scripts')
    @vite('resources/admin/js/game/game.js')
@endpush
</x-admin-app-layout>
