{{--
    Country form — tab-based layout (like Home CMS)
    Variables: $country, $action, $method
--}}

<form
    method="POST"
    action="{{ $action }}"
    enctype="multipart/form-data"
    id="country-form"
    data-ai-form="true"
    data-ai-context="Country CMS"
>
    @csrf
    @if($method === 'PUT') @method('PUT') @endif

    @php
        $sectionDefaults = \App\Models\Country::defaultPageSections($country->name ?? 'this destination');
        $sections = array_replace_recursive($sectionDefaults, $country->page_sections ?? []);

        // Load global subjects pool + current country's selected subject ids
        $globalSections   = \App\Models\CountrySectionsContent::getContent();
        $allSubjects      = $globalSections['subjects']['items'] ?? [];
        $countrySlug      = $country->slug ?? '';
        $selectedSubjects = old('subject_ids',
            $globalSections['subjects']['country_map'][$countrySlug] ?? []
        );

        $tabs = [
            'basic'       => ['icon' => '📋', 'label' => 'Basic Info'],
            'images'      => ['icon' => '🖼️', 'label' => 'Images'],
            'highlights'  => ['icon' => '⭐', 'label' => 'Highlights & Facts'],
            'courses'     => ['icon' => '📚', 'label' => 'Study Areas & Costs'],
            'requirements'=> ['icon' => '✅', 'label' => 'Requirements & Roadmap'],
            'subjects'    => ['icon' => '🎓', 'label' => 'Popular Subjects'],
            'faq'         => ['icon' => '❓', 'label' => 'FAQ & CTA'],
            'seo'         => ['icon' => '🔍', 'label' => 'SEO'],
        ];
    @endphp

    {{-- ── Tab Navigation ─────────────────────────────────────── --}}
    <div class="bg-white rounded-xl border border-gray-200 shadow-sm mb-6 overflow-hidden">
        {{-- Tab header --}}
        <div class="flex items-center justify-between gap-3 px-5 pt-4 pb-0 border-b border-gray-100">
            <div>
                <h2 class="text-sm font-semibold text-gray-800 mb-0.5">
                    {{ isset($country->id) ? 'Editing: '.$country->name : 'New Country' }}
                </h2>
                <p class="text-xs text-gray-500 pb-3">Select a tab to edit that section</p>
            </div>
            @if(isset($country->slug))
                <a href="{{ url('/countries/'.$country->slug) }}" target="_blank"
                   class="shrink-0 inline-flex items-center gap-1.5 text-xs font-semibold text-blue-600 bg-blue-50 hover:bg-blue-100 border border-blue-200 rounded-lg px-3 py-2 mb-3 transition">
                    <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
                    Preview Page
                </a>
            @endif
        </div>

        {{-- Tabs --}}
        <div class="flex overflow-x-auto scrollbar-hide px-4 gap-1 bg-gray-50 border-b border-gray-100" id="country-tab-bar">
            @foreach($tabs as $key => $tab)
                <button
                    type="button"
                    data-tab="{{ $key }}"
                    onclick="switchTab('{{ $key }}')"
                    class="country-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: Basic Info ─────────────────────────────────────── --}}
    <div id="tab-basic" class="country-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>
                <h3 class="text-base font-bold text-gray-800">Basic Information</h3>
                <span class="ml-auto text-xs text-gray-400">Required fields marked with *</span>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-5">
                {{-- Name --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Country Name <span class="text-red-500">*</span>
                    </label>
                    <input type="text" name="name" id="name"
                           value="{{ old('name', $country->name ?? '') }}"
                           required placeholder="e.g. United Kingdom"
                           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 @error('name') border-red-400 @enderror" />
                    @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Slug --}}
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        URL Slug
                        <span class="text-gray-400 font-normal">(auto-generated if blank)</span>
                    </label>
                    <div class="flex rounded-lg overflow-hidden border border-gray-300 focus-within:ring-2 focus-within:ring-blue-500">
                        <span class="px-3 py-2.5 bg-gray-100 text-gray-500 text-xs border-r border-gray-300 whitespace-nowrap">/countries/</span>
                        <input type="text" name="slug" id="slug"
                               value="{{ old('slug', $country->slug ?? '') }}"
                               placeholder="united-kingdom"
                               class="flex-1 px-3 py-2.5 text-sm focus:outline-none min-w-0 @error('slug') bg-red-50 @enderror" />
                    </div>
                    @error('slug') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Short Description --}}
                <div class="md:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Short Description
                        <span class="text-gray-400 font-normal">— shown on listing cards (max 500 chars)</span>
                    </label>
                    <textarea name="short_description" rows="3" maxlength="500"
                              placeholder="A brief overview shown on the country listing page…"
                              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 resize-none @error('short_description') border-red-400 @enderror"
                    >{{ old('short_description', $country->short_description ?? '') }}</textarea>
                    @error('short_description') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>

        {{-- Publish --}}
        <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>
                <h3 class="text-base font-bold text-gray-800">Publish Settings</h3>
            </div>

            <div class="flex flex-col sm:flex-row gap-5">
                <div class="flex items-center justify-between p-4 bg-gray-50 rounded-lg border border-gray-200 flex-1">
                    <div>
                        <p class="text-sm font-semibold text-gray-700">Active / Visible</p>
                        <p class="text-xs text-gray-500 mt-0.5">Show this country on the public website</p>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer ml-4">
                        <input type="checkbox" name="is_active" value="1" class="sr-only peer"
                               {{ old('is_active', $country->is_active ?? true) ? 'checked' : '' }} />
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-400 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:after:translate-x-full"></div>
                    </label>
                </div>

                <div class="p-4 bg-gray-50 rounded-lg border border-gray-200 w-48">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Sort Order</label>
                    <input type="number" name="sort_order"
                           value="{{ old('sort_order', $country->sort_order ?? 0) }}"
                           min="0"
                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" />
                    <p class="mt-1 text-xs text-gray-400">Lower = shown first</p>
                </div>
            </div>
        </div>

        {{-- Rich Content --}}
        <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">Detailed Country Guide</h3>
                    <p class="text-xs text-gray-500 mt-0.5">Full rich-text content — headings, lists, images — shown in the "Country Guide" section</p>
                </div>
            </div>
            <textarea id="content" name="content" class="w-full">{{ old('content', $country->content ?? '') }}</textarea>
            @error('content') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
        </div>
    </div>

    {{-- ── TAB: Images ─────────────────────────────────────────── --}}
    <div id="tab-images" class="country-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>
                <h3 class="text-base font-bold text-gray-800">Country Images</h3>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                {{-- Flag --}}
                <div>
                    <p class="text-sm font-semibold text-gray-700 mb-1">Flag Image</p>
                    <p class="text-xs text-gray-400 mb-3">Shown beside the country name. JPG, PNG, SVG, WebP — max 2MB.</p>

                    @if(isset($country->flag_image) && $country->flag_image)
                        <div class="mb-3 p-2 bg-gray-50 rounded-lg border border-gray-200 inline-block">
                            <img src="{{ $country->flag_url }}" alt="Flag" class="h-12 rounded" id="flag-preview" />
                        </div>
                    @else
                        <div class="mb-3 hidden" id="flag-preview-wrap">
                            <img src="" alt="Flag Preview" class="h-12 rounded border border-gray-200" id="flag-preview-new" />
                        </div>
                    @endif

                    <label class="block w-full cursor-pointer">
                        <div class="border-2 border-dashed border-gray-300 hover:border-blue-400 rounded-xl p-5 text-center transition-colors" id="flag-drop-zone">
                            <svg class="w-8 h-8 text-gray-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            <p class="text-xs text-gray-500">Drag or click to upload flag</p>
                            <p class="text-xs text-blue-600 mt-1 font-semibold">Browse files</p>
                        </div>
                        <input type="file" name="flag_image" id="flag_input" accept="image/*" class="hidden"
                               onchange="previewImage(this, 'flag-preview-new', 'flag-preview-wrap')" />
                    </label>
                    @error('flag_image') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>

                {{-- Hero --}}
                <div>
                    <p class="text-sm font-semibold text-gray-700 mb-1">Hero / Banner Image</p>
                    <p class="text-xs text-gray-400 mb-3">Full-width banner at the top of the page. Recommended: 1400×600px. Max 5MB.</p>

                    @if(isset($country->hero_image) && $country->hero_image)
                        <div class="mb-3">
                            <img src="{{ $country->hero_url }}" alt="Hero" class="w-full h-28 object-cover rounded-lg border border-gray-200" id="hero-preview" />
                        </div>
                    @else
                        <div class="mb-3 hidden" id="hero-preview-wrap">
                            <img src="" alt="Hero Preview" class="w-full h-28 object-cover rounded-lg border border-gray-200" id="hero-preview-new" />
                        </div>
                    @endif

                    <label class="block w-full cursor-pointer">
                        <div class="border-2 border-dashed border-gray-300 hover:border-blue-400 rounded-xl p-5 text-center transition-colors">
                            <svg class="w-8 h-8 text-gray-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            <p class="text-xs text-gray-500">Drag or click to upload hero banner</p>
                            <p class="text-xs text-blue-600 mt-1 font-semibold">Browse files</p>
                        </div>
                        <input type="file" name="hero_image" id="hero_input" accept="image/*" class="hidden"
                               onchange="previewImage(this, 'hero-preview-new', 'hero-preview-wrap')" />
                    </label>
                    @error('hero_image') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                </div>
            </div>
        </div>
    </div>

    {{-- ── TAB: Highlights & Quick Facts ───────────────────────── --}}
    <div id="tab-highlights" class="country-tab-panel hidden space-y-5">

        {{-- Highlights --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
            <div class="flex items-center gap-2 mb-2 pb-4 border-b border-gray-100">
                <span class="text-lg">⭐</span>
                <div>
                    <h3 class="text-base font-bold text-gray-800">Country Highlights</h3>
                    <p class="text-xs text-gray-500 mt-0.5">4 key selling points shown at the top of the country page</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.5">Section Title</label>
                    <input type="text" name="highlights_title" value="{{ old('highlights_title', $sections['highlights']['title'] ?? '') }}" placeholder="e.g. Why Study in Australia?" 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>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Section Subtitle</label>
                    <input type="text" name="highlights_subtitle" value="{{ old('highlights_subtitle', $sections['highlights']['subtitle'] ?? '') }}" placeholder="A short supporting sentence" 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 class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @for($i = 1; $i <= 4; $i++)
                    <div class="p-4 bg-blue-50 rounded-xl border border-blue-100">
                        <p class="text-xs font-bold text-blue-700 uppercase tracking-wide mb-3">Highlight {{ $i }}</p>
                        <div class="space-y-2">
                            <input type="text" name="highlight_{{ $i }}_title"
                                   value="{{ old('highlight_'.$i.'_title', $sections['highlights']['items'][$i-1]['title'] ?? '') }}"
                                   placeholder="Title (e.g. World-Class Universities)"
                                   class="w-full px-3 py-2 border border-blue-200 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                            <input type="text" name="highlight_{{ $i }}_text"
                                   value="{{ old('highlight_'.$i.'_text', $sections['highlights']['items'][$i-1]['text'] ?? '') }}"
                                   placeholder="Short description…"
                                   class="w-full px-3 py-2 border border-blue-200 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                        </div>
                    </div>
                @endfor
            </div>
        </div>

        {{-- Quick Facts --}}
        <div class="bg-white rounded-xl border border-gray-200 shadow-sm p-6">
            <div class="flex items-center gap-2 mb-2 pb-4 border-b border-gray-100">
                <span class="text-lg">📊</span>
                <div>
                    <h3 class="text-base font-bold text-gray-800">Quick Facts</h3>
                    <p class="text-xs text-gray-500 mt-0.5">Key stats shown in the sidebar (up to 6 items)</p>
                </div>
            </div>

            <div class="mb-4">
                <label class="block text-sm font-semibold text-gray-700 mb-1.5">Facts Section Title</label>
                <input type="text" name="facts_title" value="{{ old('facts_title', $sections['quick_facts']['title'] ?? '') }}" placeholder="e.g. Quick Facts" class="w-full md:w-1/2 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 class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
                @for($i = 1; $i <= 6; $i++)
                    <div class="p-3 bg-gray-50 rounded-xl border border-gray-200">
                        <p class="text-xs font-bold text-gray-600 uppercase tracking-wide mb-2">Fact {{ $i }}</p>
                        <input type="text" name="fact_{{ $i }}_label"
                               value="{{ old('fact_'.$i.'_label', $sections['quick_facts']['items'][$i-1]['label'] ?? '') }}"
                               placeholder="Label (e.g. Capital)"
                               class="w-full px-3 py-2 mb-1.5 border border-gray-300 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                        <input type="text" name="fact_{{ $i }}_value"
                               value="{{ old('fact_'.$i.'_value', $sections['quick_facts']['items'][$i-1]['value'] ?? '') }}"
                               placeholder="Value (e.g. Canberra)"
                               class="w-full px-3 py-2 border border-gray-300 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-400">
                    </div>
                @endfor
            </div>
        </div>
    </div>

    {{-- ── TAB: Study Areas & Costs ─────────────────────────────── --}}
    <div id="tab-courses" class="country-tab-panel hidden space-y-5">

        {{-- Study Areas --}}
        <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">Study Areas / Courses</h3>
                    <p class="text-xs text-gray-500 mt-0.5">List of available study fields in this country</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Section Title</label>
                    <input type="text" name="courses_title" value="{{ old('courses_title', $sections['courses']['title'] ?? '') }}" placeholder="e.g. Popular Study Areas" 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 class="md:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Study Areas
                        <span class="text-gray-400 font-normal">— one per line</span>
                    </label>
                    <textarea name="courses_items" rows="6"
                              placeholder="Engineering&#10;Medicine&#10;Business &amp; Management&#10;Law&#10;Arts &amp; Design"
                              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 font-mono"
                    >{{ old('courses_items', implode("\n", $sections['courses']['items'] ?? [])) }}</textarea>
                    <p class="mt-1 text-xs text-gray-400">Each line = one study area card on the public page</p>
                </div>
            </div>
        </div>

        {{-- Costs --}}
        <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">Cost Information</h3>
                    <p class="text-xs text-gray-500 mt-0.5">Approximate costs shown on the country page</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="md:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Section Title</label>
                    <input type="text" name="costs_title" value="{{ old('costs_title', $sections['costs']['title'] ?? '') }}" placeholder="e.g. Cost of Studying in Australia" class="w-full md:w-1/2 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 class="p-4 bg-green-50 rounded-xl border border-green-100">
                    <label class="block text-xs font-bold text-green-700 uppercase tracking-wide mb-2">Tuition Fee</label>
                    <input type="text" name="cost_tuition" value="{{ old('cost_tuition', $sections['costs']['tuition'] ?? '') }}" placeholder="e.g. AUD 20,000 – 45,000 / year" class="w-full px-3 py-2 border border-green-200 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-400">
                </div>

                <div class="p-4 bg-green-50 rounded-xl border border-green-100">
                    <label class="block text-xs font-bold text-green-700 uppercase tracking-wide mb-2">Living Cost</label>
                    <input type="text" name="cost_living" value="{{ old('cost_living', $sections['costs']['living'] ?? '') }}" placeholder="e.g. AUD 15,000 – 20,000 / year" class="w-full px-3 py-2 border border-green-200 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-400">
                </div>

                <div class="p-4 bg-green-50 rounded-xl border border-green-100">
                    <label class="block text-xs font-bold text-green-700 uppercase tracking-wide mb-2">Visa / Insurance</label>
                    <input type="text" name="cost_visa" value="{{ old('cost_visa', $sections['costs']['visa'] ?? '') }}" placeholder="e.g. AUD 650 student visa fee" class="w-full px-3 py-2 border border-green-200 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-400">
                </div>

                <div class="p-4 bg-green-50 rounded-xl border border-green-100">
                    <label class="block text-xs font-bold text-green-700 uppercase tracking-wide mb-2">Scholarship Availability</label>
                    <input type="text" name="cost_scholarship" value="{{ old('cost_scholarship', $sections['costs']['scholarship'] ?? '') }}" placeholder="e.g. Available — up to 100% tuition" class="w-full px-3 py-2 border border-green-200 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-green-400">
                </div>
            </div>
        </div>
    </div>

    {{-- ── TAB: Requirements & Roadmap ─────────────────────────── --}}
    <div id="tab-requirements" class="country-tab-panel hidden space-y-5">

        {{-- Requirements --}}
        <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">Documents and conditions required to apply</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Section Title</label>
                    <input type="text" name="requirements_title" value="{{ old('requirements_title', $sections['requirements']['title'] ?? '') }}" placeholder="e.g. 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">
                </div>
                <div class="md:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Requirements List
                        <span class="text-gray-400 font-normal">— one per line</span>
                    </label>
                    <textarea name="requirements_items" rows="8"
                              placeholder="Valid passport&#10;IELTS 6.0 or equivalent&#10;Offer letter from university&#10;Financial statements"
                              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 font-mono"
                    >{{ old('requirements_items', implode("\n", $sections['requirements']['items'] ?? [])) }}</textarea>
                </div>
            </div>
        </div>

        {{-- Roadmap / Timeline --}}
        <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">Application Roadmap</h3>
                    <p class="text-xs text-gray-500 mt-0.5">Step-by-step process to study in this country</p>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Section Title</label>
                    <input type="text" name="timeline_title" value="{{ old('timeline_title', $sections['timeline']['title'] ?? '') }}" placeholder="e.g. How to Apply" 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 class="md:col-span-2">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        Roadmap Steps
                        <span class="text-gray-400 font-normal">— one step per line</span>
                    </label>
                    <textarea name="timeline_items" rows="8"
                              placeholder="Choose your course and university&#10;Submit application via GPS Migration&#10;Receive offer letter&#10;Apply for student visa"
                              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 font-mono"
                    >{{ old('timeline_items', implode("\n", $sections['timeline']['items'] ?? [])) }}</textarea>
                </div>
            </div>
        </div>
    </div>

    {{-- ── TAB: Popular Subjects ──────────────────────────────── --}}
    <div id="tab-subjects" class="country-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">Popular Subjects for {{ $country->name ?? 'this country' }}</h3>
                    <p class="text-xs text-gray-500 mt-0.5">Tick the subjects that are relevant for this country. The global subject list is managed in <a href="{{ route('admin.country-sections.edit') }}" target="_blank" class="text-blue-600 underline">Country Sections CMS</a>.</p>
                </div>
            </div>

            @if(empty($allSubjects))
                <div class="py-8 text-center text-sm text-gray-500 bg-gray-50 rounded-lg border border-dashed border-gray-200">
                    No subjects defined yet. Go to <a href="{{ route('admin.country-sections.edit') }}" class="text-blue-600 underline">Country Sections CMS</a> to add subjects first.
                </div>
            @else
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                    @foreach($allSubjects as $subject)
                        @php
                            $sid = $subject['id'] ?? '';
                            $isChecked = empty($selectedSubjects) || in_array($sid, (array) $selectedSubjects);
                        @endphp
                        <label class="flex items-center gap-3 p-4 rounded-xl border cursor-pointer transition
                            {{ $isChecked ? 'bg-blue-50 border-blue-300' : 'bg-gray-50 border-gray-200 hover:border-blue-200 hover:bg-blue-50/40' }}"
                            onclick="this.classList.toggle('bg-blue-50'); this.classList.toggle('border-blue-300'); this.classList.toggle('bg-gray-50'); this.classList.toggle('border-gray-200');">
                            <input type="checkbox"
                                name="subject_ids[]"
                                value="{{ $sid }}"
                                {{ $isChecked ? 'checked' : '' }}
                                class="w-4 h-4 rounded text-blue-600 focus:ring-blue-500 flex-shrink-0">
                            @php
                                $imgSrc = $subject['image'] ?? '';
                                $imgUrl = $imgSrc ? (str_starts_with($imgSrc, 'http') ? $imgSrc : asset('storage/'.$imgSrc)) : '';
                            @endphp
                            @if($imgUrl)
                                <img src="{{ $imgUrl }}" alt="{{ $subject['title'] ?? '' }}" class="w-12 h-9 object-cover rounded-lg flex-shrink-0">
                            @else
                                <div class="w-12 h-9 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
                                    <span class="text-blue-600 text-lg">📚</span>
                                </div>
                            @endif
                            <span class="text-sm font-semibold text-gray-800">{{ $subject['title'] ?? '' }}</span>
                        </label>
                    @endforeach
                </div>
                <p class="mt-4 text-xs text-gray-400">If nothing is ticked, all subjects will show by default.</p>
            @endif
        </div>
    </div>

    {{-- ── TAB: FAQ & CTA ───────────────────────────────────────── --}}
    <div id="tab-faq" class="country-tab-panel hidden space-y-5">

        {{-- FAQ --}}
        <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">Frequently Asked Questions</h3>
                    <p class="text-xs text-gray-500 mt-0.5">Common questions shown as an accordion on the page</p>
                </div>
            </div>

            {{-- Title --}}
            <div class="mb-5 md:w-1/2">
                <label class="block text-sm font-semibold text-gray-700 mb-1.5">FAQ Section Title</label>
                <input type="text" name="country_faq_title"
                       value="{{ old('country_faq_title', $sections['faq']['title'] ?? '') }}"
                       placeholder="e.g. Common Questions"
                       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>

            {{-- Dynamic Q/A rows --}}
            <div id="faq-rows" class="space-y-3 mb-4">
                @php $faqItems = $sections['faq']['items'] ?? []; @endphp
                @if(empty($faqItems))
                    {{-- one empty row by default --}}
                    @php $faqItems = [['q'=>'','a'=>'']]; @endphp
                @endif
                @foreach($faqItems as $i => $faq)
                    <div class="faq-row bg-gray-50 border border-gray-200 rounded-xl p-4 space-y-2" data-index="{{ $i }}">
                        <div class="flex items-center justify-between mb-1">
                            <span class="text-xs font-bold text-gray-500 uppercase tracking-wide">Question {{ $i + 1 }}</span>
                            <button type="button" onclick="removeFaqRow(this)"
                                    class="text-red-400 hover:text-red-600 text-xs font-semibold flex items-center gap-1 transition">
                                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                Remove
                            </button>
                        </div>
                        <input type="text"
                               class="faq-q w-full px-3 py-2 border border-gray-300 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
                               placeholder="Question — e.g. Is IELTS required?"
                               value="{{ $faq['q'] ?? '' }}">
                        <textarea
                               class="faq-a w-full px-3 py-2 border border-gray-300 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"
                               rows="2"
                               placeholder="Answer — e.g. Yes, minimum IELTS 6.0 overall is required."
                        >{{ $faq['a'] ?? '' }}</textarea>
                    </div>
                @endforeach
            </div>

            <button type="button" onclick="addFaqRow()"
                    class="inline-flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-dashed border-blue-300 text-blue-600 text-sm font-semibold hover:bg-blue-50 transition">
                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                Add Question
            </button>

            {{-- Hidden textarea — populated on submit — backend reads this --}}
            <textarea name="country_faq_items" id="faq-hidden" class="hidden"></textarea>
        </div>

        {{-- CTA --}}
        <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">Final Call-to-Action (CTA)</h3>
                    <p class="text-xs text-gray-500 mt-0.5">Banner at the bottom of the country page encouraging visitors to apply</p>
                </div>
            </div>

            <div class="p-5 bg-indigo-50 rounded-xl border border-indigo-100">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">CTA Title</label>
                        <input type="text" name="cta_title" value="{{ old('cta_title', $sections['cta']['title'] ?? '') }}" placeholder="e.g. Ready to Study in Australia?" class="w-full px-4 py-2.5 border border-indigo-200 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400">
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Button Label</label>
                        <input type="text" name="cta_button" value="{{ old('cta_button', $sections['cta']['button'] ?? '') }}" placeholder="e.g. Book Free Consultation" class="w-full px-4 py-2.5 border border-indigo-200 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400">
                    </div>
                    <div class="md:col-span-2">
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">CTA Description Text</label>
                        <textarea name="cta_text" rows="3" class="w-full px-4 py-2.5 border border-indigo-200 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-400"
                                  placeholder="Encourage visitors to take the next step…">{{ old('cta_text', $sections['cta']['text'] ?? '') }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- ── TAB: SEO ─────────────────────────────────────────────── --}}
    <div id="tab-seo" class="country-tab-panel hidden">
        <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">SEO Settings</h3>
                    <p class="text-xs text-gray-500 mt-0.5">Controls how this page appears in Google search results</p>
                </div>
            </div>

            <div class="space-y-5 max-w-2xl">
                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        SEO Title
                        <span class="text-gray-400 font-normal">(max 160 chars)</span>
                    </label>
                    <input type="text" name="seo_title"
                           value="{{ old('seo_title', $country->seo_title ?? '') }}"
                           maxlength="160"
                           placeholder="Study in Australia — GPS Migration"
                           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" />
                    <p class="mt-1 text-xs text-gray-400">If left blank, the page title will be used automatically.</p>
                </div>

                <div>
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">
                        SEO Meta Description
                        <span class="text-gray-400 font-normal">(max 320 chars)</span>
                    </label>
                    <textarea name="seo_description" rows="4" maxlength="320"
                              placeholder="Discover top universities and programs in Australia. GPS Migration helps students get admitted with full support…"
                              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 resize-none"
                    >{{ old('seo_description', $country->seo_description ?? '') }}</textarea>
                    <p class="mt-1 text-xs text-gray-400">Shown below the title in Google results. Aim for 150–160 characters.</p>
                </div>

                {{-- Preview card --}}
                <div class="p-4 bg-gray-50 rounded-xl border border-gray-200">
                    <p class="text-xs font-semibold text-gray-500 mb-2 uppercase tracking-wide">Google Preview</p>
                    <p class="text-blue-700 text-sm font-medium leading-snug" id="seo-preview-title">
                        {{ $country->seo_title ?: 'Study in '.($country->name ?? 'Country').' — GPS Migration' }}
                    </p>
                    <p class="text-green-700 text-xs mt-0.5">gpsmigration.com/countries/{{ $country->slug ?? 'country-slug' }}</p>
                    <p class="text-gray-600 text-xs mt-1 leading-relaxed" id="seo-preview-desc">
                        {{ $country->seo_description ?: 'No description set yet.' }}
                    </p>
                </div>
            </div>
        </div>
    </div>

    {{-- ── Sticky Save Bar ──────────────────────────────────────── --}}
    <div class="sticky bottom-2 mt-6 bg-white border border-gray-200 rounded-xl shadow-md p-4 flex items-center justify-between gap-4">
        <p class="text-sm text-gray-500 hidden sm:block">
            All tabs are saved together — switch tabs freely before saving.
        </p>
        <div class="flex gap-3 ml-auto">
            <a href="{{ route('admin.countries.index') }}"
               class="px-5 py-2.5 bg-gray-100 hover:bg-gray-200 text-gray-700 font-semibold text-sm rounded-lg transition">
                Cancel
            </a>
            <button type="submit"
                    class="px-6 py-2.5 bg-blue-600 hover:bg-blue-700 text-white font-semibold text-sm rounded-lg transition shadow-sm">
                {{ isset($country->id) ? '💾 Update Country' : '✅ Create Country' }}
            </button>
        </div>
    </div>

</form>

{{-- ── Tab switching JS ────────────────────────────────────────── --}}
<script>
function switchTab(key) {
    // Hide all panels
    document.querySelectorAll('.country-tab-panel').forEach(el => el.classList.add('hidden'));
    // Show selected
    const panel = document.getElementById('tab-' + key);
    if (panel) panel.classList.remove('hidden');

    // Update tab button styles
    document.querySelectorAll('.country-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);
        btn.classList.toggle('bg-transparent', !active);
    });

    // Persist tab in URL hash
    history.replaceState(null, '', '#tab-' + key);
}

// Restore tab from URL hash on load
(function () {
    const hash = location.hash.replace('#tab-', '');
    const valid = ['basic','images','highlights','courses','requirements','faq','seo'];
    if (valid.includes(hash)) {
        switchTab(hash);
    }
})();

// SEO live preview
(function () {
    const titleInput = document.querySelector('[name="seo_title"]');
    const descInput  = document.querySelector('[name="seo_description"]');
    const previewTitle = document.getElementById('seo-preview-title');
    const previewDesc  = document.getElementById('seo-preview-desc');
    if (titleInput && previewTitle) {
        titleInput.addEventListener('input', () => {
            previewTitle.textContent = titleInput.value || '—';
        });
    }
    if (descInput && previewDesc) {
        descInput.addEventListener('input', () => {
            previewDesc.textContent = descInput.value || '—';
        });
    }
})();

// ── FAQ dynamic rows ─────────────────────────────────────────
function addFaqRow() {
    const container = document.getElementById('faq-rows');
    const index     = container.querySelectorAll('.faq-row').length;
    const div       = document.createElement('div');
    div.className   = 'faq-row bg-gray-50 border border-gray-200 rounded-xl p-4 space-y-2';
    div.dataset.index = index;
    div.innerHTML = `
        <div class="flex items-center justify-between mb-1">
            <span class="text-xs font-bold text-gray-500 uppercase tracking-wide">Question ${index + 1}</span>
            <button type="button" onclick="removeFaqRow(this)"
                    class="text-red-400 hover:text-red-600 text-xs font-semibold flex items-center gap-1 transition">
                <svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                Remove
            </button>
        </div>
        <input type="text"
               class="faq-q w-full px-3 py-2 border border-gray-300 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-400"
               placeholder="Question — e.g. Is IELTS required?">
        <textarea
               class="faq-a w-full px-3 py-2 border border-gray-300 bg-white rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-400 resize-none"
               rows="2"
               placeholder="Answer — e.g. Yes, minimum IELTS 6.0 overall is required."></textarea>
    `;
    container.appendChild(div);
    renumberFaqRows();
    div.querySelector('.faq-q').focus();
}

function removeFaqRow(btn) {
    const row = btn.closest('.faq-row');
    if (document.querySelectorAll('.faq-row').length <= 1) {
        // clear instead of remove when only one row left
        row.querySelector('.faq-q').value = '';
        row.querySelector('.faq-a').value = '';
        return;
    }
    row.remove();
    renumberFaqRows();
}

function renumberFaqRows() {
    document.querySelectorAll('#faq-rows .faq-row').forEach((row, i) => {
        const label = row.querySelector('span.text-xs');
        if (label) label.textContent = `Question ${i + 1}`;
        row.dataset.index = i;
    });
}

// Before form submit: serialize FAQ rows → hidden textarea
document.getElementById('country-form').addEventListener('submit', function () {
    const lines = [];
    document.querySelectorAll('#faq-rows .faq-row').forEach(row => {
        const q = (row.querySelector('.faq-q')?.value || '').trim();
        const a = (row.querySelector('.faq-a')?.value || '').trim();
        if (q) lines.push(q + ' | ' + a);
    });
    document.getElementById('faq-hidden').value = lines.join('\n');
});
</script>