@extends('layouts.admin')

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

@section('content')
<div class="min-h-screen bg-slate-100">
    <div class="mx-auto max-w-6xl px-4 py-6 md:px-6">

        @php
            $faviconUrl = !empty($seo->favicon) ? asset($seo->favicon) : null;
            $logoUrl = !empty($seo->logo) ? asset($seo->logo) : null;
            $ogImageUrl = !empty($seo->og_image) ? asset($seo->og_image) : null;

            $inputClass = 'w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-800 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100';
            $textareaClass = 'w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 text-sm text-slate-800 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100';
            $labelClass = 'mb-2 block text-sm font-semibold text-slate-700';
            $sectionClass = 'rounded-[28px] border border-slate-200 bg-white p-5 shadow-sm md:p-6';
            $uploadWrapClass = 'rounded-[24px] border border-dashed border-slate-300 bg-slate-50 p-4 transition hover:border-blue-300 hover:bg-blue-50/40';
        @endphp

        {{-- Header --}}
        <div class="mb-6 rounded-[30px] border border-slate-200 bg-white px-5 py-5 shadow-sm md:px-6">
            <div class="flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
                <div>
                    <div class="inline-flex items-center gap-2 rounded-full bg-blue-50 px-3 py-1 text-xs font-bold uppercase tracking-[0.18em] text-blue-700">
                        Search Engine Setup
                    </div>
                    <h1 class="mt-3 text-2xl font-extrabold tracking-tight text-slate-900 md:text-3xl">
                        SEO Settings
                    </h1>
                    <p class="mt-2 max-w-3xl text-sm leading-6 text-slate-600">
                        Meta tags, verification codes, favicon, OG image, indexing, robots.txt and sitemap setup.
                    </p>
                </div>

                <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-3 text-sm text-slate-600">
                    <div class="font-semibold text-slate-800">Quick Note</div>
                    <div class="mt-1">সব public SEO information এখান থেকে centrally manage করতে পারবে।</div>
                </div>
            </div>
        </div>

        {{-- Toast --}}
        @if(session('success') || session('error'))
            <script>
                Swal.fire({
                    icon: '{{ session("success") ? "success" : "error" }}',
                    title: '{{ session("success") ? "Success!" : "Oops!" }}',
                    text: @json(session('success') ?? session('error')),
                    toast: true,
                    position: 'top-end',
                    timer: 2500,
                    showConfirmButton: false
                });
            </script>
        @endif

        {{-- Validation Errors --}}
        @if($errors->any())
            <div class="mb-5 rounded-[24px] border border-rose-200 bg-rose-50 px-5 py-4 text-sm text-rose-700 shadow-sm">
                <div class="mb-2 font-bold">Please fix the following errors:</div>
                <ul class="space-y-1">
                    @foreach($errors->all() as $error)
                        <li>• {{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.seo.update') }}" method="POST" enctype="multipart/form-data" class="space-y-6">
            @csrf

            {{-- Basic SEO --}}
            <div class="{{ $sectionClass }}">
                <div class="mb-5 flex items-center justify-between gap-4">
                    <div>
                        <h2 class="text-lg font-extrabold text-slate-900">Basic SEO</h2>
                        <p class="mt-1 text-sm text-slate-500">
                            তোমার সাইটের primary SEO title, canonical URL, description এবং keywords সেট করো।
                        </p>
                    </div>
                    <div class="hidden rounded-2xl bg-slate-100 px-3 py-2 text-xs font-semibold text-slate-600 md:block">
                        Essential Fields
                    </div>
                </div>

                <div class="grid gap-5 md:grid-cols-2">
                    <div>
                        <label class="{{ $labelClass }}">Site Name</label>
                        <input type="text" name="site_name" value="{{ old('site_name', $seo->site_name) }}" class="{{ $inputClass }}" placeholder="Hisab Seba">
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Site Title</label>
                        <input type="text" name="site_title" value="{{ old('site_title', $seo->site_title) }}" class="{{ $inputClass }}" placeholder="Hisab Seba - Smart Business Accounting SaaS">
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Meta Title</label>
                        <input type="text" name="meta_title" value="{{ old('meta_title', $seo->meta_title) }}" class="{{ $inputClass }}" placeholder="Meta title for search engine results">
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Canonical URL</label>
                        <input type="text" name="canonical_url" value="{{ old('canonical_url', $seo->canonical_url) }}" class="{{ $inputClass }}" placeholder="https://hisabseba.com">
                    </div>
                </div>

                <div class="mt-5">
                    <label class="{{ $labelClass }}">Meta Description</label>
                    <textarea name="meta_description" rows="4" class="{{ $textareaClass }}" placeholder="Write a clean and strong meta description">{{ old('meta_description', $seo->meta_description) }}</textarea>
                </div>

                <div class="mt-5">
                    <label class="{{ $labelClass }}">Meta Keywords</label>
                    <textarea name="meta_keywords" rows="3" class="{{ $textareaClass }}" placeholder="keyword1, keyword2, keyword3">{{ old('meta_keywords', $seo->meta_keywords) }}</textarea>
                </div>
            </div>

            {{-- Open Graph / Social --}}
            <div class="{{ $sectionClass }}">
                <div class="mb-5">
                    <h2 class="text-lg font-extrabold text-slate-900">Open Graph / Social</h2>
                    <p class="mt-1 text-sm text-slate-500">
                        Facebook, WhatsApp, Twitter/X এবং social share preview এর জন্য data সেট করো।
                    </p>
                </div>

                <div class="grid gap-5 md:grid-cols-2">
                    <div>
                        <label class="{{ $labelClass }}">OG Title</label>
                        <input type="text" name="og_title" value="{{ old('og_title', $seo->og_title) }}" class="{{ $inputClass }}" placeholder="Social share title">
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Twitter Card</label>
                        <input type="text" name="twitter_card" value="{{ old('twitter_card', $seo->twitter_card) }}" class="{{ $inputClass }}" placeholder="summary_large_image">
                    </div>
                </div>

                <div class="mt-5">
                    <label class="{{ $labelClass }}">OG Description</label>
                    <textarea name="og_description" rows="3" class="{{ $textareaClass }}" placeholder="Short social share description">{{ old('og_description', $seo->og_description) }}</textarea>
                </div>

                <div class="mt-5">
                    <label class="{{ $labelClass }}">OG Image</label>

                    <div class="{{ $uploadWrapClass }}">
                        <input type="file" name="og_image" id="og_image" accept="image/png,image/jpeg,image/jpg,image/webp" class="{{ $inputClass }} file:mr-4 file:rounded-xl file:border-0 file:bg-blue-600 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-white hover:file:bg-blue-700">

                        @if($ogImageUrl)
                            <div class="mt-4 rounded-2xl border border-slate-200 bg-white p-4">
                                <div class="mb-2 text-xs font-bold uppercase tracking-[0.16em] text-slate-500">Current OG Image</div>
                                <img src="{{ $ogImageUrl }}" alt="OG Image" class="h-28 rounded-xl border border-slate-200 object-cover shadow-sm">
                            </div>
                        @endif

                        <div id="og_image_preview_wrap" class="mt-4 hidden rounded-2xl border border-blue-200 bg-white p-4">
                            <div class="mb-2 text-xs font-bold uppercase tracking-[0.16em] text-blue-700">New Preview</div>
                            <img id="og_image_preview" src="" alt="OG Preview" class="h-28 rounded-xl border border-slate-200 object-cover shadow-sm">
                        </div>
                    </div>
                </div>
            </div>

            {{-- Verification Codes --}}
            <div class="{{ $sectionClass }}">
                <div class="mb-5">
                    <h2 class="text-lg font-extrabold text-slate-900">Verification Codes</h2>
                    <p class="mt-1 text-sm text-slate-500">
                        Search console এবং different platform verification codes এখানে রাখো।
                    </p>
                </div>

                <div class="grid gap-5 md:grid-cols-2">
                    <div>
                        <label class="{{ $labelClass }}">Google Site Verification</label>
                        <input type="text" name="google_site_verification" value="{{ old('google_site_verification', $seo->google_site_verification) }}" class="{{ $inputClass }}" placeholder="Google verification code">
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Bing Verification</label>
                        <input type="text" name="bing_site_verification" value="{{ old('bing_site_verification', $seo->bing_site_verification) }}" class="{{ $inputClass }}" placeholder="Bing verification code">
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Yandex Verification</label>
                        <input type="text" name="yandex_verification" value="{{ old('yandex_verification', $seo->yandex_verification) }}" class="{{ $inputClass }}" placeholder="Yandex verification code">
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Pinterest Verification</label>
                        <input type="text" name="pinterest_verification" value="{{ old('pinterest_verification', $seo->pinterest_verification) }}" class="{{ $inputClass }}" placeholder="Pinterest verification code">
                    </div>

                    <div class="md:col-span-2">
                        <label class="{{ $labelClass }}">Facebook Domain Verification</label>
                        <input type="text" name="facebook_domain_verification" value="{{ old('facebook_domain_verification', $seo->facebook_domain_verification) }}" class="{{ $inputClass }}" placeholder="Facebook domain verification code">
                    </div>
                </div>
            </div>

            {{-- Brand Assets --}}
            <div class="{{ $sectionClass }}">
                <div class="mb-5">
                    <h2 class="text-lg font-extrabold text-slate-900">Brand Assets</h2>
                    <p class="mt-1 text-sm text-slate-500">
                        Favicon, logo এবং business information visually manage করো।
                    </p>
                </div>

                <div class="grid gap-5 md:grid-cols-3">
                    <div>
                        <label class="{{ $labelClass }}">Favicon</label>

                        <div class="{{ $uploadWrapClass }}">
                            <input type="file" name="favicon" id="favicon" accept=".png,.jpg,.jpeg,.ico,.webp" class="{{ $inputClass }} file:mr-4 file:rounded-xl file:border-0 file:bg-blue-600 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-white hover:file:bg-blue-700">

                            @if($faviconUrl)
                                <div class="mt-4 rounded-2xl border border-slate-200 bg-white p-4">
                                    <div class="mb-2 text-xs font-bold uppercase tracking-[0.16em] text-slate-500">Current Favicon</div>
                                    <img src="{{ $faviconUrl }}" alt="Favicon" class="h-14 w-14 rounded-xl border border-slate-200 object-cover shadow-sm">
                                </div>
                            @endif

                            <div id="favicon_preview_wrap" class="mt-4 hidden rounded-2xl border border-blue-200 bg-white p-4">
                                <div class="mb-2 text-xs font-bold uppercase tracking-[0.16em] text-blue-700">New Preview</div>
                                <img id="favicon_preview" src="" alt="Favicon Preview" class="h-14 w-14 rounded-xl border border-slate-200 object-cover shadow-sm">
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Logo</label>

                        <div class="{{ $uploadWrapClass }}">
                            <input type="file" name="logo" id="logo" accept=".png,.jpg,.jpeg,.svg,.webp" class="{{ $inputClass }} file:mr-4 file:rounded-xl file:border-0 file:bg-blue-600 file:px-4 file:py-2 file:text-sm file:font-semibold file:text-white hover:file:bg-blue-700">

                            @if($logoUrl)
                                <div class="mt-4 rounded-2xl border border-slate-200 bg-white p-4">
                                    <div class="mb-2 text-xs font-bold uppercase tracking-[0.16em] text-slate-500">Current Logo</div>
                                    <img src="{{ $logoUrl }}" alt="Logo" class="h-16 rounded-xl border border-slate-200 bg-white object-contain p-2 shadow-sm">
                                </div>
                            @endif

                            <div id="logo_preview_wrap" class="mt-4 hidden rounded-2xl border border-blue-200 bg-white p-4">
                                <div class="mb-2 text-xs font-bold uppercase tracking-[0.16em] text-blue-700">New Preview</div>
                                <img id="logo_preview" src="" alt="Logo Preview" class="h-16 rounded-xl border border-slate-200 bg-white object-contain p-2 shadow-sm">
                            </div>
                        </div>
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Business Type</label>
                        <input type="text" name="business_type" value="{{ old('business_type', $seo->business_type) }}" class="{{ $inputClass }}" placeholder="Accounting SaaS">
                    </div>
                </div>
            </div>

            {{-- Support Info --}}
            <div class="{{ $sectionClass }}">
                <div class="mb-5">
                    <h2 class="text-lg font-extrabold text-slate-900">Support Info</h2>
                    <p class="mt-1 text-sm text-slate-500">
                        এই তথ্যগুলো footer, schema বা support contact area তে ব্যবহার করা যাবে।
                    </p>
                </div>

                <div class="grid gap-5 md:grid-cols-3">
                    <div>
                        <label class="{{ $labelClass }}">Support Email</label>
                        <input type="email" name="support_email" value="{{ old('support_email', $seo->support_email) }}" class="{{ $inputClass }}" placeholder="support@example.com">
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Support Phone</label>
                        <input type="text" name="support_phone" value="{{ old('support_phone', $seo->support_phone) }}" class="{{ $inputClass }}" placeholder="+8801XXXXXXXXX">
                    </div>

                    <div>
                        <label class="{{ $labelClass }}">Address</label>
                        <input type="text" name="address" value="{{ old('address', $seo->address) }}" class="{{ $inputClass }}" placeholder="Business address">
                    </div>
                </div>
            </div>

            {{-- Indexing --}}
            <div class="{{ $sectionClass }}">
                <div class="mb-5">
                    <h2 class="text-lg font-extrabold text-slate-900">Indexing & Search Display</h2>
                    <p class="mt-1 text-sm text-slate-500">
                        Search engine indexing এবং social meta behavior এখান থেকে control করো।
                    </p>
                </div>

                <div class="grid gap-4 md:grid-cols-2">
                    <label class="flex cursor-pointer items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 transition hover:border-blue-300 hover:bg-blue-50">
                        <input type="checkbox" name="index_public_pages" value="1" class="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" {{ old('index_public_pages', $seo->index_public_pages) ? 'checked' : '' }}>
                        <div>
                            <div class="text-sm font-semibold text-slate-800">Allow Public Pages Indexing</div>
                            <div class="mt-1 text-xs text-slate-500">Landing page, features, pricing, blog এর মতো public page index হতে পারবে।</div>
                        </div>
                    </label>

                    <label class="flex cursor-pointer items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 transition hover:border-blue-300 hover:bg-blue-50">
                        <input type="checkbox" name="index_private_pages" value="1" class="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" {{ old('index_private_pages', $seo->index_private_pages) ? 'checked' : '' }}>
                        <div>
                            <div class="text-sm font-semibold text-slate-800">Allow Private Pages Indexing</div>
                            <div class="mt-1 text-xs text-slate-500">সাধারণত এটা off রাখাই ভালো, যাতে dashboard type page index না হয়।</div>
                        </div>
                    </label>

                    <label class="flex cursor-pointer items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 transition hover:border-blue-300 hover:bg-blue-50">
                        <input type="checkbox" name="enable_json_ld" value="1" class="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" {{ old('enable_json_ld', $seo->enable_json_ld) ? 'checked' : '' }}>
                        <div>
                            <div class="text-sm font-semibold text-slate-800">Enable JSON-LD Structured Data</div>
                            <div class="mt-1 text-xs text-slate-500">Structured data search engines কে site better বুঝতে সাহায্য করবে।</div>
                        </div>
                    </label>

                    <label class="flex cursor-pointer items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 transition hover:border-blue-300 hover:bg-blue-50">
                        <input type="checkbox" name="enable_og_tags" value="1" class="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" {{ old('enable_og_tags', $seo->enable_og_tags) ? 'checked' : '' }}>
                        <div>
                            <div class="text-sm font-semibold text-slate-800">Enable Open Graph Tags</div>
                            <div class="mt-1 text-xs text-slate-500">Facebook, Messenger, WhatsApp preview এর জন্য দরকার।</div>
                        </div>
                    </label>

                    <label class="flex cursor-pointer items-start gap-3 rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 transition hover:border-blue-300 hover:bg-blue-50 md:col-span-2">
                        <input type="checkbox" name="enable_twitter_tags" value="1" class="mt-1 h-4 w-4 rounded border-slate-300 text-blue-600 focus:ring-blue-500" {{ old('enable_twitter_tags', $seo->enable_twitter_tags) ? 'checked' : '' }}>
                        <div>
                            <div class="text-sm font-semibold text-slate-800">Enable Twitter Meta Tags</div>
                            <div class="mt-1 text-xs text-slate-500">Twitter/X social preview এর জন্য useful।</div>
                        </div>
                    </label>
                </div>
            </div>

            {{-- robots --}}
            <div class="{{ $sectionClass }}">
                <div class="mb-5">
                    <h2 class="text-lg font-extrabold text-slate-900">robots.txt Settings</h2>
                    <p class="mt-1 text-sm text-slate-500">
                        Crawling rules এবং sitemap reference এখান থেকে control করো।
                    </p>
                </div>

                <div class="mb-5 grid gap-4 md:grid-cols-2">
                    <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600">
                        <div class="text-xs font-bold uppercase tracking-[0.16em] text-slate-500">robots.txt URL</div>
                        <a href="{{ route('robots.txt') }}" target="_blank" class="mt-2 inline-block break-all font-semibold text-blue-600 hover:underline">
                            {{ route('robots.txt') }}
                        </a>
                    </div>

                    <div class="rounded-2xl border border-slate-200 bg-slate-50 px-4 py-4 text-sm text-slate-600">
                        <div class="text-xs font-bold uppercase tracking-[0.16em] text-slate-500">Sitemap URL</div>
                        <a href="{{ route('sitemap.xml') }}" target="_blank" class="mt-2 inline-block break-all font-semibold text-blue-600 hover:underline">
                            {{ route('sitemap.xml') }}
                        </a>
                    </div>
                </div>

                <label class="{{ $labelClass }}">robots.txt Content</label>
                <textarea
                    name="robots_txt"
                    rows="16"
                    class="w-full rounded-2xl border border-slate-300 bg-white px-4 py-3 font-mono text-sm text-slate-800 shadow-sm outline-none transition duration-200 placeholder:text-slate-400 focus:border-blue-500 focus:ring-4 focus:ring-blue-100"
                    placeholder="User-agent: *
Disallow: /admin
Disallow: /login
Sitemap: {{ route('sitemap.xml') }}"
                >{{ old('robots_txt', $seo->robots_txt) }}</textarea>

                <div class="mt-4 rounded-2xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700">
                    <span class="font-semibold">Recommended:</span>
                    admin, user, login, register, dashboard, subscription pages disallow করে রাখো।
                </div>
            </div>

            {{-- Submit --}}
            <div class="sticky bottom-4 z-10 flex justify-end">
                <div class="rounded-[22px] border border-slate-200 bg-white p-2 shadow-lg shadow-slate-200/70">
                    <button type="submit" class="inline-flex items-center justify-center rounded-2xl bg-blue-600 px-6 py-3 text-sm font-bold text-white transition hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-200">
                        Save SEO Settings
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    function setupImagePreview(inputId, previewId, wrapperId, allowedTypes, maxSizeMb = 4) {
        const input = document.getElementById(inputId);
        const preview = document.getElementById(previewId);
        const wrapper = document.getElementById(wrapperId);

        if (!input || !preview || !wrapper) return;

        input.addEventListener('change', function () {
            const file = this.files[0];

            if (!file) {
                wrapper.classList.add('hidden');
                preview.src = '';
                return;
            }

            if (!allowedTypes.includes(file.type)) {
                this.value = '';

                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'error',
                    title: 'Invalid file type selected',
                    showConfirmButton: false,
                    timer: 2200
                });
                return;
            }

            if (file.size > maxSizeMb * 1024 * 1024) {
                this.value = '';

                Swal.fire({
                    toast: true,
                    position: 'top-end',
                    icon: 'error',
                    title: `File must be under ${maxSizeMb}MB`,
                    showConfirmButton: false,
                    timer: 2200
                });
                return;
            }

            const reader = new FileReader();
            reader.onload = function (e) {
                preview.src = e.target.result;
                wrapper.classList.remove('hidden');
            };
            reader.readAsDataURL(file);
        });
    }

    setupImagePreview(
        'favicon',
        'favicon_preview',
        'favicon_preview_wrap',
        ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'image/x-icon', 'image/vnd.microsoft.icon'],
        2
    );

    setupImagePreview(
        'logo',
        'logo_preview',
        'logo_preview_wrap',
        ['image/png', 'image/jpeg', 'image/jpg', 'image/webp', 'image/svg+xml'],
        4
    );

    setupImagePreview(
        'og_image',
        'og_image_preview',
        'og_image_preview_wrap',
        ['image/png', 'image/jpeg', 'image/jpg', 'image/webp'],
        4
    );
});
</script>
@endpush