{% extends "base.html" %}

{% block title %}نتایج جستجوی خطاهای دوو {{ seo_settings.default_title|default('') }}{% endblock %}
{% block description %}نتایج جستجوی خطاهای دوو - {{ query|default('همه خطاها') }}{{ seo_settings.default_description|default('') }}{% endblock %}

{% block content %}

<!-- ============================================================
   بخش 1: هدر جستجو
   ============================================================ -->
<section class="container py-3 py-md-4" data-aos="fade-up">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="{{ url_for('index') }}">صفحه اصلی</a></li>
            <li class="breadcrumb-item"><a href="{{ url_for('errors_home') }}">راهنمای خطاها</a></li>
            <li class="breadcrumb-item active">نتایج جستجو</li>
        </ol>
    </nav>
</section>

<!-- ============================================================
   بخش 2: فرم جستجو و نتایج
   ============================================================ -->
<section class="container" data-aos="fade-up">
    <div class="row g-4">
        <div class="col-lg-8">
            <!-- فرم جستجو -->
            <div class="card border-0 shadow-sm mb-4" style="border-radius:16px;overflow:hidden;">
                <div class="card-body p-3 p-md-4">
                    <form action="{{ url_for('error_search') }}" method="GET" class="row g-2 g-md-3 align-items-end">
                        <div class="col-md-6">
                            <label class="form-label fw-bold small"><i class="fas fa-search"></i> جستجو</label>
                            <input type="text" name="q" class="form-control" placeholder="مثلاً: یخچال خنک نمی‌کند..." value="{{ query|default('') }}">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label fw-bold small"><i class="fas fa-tag"></i> دسته‌بندی</label>
                            <select name="category" class="form-select">
                                <option value="">همه دسته‌بندی‌ها</option>
                                {% for cat in categories %}
                                    <option value="{{ cat.slug }}" {% if category_slug == cat.slug %}selected{% endif %}>
                                        {{ cat.name }}
                                    </option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-2">
                            <button type="submit" class="btn btn-danger w-100 rounded-pill">
                                <i class="fas fa-search"></i>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            
            <!-- نتایج جستجو -->
            <div class="d-flex justify-content-between align-items-center mb-3 flex-wrap">
                <h4 class="fw-bold mb-0">
                    <i class="fas fa-list" style="color:#c41e3a;"></i> 
                    نتایج جستجو
                </h4>
                <span class="badge bg-secondary">{{ errors|length|persian_numbers }} مورد</span>
            </div>
            
            {% if errors %}
                <div class="row g-3">
                    {% for error in errors %}
                    <div class="col-md-6" data-aos="fade-up" data-aos-delay="{{ loop.index * 50 }}">
                        <a href="{{ url_for('error_detail', slug=error.slug) }}" class="text-decoration-none">
                            <div class="error-card">
                                <div class="d-flex align-items-start gap-3">
                                    <div class="error-icon flex-shrink-0">
                                        <i class="fas fa-exclamation"></i>
                                    </div>
                                    <div class="flex-grow-1">
                                        <div class="d-flex flex-wrap align-items-center gap-1">
                                            <h6 class="fw-bold mb-0" style="font-size:clamp(0.85rem, 1vw, 0.95rem);">
                                                {{ error.error_title|truncate(30) }}
                                            </h6>
                                            {% if error.can_self_fix %}
                                            <span class="badge-self-fix"><i class="fas fa-check-circle"></i> قابل رفع</span>
                                            {% endif %}
                                            {% if error.is_featured %}
                                            <span class="badge bg-warning text-dark" style="font-size:0.55rem;">
                                                <i class="fas fa-star"></i>
                                            </span>
                                            {% endif %}
                                        </div>
                                        <p class="text-secondary small mb-1" style="font-size:0.7rem;">
                                            {{ error.error_description|truncate(45) }}
                                        </p>
                                        <div class="d-flex flex-wrap align-items-center gap-2">
                                            <span class="badge-difficulty {{ error.difficulty_level|default('medium') }}" style="font-size:0.55rem;">
                                                {% if error.difficulty_level == 'easy' %}
                                                    <i class="fas fa-smile"></i> آسان
                                                {% elif error.difficulty_level == 'medium' %}
                                                    <i class="fas fa-meh"></i> متوسط
                                                {% else %}
                                                    <i class="fas fa-frown"></i> سخت
                                                {% endif %}
                                            </span>
                                            {% if error.category %}
                                            <span class="badge bg-secondary" style="font-size:0.5rem;">
                                                {{ error.category.name }}
                                            </span>
                                            {% endif %}
                                            {% if error.estimated_time %}
                                            <span class="text-secondary" style="font-size:0.6rem;">
                                                <i class="fas fa-clock"></i> {{ error.estimated_time|persian_numbers }} دقیقه
                                            </span>
                                            {% endif %}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>
                    {% endfor %}
                </div>
            {% else %}
                <!-- ===== بدون نتیجه ===== -->
                <div class="text-center py-5">
                    <i class="fas fa-search" style="font-size:4rem;color:#dee2e6;"></i>
                    <h5 class="mt-3 text-secondary">نتیجه‌ای یافت نشد</h5>
                    <p class="text-muted">
                        {% if query %}
                            برای جستجوی "<strong>{{ query }}</strong>" نتیجه‌ای یافت نشد.
                        {% else %}
                            لطفاً عبارت جستجو را وارد کنید.
                        {% endif %}
                    </p>
                    <div class="d-flex flex-wrap gap-2 justify-content-center mt-3">
                        <a href="{{ url_for('errors_home') }}" class="btn btn-outline-danger rounded-pill px-4">
                            <i class="fas fa-arrow-right"></i> مشاهده همه خطاها
                        </a>
                        <a href="{{ url_for('errors_home') }}" class="btn btn-outline-secondary rounded-pill px-4">
                            <i class="fas fa-list"></i> راهنمای خطاها
                        </a>
                    </div>
                </div>
            {% endif %}
        </div>
        
        <!-- ===== سایدبار ===== -->
        <div class="col-lg-4">
            <!-- فیلترهای سریع -->
            <div class="card border-0 shadow-sm mb-4" style="border-radius:16px;overflow:hidden;">
                <div class="card-body p-3 p-md-4">
                    <h6 class="fw-bold"><i class="fas fa-filter" style="color:#c41e3a;"></i> فیلترهای سریع</h6>
                    <div class="d-flex flex-column gap-2">
                        <a href="{{ url_for('error_search') }}?q={{ query|default('') }}&self_fix=1" 
                           class="btn btn-outline-success btn-sm rounded-pill text-start {% if request.args.get('self_fix') %}active{% endif %}">
                            <i class="fas fa-check-circle"></i> فقط خطاهای قابل رفع
                        </a>
                        <a href="{{ url_for('error_search') }}?q={{ query|default('') }}&featured=1" 
                           class="btn btn-outline-warning btn-sm rounded-pill text-start {% if request.args.get('featured') %}active{% endif %}">
                            <i class="fas fa-star"></i> فقط خطاهای برجسته
                        </a>
                        <hr>
                        <span class="text-secondary small">سطح دشواری</span>
                        <a href="{{ url_for('error_search') }}?q={{ query|default('') }}&difficulty=easy" 
                           class="btn btn-outline-info btn-sm rounded-pill text-start {% if request.args.get('difficulty') == 'easy' %}active{% endif %}">
                            <i class="fas fa-smile"></i> آسان
                        </a>
                        <a href="{{ url_for('error_search') }}?q={{ query|default('') }}&difficulty=medium" 
                           class="btn btn-outline-warning btn-sm rounded-pill text-start {% if request.args.get('difficulty') == 'medium' %}active{% endif %}">
                            <i class="fas fa-meh"></i> متوسط
                        </a>
                        <a href="{{ url_for('error_search') }}?q={{ query|default('') }}&difficulty=hard" 
                           class="btn btn-outline-danger btn-sm rounded-pill text-start {% if request.args.get('difficulty') == 'hard' %}active{% endif %}">
                            <i class="fas fa-frown"></i> سخت
                        </a>
                    </div>
                </div>
            </div>
            
            <!-- دسته‌بندی‌های محبوب -->
            {% if categories %}
            <div class="card border-0 shadow-sm mb-4" style="border-radius:16px;overflow:hidden;">
                <div class="card-body p-3 p-md-4">
                    <h6 class="fw-bold"><i class="fas fa-tags" style="color:#c41e3a;"></i> دسته‌بندی‌ها</h6>
                    <div class="d-flex flex-wrap gap-1">
                        {% for cat in categories[:8] %}
                        <a href="{{ url_for('error_search') }}?category={{ cat.slug }}" 
                           class="badge bg-light text-dark border" 
                           style="padding:6px 12px;font-size:0.75rem;transition:0.3s;text-decoration:none;">
                            <i class="{{ cat.icon|default('fas fa-wrench') }}"></i> {{ cat.name }}
                            <span class="badge bg-secondary text-white ms-1" style="font-size:0.55rem;">{{ cat.errors.count()|persian_numbers }}</span>
                        </a>
                        {% endfor %}
                    </div>
                    {% if categories|length > 8 %}
                    <a href="{{ url_for('errors_home') }}" class="text-danger small d-block mt-2">
                        مشاهده همه دسته‌بندی‌ها
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endif %}
            
            <!-- کارت تماس -->
            <div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#c41e3a,#8b0000);color:#fff;">
                <div class="card-body p-4 text-center">
                    <i class="fas fa-headset" style="font-size:2.5rem;opacity:0.8;"></i>
                    <h6 class="fw-bold mt-2">نتیجه‌ای پیدا نکردید؟</h6>
                    <p class="text-white-50 small">با تکنسین‌های ما تماس بگیرید</p>
                    <a href="tel:{{ settings.phone1|default('02155551234')|replace(' ', '')|replace('-', '') }}" 
                       class="btn btn-warning rounded-pill w-100" style="color:#1a1a2e;font-weight:700;">
                        <i class="fas fa-phone"></i> {{ settings.phone1|default('۰۲۱-۵۵۵۵-۱۲۳۴') }}
                    </a>
                    <div class="mt-2">
                        <a href="https://wa.me/{{ settings.whatsapp|default('989121234567')|replace(' ', '')|replace('-', '')|replace('۰', '0') }}" 
                           target="_blank" class="btn btn-success btn-sm rounded-pill px-3" style="background:#25d366;">
                            <i class="fab fa-whatsapp"></i> واتساپ
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
   بخش 3: پیشنهادات
   ============================================================ -->
{% if not errors and query %}
<section class="container py-3" data-aos="fade-up">
    <div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
        <div class="card-body p-3 p-md-4">
            <h6 class="fw-bold"><i class="fas fa-lightbulb" style="color:#f5c518;"></i> پیشنهادات</h6>
            <ul class="text-secondary small">
                <li>از کلمات کلیدی ساده‌تر استفاده کنید (مثلاً: "یخچال" به جای "یخچال ساید بای ساید")</li>
                <li>دسته‌بندی مناسب را انتخاب کنید</li>
                <li>مشکل دستگاه را با دقت بیشتری توصیف کنید</li>
                <li>اگر نتیجه‌ای پیدا نکردید، با ما تماس بگیرید</li>
            </ul>
        </div>
    </div>
</section>
{% endif %}

<!-- ============================================================
   استایل‌های اختصاصی
   ============================================================ -->
<style>
    .error-card {
        background: #fff;
        border-radius: 16px;
        padding: 18px;
        transition: 0.3s;
        border-right: 4px solid #c41e3a;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    }
    .error-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    }
    .error-card .error-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #c41e3a, #8b0000);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.9rem;
        flex-shrink: 0;
    }
    .error-card .badge-self-fix {
        background: #28a745;
        color: #fff;
        padding: 2px 10px;
        border-radius: 50px;
        font-size: 0.55rem;
    }
    .error-card .badge-difficulty {
        padding: 2px 10px;
        border-radius: 50px;
        font-size: 0.55rem;
    }
    .error-card .badge-difficulty.easy { background: #d4edda; color: #155724; }
    .error-card .badge-difficulty.medium { background: #fff3cd; color: #856404; }
    .error-card .badge-difficulty.hard { background: #f8d7da; color: #721c24; }
    
    .breadcrumb {
        background: transparent;
        padding: 0;
    }
    .breadcrumb-item a {
        color: #c41e3a;
        text-decoration: none;
    }
    .breadcrumb-item a:hover {
        text-decoration: underline;
    }
    .breadcrumb-item.active {
        color: #1a1a2e;
    }
    
    .btn-outline-success.active,
    .btn-outline-warning.active,
    .btn-outline-info.active,
    .btn-outline-danger.active {
        color: #fff !important;
    }
    .btn-outline-success.active { background: #28a745; border-color: #28a745; }
    .btn-outline-warning.active { background: #ffc107; border-color: #ffc107; color: #1a1a2e !important; }
    .btn-outline-info.active { background: #17a2b8; border-color: #17a2b8; }
    .btn-outline-danger.active { background: #dc3545; border-color: #dc3545; }
    
    .badge.bg-light:hover {
        background: #c41e3a !important;
        color: #fff !important;
        border-color: #c41e3a !important;
        transform: scale(1.05);
    }
</style>

{% endblock %}