{% extends "admin/layout.html" %}

{% block page_title %}مدیریت سئو{% endblock %}

{% block content %}

<!-- ===== کارت وضعیت ===== -->
<div class="row g-4 mb-4">
    <div class="col-md-3">
        <div class="stat-card text-center">
            <h6 class="text-secondary">امتیاز سئو</h6>
            <h2 class="text-{% if seo_score >= 80 %}success{% elif seo_score >= 50 %}warning{% else %}danger{% endif %} fw-bold">
                {{ seo_score|default(0)|persian_numbers }}
            </h2>
            <small class="text-muted">از ۱۰۰</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card text-center">
            <h6 class="text-secondary">کلمات کلیدی فعال</h6>
            <h2 class="text-primary fw-bold">{{ active_keywords|default(0)|persian_numbers }}</h2>
            <small class="text-muted">از {{ total_keywords|default(0)|persian_numbers }} کلمه</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card text-center">
            <h6 class="text-secondary">مقالات منتشر شده</h6>
            <h2 class="text-success fw-bold">{{ total_articles|default(0)|persian_numbers }}</h2>
            <small class="text-muted">خدمات: {{ total_services|default(0)|persian_numbers }}</small>
        </div>
    </div>
    <div class="col-md-3">
        <div class="stat-card text-center">
            <h6 class="text-secondary">آخرین بروزرسانی</h6>
            <h6 class="mt-2">{{ seo_settings.last_update|default('هنوز بروزرسانی نشده') }}</h6>
            <form method="POST" action="{{ url_for('admin_seo_update') }}" style="display:inline;">
                <button type="submit" class="btn btn-sm btn-warning mt-2">
                    <i class="fas fa-sync"></i> بروزرسانی
                </button>
            </form>
        </div>
    </div>
</div>

<!-- ===== پیش‌نمایش ===== -->
<div class="row g-4 mb-4">
    <div class="col-12">
        <div class="stat-card">
            <h6 class="fw-bold mb-3"><i class="fas fa-eye" style="color:#c41e3a;"></i> پیش‌نمایش در نتایج گوگل</h6>
            <div class="p-3 bg-light rounded-3">
                <div class="text-primary" style="font-size:1.2rem;text-decoration:underline;cursor:pointer;">
                    {{ seo_settings.default_title|default('عنوان تنظیم نشده') }}
                </div>
                <div class="text-success" style="font-size:0.9rem;">{{ request.url_root }}</div>
                <div class="text-secondary" style="font-size:0.9rem;">{{ seo_settings.default_description|default('توضیحات تنظیم نشده') }}</div>
            </div>
            <div class="mt-2">
                <span class="badge bg-light text-dark">کلمات کلیدی: {{ seo_settings.default_keywords|default('تنظیم نشده') }}</span>
            </div>
        </div>
    </div>
</div>

<!-- ===== فرم تنظیمات ===== -->
<div class="row g-4 mb-4">
    <div class="col-12">
        <div class="form-admin">
            <h6 class="fw-bold mb-4"><i class="fas fa-cog" style="color:#c41e3a;"></i> تنظیمات سئو</h6>
            <form method="POST" action="{{ url_for('admin_seo') }}">
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label">عنوان پیش‌فرض (Meta Title)</label>
                        <input type="text" name="default_title" class="form-control" value="{{ seo_settings.default_title|default('') }}">
                        <small class="text-muted">حداکثر ۶۰ کاراکتر</small>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">عنوان برند</label>
                        <input type="text" name="brand_title" class="form-control" value="{{ seo_settings.brand_title|default('دوو تهران') }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">توضیحات پیش‌فرض (Meta Description)</label>
                        <textarea name="default_description" class="form-control" rows="2">{{ seo_settings.default_description|default('') }}</textarea>
                        <small class="text-muted">حداکثر ۱۶۰ کاراکتر</small>
                    </div>
                    <div class="col-12">
                        <label class="form-label">کلمات کلیدی پیش‌فرض (Meta Keywords)</label>
                        <input type="text" name="default_keywords" class="form-control" value="{{ seo_settings.default_keywords|default('') }}">
                        <small class="text-muted">با کاما جدا کنید</small>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">ربات‌ها (Robots)</label>
                        <select name="robots" class="form-select">
                            <option value="index, follow" {% if seo_settings.robots == 'index, follow' %}selected{% endif %}>index, follow</option>
                            <option value="noindex, follow" {% if seo_settings.robots == 'noindex, follow' %}selected{% endif %}>noindex, follow</option>
                            <option value="index, nofollow" {% if seo_settings.robots == 'index, nofollow' %}selected{% endif %}>index, nofollow</option>
                            <option value="noindex, nofollow" {% if seo_settings.robots == 'noindex, nofollow' %}selected{% endif %}>noindex, nofollow</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="{{ seo_settings.canonical_url|default('') }}">
                    </div>
                    
                    <div class="col-12">
                        <hr>
                        <h6 class="fw-bold"><i class="fas fa-share-alt" style="color:#c41e3a;"></i> Open Graph (شبکه‌های اجتماعی)</h6>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">عنوان OG</label>
                        <input type="text" name="og_title" class="form-control" value="{{ seo_settings.og_title|default('') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">تصویر OG</label>
                        <input type="text" name="og_image" class="form-control" value="{{ seo_settings.og_image|default('') }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label">توضیحات OG</label>
                        <textarea name="og_description" class="form-control" rows="2">{{ seo_settings.og_description|default('') }}</textarea>
                    </div>
                    
                    <div class="col-12">
                        <hr>
                        <h6 class="fw-bold"><i class="fab fa-twitter" style="color:#1DA1F2;"></i> توییتر کارت</h6>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">نوع کارت</label>
                        <select name="twitter_card" class="form-select">
                            <option value="summary" {% if seo_settings.twitter_card == 'summary' %}selected{% endif %}>summary</option>
                            <option value="summary_large_image" {% if seo_settings.twitter_card == 'summary_large_image' %}selected{% endif %}>summary_large_image</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">توییتر Site</label>
                        <input type="text" name="twitter_site" class="form-control" value="{{ seo_settings.twitter_site|default('') }}">
                    </div>
                    
                    <div class="col-12">
                        <div class="form-check mt-3">
                            <input type="checkbox" name="auto_update" class="form-check-input" id="auto_update">
                            <label class="form-check-label" for="auto_update">
                                بروزرسانی خودکار از بانک کلمات کلیدی
                            </label>
                        </div>
                    </div>
                    
                    <div class="col-12">
                        <button type="submit" class="btn-admin-primary">
                            <i class="fas fa-save"></i> ذخیره تنظیمات
                        </button>
                        <a href="{{ url_for('admin_sitemap_generate') }}" class="btn btn-info">
                            <i class="fas fa-sitemap"></i> تولید سایتمپ
                        </a>
                        <a href="{{ url_for('admin_sitemap_submit') }}" class="btn btn-success">
                            <i class="fas fa-paper-plane"></i> ارسال به گوگل
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- ===== پیشنهادات سئو ===== -->
<div class="row g-4">
    <div class="col-12">
        <div class="stat-card">
            <h6 class="fw-bold mb-3"><i class="fas fa-lightbulb" style="color:#f5c518;"></i> پیشنهادات بهبود سئو</h6>
            {% for suggestion in seo_suggestions %}
            <div class="alert alert-{{ suggestion.type }} d-flex align-items-start gap-3">
                <i class="fas fa-{{ suggestion.icon|default('info-circle') }}" style="font-size:1.5rem;"></i>
                <div>
                    <h6 class="fw-bold mb-1">{{ suggestion.title }}</h6>
                    <p class="mb-0 small">{{ suggestion.description }}</p>
                    {% if suggestion.action %}
                    <span class="badge bg-secondary mt-1">{{ suggestion.action }}</span>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
</div>

<!-- ===== آدرس‌های سایتمپ ===== -->
<div class="row g-4 mt-2">
    <div class="col-12">
        <div class="stat-card">
            <h6 class="fw-bold mb-3"><i class="fas fa-sitemap" style="color:#c41e3a;"></i> آدرس‌های سایتمپ ({{ urls|length|persian_numbers }})</h6>
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>آدرس</th>
                            <th>اولویت</th>
                            <th>تغییرات</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for url in urls[:20] %}
                        <tr>
                            <td><code>{{ url.url }}</code></td>
                            <td>{{ url.priority }}</td>
                            <td>{{ url.changefreq }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{% endblock %}