@php
    $inputClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30';
    $selectClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 h-11 w-full appearance-none rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90';
    $labelClass = 'mb-1.5 block text-sm font-medium text-gray-700 dark:text-gray-400';
    $errorClass = 'border-error-300 focus:border-error-300 focus:ring-error-500/10 dark:border-error-700';
    $normalClass = 'border-gray-300 dark:border-gray-700';
    $textAreaClass = 'dark:bg-dark-900 shadow-theme-xs focus:border-brand-300 focus:ring-brand-500/10 dark:focus:border-brand-800 w-full rounded-lg border bg-transparent px-4 py-2.5 text-sm text-gray-800 placeholder:text-gray-400 focus:ring-3 focus:outline-hidden dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30';

    $item = $item ?? null;
    $savedTranslations = $item?->translations ?? collect();
    $selectedCategories = old('categories', $item?->categoryCodes() ?? []);
@endphp

<div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="px-5 py-4 sm:px-6 sm:py-5">
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Translations</h3>
    </div>

    <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
        @php
            $firstLang = array_key_first($languages);
            $mainLangCode = $firstLang;

            foreach ($languages as $code => $descr) {
                if (old('translations.' . $code . '.main')) {
                    $mainLangCode = $code;
                    break;
                }
            }

            if (! old('translations') && $savedTranslations->isNotEmpty()) {
                $savedMain = $savedTranslations->firstWhere('parliament_qa_translation_main', 1);
                $mainLangCode = $savedMain?->parliament_qa_translation_language ?? $firstLang;
            }

            $titleErrorLang = null;

            foreach ($languages as $code => $descr) {
                if ($errors->has('translations.' . $code . '.title')) {
                    $titleErrorLang = $code;
                    break;
                }
            }

            $initialLang = $titleErrorLang ?? $mainLangCode;
        @endphp

        <div x-data="{ selectedLang: '{{ $initialLang }}', mainLang: '{{ $mainLangCode }}' }" class="space-y-6">
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <label class="{{ $labelClass }}">Language</label>
                    <div x-data="{ isOptionSelected: false }" class="relative z-20 bg-transparent">
                        <select x-model="selectedLang" class="{{ $selectClass }} bg-none pr-11 {{ $normalClass }}"
                            :class="isOptionSelected && 'text-gray-800 dark:text-white/90'"
                            @change="isOptionSelected = true">
                            @foreach($languages as $code => $descr)
                                <option value="{{ $code }}" class="text-gray-700 dark:bg-gray-900 dark:text-gray-400">
                                    {{ $descr }}</option>
                            @endforeach
                        </select>
                        <span class="pointer-events-none absolute top-1/2 right-4 z-30 -translate-y-1/2 text-gray-500 dark:text-gray-400">
                            <svg class="stroke-current" width="20" height="20" viewBox="0 0 20 20" fill="none">
                                <path d="M4.79175 7.396L10.0001 12.6043L15.2084 7.396" stroke-width="1.5"
                                    stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </span>
                    </div>
                </div>

                <div>
                    <label class="{{ $labelClass }}">Title <span class="text-error-500">*</span></label>
                    @foreach($languages as $code => $descr)
                        @php
                            $savedTranslation = $savedTranslations->firstWhere('parliament_qa_translation_language', $code);
                        @endphp
                        <div x-show="selectedLang === '{{ $code }}'"
                            x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
                            x-transition:enter-end="opacity-100">
                            <input type="text" name="translations[{{ $code }}][title]"
                                value="{{ old('translations.' . $code . '.title', $savedTranslation->parliament_qa_translation_title ?? '') }}"
                                placeholder="e.g. Soal Jawab Parlimen NRES 2026"
                                class="{{ $inputClass }} @error('translations.' . $code . '.title') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                            @error('translations.' . $code . '.title')
                                <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                            @enderror
                        </div>
                    @endforeach
                </div>
            </div>

            <div>
                <label class="{{ $labelClass }}">Question</label>
                @foreach($languages as $code => $descr)
                    @php
                        $savedTranslation = $savedTranslations->firstWhere('parliament_qa_translation_language', $code);
                    @endphp
                    <div x-show="selectedLang === '{{ $code }}'"
                        x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
                        x-transition:enter-end="opacity-100">
                        <textarea name="translations[{{ $code }}][question]" rows="6"
                            placeholder="Full text of the question asked in Parliament"
                            class="{{ $textAreaClass }} @error('translations.' . $code . '.question') {{ $errorClass }} @else {{ $normalClass }} @enderror">{{ old('translations.' . $code . '.question', $savedTranslation->parliament_qa_translation_question ?? '') }}</textarea>
                        @error('translations.' . $code . '.question')
                            <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                        @enderror
                    </div>
                @endforeach
            </div>

            <div>
                <label class="{{ $labelClass }}">Answer</label>
                @foreach($languages as $code => $descr)
                    @php
                        $savedTranslation = $savedTranslations->firstWhere('parliament_qa_translation_language', $code);
                    @endphp
                    <div x-show="selectedLang === '{{ $code }}'"
                        x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
                        x-transition:enter-end="opacity-100">
                        <textarea name="translations[{{ $code }}][answer]" rows="8"
                            placeholder="Answer given by the ministry (optional when a PDF is attached)"
                            class="{{ $textAreaClass }} @error('translations.' . $code . '.answer') {{ $errorClass }} @else {{ $normalClass }} @enderror">{{ old('translations.' . $code . '.answer', $savedTranslation->parliament_qa_translation_answer ?? '') }}</textarea>
                        @error('translations.' . $code . '.answer')
                            <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                        @enderror
                    </div>
                @endforeach
            </div>

            @foreach($languages as $code => $descr)
                <div x-show="selectedLang === '{{ $code }}'"
                    x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100">
                    <div class="flex items-center gap-2">
                        <input type="hidden" name="translations[{{ $code }}][main]"
                            :value="mainLang === '{{ $code }}' ? 1 : 0">
                        <label class="flex cursor-pointer items-center text-sm font-medium text-gray-700 select-none dark:text-gray-400">
                            <div class="relative">
                                <div @click="mainLang = '{{ $code }}'"
                                    :class="mainLang === '{{ $code }}' ? 'border-brand-500 bg-brand-500' : 'bg-transparent border-gray-300 dark:border-gray-700'"
                                    class="hover:border-brand-500 dark:hover:border-brand-500 flex h-5 w-5 cursor-pointer items-center justify-center rounded-md border-[1.25px]">
                                    <span :class="mainLang === '{{ $code }}' ? '' : 'opacity-0'">
                                        <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                                            <path d="M11.6666 3.5L5.24992 9.91667L2.33325 7" stroke="white"
                                                stroke-width="1.94437" stroke-linecap="round" stroke-linejoin="round" />
                                        </svg>
                                    </span>
                                </div>
                            </div>
                            <span class="ml-2">Main Translation ({{ $descr }})</span>
                        </label>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>

<div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="px-5 py-4 sm:px-6 sm:py-5">
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Parliament Information</h3>
    </div>

    <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @include('backend.module.parliamentQa.partials._select', [
                'name' => 'parliament_qa_type',
                'label' => 'Type',
                'options' => $types,
                'selected' => old('parliament_qa_type', $item->parliament_qa_type ?? ''),
                'placeholder' => '-- Select Type --',
                'required' => true,
            ])

            @include('backend.module.parliamentQa.partials._select', [
                'id' => 'question-type-field',
                'name' => 'parliament_qa_question_type',
                'label' => 'Question Type',
                'options' => $questionTypes,
                'selected' => old('parliament_qa_question_type', $item->parliament_qa_question_type ?? ''),
                'placeholder' => '-- Select Question Type --',
                'required' => old('parliament_qa_type', $item->parliament_qa_type ?? '') === 'SOAL_JAWAB',
            ])

            @include('backend.module.parliamentQa.partials._select', [
                'name' => 'parliament_qa_dewan',
                'label' => 'House (Dewan)',
                'options' => $dewans,
                'selected' => old('parliament_qa_dewan', $item->parliament_qa_dewan ?? ''),
                'placeholder' => '-- Select House --',
                'required' => true,
            ])
        </div>

        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div>
                <label class="{{ $labelClass }}" for="parliament_qa_parlimen">Parliament No. <span class="text-error-500">*</span></label>
                <input type="number" id="parliament_qa_parlimen" name="parliament_qa_parlimen" min="1" max="99"
                    value="{{ old('parliament_qa_parlimen', $item->parliament_qa_parlimen ?? 15) }}" placeholder="15"
                    class="{{ $inputClass }} @error('parliament_qa_parlimen') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('parliament_qa_parlimen')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="{{ $labelClass }}" for="parliament_qa_penggal">Term (Penggal) <span class="text-error-500">*</span></label>
                <input type="number" id="parliament_qa_penggal" name="parliament_qa_penggal" min="1" max="99"
                    value="{{ old('parliament_qa_penggal', $item->parliament_qa_penggal ?? 5) }}" placeholder="5"
                    class="{{ $inputClass }} @error('parliament_qa_penggal') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('parliament_qa_penggal')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="{{ $labelClass }}" for="parliament_qa_sesi">Meeting (Sesi) <span class="text-error-500">*</span></label>
                <input type="number" id="parliament_qa_sesi" name="parliament_qa_sesi" min="1" max="9"
                    value="{{ old('parliament_qa_sesi', $item->parliament_qa_sesi ?? 1) }}" placeholder="1"
                    class="{{ $inputClass }} @error('parliament_qa_sesi') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('parliament_qa_sesi')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div>
                <label class="{{ $labelClass }}">Parliament Date <span class="text-error-500">*</span></label>
                @include('backend.module.parliamentQa.partials._date-input', [
                    'name' => 'parliament_qa_date',
                    'value' => old('parliament_qa_date', $item?->parliament_qa_date?->format('Y-m-d') ?? ''),
                ])
                @error('parliament_qa_date')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="{{ $labelClass }}" for="parliament_qa_year">Parliament Year <span class="text-error-500">*</span></label>
                <input type="number" id="parliament_qa_year" name="parliament_qa_year" min="1959" max="2100"
                    value="{{ old('parliament_qa_year', $item->parliament_qa_year ?? '') }}" placeholder="2026"
                    class="{{ $inputClass }} @error('parliament_qa_year') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('parliament_qa_year')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="{{ $labelClass }}" for="parliament_qa_no">Question No.</label>
                <input type="text" id="parliament_qa_no" name="parliament_qa_no" maxlength="20"
                    value="{{ old('parliament_qa_no', $item->parliament_qa_no ?? '') }}" placeholder="51"
                    class="{{ $inputClass }} @error('parliament_qa_no') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('parliament_qa_no')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <div>
                <label class="{{ $labelClass }}" for="parliament_qa_member">Member / Senator</label>
                <input type="text" id="parliament_qa_member" name="parliament_qa_member"
                    value="{{ old('parliament_qa_member', $item->parliament_qa_member ?? '') }}"
                    placeholder="e.g. Datuk Seri Utama Hasni bin Mohammad"
                    class="{{ $inputClass }} @error('parliament_qa_member') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('parliament_qa_member')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="{{ $labelClass }}" for="parliament_qa_area">Area / Constituency</label>
                <input type="text" id="parliament_qa_area" name="parliament_qa_area"
                    value="{{ old('parliament_qa_area', $item->parliament_qa_area ?? '') }}"
                    placeholder="e.g. Simpang Renggam"
                    class="{{ $inputClass }} @error('parliament_qa_area') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('parliament_qa_area')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="{{ $labelClass }}" for="parliament_qa_minister">Ministry</label>
                <input type="text" id="parliament_qa_minister" name="parliament_qa_minister"
                    value="{{ old('parliament_qa_minister', $item->parliament_qa_minister ?? '') }}"
                    placeholder="e.g. Kementerian Sumber Asli dan Kelestarian Alam"
                    class="{{ $inputClass }} @error('parliament_qa_minister') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('parliament_qa_minister')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div class="mt-4">
            <label class="{{ $labelClass }}">Categories</label>
            <div class="grid grid-cols-1 gap-2 rounded-xl border border-gray-200 bg-gray-50/60 p-4 sm:grid-cols-2 lg:grid-cols-3 dark:border-gray-800 dark:bg-white/[0.02]">
                @foreach($categories as $code => $descr)
                    <label class="flex cursor-pointer items-center gap-2 text-sm text-gray-700 dark:text-gray-400">
                        <input type="checkbox" name="categories[]" value="{{ $code }}"
                            @checked(in_array((string) $code, array_map('strval', (array) $selectedCategories), true))
                            class="h-4 w-4 rounded border-gray-300 text-brand-500 focus:ring-brand-500/20 dark:border-gray-700">
                        {{ $descr }}
                    </label>
                @endforeach
            </div>
            @error('categories')
                <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
            @enderror
            @error('categories.*')
                <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
            @enderror
        </div>

        <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            @include('backend.module.parliamentQa.partials._select', [
                'name' => 'parliament_qa_status',
                'label' => 'Status',
                'options' => $statuses,
                'selected' => old('parliament_qa_status', $item->parliament_qa_status ?? ''),
                'placeholder' => '-- Select Status --',
                'required' => true,
                'firstWhenEmpty' => true,
            ])

            <div>
                <label class="{{ $labelClass }}" for="parliament_qa_sort">Sort</label>
                <input type="number" id="parliament_qa_sort" name="parliament_qa_sort" min="0"
                    value="{{ old('parliament_qa_sort', $item->parliament_qa_sort ?? 0) }}"
                    class="{{ $inputClass }} @error('parliament_qa_sort') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('parliament_qa_sort')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
                <p class="mt-2 text-theme-xs text-gray-500 dark:text-gray-400">Leave as 0 to append at the end of the same session.</p>
            </div>
        </div>
    </div>
</div>

<div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="px-5 py-4 sm:px-6 sm:py-5">
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Answer File</h3>
    </div>

    <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
        <div class="rounded-xl border border-gray-200 bg-gray-50/60 p-4 dark:border-gray-800 dark:bg-white/[0.02]">
            <div class="mb-3 flex items-center justify-between gap-2">
                <span class="text-sm font-medium text-gray-800 dark:text-white/90">Answer PDF</span>
                <span class="rounded-full bg-white px-2.5 py-0.5 text-theme-xs font-medium text-gray-500 dark:bg-gray-800 dark:text-gray-400">Optional</span>
            </div>

            @if(! empty($item?->parliament_qa_file))
                <div class="mb-3 flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-xs dark:border-gray-700 dark:bg-gray-900">
                    <span class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-brand-50 text-brand-500 dark:bg-brand-500/10 dark:text-brand-400">
                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" /><path d="M14 3v5h5" /></svg>
                    </span>
                    <a href="{{ url('storage/'.$item->parliament_qa_file) }}" target="_blank" rel="noopener"
                        class="min-w-0 flex-1 truncate font-medium text-brand-600 hover:underline dark:text-brand-400">
                        {{ basename($item->parliament_qa_file) }}
                    </a>
                </div>
            @endif

            <div class="rounded-xl @error('parliament_qa_file') ring-1 ring-error-300 dark:ring-error-700 @enderror">
                <input type="file" name="parliament_qa_file" class="filepond w-full" accept=".pdf">
            </div>
            @error('parliament_qa_file')
                <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
            @enderror
            <p class="mt-2 text-theme-xs text-gray-500 dark:text-gray-400">PDF · max 15MB</p>
        </div>
    </div>
</div>

<div class="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
    <div class="px-5 py-4 sm:px-6 sm:py-5">
        <h3 class="text-base font-medium text-gray-800 dark:text-white/90">Attachments</h3>
        <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">
            Extra documents for this entry (e.g. bill papers, full written answer).
        </p>
    </div>

    <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">
        @if (isset($item) && $item->documents->isNotEmpty())
            <ul class="mb-4 divide-y divide-gray-100 overflow-hidden rounded-xl border border-gray-200 dark:divide-gray-800 dark:border-gray-800">
                @foreach ($item->documents as $document)
                    <li class="flex items-center gap-3 px-3 py-2.5">
                        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round">
                                <path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" />
                                <path d="M14 3v5h5" />
                            </svg>
                        </span>

                        <div class="min-w-0 flex-1">
                            <a href="{{ url('storage/'.$document->parliament_qa_document_file) }}"
                                target="_blank" rel="noopener"
                                class="block truncate text-sm font-medium text-brand-600 hover:underline dark:text-brand-400">
                                {{ $document->parliament_qa_document_label ?: basename($document->parliament_qa_document_file) }}
                            </a>
                            <p class="truncate text-theme-xs text-gray-500 dark:text-gray-400">
                                {{ basename($document->parliament_qa_document_file) }}@if ($document->created_at) · {{ $document->created_at->format('d M Y') }}@endif
                            </p>
                        </div>

                        <button type="submit" form="delete-attachment-{{ $document->parliament_qa_document_id }}"
                            class="inline-flex items-center justify-center rounded-lg p-2 text-gray-400 transition-colors hover:bg-error-50 hover:text-error-500 dark:text-gray-500 dark:hover:bg-error-500/10 dark:hover:text-error-400"
                            title="Delete attachment">
                            <svg class="fill-current" width="18" height="18" viewBox="0 0 18 18" fill="none">
                                <path d="M6 2.5H12L13 3.5H16V5H2V3.5H5L6 2.5ZM3.5 6H14.5L14 15.5H4L3.5 6ZM6.5 8.5H8V13.5H6.5V8.5ZM10 8.5H11.5V13.5H10V8.5Z" />
                            </svg>
                        </button>
                    </li>
                @endforeach
            </ul>
        @endif

        <div class="rounded-xl @if ($errors->has('attachments') || $errors->has('attachments.*')) ring-1 ring-error-300 dark:ring-error-700 @endif">
            <input type="file" name="attachments[]" multiple class="filepond w-full" data-max-files="20"
                accept=".pdf,.doc,.docx,.xls,.xlsx,.zip">
        </div>
        <p class="mt-1.5 text-theme-xs text-gray-500 dark:text-gray-400">PDF, Word, Excel or ZIP · max 15MB per file · up to 20 files at a time</p>
        @error('attachments')
            <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
        @enderror
        @error('attachments.*')
            <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
        @enderror
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var typeSelect = document.getElementById('parliament_qa_type');
            var questionField = document.getElementById('question-type-field');
            var dateInput = document.getElementById('parliament_qa_date');
            var yearInput = document.getElementById('parliament_qa_year');

            // Question Type is only mandatory for the Parliament Q&A type.
            if (typeSelect && questionField) {
                var mark = questionField.querySelector('[data-required-mark]');

                var syncQuestionType = function () {
                    if (mark) {
                        mark.classList.toggle('hidden', typeSelect.value !== 'SOAL_JAWAB');
                    }
                };

                typeSelect.addEventListener('change', syncQuestionType);
                syncQuestionType();
            }

            // Fill the parliament year from the parliament date when still empty.
            if (dateInput && yearInput) {
                dateInput.addEventListener('change', function () {
                    if (dateInput.value && !yearInput.value) {
                        yearInput.value = dateInput.value.slice(0, 4);
                    }
                });
            }
        });
    </script>
@endpush