@extends('layouts.admin')

@section('title', 'SEO Settings')

@section('content')
<div class="max-w-5xl mx-auto space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="font-serif text-2xl text-[#0c2340]">SEO Settings</h2>
            <p class="text-gray-500 mt-1">Optimize your website for search engines and social media platforms.</p>
        </div>
    </div>

    @if (session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-xl">
            {{ session('success') }}
        </div>
    @endif

    <form action="{{ route('admin.seo.update') }}" method="POST" class="space-y-8">
        @csrf
        @method('PUT')

        <!-- Global SEO -->
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
            <h3 class="text-lg font-bold text-[#0c2340] mb-6 flex items-center gap-2">
                <i data-feather="globe" class="w-5 h-5"></i> Global SEO Defaults
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Meta Title Template</label>
                    <input type="text" name="seo_meta_title_template" value="{{ old('seo_meta_title_template', $seoSettings['seo_meta_title_template']) }}"
                           class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-[#c9a84c]">
                    <p class="text-xs text-gray-500 mt-1">Use <code>{page_title}</code> and <code>{site_name}</code> placeholders.</p>
                </div>

                <div class="md:col-span-2">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Default Meta Description</label>
                    <textarea name="seo_meta_description" rows="2" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-[#c9a84c]">{{ old('seo_meta_description', $seoSettings['seo_meta_description']) }}</textarea>
                    <p class="text-xs text-gray-500 mt-1">Recommended: 150–160 characters</p>
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Default Keywords</label>
                    <input type="text" name="seo_meta_keywords" value="{{ old('seo_meta_keywords', $seoSettings['seo_meta_keywords']) }}"
                           class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-[#c9a84c]">
                </div>

                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Robots Meta Tag</label>
                    <select name="seo_robots" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-[#c9a84c]">
                        <option value="index, follow" {{ $seoSettings['seo_robots'] == 'index, follow' ? 'selected' : '' }}>index, follow (Recommended)</option>
                        <option value="noindex, follow" {{ $seoSettings['seo_robots'] == 'noindex, follow' ? 'selected' : '' }}>noindex, follow</option>
                        <option value="index, nofollow" {{ $seoSettings['seo_robots'] == 'index, nofollow' ? 'selected' : '' }}>index, nofollow</option>
                        <option value="noindex, nofollow" {{ $seoSettings['seo_robots'] == 'noindex, nofollow' ? 'selected' : '' }}>noindex, nofollow</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Search Engine Verification & Analytics -->
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
            <h3 class="text-lg font-bold text-[#0c2340] mb-6 flex items-center gap-2">
                <i data-feather="check-circle" class="w-5 h-5"></i> Search Engine Verification & Analytics
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Google Site Verification Code</label>
                    <input type="text" name="google_site_verification" value="{{ old('google_site_verification', $seoSettings['google_site_verification']) }}"
                           placeholder="google-site-verification content..." class="w-full px-4 py-3 rounded-xl border border-gray-200">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Bing Webmaster Verification</label>
                    <input type="text" name="bing_webmaster_verification" value="{{ old('bing_webmaster_verification', $seoSettings['bing_webmaster_verification']) }}"
                           class="w-full px-4 py-3 rounded-xl border border-gray-200">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Google Analytics 4 ID</label>
                    <input type="text" name="google_analytics_id" value="{{ old('google_analytics_id', $seoSettings['google_analytics_id']) }}"
                           placeholder="G-XXXXXXXXXX" class="w-full px-4 py-3 rounded-xl border border-gray-200">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Google Tag Manager ID</label>
                    <input type="text" name="google_tag_manager_id" value="{{ old('google_tag_manager_id', $seoSettings['google_tag_manager_id']) }}"
                           placeholder="GTM-XXXXXX" class="w-full px-4 py-3 rounded-xl border border-gray-200">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Facebook Pixel ID</label>
                    <input type="text" name="facebook_pixel_id" value="{{ old('facebook_pixel_id', $seoSettings['facebook_pixel_id']) }}"
                           class="w-full px-4 py-3 rounded-xl border border-gray-200">
                </div>
            </div>
        </div>

        <!-- Social Media & Open Graph -->
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
            <h3 class="text-lg font-bold text-[#0c2340] mb-6 flex items-center gap-2">
                <i data-feather="share-2" class="w-5 h-5"></i> Social Media & Open Graph
            </h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">OG Site Name</label>
                    <input type="text" name="og_site_name" value="{{ old('og_site_name', $seoSettings['og_site_name']) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Default OG Image URL</label>
                    <input type="text" name="og_default_image" value="{{ old('og_default_image', $seoSettings['og_default_image']) }}" placeholder="https://..." class="w-full px-4 py-3 rounded-xl border border-gray-200">
                    <p class="text-xs text-gray-500 mt-1">Recommended size: 1200x630px</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Twitter @username</label>
                    <input type="text" name="twitter_site" value="{{ old('twitter_site', $seoSettings['twitter_site']) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Twitter Creator</label>
                    <input type="text" name="twitter_creator" value="{{ old('twitter_creator', $seoSettings['twitter_creator']) }}" class="w-full px-4 py-3 rounded-xl border border-gray-200">
                </div>
            </div>
        </div>

        <!-- Homepage Browser Tab Title -->
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
            <h3 class="text-lg font-bold text-[#0c2340] mb-2 flex items-center gap-2">
                <i data-feather="globe" class="w-5 h-5"></i> Homepage Browser Tab Title
            </h3>

            <div class="bg-[#f8f5ee] border border-[#c9a84c]/30 rounded-2xl p-4 mb-5">
                <div class="text-xs font-semibold text-[#0c2340] mb-1">This is what visitors will see in their browser tab on the homepage:</div>
                <div class="font-mono text-base text-[#0c2340]">
                    <strong>Site Name</strong> (from General Settings) — <strong>Your Slogan Here</strong>
                </div>
                <div class="text-[10px] text-gray-500 mt-1">Example: <span class="font-medium">Tourism — Discover Amazing Journeys</span></div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Homepage Browser Tab Title</label>
                    <input type="text" name="seo_home_title" value="{{ old('seo_home_title', $seoSettings['seo_home_title'] ?? '') }}"
                           class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-[#c9a84c]"
                           placeholder="Tourism App - Discover Amazing Journeys">
                    <p class="text-[10px] text-gray-400 mt-1">This field now fully controls the browser tab title on the homepage (simple mode).</p>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Homepage Meta Description (for Google)</label>
                    <textarea name="seo_home_description" rows="3" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:ring-2 focus:ring-[#c9a84c]"
                              placeholder="Short description that appears in search results">{{ old('seo_home_description', $seoSettings['seo_home_description'] ?? '') }}</textarea>
                </div>
            </div>
        </div>

        <!-- Per-Page SEO (for other pages) -->
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
            <h3 class="text-lg font-bold text-[#0c2340] mb-2 flex items-center gap-2">
                <i data-feather="file-text" class="w-5 h-5"></i> Per-Page SEO Overrides
            </h3>
            <p class="text-sm text-gray-500 mb-6">Control title and meta description for other important pages. These are mainly for SEO.</p>

            @php
                $pages = [
                    'about' => 'About Page',
                    'contact' => 'Contact Page',
                    'packages' => 'Packages Listing',
                    'destinations' => 'Destinations Listing',
                    'stories' => 'Stories / Blog Listing',
                ];
            @endphp

            @foreach ($pages as $key => $label)
                <div class="border border-gray-200 rounded-2xl p-5 mb-4">
                    <div class="font-semibold text-[#0c2340] mb-4">{{ $label }}</div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="text-xs text-gray-500">Page Title (for browser tab & SEO)</label>
                            <input type="text" name="seo_{{ $key }}_title" value="{{ old('seo_'.$key.'_title', $seoSettings['seo_'.$key.'_title'] ?? '') }}"
                                   class="w-full px-4 py-2.5 rounded-xl border border-gray-200 text-sm">
                        </div>
                        <div>
                            <label class="text-xs text-gray-500">Meta Description</label>
                            <textarea name="seo_{{ $key }}_description" rows="2" class="w-full px-4 py-2.5 rounded-xl border border-gray-200 text-sm">{{ old('seo_'.$key.'_description', $seoSettings['seo_'.$key.'_description'] ?? '') }}</textarea>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        <!-- Structured Data & Tools -->
        <div class="bg-white rounded-3xl shadow-sm border border-gray-100 p-8">
            <h3 class="text-lg font-bold text-[#0c2340] mb-6 flex items-center gap-2">
                <i data-feather="code" class="w-5 h-5"></i> Structured Data & Advanced Tools
            </h3>

            <div class="space-y-4">
                <div class="flex items-center justify-between p-4 border rounded-2xl">
                    <div>
                        <div class="font-medium">Enable Organization + Website Schema</div>
                        <div class="text-xs text-gray-500">Helps Google understand your brand (recommended)</div>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="enable_organization_schema" value="1" {{ $seoSettings['enable_organization_schema'] ? 'checked' : '' }} class="sr-only peer">
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[#c9a84c] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#c9a84c]"></div>
                    </label>
                </div>

                <div class="flex items-center justify-between p-4 border rounded-2xl">
                    <div>
                        <div class="font-medium">Enable Breadcrumb Schema</div>
                        <div class="text-xs text-gray-500">Improves rich snippets in search results</div>
                    </div>
                    <label class="relative inline-flex items-center cursor-pointer">
                        <input type="checkbox" name="enable_breadcrumb_schema" value="1" {{ $seoSettings['enable_breadcrumb_schema'] ? 'checked' : '' }} class="sr-only peer">
                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-[#c9a84c] rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-[#c9a84c]"></div>
                    </label>
                </div>
            </div>

            <div class="mt-8 p-4 bg-gray-50 rounded-2xl text-sm">
                <div class="font-semibold mb-2">Quick Tools</div>
                <div class="flex flex-wrap gap-3">
                    <a href="https://search.google.com/search-console" target="_blank" class="px-4 py-2 bg-white border rounded-xl text-xs hover:bg-gray-100 transition">Google Search Console</a>
                    <a href="https://www.bing.com/webmasters" target="_blank" class="px-4 py-2 bg-white border rounded-xl text-xs hover:bg-gray-100 transition">Bing Webmaster Tools</a>
                    <a href="https://search.google.com/test/rich-results" target="_blank" class="px-4 py-2 bg-white border rounded-xl text-xs hover:bg-gray-100 transition">Rich Results Test</a>
                    <a href="{{ url('/sitemap.xml') }}" target="_blank" class="px-4 py-2 bg-white border rounded-xl text-xs hover:bg-gray-100 transition">View Dynamic XML Sitemap</a>
                </div>
                <p class="text-[10px] text-gray-500 mt-3">Your sitemap is automatically generated and includes all active packages, stories, and main pages. Submit it in Google Search Console.</p>
            </div>

            <!-- Robots.txt Editor -->
            <div class="mt-8">
                <label class="block text-sm font-semibold text-gray-700 mb-2">robots.txt Content</label>
                <textarea name="robots_txt_content" rows="8" class="w-full font-mono text-sm px-4 py-3 rounded-2xl border border-gray-300 focus:ring-2 focus:ring-[#c9a84c]"
                          placeholder="User-agent: *&#10;Allow: /&#10;&#10;Sitemap: {{ url('/sitemap.xml') }}">{{ old('robots_txt_content', $seoSettings['robots_txt_content'] ?? '') }}</textarea>
                <p class="text-xs text-gray-500 mt-1">This file tells search engine crawlers what they can and cannot access. Changes take effect immediately.</p>
            </div>
        </div>

        <div class="flex justify-end">
            <button type="submit" class="px-8 py-3 rounded-full font-bold bg-[#0c2340] text-white hover:bg-[#1a4a6e] transition-colors shadow-lg">
                Save SEO Settings
            </button>
        </div>
    </form>
</div>
@endsection