@extends('admin.layouts.app')

@section('title', 'Home CMS')

@section('content')
<div class="max-w-6xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Home CMS</h1>
        <p class="text-sm text-gray-500 mt-1">Update homepage texts and images from one place.</p>
    </div>

    @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 $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif

    <form action="{{ route('admin.home.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6" data-ai-form="true" data-ai-context="Home CMS">
        @csrf
        @php
            $toPreview = function ($value) {
                if (empty($value)) return '';
                if (str_starts_with($value, 'http://') || str_starts_with($value, 'https://')) return $value;
                return asset('storage/' . ltrim($value, '/'));
            };
            $heroImageRaw = old('hero_image', $content['hero']['image'] ?? '');
            $heroImagePreview = $toPreview($heroImageRaw);
            $whyImageRaw = old('why_image', $content['why']['image'] ?? '');
            $whyImagePreview = $toPreview($whyImageRaw);
            $finalImageRaw = old('final_image', $content['final']['image'] ?? '');
            $finalImagePreview = $toPreview($finalImageRaw);
        @endphp

        @php
            $sectionMeta = [
                'hero' => 'Hero',
                'why' => 'Why Section',
                'destinations' => 'Accreditation + Destinations + Events',
                'institutions' => 'Institutions + Stories + Promo',
                'videos' => 'Videos + Partners + Steps + FAQ + Final CTA',
            ];
            $focusedTitle = $sectionMeta[$focusSection] ?? null;
            $showAllSections = ! $focusedTitle;
        @endphp

        <div class="bg-white rounded-xl border border-gray-200 p-4 space-y-3">
            <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                <div>
                    <h2 class="text-sm font-semibold text-gray-800">Quick Section Jump</h2>
                    <p class="text-xs text-gray-500 mt-1">
                        @if($showAllSections)
                            Open any specific part of Home CMS without scrolling through the full page.
                        @else
                            You are editing only the <span class="font-semibold text-gray-700">{{ $focusedTitle }}</span> block right now.
                        @endif
                    </p>
                </div>
                @if(! $showAllSections)
                    <a href="{{ route('admin.home.edit') }}" class="inline-flex items-center justify-center rounded-lg border border-gray-300 px-4 py-2 text-sm font-semibold text-gray-700 hover:bg-gray-50">
                        View Full Home CMS
                    </a>
                @endif
            </div>
            <div class="flex flex-wrap gap-2">
                @foreach($sectionMeta as $key => $label)
                    <a href="{{ route('admin.home.edit', ['section' => $key]) }}"
                       class="inline-flex items-center rounded-full px-4 py-2 text-sm font-semibold transition {{ $focusSection === $key ? 'bg-blue-600 text-white' : 'bg-blue-50 text-blue-700 hover:bg-blue-100' }}">
                        {{ $label }}
                    </a>
                @endforeach
            </div>
        </div>

        <section id="home-section-hero" class="bg-white rounded-xl border border-gray-200 p-5 {{ $showAllSections || $focusSection === 'hero' ? '' : 'hidden' }}">
            <h2 class="text-lg font-semibold mb-4">Hero</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="text-sm font-medium">Title</label><input name="hero_title" value="{{ old('hero_title', $content['hero']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Highlight</label><input name="hero_highlight" value="{{ old('hero_highlight', $content['hero']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Text</label><textarea name="hero_text" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('hero_text', $content['hero']['text']) }}</textarea></div>
                <div><label class="text-sm font-medium">Sticker title</label><input name="hero_sticker_title" value="{{ old('hero_sticker_title', $content['hero']['sticker_title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Sticker text</label><input name="hero_sticker_text" value="{{ old('hero_sticker_text', $content['hero']['sticker_text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Primary CTA</label><input name="hero_primary_cta" value="{{ old('hero_primary_cta', $content['hero']['primary_cta']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Secondary CTA</label><input name="hero_secondary_cta" value="{{ old('hero_secondary_cta', $content['hero']['secondary_cta']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Hero image upload</label>
                    <input type="file" name="hero_image" class="w-full mt-1 text-sm">
                    @if($heroImagePreview)
                        <img src="{{ $heroImagePreview }}" alt="Hero image" class="mt-2 h-24 rounded object-cover border border-gray-200">
                    @endif
                    <p class="text-xs text-gray-500 mt-1 break-all">Current: {{ $heroImageRaw }}</p>
                </div>
            </div>
        </section>

        <section id="home-section-why" class="bg-white rounded-xl border border-gray-200 p-5 {{ $showAllSections || $focusSection === 'why' ? '' : 'hidden' }}">
            <h2 class="text-lg font-semibold mb-4">Why Section</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="text-sm font-medium">Title</label><input name="why_title" value="{{ old('why_title', $content['why']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Highlight</label><input name="why_highlight" value="{{ old('why_highlight', $content['why']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Why image upload</label>
                    <input type="file" name="why_image" class="w-full mt-1 text-sm">
                    @if($whyImagePreview)
                        <img src="{{ $whyImagePreview }}" alt="Why image" class="mt-2 h-24 rounded object-cover border border-gray-200">
                    @endif
                    <p class="text-xs text-gray-500 mt-1 break-all">Current: {{ $whyImageRaw }}</p>
                </div>

                @for($i=1; $i<=3; $i++)
                    <div><label class="text-sm font-medium">Why item {{ $i }} title</label><input name="why_item_{{ $i }}_title" value="{{ old('why_item_'.$i.'_title', $content['why']['items'][$i-1]['title'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                    <div><label class="text-sm font-medium">Why item {{ $i }} text</label><input name="why_item_{{ $i }}_text" value="{{ old('why_item_'.$i.'_text', $content['why']['items'][$i-1]['text'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                @endfor

                @for($i=1; $i<=3; $i++)
                    <div><label class="text-sm font-medium">Stat {{ $i }} number</label><input name="why_stat_{{ $i }}_number" value="{{ old('why_stat_'.$i.'_number', $content['why']['stats'][$i-1]['number'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                    <div><label class="text-sm font-medium">Stat {{ $i }} label</label><input name="why_stat_{{ $i }}_label" value="{{ old('why_stat_'.$i.'_label', $content['why']['stats'][$i-1]['label'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                @endfor
            </div>
        </section>

        <section id="home-section-destinations" class="bg-white rounded-xl border border-gray-200 p-5 {{ $showAllSections || $focusSection === 'destinations' ? '' : 'hidden' }}">
            <h2 class="text-lg font-semibold mb-4">Accreditation + Destinations + Events</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="text-sm font-medium">Accreditation title</label><input name="accreditation_title" value="{{ old('accreditation_title', $content['accreditation']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Accreditation text</label><input name="accreditation_text" value="{{ old('accreditation_text', $content['accreditation']['text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Seal 1</label><input name="accreditation_seal_1" value="{{ old('accreditation_seal_1', $content['accreditation']['seal_1']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Seal 2</label><input name="accreditation_seal_2" value="{{ old('accreditation_seal_2', $content['accreditation']['seal_2']) }}" class="w-full mt-1 rounded border-gray-300"></div>

                <div><label class="text-sm font-medium">Destinations title</label><input name="destinations_title" value="{{ old('destinations_title', $content['destinations']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Destinations highlight</label><input name="destinations_highlight" value="{{ old('destinations_highlight', $content['destinations']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Destinations text</label><input name="destinations_text" value="{{ old('destinations_text', $content['destinations']['text']) }}" class="w-full mt-1 rounded border-gray-300"></div>

                @for($i=1; $i<=6; $i++)
                    <div class="{{ $i > 4 ? 'md:col-span-1' : '' }}">
                        <label class="text-sm font-medium">Fallback image {{ $i }} URL</label>
                        <input name="fallback_{{ $i }}" value="{{ old('fallback_'.$i, $content['destinations']['fallback_images'][$i-1] ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                    </div>
                @endfor

                <div><label class="text-sm font-medium">Events title</label><input name="events_title" value="{{ old('events_title', $content['events']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Events highlight</label><input name="events_highlight" value="{{ old('events_highlight', $content['events']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Events text</label><input name="events_text" value="{{ old('events_text', $content['events']['text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2">
                    <p class="text-xs text-gray-500">Event cards now come from the separate Events module. Manage items from Admin > Events.</p>
                </div>
            </div>
        </section>

        <section id="home-section-institutions" class="bg-white rounded-xl border border-gray-200 p-5 {{ $showAllSections || $focusSection === 'institutions' ? '' : 'hidden' }}">
            <h2 class="text-lg font-semibold mb-4">Institutions + Stories + Promo</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="text-sm font-medium">Institutions title</label><input name="institutions_title" value="{{ old('institutions_title', $content['institutions']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Institutions highlight</label><input name="institutions_highlight" value="{{ old('institutions_highlight', $content['institutions']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Institutions text</label><input name="institutions_text" value="{{ old('institutions_text', $content['institutions']['text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2">
                    <div class="rounded-lg border border-blue-100 bg-blue-50 px-4 py-3 text-sm text-blue-800">
                        Institution items are now managed from the shared Partner Institutions library with name and logo.
                        <a href="{{ route('admin.partner-institutions.index') }}" class="font-semibold underline">Open Partner Institutions</a>
                    </div>
                </div>

                <div><label class="text-sm font-medium">Stories title</label><input name="stories_title" value="{{ old('stories_title', $content['stories']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Stories highlight</label><input name="stories_highlight" value="{{ old('stories_highlight', $content['stories']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Stories text</label><input name="stories_text" value="{{ old('stories_text', $content['stories']['text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Story 1 name</label><input name="story_1_name" value="{{ old('story_1_name', $content['stories']['items'][0]['name'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Story 2 name</label><input name="story_2_name" value="{{ old('story_2_name', $content['stories']['items'][1]['name'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Story 1 text</label><textarea name="story_1_text" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('story_1_text', $content['stories']['items'][0]['text'] ?? '') }}</textarea></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Story 2 text</label><textarea name="story_2_text" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('story_2_text', $content['stories']['items'][1]['text'] ?? '') }}</textarea></div>

                <div><label class="text-sm font-medium">Promo title</label><input name="promo_title" value="{{ old('promo_title', $content['promo']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Promo button text</label><input name="promo_button" value="{{ old('promo_button', $content['promo']['button']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Promo text</label><textarea name="promo_text" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('promo_text', $content['promo']['text']) }}</textarea></div>
            </div>
        </section>

        <section id="home-section-videos" class="bg-white rounded-xl border border-gray-200 p-5 {{ $showAllSections || $focusSection === 'videos' ? '' : 'hidden' }}">
            <h2 class="text-lg font-semibold mb-4">Videos + Partners + Steps + FAQ + Final CTA</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="text-sm font-medium">Videos title</label><input name="videos_title" value="{{ old('videos_title', $content['videos']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Videos highlight</label><input name="videos_highlight" value="{{ old('videos_highlight', $content['videos']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Videos text</label><input name="videos_text" value="{{ old('videos_text', $content['videos']['text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                @for($i=1; $i<=4; $i++)
                    <div><label class="text-sm font-medium">Video {{ $i }} title</label><input name="video_{{ $i }}_title" value="{{ old('video_'.$i.'_title', $content['videos']['items'][$i-1]['title'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                    <div>
                        <label class="text-sm font-medium">Video {{ $i }} image upload</label>
                        <input type="file" name="video_{{ $i }}_image" class="w-full mt-1 text-sm">
                        @php
                            $videoImageRaw = old('video_'.$i.'_image', $content['videos']['items'][$i-1]['image'] ?? '');
                            $videoImagePreview = $toPreview($videoImageRaw);
                        @endphp
                        @if($videoImagePreview)
                            <img src="{{ $videoImagePreview }}" alt="Video {{ $i }} image" class="mt-2 h-20 rounded object-cover border border-gray-200">
                        @endif
                        <p class="text-xs text-gray-500 mt-1 break-all">Current: {{ $videoImageRaw }}</p>
                    </div>
                @endfor

                <div><label class="text-sm font-medium">Partners title</label><input name="partners_title" value="{{ old('partners_title', $content['partners']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Partners highlight</label><input name="partners_highlight" value="{{ old('partners_highlight', $content['partners']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Partners text</label><input name="partners_text" value="{{ old('partners_text', $content['partners']['text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
                    Partner items are now managed on the <a href="{{ route('admin.our-partners.index') }}" class="font-semibold underline">Our Partners</a> page (Website Content → Our Partners).
                </div>

                <div><label class="text-sm font-medium">Steps title</label><input name="steps_title" value="{{ old('steps_title', $content['steps']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Steps highlight</label><input name="steps_highlight" value="{{ old('steps_highlight', $content['steps']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Steps text</label><input name="steps_text" value="{{ old('steps_text', $content['steps']['text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                @for($i=1; $i<=3; $i++)
                    <div><label class="text-sm font-medium">Step {{ $i }} title</label><input name="step_{{ $i }}_title" value="{{ old('step_'.$i.'_title', $content['steps']['items'][$i-1]['title'] ?? '') }}" class="w-full mt-1 rounded border-gray-300"></div>
                    <div><label class="text-sm font-medium">Step {{ $i }} lines (one per line)</label><textarea name="step_{{ $i }}_lines" rows="4" class="w-full mt-1 rounded border-gray-300">{{ old('step_'.$i.'_lines', implode("\n", $content['steps']['items'][$i-1]['lines'] ?? [])) }}</textarea></div>
                @endfor

                <div><label class="text-sm font-medium">FAQ title</label><input name="faq_title" value="{{ old('faq_title', $content['faq']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">FAQ highlight</label><input name="faq_highlight" value="{{ old('faq_highlight', $content['faq']['highlight']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">FAQ text</label><input name="faq_text" value="{{ old('faq_text', $content['faq']['text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">FAQ items (one per line, format: Question | Answer)</label>
                    <textarea name="faq_items" rows="6" class="w-full mt-1 rounded border-gray-300">@foreach(($content['faq']['items'] ?? []) as $faq){{ ($faq['q'] ?? '').' | '.($faq['a'] ?? '') }}
@endforeach</textarea>
                </div>

                <div><label class="text-sm font-medium">Final CTA title</label><input name="final_title" value="{{ old('final_title', $content['final']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Final CTA button</label><input name="final_button" value="{{ old('final_button', $content['final']['button']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Final CTA text</label><textarea name="final_text" rows="3" class="w-full mt-1 rounded border-gray-300">{{ old('final_text', $content['final']['text']) }}</textarea></div>
                <div>
                    <label class="text-sm font-medium">Final CTA image upload</label>
                    <input type="file" name="final_image" class="w-full mt-1 text-sm">
                    @if($finalImagePreview)
                        <img src="{{ $finalImagePreview }}" alt="Final CTA image" class="mt-2 h-20 rounded object-cover border border-gray-200">
                    @endif
                    <p class="text-xs text-gray-500 mt-1 break-all">Current: {{ $finalImageRaw }}</p>
                </div>
                <div><label class="text-sm font-medium">Sticky button text</label><input name="sticky_button" value="{{ old('sticky_button', $content['sticky_button']) }}" class="w-full mt-1 rounded border-gray-300"></div>
            </div>
        </section>

        <div class="sticky bottom-2 bg-white border border-gray-200 rounded-xl p-4 flex justify-end">
            <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-2.5 rounded-lg">
                Save Home Content
            </button>
        </div>
    </form>
</div>
@endsection