@extends('admin.layouts.app')

@section('title', 'Countries Page CMS')

@section('content')
<div class="max-w-5xl mx-auto">
    <div class="mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Countries Page CMS</h1>
        <p class="text-sm text-gray-500 mt-1">Control all text content of <code>/countries</code> page.</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.countries.page.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6" data-ai-form="true" data-ai-context="Countries Page CMS">
        @csrf
        @php
            $heroRaw = old('hero_image', $content['hero']['image'] ?? '');
            $heroPreview = $heroRaw ? ((str_starts_with($heroRaw, 'http://') || str_starts_with($heroRaw, 'https://')) ? $heroRaw : asset('storage/' . ltrim($heroRaw, '/'))) : '';
            $ctaRaw = old('cta_image', $content['cta']['image'] ?? '');
            $ctaPreview = $ctaRaw ? ((str_starts_with($ctaRaw, 'http://') || str_starts_with($ctaRaw, 'https://')) ? $ctaRaw : asset('storage/' . ltrim($ctaRaw, '/'))) : '';
        @endphp

        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h2 class="text-lg font-semibold mb-4">SEO</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="text-sm font-medium">SEO title</label>
                    <input name="seo_title" value="{{ old('seo_title', $content['seo']['title']) }}" class="w-full mt-1 rounded border-gray-300">
                </div>
                <div>
                    <label class="text-sm font-medium">SEO description</label>
                    <input name="seo_description" value="{{ old('seo_description', $content['seo']['description']) }}" class="w-full mt-1 rounded border-gray-300">
                </div>
            </div>
        </section>

        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h2 class="text-lg font-semibold mb-4">Hero Section</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="text-sm font-medium">Eyebrow</label><input name="hero_eyebrow" value="{{ old('hero_eyebrow', $content['hero']['eyebrow']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <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><label class="text-sm font-medium">Hero button</label><input name="hero_button" value="{{ old('hero_button', $content['hero']['button']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Hero image URL</label>
                    <input name="hero_image" value="{{ old('hero_image', $content['hero']['image'] ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                    <label class="text-xs text-gray-500 block mt-2">Or upload hero image</label>
                    <input type="file" name="hero_image_file" accept="image/*" class="w-full mt-1 text-sm rounded border-gray-300">
                    @if($heroPreview)
                        <img src="{{ $heroPreview }}" alt="Hero image preview" class="mt-2 h-24 rounded object-cover border border-gray-200">
                    @endif
                </div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Hero 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>
        </section>

        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h2 class="text-lg font-semibold mb-4">Country Listing Section</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="text-sm font-medium">Section title</label><input name="listing_title" value="{{ old('listing_title', $content['listing']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Card button text</label><input name="listing_card_button" value="{{ old('listing_card_button', $content['listing']['card_button']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Section text</label><textarea name="listing_text" rows="2" class="w-full mt-1 rounded border-gray-300">{{ old('listing_text', $content['listing']['text']) }}</textarea></div>
                <div class="md:col-span-2"><label class="text-sm font-medium">Empty-state text</label><input name="listing_empty_text" value="{{ old('listing_empty_text', $content['listing']['empty_text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
            </div>
        </section>

        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h2 class="text-lg font-semibold mb-4">Trust 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="trust_title" value="{{ old('trust_title', $content['trust']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">Text</label><input name="trust_text" value="{{ old('trust_text', $content['trust']['text']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">Points (one per line)</label>
                    <textarea name="trust_points" rows="5" class="w-full mt-1 rounded border-gray-300">{{ old('trust_points', implode("\n", $content['trust']['points'] ?? [])) }}</textarea>
                </div>
            </div>
        </section>

        <section class="bg-white rounded-xl border border-gray-200 p-5">
            <h2 class="text-lg font-semibold mb-4">Bottom CTA</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div><label class="text-sm font-medium">CTA title</label><input name="cta_title" value="{{ old('cta_title', $content['cta']['title']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div><label class="text-sm font-medium">CTA button</label><input name="cta_button" value="{{ old('cta_button', $content['cta']['button']) }}" class="w-full mt-1 rounded border-gray-300"></div>
                <div class="md:col-span-2">
                    <label class="text-sm font-medium">CTA image URL</label>
                    <input name="cta_image" value="{{ old('cta_image', $content['cta']['image'] ?? '') }}" class="w-full mt-1 rounded border-gray-300">
                    <label class="text-xs text-gray-500 block mt-2">Or upload CTA image</label>
                    <input type="file" name="cta_image_file" accept="image/*" class="w-full mt-1 text-sm rounded border-gray-300">
                    @if($ctaPreview)
                        <img src="{{ $ctaPreview }}" alt="CTA image preview" class="mt-2 h-24 rounded object-cover border border-gray-200">
                    @endif
                </div>
                <div class="md:col-span-2"><label class="text-sm font-medium">CTA text</label><textarea name="cta_text" rows="2" class="w-full mt-1 rounded border-gray-300">{{ old('cta_text', $content['cta']['text']) }}</textarea></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 Countries Page Content
            </button>
        </div>
    </form>
</div>
@endsection