<x-admin-app-layout>
    <div class="white-box">
        <x-admin::page-header title="{{ __('Translate with AI') }}" :buttons="$buttons" :isFilterable="false" />

        <div class="tabs space-y-4">
            <div
                class="flex flex-wrap gap-3 p-1 rounded-lg md:rounded-full border border-neutral-30 dark:border-neutral-500 relative">
                @foreach ($languages as $language)
                    @continue($language->code == 'en')
                    <button data-link="{{ $language->code }}"
                        class="tab-link px-4 relative z-[3] py-2 flex items-center gap-2 text-sm rounded-full">
                        {{ $language->name }}
                    </button>
                @endforeach
            </div>
            <div class="tab-content">
                @foreach ($languages as $language)
                    @continue($language->code == 'en')
                    <div class="tab-panel {{ $loop->first ? '' : 'hidden' }}">
                        <form action="{{ route('admin.quizzes.questions.store.ai', $quiz) }}" method="POST"
                            class="form-submit-add">
                            @csrf
                            <input type="hidden" name="locale" value="{{ $language->code }}">
                            <input type="hidden" name="question_level_id"
                                value="{{ $questionLevel ? $questionLevel->id : null }}">
                            <div class="flex items-center justify-end mt-4">
                                <x-admin::primary-button type="submit">
                                    {{ __('Translate') }}
                                </x-admin::primary-button>
                            </div>
                        </form>

                        <div class="space-y-2">
                            @php
                                $translations_values = collect($translations)->where('locale', $language->code)->all();
                            @endphp
                            @forelse ($translations_values as $translation)
                                <div class="p-4 border border-neutral-30 dark:border-neutral-500 ">
                                    <h4>{{ $translation['question_text'] }}</h4>
                                    <p class="text-neutral-600 dark:text-neutral-300 text-sm">
                                        <strong>{{ __('Question Explanation:') }}</strong>
                                        {{ $translation['question_explanation'] }}
                                    </p>
                                    <p class="text-neutral-600 dark:text-neutral-300 text-sm">
                                        <strong>{{ __('Hints:') }}</strong> {{ $translation['hints'] }}
                                    </p>
                                    <p class="text-neutral-600 dark:text-neutral-300 text-sm">
                                        <strong>{{ __('Answer Explanation:') }}</strong>
                                        {{ $translation['answer_explanation'] }}
                                    </p>
                                </div>
                            @empty
                                <p class="text-neutral-600 dark:text-neutral-300 text-sm">
                                    {{ __('No translations found') }}</p>
                            @endforelse
                        </div>
                    </div>
                @endforeach

            </div>
        </div>

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