@extends('admin.layouts.app')
@section('title', 'SEO Settings')
@section('breadcrumb')
    <li class="breadcrumb-item active">SEO Settings</li>
@endsection

@section('content')
<div class="page-header">
    <h1><i class="fas fa-search text-secondary"></i> SEO Settings</h1>
    <span class="text-muted" style="font-size:.85rem">Configure meta tags for each page</span>
</div>

<div class="accordion" id="seoAccordion">
    @foreach($pages as $slug => $label)
    @php $seo = $seoList[$slug] ?? null; @endphp
    <div class="accordion-item border-0 mb-3 rounded shadow-sm overflow-hidden">
        <h2 class="accordion-header">
            <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }} fw-semibold"
                type="button" data-bs-toggle="collapse" data-bs-target="#seo{{ $loop->index }}">
                <i class="fas fa-file-alt me-2 text-success"></i>
                {{ $label }}
                @if($seo && $seo->seo_title)
                    <span class="badge bg-success-subtle text-success ms-2" style="font-size:.7rem">Configured</span>
                @else
                    <span class="badge bg-warning-subtle text-warning ms-2" style="font-size:.7rem">Not set</span>
                @endif
            </button>
        </h2>
        <div id="seo{{ $loop->index }}" class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
             data-bs-parent="#seoAccordion">
            <div class="accordion-body bg-white">
                <form action="{{ route('admin.settings.seo.update', $slug) }}" method="POST" enctype="multipart/form-data">
                    @csrf
                    <div class="row g-3">
                        <div class="col-md-8">
                            <label class="form-label fw-semibold">SEO Title</label>
                            <input type="text" name="seo_title" class="form-control"
                                value="{{ old('seo_title', $seo->seo_title ?? '') }}"
                                placeholder="Page title for search engines (50–60 chars recommended)">
                            @if($seo && $seo->seo_title)
                            <div class="form-text text-success">
                                <i class="fas fa-check-circle me-1"></i>{{ strlen($seo->seo_title) }} chars
                            </div>
                            @endif
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-semibold">Canonical URL</label>
                            <input type="url" name="canonical_url" class="form-control"
                                value="{{ old('canonical_url', $seo->canonical_url ?? '') }}"
                                placeholder="https://yoursite.com.au/{{ $slug }}">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Meta Keywords</label>
                            <input type="text" name="seo_keywords" class="form-control"
                                value="{{ old('seo_keywords', $seo->seo_keywords ?? '') }}"
                                placeholder="keyword1, keyword2, keyword3 (comma separated)">
                        </div>
                        <div class="col-12">
                            <label class="form-label fw-semibold">Meta Description</label>
                            <textarea name="seo_description" class="form-control" rows="2"
                                maxlength="160" placeholder="Page description for search engines (150–160 chars recommended)...">{{ old('seo_description', $seo->seo_description ?? '') }}</textarea>
                            @if($seo && $seo->seo_description)
                            <div class="form-text {{ strlen($seo->seo_description) > 160 ? 'text-danger' : 'text-success' }}">
                                <i class="fas fa-{{ strlen($seo->seo_description) > 160 ? 'exclamation' : 'check' }}-circle me-1"></i>
                                {{ strlen($seo->seo_description) }}/160 chars
                            </div>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-semibold">OG Image (Social Share)</label>
                            @if($seo && $seo->og_image)
                            <div class="mb-2">
                                <img src="{{ Storage::url($seo->og_image) }}" class="img-thumbnail" style="max-height:80px">
                            </div>
                            @endif
                            <input type="file" name="og_image" class="form-control form-control-sm" accept="image/*">
                            <div class="form-text">Recommended: 1200×630px JPG/PNG</div>
                        </div>
                        <div class="col-12">
                            {{-- Google Preview --}}
                            @if($seo && $seo->seo_title)
                            <div class="p-3 rounded" style="background:#f8f9fa;border:1px solid #dee2e6">
                                <div style="font-size:.72rem;color:#666;margin-bottom:.3rem">Search Preview</div>
                                <div style="color:#1a0dab;font-size:1rem;line-height:1.3">{{ $seo->seo_title }}</div>
                                <div style="color:#006621;font-size:.78rem">{{ url('/') }}/{{ $slug }}</div>
                                <div style="color:#545454;font-size:.82rem;margin-top:.2rem">{{ Str::limit($seo->seo_description, 155) }}</div>
                            </div>
                            @endif
                        </div>
                        <div class="col-12">
                            <button type="submit" class="btn btn-sm btn-green">
                                <i class="fas fa-save me-2"></i>Save SEO for {{ $label }}
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @endforeach
</div>
@endsection