@extends('layouts.admin')

@section('title', 'Edit SEO: ' . ucfirst($seo->page_identifier))

@section('content')
<div class="container mx-auto max-w-3xl">
    <div class="flex items-center gap-4 mb-8">
        <a href="{{ route('admin.seo.index') }}" class="w-10 h-10 rounded-full bg-white border border-slate-200 flex items-center justify-center text-slate-500 hover:text-brand-primary hover:border-brand-primary transition shadow-sm">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg>
        </a>
        <div>
            <span class="px-2 py-0.5 rounded bg-brand-primary/10 text-[10px] font-bold text-brand-primary uppercase tracking-wider">Page: {{ $seo->page_identifier }}</span>
            <h1 class="text-2xl font-bold text-slate-900 mt-1">Edit SEO Settings</h1>
        </div>
    </div>

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

        <div class="bg-white rounded-3xl shadow-sm border border-slate-100 overflow-hidden">
            <div class="p-8 space-y-8">
                <!-- Meta Title -->
                <div>
                    <div class="flex justify-between items-end mb-2">
                        <label class="block text-slate-700 text-sm font-bold">Search Engine Title <span class="text-red-500">*</span></label>
                        <span class="text-[10px] text-slate-400 font-medium uppercase tracking-widest">Recommended: 50-60 chars</span>
                    </div>
                    <input class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition font-medium @error('title') border-red-500 @enderror" 
                           name="title" type="text" placeholder="Page title shown in search results" required
                           value="{{ old('title', $seo->title) }}">
                    @error('title')
                        <p class="text-red-500 text-xs mt-2 font-medium">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Meta Description -->
                <div>
                    <div class="flex justify-between items-end mb-2">
                        <label class="block text-slate-700 text-sm font-bold">Meta Description <span class="text-red-500">*</span></label>
                        <span class="text-[10px] text-slate-400 font-medium uppercase tracking-widest">Recommended: 150-160 chars</span>
                    </div>
                    <textarea class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition @error('description') border-red-500 @enderror" 
                              name="description" rows="5" placeholder="Brief summary of the page for search engines and social media." required>{{ old('description', $seo->description) }}</textarea>
                    @error('description')
                        <p class="text-red-500 text-xs mt-2 font-medium">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Keywords -->
                <div>
                    <label class="block text-slate-700 text-sm font-bold mb-2">Focus Keywords (Optional)</label>
                    <input class="w-full px-5 py-4 bg-slate-50 border border-slate-200 rounded-2xl focus:ring-4 focus:ring-brand-primary/10 focus:border-brand-primary outline-none transition @error('keywords') border-red-500 @enderror" 
                           name="keywords" type="text" placeholder="innovation, technology, logistics, ecs"
                           value="{{ old('keywords', $seo->keywords) }}">
                    <p class="text-[11px] text-slate-400 mt-2 italic">Separate with commas. Search engines use this less now, but it's good for internal tracking.</p>
                </div>

                <!-- Social Share Image (OG Image) -->
                <div>
                    <label class="block text-slate-700 text-sm font-bold mb-4">Social Sharing Image (Open Graph)</label>
                    
                    <x-media-picker 
                        name="og_image_path" 
                        label="Library Image" 
                        :value="$seo->og_image_path" 
                        :preview="$seo->og_image_path ? asset($seo->og_image_path) : null" 
                    />

                    <div class="mt-6 p-4 bg-slate-50 rounded-2xl border border-slate-100 italic">
                        <p class="text-[11px] text-slate-500 leading-relaxed mb-3">
                            <strong>Direct Upload:</strong> You can still upload a specific file for this page if it's not in the library.
                        </p>
                        <input class="w-full text-xs text-slate-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-xs file:font-bold file:bg-brand-primary/10 file:text-brand-primary hover:file:bg-brand-primary/20 transition cursor-pointer" 
                               name="og_image" type="file" accept="image/*">
                    </div>
                </div>
            </div>

            <div class="bg-slate-50 p-8 border-t border-slate-50 flex items-center gap-4">
                <button type="submit" class="flex-1 bg-brand-primary hover:bg-brand-accent text-white font-bold py-4 px-6 rounded-2xl shadow-xl shadow-brand-primary/20 transition flex items-center justify-center gap-3">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path></svg>
                    Save SEO Changes
                </button>
                <a href="{{ route('admin.seo.index') }}" class="px-8 py-4 text-sm font-bold text-slate-500 hover:text-slate-800 transition">
                    Cancel
                </a>
            </div>
        </div>
    </form>
</div>
@endsection
