@extends('layouts.app')

@section('title', 'Admin - Edit Static SEO')

@section('content')
<div class="row g-4">
    <div class="col-lg-2 d-none d-lg-block">
        @include('admin.partials.sidebar')
    </div>

    <div class="col-lg-10 col-12">
        <nav aria-label="breadcrumb" class="mb-2">
            <ol class="breadcrumb small mb-0">
                <li class="breadcrumb-item"><a href="{{ route('admin.seo.index') }}">SEO Panel</a></li>
                <li class="breadcrumb-item active">Edit Static Page</li>
            </ol>
        </nav>

        <div class="admin-page-header mb-3">
            <h1 class="h5 fw-semibold mb-0">SEO: <code class="text-primary">{{ $meta->url_path }}</code></h1>
        </div>

        <form action="{{ route('admin.seo.update_static', $meta->id) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="card shadow-sm border-0 mb-3">
                <div class="card-body">
                    <h6 class="fw-semibold text-primary mb-3">SEO Configuration</h6>
                    
                    <div class="mb-3">
                        <label class="form-label">Page Title (Google Title)</label>
                        <input type="text" name="title" id="seo-title-input" class="form-control" value="{{ old('title', $meta->title) }}" required>
                        <div class="form-text">50–60 chars. Current: <span id="title-count">0</span></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Meta Description</label>
                        <textarea name="description" id="seo-desc-input" class="form-control" rows="3" required>{{ old('description', $meta->description) }}</textarea>
                        <div class="form-text">150–160 chars. Current: <span id="desc-count">0</span></div>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Meta Keywords</label>
                        <input type="text" name="keywords" class="form-control" value="{{ old('keywords', $meta->keywords) }}" placeholder="e.g. fashion, shopping, ecommerce">
                    </div>

                    <div class="row g-2">
                        <div class="col-md-6">
                            <label class="form-label">Robots Meta</label>
                            <select name="robots" class="form-select">
                                <option value="index, follow" {{ $meta->robots == 'index, follow' ? 'selected' : '' }}>Index, Follow</option>
                                <option value="noindex, follow" {{ $meta->robots == 'noindex, follow' ? 'selected' : '' }}>No-Index, Follow</option>
                                <option value="index, nofollow" {{ $meta->robots == 'index, nofollow' ? 'selected' : '' }}>Index, No-Follow</option>
                                <option value="noindex, nofollow" {{ $meta->robots == 'noindex, nofollow' ? 'selected' : '' }}>No-Index, No-Follow</option>
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label">Canonical URL</label>
                            <input type="url" name="canonical_url" class="form-control" value="{{ old('canonical_url', $meta->canonical_url) }}" placeholder="{{ url($meta->url_path) }}">
                        </div>
                    </div>
                </div>
            </div>

            <div class="card bg-light border-0 mb-3">
                <div class="card-body">
                    <h6 class="fw-semibold text-muted mb-2"><i class="bi bi-eye me-1"></i> Google Preview</h6>
                    <div class="bg-white p-3 rounded shadow-sm" style="max-width: 560px; font-family: arial, sans-serif;">
                        <div id="preview-url" class="text-success small mb-1">{{ url($meta->url_path) }}</div>
                        <div id="preview-title" class="text-primary fw-semibold mb-1" style="font-size: 1rem;">Snippet Title Example</div>
                        <div id="preview-desc" class="text-muted small">Please enter a meta description to see how your page might appear in Google search results.</div>
                    </div>
                </div>
            </div>

            <div class="d-flex gap-2">
                <button type="submit" class="btn btn-primary btn-sm px-4">Save SEO Settings</button>
                <a href="{{ route('admin.seo.index') }}" class="btn btn-outline-secondary btn-sm px-3">Cancel</a>
            </div>
        </form>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const titleInput = document.getElementById('seo-title-input');
    const descInput = document.getElementById('seo-desc-input');
    const previewTitle = document.getElementById('preview-title');
    const previewDesc = document.getElementById('preview-desc');
    const titleCount = document.getElementById('title-count');
    const descCount = document.getElementById('desc-count');

    function updatePreview() {
        previewTitle.textContent = titleInput.value || 'Snippet Title Example';
        previewDesc.textContent = descInput.value || 'Please enter a meta description...';
        titleCount.textContent = titleInput.value.length;
        descCount.textContent = descInput.value.length;

        titleCount.className = titleInput.value.length > 60 ? 'text-danger fw-bold' : 'text-success';
        descCount.className = (descInput.value.length > 160 || descInput.value.length < 120) ? 'text-warning fw-bold' : 'text-success';
    }

    titleInput.addEventListener('input', updatePreview);
    descInput.addEventListener('input', updatePreview);
    updatePreview();
});
</script>
@endsection