@extends('admin.layouts.app')
@section('title', 'SEO Settings')
@section('heading', 'SEO & Search Engine Settings')

@section('content')
<div class="page-tabs">
    <a href="{{ route('admin.pages.home') }}" class="page-tab">Home</a>
    <a href="{{ route('admin.pages.about') }}" class="page-tab">About</a>
    <a href="{{ route('admin.pages.contact') }}" class="page-tab">Contact</a>
    <a href="{{ route('admin.pages.offers') }}" class="page-tab">Offers</a>
    <a href="{{ route('admin.pages.footer') }}" class="page-tab">Footer</a>
    <a href="{{ route('admin.pages.seo') }}" class="page-tab active">SEO</a>
    <a href="{{ route('admin.pages.design') }}" class="page-tab">Design</a>
</div>

<form method="POST" action="{{ route('admin.pages.seo.update') }}">
    @csrf

    <div class="form-grid" style="grid-template-columns: 2fr 1fr;">
        <div class="form-col">

            <!-- Site SEO -->
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-globe"></i>
                    <div><h3>Site Information</h3><p>Basic SEO information for search engines.</p></div>
                </header>
                <div class="form-field full">
                    <label>Site Title (Meta Title)</label>
                    <input type="text" name="seo_site_title" value="{{ old('seo_site_title', $s['seo_site_title'] ?? '') }}" placeholder="AVIOBOOTS - Premium Leather Boots in Lahore">
                    <small class="muted">Recommended: 50-60 characters</small>
                </div>
                <div class="form-field full">
                    <label>Meta Description</label>
                    <textarea name="seo_site_description" rows="3" placeholder="AVIOBOOTS - Premium bespoke leather boots crafted in Lahore. Premium quality, handcrafted with finest materials.">{{ old('seo_site_description', $s['seo_site_description'] ?? '') }}</textarea>
                    <small class="muted">Recommended: 150-160 characters</small>
                </div>
                <div class="form-field full">
                    <label>Meta Keywords</label>
                    <input type="text" name="seo_site_keywords" value="{{ old('seo_site_keywords', $s['seo_site_keywords'] ?? '') }}" placeholder="leather boots, bespoke shoes, formal shoes, casual boots, DHA Lahore">
                    <small class="muted">Comma-separated keywords</small>
                </div>
                <div class="form-row">
                    <div class="form-field">
                        <label>Site Logo Path</label>
                        <input type="text" name="seo_site_logo" value="{{ old('seo_site_logo', $s['seo_site_logo'] ?? '') }}" placeholder="uploads/logo.png">
                    </div>
                    <div class="form-field">
                        <label>Site Icon / Favicon Path</label>
                        <input type="text" name="seo_site_icon" value="{{ old('seo_site_icon', $s['seo_site_icon'] ?? '') }}" placeholder="favicon.ico">
                    </div>
                </div>
            </section>

            <!-- Social Media -->
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-share-nodes"></i>
                    <div><h3>Social Media (Open Graph)</h3><p>How your site appears when shared on social media.</p></div>
                </header>
                <div class="form-field full">
                    <label>OG Image (Social Share Image)</label>
                    <input type="text" name="seo_og_image" value="{{ old('seo_og_image', $s['seo_og_image'] ?? '') }}" placeholder="uploads/og-image.jpg">
                    <small class="muted">Recommended size: 1200x630 pixels</small>
                </div>
                <div class="form-row">
                    <div class="form-field">
                        <label>Twitter Handle</label>
                        <input type="text" name="seo_twitter_handle" value="{{ old('seo_twitter_handle', $s['seo_twitter_handle'] ?? '') }}" placeholder="@yourhandle">
                    </div>
                    <div class="form-field">
                        <label>Facebook App ID</label>
                        <input type="text" name="seo_fb_app_id" value="{{ old('seo_fb_app_id', $s['seo_fb_app_id'] ?? '') }}" placeholder="1234567890">
                    </div>
                </div>
            </section>

            <!-- Analytics -->
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-chart-line"></i>
                    <div><h3>Analytics & Tracking</h3><p>Add tracking codes for website analytics.</p></div>
                </header>
                <div class="form-field full">
                    <label>Google Analytics ID</label>
                    <input type="text" name="seo_google_analytics" value="{{ old('seo_google_analytics', $s['seo_google_analytics'] ?? '') }}" placeholder="G-XXXXXXXXXX">
                    <small class="muted">Enter your Google Analytics Measurement ID</small>
                </div>
                <div class="form-field full">
                    <label>Google Tag Manager ID</label>
                    <input type="text" name="seo_google_tagmanager" value="{{ old('seo_google_tagmanager', $s['seo_google_tagmanager'] ?? '') }}" placeholder="GTM-XXXXXXX">
                </div>
                <div class="form-field full">
                    <label>Meta Pixel Code</label>
                    <textarea name="seo_meta_pixel" rows="3" placeholder="<!-- Meta Pixel Code -->">{{ old('seo_meta_pixel', $s['seo_meta_pixel'] ?? '') }}</textarea>
                </div>
            </section>

            <!-- Advanced -->
            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-gear"></i>
                    <div><h3>Advanced Settings</h3><p>Robots.txt and canonical URL settings.</p></div>
                </header>
                <div class="form-row">
                    <div class="form-field">
                        <label>Robots Meta</label>
                        <select name="seo_robots">
                            <option value="index, follow" {{ old('seo_robots', $s['seo_robots'] ?? 'index, follow') == 'index, follow' ? 'selected' : '' }}>Index, Follow (Recommended)</option>
                            <option value="index, nofollow" {{ old('seo_robots', $s['seo_robots'] ?? '') == 'index, nofollow' ? 'selected' : '' }}>Index, No Follow</option>
                            <option value="noindex, follow" {{ old('seo_robots', $s['seo_robots'] ?? '') == 'noindex, follow' ? 'selected' : '' }}>No Index, Follow</option>
                            <option value="noindex, nofollow" {{ old('seo_robots', $s['seo_robots'] ?? '') == 'noindex, nofollow' ? 'selected' : '' }}>No Index, No Follow</option>
                        </select>
                    </div>
                    <div class="form-field">
                        <label>Canonical URL</label>
                        <input type="url" name="seo_canonical_url" value="{{ old('seo_canonical_url', $s['seo_canonical_url'] ?? '') }}" placeholder="https://www.yourdomain.com">
                    </div>
                </div>
            </section>

        </div>

        <div class="form-col form-col-side">
            <section class="card form-section sticky-actions">
                <button type="submit" class="adm-btn adm-btn-primary adm-btn-lg"><i class="fa-solid fa-save"></i> Save SEO Settings</button>
                <a href="{{ route('home') }}" target="_blank" data-no-pjax class="adm-btn adm-btn-ghost adm-btn-block"><i class="fa-solid fa-eye"></i> Preview Site</a>
            </section>

            <section class="card form-section">
                <header class="section-header">
                    <i class="fa-solid fa-circle-info"></i>
                    <div><h3>SEO Tips</h3></div>
                </header>
                <ul style="font-size: 0.85rem; color: #6b7280; padding-left: 1.2rem; line-height: 1.8;">
                    <li>Use unique titles for each page</li>
                    <li>Keep meta descriptions under 160 chars</li>
                    <li>Use relevant keywords naturally</li>
                    <li>Add alt text to all images</li>
                    <li>Use semantic HTML tags</li>
                    <li>Ensure fast loading speed</li>
                    <li>Make site mobile-friendly</li>
                </ul>
            </section>

            <section class="card form-section" style="background: #f0fdf4; border: 1px solid #bbf7d0;">
                <header class="section-header">
                    <i class="fa-solid fa-check-circle" style="color: #16a34a;"></i>
                    <div><h3 style="color: #16a34a;">Good SEO Practices</h3></div>
                </header>
                <ul style="font-size: 0.85rem; color: #166534; padding-left: 1.2rem; line-height: 1.8;">
                    <li>Unique title for each page</li>
                    <li>Descriptive meta descriptions</li>
                    <li>Proper heading hierarchy (H1 → H6)</li>
                    <li>Descriptive URL slugs</li>
                    <li>XML sitemap submitted</li>
                    <li>SSL certificate installed</li>
                </ul>
            </section>
        </div>
    </div>
</form>
@endsection