@extends('admin.layouts.app')

@section('title', 'Country Sections CMS')

@section('content')
<div class="max-w-5xl mx-auto">

    @if(session('success'))
        <div class="mb-4 rounded-lg bg-green-100 border border-green-300 text-green-700 px-4 py-3 text-sm">{{ session('success') }}</div>
    @endif
    @if($errors->any())
        <div class="mb-4 rounded-lg bg-red-100 border border-red-300 text-red-700 px-4 py-3 text-sm">
            <ul class="list-disc list-inside space-y-1">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
    @endif

    <form action="{{ route('admin.country-sections.update') }}" method="POST" enctype="multipart/form-data" data-ai-form="true" data-ai-context="Country Sections CMS">
        @csrf

        @php
            $toPreview = function (?string $path): string {
                if (!$path) return '';
                return (str_starts_with($path, 'http://') || str_starts_with($path, 'https://'))
                    ? $path
                    : asset('storage/' . ltrim($path, '/'));
            };

            $tabs = [
                'subjects' => ['icon' => '🎓', 'label' => 'Popular Subjects',         'desc' => 'Subject cards shown on each country page'],
                'process'  => ['icon' => '📋', 'label' => 'Admission Process',         'desc' => 'Step-by-step visa & admission process'],
                'intakes'  => ['icon' => '📅', 'label' => 'Admission Intakes',         'desc' => 'Intake periods (Feb, July, Nov)'],
                'entry'    => ['icon' => '✅', 'label' => 'Entry Requirements',        'desc' => 'Foundation, Diploma, Bachelor, Masters tabs'],
            ];
        @endphp

        {{-- Tab Header --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm mb-5 overflow-hidden">
            <div class="px-5 pt-4 pb-0 border-b border-gray-100">
                <div class="mb-3">
                    <h1 class="text-base font-bold text-gray-800">Country Sections CMS</h1>
                    <p class="text-xs text-gray-500">Global items for all country detail pages. Use the <strong>Popular Subjects</strong> tab to add subjects, then select per-country from the country edit form.</p>
                </div>
            </div>
            <div class="flex overflow-x-auto gap-1 px-4 bg-gray-50 border-b border-gray-100" id="cs-tab-bar">
                @foreach($tabs as $key => $tab)
                    <button type="button"
                        data-tab="{{ $key }}"
                        onclick="csSwitchTab('{{ $key }}')"
                        class="cs-tab-btn flex items-center gap-1.5 whitespace-nowrap px-4 py-3 text-sm font-semibold border-b-2 transition-colors
                               {{ $loop->first ? 'border-blue-600 text-blue-700 bg-white' : 'border-transparent text-gray-500 hover:text-gray-700 hover:bg-white' }}">
                        <span>{{ $tab['icon'] }}</span>{{ $tab['label'] }}
                    </button>
                @endforeach
            </div>
        </div>

        {{-- ── TAB: Popular Subjects ── --}}
        <div id="cs-tab-subjects" class="cs-tab-panel space-y-5">
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                <div class="flex items-center gap-2 mb-5 pb-4 border-b border-gray-100">
                    <span class="text-lg">🎓</span>
                    <div>
                        <h3 class="text-base font-bold text-gray-800">Popular Subjects Pool</h3>
                        <p class="text-xs text-gray-500 mt-0.5">Add all possible subjects here. Then go to each country's edit page → "Popular Subjects" tab to select which ones apply.</p>
                    </div>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Title Prefix</label>
                    <input name="subjects_title_prefix"
                        value="{{ old('subjects_title_prefix', $content['subjects']['title_prefix'] ?? 'Popular Subjects To Study in') }}"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                    <p class="text-xs text-gray-400 mt-1">Will display as: "<em>Popular Subjects To Study in Australia</em>"</p>
                </div>

                <div id="subjects-list" class="space-y-3">
                    @foreach(($content['subjects']['items'] ?? []) as $i => $item)
                        <div class="cms-item-row flex gap-3 items-start p-4 rounded-xl bg-gray-50 border border-gray-200">
                            @php $subjectPreview = $toPreview($item['image'] ?? ''); @endphp
                            @if($subjectPreview)
                                <img src="{{ $subjectPreview }}" class="w-16 h-12 object-cover rounded-lg border border-gray-200 flex-shrink-0 mt-1">
                            @endif
                            <div class="flex-1 grid grid-cols-1 md:grid-cols-3 gap-3">
                                <input type="hidden" name="subjects_items[{{ $i }}][id]" value="{{ $item['id'] ?? '' }}">
                                <div>
                                    <label class="text-xs font-semibold text-gray-600">Subject Title *</label>
                                    <input name="subjects_items[{{ $i }}][title]" value="{{ $item['title'] ?? '' }}"
                                        class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm" required>
                                </div>
                                <div>
                                    <label class="text-xs font-semibold text-gray-600">Image URL</label>
                                    <input name="subjects_items[{{ $i }}][image]" value="{{ $item['image'] ?? '' }}"
                                        class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm" placeholder="https://...">
                                </div>
                                <div>
                                    <label class="text-xs font-semibold text-gray-600">Upload Image</label>
                                    <input type="file" name="subjects_items[{{ $i }}][image_file]" accept="image/*"
                                        class="w-full mt-1 text-xs rounded-lg border border-gray-300 py-1.5 px-2">
                                </div>
                            </div>
                            <button type="button" onclick="removeRow(this)"
                                class="mt-1 flex-shrink-0 w-7 h-7 rounded-full bg-red-100 text-red-600 hover:bg-red-200 flex items-center justify-center text-sm font-bold">×</button>
                        </div>
                    @endforeach
                </div>
                <button type="button" onclick="addRow('subjects-list', subjectTpl)"
                    class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition">
                    + Add Subject
                </button>
            </div>
        </div>

        {{-- ── TAB: Admission Process ── --}}
        <div id="cs-tab-process" class="cs-tab-panel hidden space-y-5">
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                <div class="flex items-center gap-2 mb-5 pb-4 border-b border-gray-100">
                    <span class="text-lg">📋</span>
                    <div>
                        <h3 class="text-base font-bold text-gray-800">Admission & Visa Process</h3>
                        <p class="text-xs text-gray-500 mt-0.5">Step-by-step cards shown on country detail pages.</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Section Title</label>
                        <input name="process_title" value="{{ old('process_title', $content['process']['title'] ?? 'Admission & Visa Process') }}"
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Subtitle</label>
                        <input name="process_subtitle" value="{{ old('process_subtitle', $content['process']['subtitle'] ?? '') }}"
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <div id="process-list" class="space-y-3">
                    @foreach(($content['process']['items'] ?? []) as $i => $item)
                        <div class="cms-item-row flex gap-3 items-start p-4 rounded-xl bg-gray-50 border border-gray-200">
                            @php $processPreview = $toPreview($item['image'] ?? ''); @endphp
                            @if($processPreview)
                                <img src="{{ $processPreview }}" class="w-16 h-12 object-cover rounded-lg border border-gray-200 flex-shrink-0 mt-1">
                            @endif
                            <div class="flex-1 grid grid-cols-1 md:grid-cols-4 gap-3">
                                <input type="hidden" name="process_items[{{ $i }}][id]" value="{{ $item['id'] ?? '' }}">
                                <div>
                                    <label class="text-xs font-semibold text-gray-600">Step Title *</label>
                                    <input name="process_items[{{ $i }}][title]" value="{{ $item['title'] ?? '' }}"
                                        class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm" required>
                                </div>
                                <div class="md:col-span-2">
                                    <label class="text-xs font-semibold text-gray-600">Description</label>
                                    <input name="process_items[{{ $i }}][text]" value="{{ $item['text'] ?? '' }}"
                                        class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm">
                                </div>
                                <div>
                                    <label class="text-xs font-semibold text-gray-600">Upload Image</label>
                                    <input type="file" name="process_items[{{ $i }}][image_file]" accept="image/*"
                                        class="w-full mt-1 text-xs rounded-lg border border-gray-300 py-1.5 px-2">
                                    <input type="hidden" name="process_items[{{ $i }}][image]" value="{{ $item['image'] ?? '' }}">
                                </div>
                            </div>
                            <button type="button" onclick="removeRow(this)"
                                class="mt-1 flex-shrink-0 w-7 h-7 rounded-full bg-red-100 text-red-600 hover:bg-red-200 flex items-center justify-center text-sm font-bold">×</button>
                        </div>
                    @endforeach
                </div>
                <button type="button" onclick="addRow('process-list', processTpl)"
                    class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition">
                    + Add Step
                </button>

                <div class="mt-5 pt-4 border-t border-gray-100">
                    <details class="group">
                        <summary class="cursor-pointer text-xs font-semibold text-gray-500 hover:text-gray-700 flex items-center gap-1">
                            <span class="group-open:rotate-90 transition-transform inline-block">▶</span> Advanced: Country Map
                            <span class="ml-1 text-gray-400 font-normal">(override which steps show per country)</span>
                        </summary>
                        <div class="mt-2">
                            <p class="text-xs text-gray-400 mb-1">Format: <code class="bg-gray-100 px-1 rounded">country-slug|id1,id2</code> — one per line</p>
                            <textarea name="process_country_map" rows="4" class="w-full rounded-lg border-gray-300 text-sm font-mono px-3 py-2">@foreach(($content['process']['country_map'] ?? []) as $slug => $ids){{ $slug.'|'.implode(',', $ids) }}
@endforeach</textarea>
                        </div>
                    </details>
                </div>
            </div>
        </div>

        {{-- ── TAB: Admission Intakes ── --}}
        <div id="cs-tab-intakes" class="cs-tab-panel hidden space-y-5">
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                <div class="flex items-center gap-2 mb-5 pb-4 border-b border-gray-100">
                    <span class="text-lg">📅</span>
                    <div>
                        <h3 class="text-base font-bold text-gray-800">Major Admission Intakes</h3>
                        <p class="text-xs text-gray-500 mt-0.5">Intake periods shown on the country detail page.</p>
                    </div>
                </div>

                <div class="mb-5">
                    <label class="block text-sm font-semibold text-gray-700 mb-1">Section Title</label>
                    <input name="intakes_title" value="{{ old('intakes_title', $content['intakes']['title'] ?? 'Major Admission Intakes') }}"
                        class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                </div>

                <div id="intakes-list" class="space-y-3">
                    @foreach(($content['intakes']['items'] ?? []) as $i => $item)
                        <div class="cms-item-row flex gap-3 items-start p-4 rounded-xl bg-gray-50 border border-gray-200">
                            <div class="flex-1 grid grid-cols-1 md:grid-cols-3 gap-3">
                                <input type="hidden" name="intakes_items[{{ $i }}][id]" value="{{ $item['id'] ?? '' }}">
                                <div>
                                    <label class="text-xs font-semibold text-gray-600">Intake Title *</label>
                                    <input name="intakes_items[{{ $i }}][title]" value="{{ $item['title'] ?? '' }}"
                                        class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm" required>
                                </div>
                                <div class="md:col-span-2">
                                    <label class="text-xs font-semibold text-gray-600">Description</label>
                                    <input name="intakes_items[{{ $i }}][text]" value="{{ $item['text'] ?? '' }}"
                                        class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm">
                                </div>
                            </div>
                            <button type="button" onclick="removeRow(this)"
                                class="mt-1 flex-shrink-0 w-7 h-7 rounded-full bg-red-100 text-red-600 hover:bg-red-200 flex items-center justify-center text-sm font-bold">×</button>
                        </div>
                    @endforeach
                </div>
                <button type="button" onclick="addRow('intakes-list', intakeTpl)"
                    class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition">
                    + Add Intake
                </button>

                <div class="mt-5 pt-4 border-t border-gray-100">
                    <details class="group">
                        <summary class="cursor-pointer text-xs font-semibold text-gray-500 hover:text-gray-700 flex items-center gap-1">
                            <span class="group-open:rotate-90 transition-transform inline-block">▶</span> Advanced: Country Map
                        </summary>
                        <div class="mt-2">
                            <p class="text-xs text-gray-400 mb-1">Format: <code class="bg-gray-100 px-1 rounded">country-slug|id1,id2</code> — one per line</p>
                            <textarea name="intakes_country_map" rows="4" class="w-full rounded-lg border-gray-300 text-sm font-mono px-3 py-2">@foreach(($content['intakes']['country_map'] ?? []) as $slug => $ids){{ $slug.'|'.implode(',', $ids) }}
@endforeach</textarea>
                        </div>
                    </details>
                </div>
            </div>
        </div>

        {{-- ── TAB: Entry Requirements ── --}}
        <div id="cs-tab-entry" class="cs-tab-panel hidden space-y-5">
            <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
                <div class="flex items-center gap-2 mb-5 pb-4 border-b border-gray-100">
                    <span class="text-lg">✅</span>
                    <div>
                        <h3 class="text-base font-bold text-gray-800">Entry Requirements</h3>
                        <p class="text-xs text-gray-500 mt-0.5">Animated requirement tabs (Foundation, Diploma, Bachelor, Masters).</p>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-5">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Section Title</label>
                        <input name="entry_title" value="{{ old('entry_title', $content['entry']['title'] ?? 'Entry Requirements') }}"
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" required>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1">Auto-rotate speed (ms)</label>
                        <input type="number" min="1000" max="12000" step="500" name="entry_rotate_ms"
                            value="{{ old('entry_rotate_ms', $content['entry']['rotate_ms'] ?? 3500) }}"
                            class="w-full px-4 py-2.5 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>

                <div id="entry-list" class="space-y-3">
                    @foreach(($content['entry']['items'] ?? []) as $i => $item)
                        <div class="cms-item-row flex gap-3 items-start p-4 rounded-xl bg-gray-50 border border-gray-200">
                            @php $entryPreview = $toPreview($item['image'] ?? ''); @endphp
                            @if($entryPreview)
                                <img src="{{ $entryPreview }}" class="w-16 h-12 object-cover rounded-lg border border-gray-200 flex-shrink-0 mt-1">
                            @endif
                            <div class="flex-1 grid grid-cols-2 md:grid-cols-4 gap-3">
                                <input type="hidden" name="entry_items[{{ $i }}][id]" value="{{ $item['id'] ?? '' }}">
                                <div class="col-span-2 md:col-span-2">
                                    <label class="text-xs font-semibold text-gray-600">Title *</label>
                                    <input name="entry_items[{{ $i }}][title]" value="{{ $item['title'] ?? '' }}"
                                        class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm" required>
                                </div>
                                <div>
                                    <label class="text-xs font-semibold text-gray-600">Icon (letter)</label>
                                    <input name="entry_items[{{ $i }}][icon]" value="{{ $item['icon'] ?? '' }}"
                                        maxlength="3" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm text-center">
                                </div>
                                <div>
                                    <label class="text-xs font-semibold text-gray-600">Upload Image</label>
                                    <input type="file" name="entry_items[{{ $i }}][image_file]" accept="image/*"
                                        class="w-full mt-1 text-xs rounded-lg border border-gray-300 py-1.5 px-2">
                                    <input type="hidden" name="entry_items[{{ $i }}][image]" value="{{ $item['image'] ?? '' }}">
                                </div>
                                <div class="col-span-2 md:col-span-4">
                                    <label class="text-xs font-semibold text-gray-600">Description <span class="font-normal text-gray-400">(shown on country page)</span></label>
                                    <textarea name="entry_items[{{ $i }}][text]" rows="3"
                                        placeholder="Write a clear, helpful description for this entry requirement level…"
                                        class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm leading-relaxed resize-y">{{ $item['text'] ?? '' }}</textarea>
                                </div>
                            </div>
                            <button type="button" onclick="removeRow(this)"
                                class="mt-1 flex-shrink-0 w-7 h-7 rounded-full bg-red-100 text-red-600 hover:bg-red-200 flex items-center justify-center text-sm font-bold">×</button>
                        </div>
                    @endforeach
                </div>
                <button type="button" onclick="addRow('entry-list', entryTpl)"
                    class="mt-4 inline-flex items-center gap-1.5 text-sm font-semibold text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100 px-4 py-2 rounded-lg transition">
                    + Add Requirement
                </button>

                <div class="mt-5 pt-4 border-t border-gray-100">
                    <details class="group">
                        <summary class="cursor-pointer text-xs font-semibold text-gray-500 hover:text-gray-700 flex items-center gap-1">
                            <span class="group-open:rotate-90 transition-transform inline-block">▶</span> Advanced: Country Map
                        </summary>
                        <div class="mt-2">
                            <p class="text-xs text-gray-400 mb-1">Format: <code class="bg-gray-100 px-1 rounded">country-slug|id1,id2</code> — one per line</p>
                            <textarea name="entry_country_map" rows="4" class="w-full rounded-lg border-gray-300 text-sm font-mono px-3 py-2">@foreach(($content['entry']['country_map'] ?? []) as $slug => $ids){{ $slug.'|'.implode(',', $ids) }}
@endforeach</textarea>
                        </div>
                    </details>
                </div>
            </div>
        </div>

        {{-- Sticky Save --}}
        <div class="sticky bottom-2 bg-white border border-gray-200 rounded-xl p-4 flex justify-end gap-3 shadow-sm mt-5">
            <a href="{{ route('admin.dashboard') }}" class="px-5 py-2.5 text-sm rounded-lg border border-gray-300 text-gray-600 hover:bg-gray-50">Cancel</a>
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2.5 rounded-lg text-sm">Save Changes</button>
        </div>
    </form>
</div>

<script>
function csSwitchTab(key) {
    document.querySelectorAll('.cs-tab-panel').forEach(el => el.classList.add('hidden'));
    document.getElementById('cs-tab-' + key).classList.remove('hidden');
    document.querySelectorAll('.cs-tab-btn').forEach(btn => {
        const active = btn.dataset.tab === key;
        btn.classList.toggle('border-blue-600', active);
        btn.classList.toggle('text-blue-700', active);
        btn.classList.toggle('bg-white', active);
        btn.classList.toggle('border-transparent', !active);
        btn.classList.toggle('text-gray-500', !active);
    });
    location.hash = 'cs-' + key;
}

// Restore tab from hash
(function() {
    const hash = location.hash.replace('#cs-', '');
    const keys = ['subjects','process','intakes','entry'];
    if (keys.includes(hash)) csSwitchTab(hash);
})();

function removeRow(btn) {
    btn.closest('.cms-item-row').remove();
    renumberRows();
}

function renumberRows() {
    [['subjects-list','subjects_items'],['process-list','process_items'],['intakes-list','intakes_items'],['entry-list','entry_items']].forEach(function([listId, prefix]) {
        var rows = document.getElementById(listId).querySelectorAll('.cms-item-row');
        rows.forEach(function(row, idx) {
            row.querySelectorAll('input, textarea, select').forEach(function(el) {
                if (el.name) el.name = el.name.replace(/\[\d+\]/, '[' + idx + ']');
            });
        });
    });
}

function addRow(listId, template) {
    var list = document.getElementById(listId);
    var count = list.querySelectorAll('.cms-item-row').length;
    var wrapper = document.createElement('div');
    wrapper.innerHTML = template(count);
    list.appendChild(wrapper.firstElementChild);
}

function subjectTpl(i) {
    return `<div class="cms-item-row bg-white border border-gray-200 rounded-xl overflow-hidden shadow-sm">
        <div class="relative h-28 bg-gradient-to-br from-blue-50 to-indigo-100 flex items-center justify-center">
            <span class="text-4xl opacity-30">📚</span>
            <button type="button" onclick="removeRow(this)" class="absolute top-2 right-2 w-7 h-7 rounded-full bg-red-500 text-white hover:bg-red-600 flex items-center justify-center text-sm font-bold shadow">×</button>
        </div>
        <div class="p-4 space-y-3">
            <input type="hidden" name="subjects_items[${i}][id]" value="">
            <div>
                <label class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Subject Title *</label>
                <input name="subjects_items[${i}][title]" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm font-semibold focus:ring-2 focus:ring-blue-500 focus:outline-none" required>
            </div>
            <div>
                <label class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Short Description</label>
                <textarea name="subjects_items[${i}][description]" rows="2" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm focus:ring-2 focus:ring-blue-500 focus:outline-none resize-none" placeholder="Brief description shown on the subject card..."></textarea>
            </div>
            <div class="grid grid-cols-2 gap-2">
                <div>
                    <label class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Image URL</label>
                    <input name="subjects_items[${i}][image]" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-xs focus:ring-2 focus:ring-blue-500 focus:outline-none" placeholder="https://...">
                </div>
                <div>
                    <label class="text-xs font-semibold text-gray-600 uppercase tracking-wide">Upload Image</label>
                    <input type="file" name="subjects_items[${i}][image_file]" accept="image/*" class="w-full mt-1 text-xs rounded-lg border border-gray-300 py-1.5 px-2">
                </div>
            </div>
        </div>
    </div>`;
}

function processTpl(i) {
    return `<div class="cms-item-row flex gap-3 items-start p-4 rounded-xl bg-gray-50 border border-gray-200">
        <div class="flex-1 grid grid-cols-1 md:grid-cols-4 gap-3">
            <input type="hidden" name="process_items[${i}][id]" value="">
            <div><label class="text-xs font-semibold text-gray-600">Step Title *</label><input name="process_items[${i}][title]" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm" required></div>
            <div class="md:col-span-2"><label class="text-xs font-semibold text-gray-600">Description</label><input name="process_items[${i}][text]" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm"></div>
            <div><label class="text-xs font-semibold text-gray-600">Upload Image</label><input type="file" name="process_items[${i}][image_file]" accept="image/*" class="w-full mt-1 text-xs rounded-lg border border-gray-300 py-1.5 px-2"><input type="hidden" name="process_items[${i}][image]" value=""></div>
        </div>
        <button type="button" onclick="removeRow(this)" class="mt-1 flex-shrink-0 w-7 h-7 rounded-full bg-red-100 text-red-600 hover:bg-red-200 flex items-center justify-center text-sm font-bold">×</button>
    </div>`;
}

function intakeTpl(i) {
    return `<div class="cms-item-row flex gap-3 items-start p-4 rounded-xl bg-gray-50 border border-gray-200">
        <div class="flex-1 grid grid-cols-1 md:grid-cols-3 gap-3">
            <input type="hidden" name="intakes_items[${i}][id]" value="">
            <div><label class="text-xs font-semibold text-gray-600">Intake Title *</label><input name="intakes_items[${i}][title]" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm" required></div>
            <div class="md:col-span-2"><label class="text-xs font-semibold text-gray-600">Description</label><input name="intakes_items[${i}][text]" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm"></div>
        </div>
        <button type="button" onclick="removeRow(this)" class="mt-1 flex-shrink-0 w-7 h-7 rounded-full bg-red-100 text-red-600 hover:bg-red-200 flex items-center justify-center text-sm font-bold">×</button>
    </div>`;
}

function entryTpl(i) {
    return `<div class="cms-item-row flex gap-3 items-start p-4 rounded-xl bg-gray-50 border border-gray-200">
        <div class="flex-1 grid grid-cols-2 md:grid-cols-4 gap-3">
            <input type="hidden" name="entry_items[${i}][id]" value="">
            <div class="col-span-2 md:col-span-2"><label class="text-xs font-semibold text-gray-600">Title *</label><input name="entry_items[${i}][title]" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm" required></div>
            <div><label class="text-xs font-semibold text-gray-600">Icon (letter)</label><input name="entry_items[${i}][icon]" maxlength="3" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm text-center"></div>
            <div><label class="text-xs font-semibold text-gray-600">Upload Image</label><input type="file" name="entry_items[${i}][image_file]" accept="image/*" class="w-full mt-1 text-xs rounded-lg border border-gray-300 py-1.5 px-2"><input type="hidden" name="entry_items[${i}][image]" value=""></div>
            <div class="col-span-2 md:col-span-4"><label class="text-xs font-semibold text-gray-600">Description <span class="font-normal text-gray-400">(shown on country page)</span></label><textarea name="entry_items[${i}][text]" rows="3" placeholder="Write a clear, helpful description for this entry requirement level…" class="w-full mt-1 px-3 py-2 rounded-lg border border-gray-300 text-sm leading-relaxed resize-y"></textarea></div>
        </div>
        <button type="button" onclick="removeRow(this)" class="mt-1 flex-shrink-0 w-7 h-7 rounded-full bg-red-100 text-red-600 hover:bg-red-200 flex items-center justify-center text-sm font-bold">×</button>
    </div>`;
}
</script>
@endsection