@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';
    $dateClass = '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 bg-none px-4 py-2.5 pr-11 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';
    $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';

    $media = $media ?? null;
    $savedTranslations = $media?->translations ?? collect();
@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->toArray());
            $mainLangCode = $firstLang;

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

            if (! old('translations') && $savedTranslations->isNotEmpty()) {
                $savedMain = $savedTranslations->firstWhere('media_translation_main', 1);
                $mainLangCode = $savedMain?->media_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('media_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->media_translation_title ?? '') }}"
                                placeholder="e.g. NRES perkenal dasar baharu"
                                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 }}">Summary</label>
                @foreach($languages as $code => $descr)
                    @php
                        $savedTranslation = $savedTranslations->firstWhere('media_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 }}][summary]" rows="3"
                            placeholder="Short summary of the news media (optional)"
                            class="{{ $textAreaClass }} @error('translations.' . $code . '.summary') {{ $errorClass }} @else {{ $normalClass }} @enderror">{{ old('translations.' . $code . '.summary', $savedTranslation->media_translation_summary ?? '') }}</textarea>
                        @error('translations.' . $code . '.summary')
                            <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">Media Information</h3>
    </div>

    <div class="border-t border-gray-100 p-5 sm:p-6 dark:border-gray-800">

        <div class="media-info-row flex flex-wrap gap-4">
            @include('backend.module.contentMedia.partials._select', [
                'id' => 'media-type-field',
                'name' => 'media_type',
                'label' => 'Type',
                'options' => $types,
                'selected' => old('media_type', $media->media_type ?? ''),
                'placeholder' => '-- Select Type --',
                'required' => true,
            ])

            @include('backend.module.contentMedia.partials._select', [
                'id' => 'media-source-field',
                'name' => 'media_source',
                'label' => 'Source',
                'options' => $sourceOptions,
                'selected' => old('media_source', $media->media_source ?? ''),
                'placeholder' => '-- Select Source --',
                'required' => old('media_type', $media->media_type ?? '') === 'KERATAN_AKHBAR',
            ])

        </div>



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

            @include('backend.module.contentMedia.partials._select', [
                'name' => 'media_status',
                'label' => 'Status',
                'options' => $statuses,
                'selected' => old('media_status', $media->media_status ?? ''),
                'placeholder' => '-- Select Status --',
                'required' => true,
                'firstWhenEmpty' => true,
            ])

            <div>
                <label class="{{ $labelClass }}" for="media_sort">Sort</label>
                <input type="number" id="media_sort" name="media_sort" min="0"
                    value="{{ old('media_sort', $media->media_sort ?? 0) }}"
                    class="{{ $inputClass }} @error('media_sort') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('media_sort')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>

        </div>

        <div class="mt-4">
            <div>
                <label class="{{ $labelClass }}" for="media_url">Article Link</label>
                <input type="text" id="media_url" name="media_url"
                    value="{{ old('media_url', $media->media_url ?? '') }}"
                    placeholder="https://www.bharian.com.my/..."
                    class="{{ $inputClass }} @error('media_url') {{ $errorClass }} @else {{ $normalClass }} @enderror">
                @error('media_url')
                    <p class="mt-1.5 text-xs text-error-500">{{ $message }}</p>
                @enderror
            </div>
        </div>


        <div class="mt-4">
            <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">Cover Image</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($media?->media_img))
                    <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">
                        <img src="{{ url('storage/'.$media->media_img) }}" alt="" class="h-7 w-7 rounded-md object-cover">
                        <a href="{{ url('storage/'.$media->media_img) }}" target="_blank" rel="noopener"
                            class="min-w-0 flex-1 truncate font-medium text-brand-600 hover:underline dark:text-brand-400">
                            {{ basename($media->media_img) }}

                        </a>
                    </div>
                @endif

                <div class="rounded-xl @error('media_img') ring-1 ring-error-300 dark:ring-error-700 @enderror">
                    <input type="file" name="media_img" class="filepond w-full"
                        accept="image/png, image/jpeg, image/jpg, image/webp">
                </div>
                @error('media_img')
                    <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">Cover / thumbnail · JPG, PNG or WebP · max 15MB</p>
            </div>
        </div>


        <div class="mt-4">
            <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">Scan File</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($media?->media_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/'.$media->media_file) }}" target="_blank" rel="noopener"
                            class="min-w-0 flex-1 truncate font-medium text-brand-600 hover:underline dark:text-brand-400">
                            {{ basename($media->media_file) }}

                        </a>
                    </div>
                @endif

                <div class="rounded-xl @error('media_file') ring-1 ring-error-300 dark:ring-error-700 @enderror">
                    <input type="file" name="media_file" class="filepond w-full" accept=".pdf,image/png,image/jpeg">
                </div>
                @error('media_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, JPG or PNG · max 15MB</p>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            var typeSelect = document.getElementById('media_type');
            var sourceField = document.getElementById('media-source-field');
            var sourceSelect = document.getElementById('media_source');

            if (!typeSelect || !sourceField || !sourceSelect) {
                return;
            }

            // { 'KERATAN_AKHBAR': [{ code, label }, ...], 'KENYATAAN_MEDIA': [...], ... }
            var sourceGroups = @json($sourceGroups ?? []);
            var placeholder = sourceSelect.options.length
                ? sourceSelect.options[0].text
                : '-- Select News Source --';

            function syncSourceField(clearValue) {
                var options = sourceGroups[typeSelect.value] || [];
                var isRequired = typeSelect.value === 'KERATAN_AKHBAR';
                var previous = clearValue ? '' : sourceSelect.value;

                sourceSelect.innerHTML = '';

                var mark = sourceField.querySelector('[data-required-mark]');

                if (mark) {
                    mark.classList.toggle('hidden', !isRequired);
                }

                var blank = document.createElement('option');
                blank.value = '';
                blank.textContent = placeholder;
                sourceSelect.appendChild(blank);

                var matched = false;

                options.forEach(function (item) {
                    var option = document.createElement('option');
                    option.value = item.code;
                    option.textContent = item.label;
                    sourceSelect.appendChild(option);

                    if (item.code === previous) {
                        matched = true;
                    }
                });

                sourceSelect.value = matched ? previous : '';
            }

            typeSelect.addEventListener('change', function () {
                syncSourceField(true);
            });

            syncSourceField(false);
        });
    </script>
@endpush
@push('styles')
    <style>
        /* Media Information row: fields share the row evenly; Type is smaller and
           Source is wider (Source is always visible, only its options follow the Type). */
        .media-info-row > * { flex: 1 1 100%; min-width: 0; }
        @media (min-width: 640px) { .media-info-row > * { flex: 1 1 180px; } }
        #media-type-field { flex-grow: 1; }
        #media-source-field { flex-grow: 2.5; }
    </style>
@endpush