<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Create Contest') }}" :buttons="$buttons" :isFilterable="false" />
        <div x-data="langData()" x-init="languages = {{ json_encode($languages) }};" class="mt-4">
            <form action="{{ route('admin.contests.store') }}" method="POST" class="form-submit-add">
                @csrf
                <div class="w-full grid grid-cols-1 md:grid-cols-4 gap-4 xxl:gap-6">
                    <div
                        class="col-span-3 border border-neutral-30 dark:border-neutral-500 rounded p-4 xl:p-6 flex flex-col gap-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="input-group">
                                    <x-admin::label for="start_date">
                                        {{ __('Start Date') }}
                                    </x-admin::label>
                                    <input type="text" class="date-picker text-input" name="start_date" />
                                    <x-admin::input-error name="start_date" />
                                </div>
                                <div class="input-group">
                                    <x-admin::label for="start_time">
                                        {{ __('Start Time') }}
                                    </x-admin::label>
                                    <input type="time" class="text-input" name="start_time" />
                                    <x-admin::input-error name="start_time" />
                                </div>
                            </div>
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div class="input-group">
                                    <x-admin::label for="end_date">
                                        {{ __('End Date') }}
                                    </x-admin::label>
                                    <input type="text" class="date-picker text-input" name="end_date" />
                                    <x-admin::input-error name="end_date" />
                                </div>
                                <div class="input-group">
                                    <x-admin::label for="end_time">
                                        {{ __('End Time') }}
                                    </x-admin::label>
                                    <input type="time" class="text-input" name="end_time" />
                                    <x-admin::input-error name="end_time" />
                                </div>
                            </div>
                        </div>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="input-group">
                                <x-admin::label for="image">
                                    {{ __('Thumbnail') }}
                                </x-admin::label>
                                <x-admin::file-uploader id="image" name="image" />
                                <x-admin::input-error name="image" />
                            </div>
                            <div class="input-group">
                                <x-admin::label for="banner_image">
                                    {{ __('Banner') }}
                                </x-admin::label>
                                <x-admin::file-uploader id="banner_image" name="banner_image" />
                                <x-admin::input-error name="banner_image" />
                            </div>
                        </div>

                        <div class="flex items-center justify-between mb-4 xxl:mb-6">
                            <h6 class="m-text font-medium">{{ __('Select Language') }}</h6>
                            <x-admin::primary-button modalTarget="add-new-Lang" type="button" class="text-sm">
                                {{ __('Add Language') }}
                            </x-admin::primary-button>
                        </div>
                        <template x-for="(lang, index) in locals" :key="index">
                            <div class="border-t border-neutral-30 dark:border-neutral-500 pt-2 xl:pt-4 relative">
                                <div class="input-group">
                                    <x-admin::label for="title">
                                        {{ __('Title') }}
                                    </x-admin::label>
                                    <input :name="'lang[' + index + '][title]'" class="text-input"
                                        placeholder="{{ __('Enter Title') }}" />
                                    <x-admin::input-error name="title" />
                                </div>
                                <input type="hidden" :name="`lang[${index}][locale]`" :value="lang.locale">
                                <div class="input-group">
                                    <x-admin::label for="level">
                                        {{ __('Tags') }}
                                    </x-admin::label>
                                    <select class="tags-select-2" :id="'lang[' + index + '][tags]'"
                                        :name="'lang[' + index + '][tags][]'" multiple="multiple">
                                    </select>
                                    <x-admin::input-error name="tags" />
                                </div>
                                <div class="input-group">
                                    <x-admin::label for="description">
                                        {{ __('Description') }}
                                    </x-admin::label>
                                    <textarea :name="'lang[' + index + '][description]'" rows="5" class="text-input"
                                        placeholder="{{ __('Enter Description') }}"></textarea>
                                    <x-admin::input-error name="description" />
                                </div>

                                <div class="absolute top-2 right-0 flex items-center gap-2">
                                    <h6 class="m-text font-medium" x-text="lang.level"></h6>
                                    <button type="button" class="text-red-500" x-on:click="removeLang(index)">
                                        <i class="ph ph-trash"></i>
                                    </button>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div
                        class="col-span-1 border border-neutral-30 dark:border-neutral-500 rounded p-4 xl:p-6 flex flex-col gap-4">
                        <div class="input-group">
                            <x-admin::label for="quiz_category_id">
                                {{ __('Select a Category') }}
                            </x-admin::label>
                            <x-admin::select-option class="select2-dynamic"
                                url="{{ route('admin.contest.category.list') }}" name="category_id" label="Category">
                                @if (old('category_id'))
                                    <option value="{{ old('category_id') }}" selected>
                                        {{ getModelById(\App\Models\ContestCategory::class, old('category_id', $quiz->category_id))->title }}
                                    </option>
                                @endif
                            </x-admin::select-option>
                            <x-admin::input-error name="quiz_category_id" />
                        </div>
                        <x-admin::text-input-group name="entry_fee" type="number" label="Entry Fee" />
                        <x-admin::text-input-group name="participant_limit" type="number"
                            label="{{ __('Participant Limit') }}" :value="old('participant_limit')" />
                        <div class="input-group">
                            <x-admin::label for="is_free">{{ __('Is Free') }}</x-admin::label>
                            <x-admin::switch name="is_free" :types="[['label' => __('No'), 'value' => 0], ['label' => __('Yes'), 'value' => 1]]" />
                        </div>
                        <div class="input-group">
                            <x-admin::label for="is_featured">{{ __('Is Featured') }}</x-admin::label>
                            <x-admin::switch name="is_featured" :types="[['label' => __('No'), 'value' => 0], ['label' => __('Yes'), 'value' => 1]]" />
                        </div>
                        <div class="flex items-center justify-end mt-4">
                            <x-admin::primary-button type="submit">
                                {{ __('Save') }}
                            </x-admin::primary-button>
                        </div>
                    </div>
                </div>

            </form>
            <x-admin::modal modalId="add-new-Lang" title="Add new Language">
                <form class="add-new-Lang" method="POST">
                    <div class="input-group">
                        <x-admin::label for="question_type">
                            {{ __('Select Language') }}
                        </x-admin::label>
                        <x-admin::select-option class="select-2" name="lang" id="lang">
                            @foreach ($languages as $language)
                                <option value="{{ $language->code }}" @selected($language->code == old('lang'))>
                                    {{ $language->name }}
                                </option>
                            @endforeach
                        </x-admin::select-option>
                        <x-admin::input-error name="lang" />
                    </div>
                    <div class="flex items-center justify-end mt-4">
                        <x-admin::primary-button type="button" x-on:click="addNewLang()">
                            {{ __('Save') }}
                        </x-admin::primary-button>
                    </div>
                </form>
            </x-admin::modal>
        </div>
    </div>

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