@extends('layouts.admin')

@section('title', 'SEO Management & Meta Tags – Admin CRM')
@section('page_title', 'Search Engine Optimization (SEO)')

@section('content')
<div class="space-y-6 max-w-7xl">
    
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
        <div>
            <h2 class="text-lg font-bold text-white font-heading">Page-Level SEO Meta & XML Sitemap</h2>
            <p class="text-xs text-slate-400">Configure title tags, meta descriptions, Open Graph cards, and indexing controls.</p>
        </div>
        <div class="flex gap-2">
            <a href="{{ route('seo.sitemap') }}" target="_blank" class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition flex items-center gap-1.5">
                <i class="fa-solid fa-sitemap"></i>
                <span>View sitemap.xml</span>
            </a>
            <a href="{{ route('seo.robots') }}" target="_blank" class="px-3 py-1.5 rounded-xl bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition flex items-center gap-1.5">
                <i class="fa-solid fa-robot"></i>
                <span>View robots.txt</span>
            </a>
        </div>
    </div>

    <!-- SEO Pages List -->
    <div class="space-y-4">
        @foreach($seoPages as $page)
            <div class="bg-slate-900 border border-white/10 rounded-2xl p-5 shadow-xl" x-data="{ open: false }">
                <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
                    <div>
                        <span class="font-mono text-xs font-bold text-red-400">{{ $page->url_path }}</span>
                        <h4 class="text-sm font-bold text-white mt-0.5">{{ $page->title }}</h4>
                        <p class="text-xs text-slate-400 line-clamp-1 mt-0.5">{{ $page->description }}</p>
                    </div>

                    <div class="flex items-center gap-3">
                        <span class="text-[10px] bg-slate-950 px-2 py-1 rounded font-mono text-slate-400">Priority: {{ $page->sitemap_priority }}</span>
                        <button type="button" @click="open = !open" class="px-3 py-1.5 rounded-lg bg-white/10 hover:bg-white/20 text-white font-bold text-xs transition">
                            <span x-text="open ? 'Close' : 'Edit Meta'"></span>
                        </button>
                    </div>
                </div>

                <!-- Edit Form -->
                <form method="POST" action="{{ route('admin.seo.update', $page->id) }}" x-show="open" class="mt-4 pt-4 border-t border-white/10 space-y-4 text-xs">
                    @csrf

                    <div>
                        <label class="block font-bold text-slate-300 uppercase text-[10px] mb-1">Page Title Tag *</label>
                        <input type="text" name="title" value="{{ $page->title }}" required class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-2 text-white text-xs font-semibold focus:border-red-500 focus:outline-none">
                    </div>

                    <div>
                        <label class="block font-bold text-slate-300 uppercase text-[10px] mb-1">Meta Description *</label>
                        <textarea name="description" rows="2" class="w-full bg-slate-950 border border-white/10 rounded-xl p-3 text-white text-xs focus:border-red-500 focus:outline-none">{{ $page->description }}</textarea>
                    </div>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block font-bold text-slate-300 uppercase text-[10px] mb-1">Focus Keywords</label>
                            <input type="text" name="keywords" value="{{ $page->keywords }}" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-1.5 text-white text-xs">
                        </div>
                        <div>
                            <label class="block font-bold text-slate-300 uppercase text-[10px] mb-1">Sitemap Priority (0.1 to 1.0)</label>
                            <input type="number" step="0.1" min="0.1" max="1.0" name="sitemap_priority" value="{{ $page->sitemap_priority }}" class="w-full bg-slate-950 border border-white/10 rounded-xl px-3 py-1.5 text-white text-xs">
                        </div>
                    </div>

                    <div class="flex items-center justify-between pt-2">
                        <label class="flex items-center gap-2 text-xs text-white">
                            <input type="checkbox" name="robots_index" value="1" {{ $page->robots_index ? 'checked' : '' }} class="rounded accent-red-600">
                            <span>Allow Search Engines to Index (robots: index, follow)</span>
                        </label>
                        <button type="submit" class="px-4 py-2 rounded-xl bg-red-600 hover:bg-red-700 text-white font-bold text-xs shadow transition">
                            Save SEO Settings
                        </button>
                    </div>
                </form>
            </div>
        @endforeach
    </div>

</div>
@endsection