<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Create Badges') }}" :buttons="$buttons" :isFilterable="false" />
        <div class="mt-4">
            <form action="{{ route('admin.badges.store') }}" method="POST" class="form-submit-add">
                @csrf
                <div
                    class="w-full md:w-3/4 border border-neutral-30 rounded dark:border-neutral-500 flex flex-col gap-4 p-4 xl:p-6 mx-auto">
                    <x-admin::text-input-group name="title" label="Title" />
                    <div class="input-group">
                        <x-admin::label for="icon">
                            {{ __('Icon Image') }}
                        </x-admin::label>
                        <x-admin::file-uploader id="icon" name="icon" />
                        <x-admin::input-error name="icon" />
                    </div>
                    <div class="input-group">
                        <x-admin::label for="criteria_type">
                            {{ __('Select Criteria Type') }}
                        </x-admin::label>
                        <x-admin::select-option class="select-event" name="criteria[type]" id="criteria_type">
                            @foreach ($criteriaWithDescriptions as $type => $description)
                                <option value="{{ $type }}" data-description="{{ $description }}"
                                    @selected($type == old('criteria.type'))>
                                    {{ __(ucwords(str_replace('_', ' ', $type))) }}
                                </option>
                            @endforeach
                        </x-admin::select-option>
                        <x-admin::input-error name="criteria.type" />
                        <div class="text-sm text-gray-600 ">
                            <span class="font-semibold">Note:</span>
                            <span
                                id="criteria-description">{{ old('criteria.type') ? $criteriaWithDescriptions[old('criteria.type')] ?? '' : '' }}</span>
                        </div>
                    </div>
                    <x-admin::text-input-group type="number" name="criteria[value]"
                        placeholder="{{ __('Enter Number') }}" label="Criteria Value" />
                    <x-admin::text-input-group name="description" label="Description" />
                </div>
                <div class="flex items-center justify-end mt-4">
                    <x-admin::primary-button type="submit">
                        {{ __('Save') }}
                    </x-admin::primary-button>
                </div>
            </form>
        </div>
    </div>
    @push('scripts')
        @vite('resources/admin/js/badge/file.js')
    @endpush
</x-admin-app-layout>
