{% extends "base.html" %}

{% block title %}{{ error.seo_title|default(error.error_title ~ ' | راهنمای رفع خطا') }}{% endblock %}
{% block description %}{{ error.seo_description|default(error.error_description|truncate(160)) }}{% endblock %}
{% block keywords %}{{ error.seo_keywords|default(error.error_title ~ ', رفع خطا, تعمیرات دوو') }}{% 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>
            {% if error.category %}
            <li class="breadcrumb-item">
                <a href="{{ url_for('error_category_detail', slug=error.category.slug) }}">
                    {{ error.category.name }}
                </a>
            </li>
            {% endif %}
            <li class="breadcrumb-item active">{{ error.error_title|truncate(30) }}</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" style="border-radius:20px;overflow:hidden;">
                <div class="card-body p-3 p-md-5">
                    
                    <!-- عنوان و وضعیت -->
                    <div class="d-flex flex-wrap align-items-start justify-content-between gap-2 mb-3">
                        <div>
                            <h1 class="fw-bold" style="font-size:clamp(1.5rem, 3vw, 2.2rem);">
                                {{ error.error_title }}
                            </h1>
                            {% if error.error_code %}
                            <span class="badge bg-secondary" style="font-size:0.8rem;">
                                <i class="fas fa-code"></i> کد خطا: {{ error.error_code }}
                            </span>
                            {% endif %}
                        </div>
                        <div class="d-flex flex-wrap gap-2">
                            {% if error.can_self_fix %}
                            <span class="badge bg-success" style="font-size:0.85rem;padding:8px 16px;">
                                <i class="fas fa-check-circle"></i> قابل رفع توسط شما
                            </span>
                            {% else %}
                            <span class="badge bg-danger" style="font-size:0.85rem;padding:8px 16px;">
                                <i class="fas fa-tools"></i> نیاز به تکنسین
                            </span>
                            {% endif %}
                            {% if error.is_featured %}
                            <span class="badge bg-warning text-dark" style="font-size:0.85rem;padding:8px 16px;">
                                <i class="fas fa-star"></i> برجسته
                            </span>
                            {% endif %}
                        </div>
                    </div>
                    
                    <!-- دسته‌بندی و اطلاعات -->
                    <div class="d-flex flex-wrap gap-2 mb-3">
                        {% if error.category %}
                        <span class="badge bg-secondary" style="font-size:0.75rem;">
                            <i class="fas fa-folder"></i> {{ error.category.name }}
                        </span>
                        {% endif %}
                        <span class="badge-difficulty {{ error.difficulty_level|default('medium') }}" style="font-size:0.75rem;">
                            {% 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.estimated_time %}
                        <span class="badge bg-light text-dark" style="font-size:0.75rem;">
                            <i class="fas fa-clock"></i> زمان تخمینی: {{ error.estimated_time|persian_numbers }} دقیقه
                        </span>
                        {% endif %}
                    </div>
                    
                    <!-- توضیحات -->
                    <div class="mb-4">
                        <h5 class="fw-bold"><i class="fas fa-info-circle" style="color:#c41e3a;"></i> توضیحات خطا</h5>
                        <p class="text-secondary" style="font-size:clamp(0.95rem, 1.1vw, 1.05rem);">
                            {{ error.error_description }}
                        </p>
                    </div>
                    
                    <!-- علائم -->
                    {% if error.symptoms %}
                    <div class="mb-4 p-3 p-md-4" style="background:#f8f9fa;border-radius:16px;border-right:4px solid #ffc107;">
                        <h5 class="fw-bold"><i class="fas fa-stethoscope" style="color:#ffc107;"></i> علائم خطا</h5>
                        <p class="text-secondary mb-0" style="font-size:clamp(0.9rem, 1vw, 1rem);">
                            {{ error.symptoms }}
                        </p>
                    </div>
                    {% endif %}
                    
                    <!-- راه‌حل -->
                    {% if error.solution_steps %}
                    <div class="mb-4">
                        <h5 class="fw-bold"><i class="fas fa-tools" style="color:#28a745;"></i> مراحل رفع خطا</h5>
                        <div class="p-3 p-md-4" style="background:#f0fdf4;border-radius:16px;border-right:4px solid #28a745;">
                            {{ error.solution_steps|replace('\n', '<br>')|safe }}
                        </div>
                    </div>
                    {% endif %}
                    
                    <!-- ابزارهای مورد نیاز -->
                    {% if error.tools_needed %}
                    <div class="mb-4">
                        <h5 class="fw-bold"><i class="fas fa-hammer" style="color:#f5c518;"></i> ابزارهای مورد نیاز</h5>
                        <div class="d-flex flex-wrap gap-2">
                            {% for tool in error.get_tools_list() %}
                            <span class="badge bg-light text-dark border" style="font-size:0.8rem;padding:6px 14px;">
                                <i class="fas fa-wrench"></i> {{ tool }}
                            </span>
                            {% endfor %}
                        </div>
                    </div>
                    {% endif %}
                    
                    <!-- دکمه‌های اقدام -->
                    <div class="d-flex flex-wrap gap-3 mt-4">
                        {% if error.can_self_fix %}
                        <a href="#solution" class="btn btn-success rounded-pill px-4">
                            <i class="fas fa-play"></i> شروع رفع خطا
                        </a>
                        {% endif %}
                        <a href="tel:{{ settings.phone1|default('02155551234')|replace(' ', '')|replace('-', '') }}" 
                           class="btn btn-danger rounded-pill px-4">
                            <i class="fas fa-phone"></i> تماس با تکنسین
                        </a>
                        <a href="https://wa.me/{{ settings.whatsapp|default('989121234567')|replace(' ', '')|replace('-', '')|replace('۰', '0') }}" 
                           target="_blank" class="btn btn-success rounded-pill px-4" style="background:#25d366;">
                            <i class="fab fa-whatsapp"></i> واتساپ
                        </a>
                        <button onclick="window.print()" class="btn btn-outline-secondary rounded-pill px-4">
                            <i class="fas fa-print"></i> چاپ
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- ===== سایدبار ===== -->
        <div class="col-lg-4">
            <!-- کارت تماس اضطراری -->
            <div class="card border-0 shadow-sm mb-4" style="border-radius:20px;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:3rem;opacity:0.8;"></i>
                    <h5 class="fw-bold mt-2">نیاز به کمک فوری؟</h5>
                    <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;font-size:clamp(1rem, 1.2vw, 1.1rem);">
                        <i class="fas fa-phone"></i> {{ settings.phone1|default('۰۲۱-۵۵۵۵-۱۲۳۴') }}
                    </a>
                    {% if settings.emergency_phone %}
                    <div class="mt-2">
                        <small class="text-white-50">📱 اضطراری:</small>
                        <a href="tel:{{ settings.emergency_phone|replace(' ', '')|replace('-', '') }}" 
                           class="text-warning fw-bold d-block" style="text-decoration:none;">
                            {{ settings.emergency_phone }}
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
            
            <!-- اطلاعات آماری -->
            <div class="card border-0 shadow-sm mb-4" style="border-radius:20px;overflow:hidden;">
                <div class="card-body p-4">
                    <h6 class="fw-bold"><i class="fas fa-chart-bar" style="color:#c41e3a;"></i> آمار این خطا</h6>
                    <div class="d-flex justify-content-between border-bottom py-2">
                        <span class="text-secondary">بازدید</span>
                        <span class="fw-bold">{{ error.view_count|default(0)|persian_numbers }}</span>
                    </div>
                    <div class="d-flex justify-content-between border-bottom py-2">
                        <span class="text-secondary">مفید بودن</span>
                        <span class="fw-bold">{{ error.helpful_count|default(0)|persian_numbers }}</span>
                    </div>
                    <div class="d-flex justify-content-between py-2">
                        <span class="text-secondary">تاریخ انتشار</span>
                        <span class="fw-bold">{{ error.created_at|persian_date }}</span>
                    </div>
                    
                    <!-- دکمه مفید بود -->
                    <button onclick="markHelpful({{ error.id }})" class="btn btn-outline-success rounded-pill w-100 mt-3" id="helpfulBtn">
                        <i class="fas fa-thumbs-up"></i> این راهنما برای من مفید بود
                    </button>
                </div>
            </div>
            
            <!-- اشتراک‌گذاری -->
            <div class="card border-0 shadow-sm" style="border-radius:20px;overflow:hidden;">
                <div class="card-body p-4">
                    <h6 class="fw-bold"><i class="fas fa-share-alt" style="color:#c41e3a;"></i> اشتراک‌گذاری</h6>
                    <div class="d-flex gap-2 flex-wrap">
                        <a href="https://wa.me/?text={{ request.url|urlencode }}" target="_blank" class="btn btn-success rounded-circle" style="width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;">
                            <i class="fab fa-whatsapp"></i>
                        </a>
                        <a href="https://t.me/share/url?url={{ request.url|urlencode }}&text={{ error.error_title|urlencode }}" target="_blank" class="btn btn-primary rounded-circle" style="width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:#0088cc;">
                            <i class="fab fa-telegram"></i>
                        </a>
                        <a href="https://twitter.com/intent/tweet?text={{ error.error_title|urlencode }}&url={{ request.url|urlencode }}" target="_blank" class="btn btn-dark rounded-circle" style="width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="https://www.facebook.com/sharer/sharer.php?u={{ request.url|urlencode }}" target="_blank" class="btn btn-primary rounded-circle" style="width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;background:#1877f2;">
                            <i class="fab fa-facebook"></i>
                        </a>
                        <button onclick="copyLink()" class="btn btn-secondary rounded-circle" style="width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;">
                            <i class="fas fa-link"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- ============================================================
   بخش 3: تصاویر خطا
   ============================================================ -->
{% if error.main_image or error.get_additional_images() %}
<section class="container py-3 py-md-4" data-aos="fade-up">
    <div class="card border-0 shadow-sm" style="border-radius:20px;overflow:hidden;">
        <div class="card-body p-3 p-md-4">
            <h5 class="fw-bold mb-3"><i class="fas fa-images" style="color:#c41e3a;"></i> تصاویر مرتبط</h5>
            <div class="row g-3">
                {% if error.main_image %}
                <div class="col-md-6">
                    <img src="{{ error.main_image }}" alt="{{ error.error_title }}" 
                         class="img-fluid rounded-3" 
                         style="width:100%;height:clamp(200px, 30vh, 350px);object-fit:cover;cursor:pointer;"
                         onclick="openImageModal(this.src, this.alt)">
                </div>
                {% endif %}
                {% for img in error.get_additional_images() %}
                <div class="col-md-6">
                    <img src="{{ img }}" alt="{{ error.error_title }} - تصویر اضافی" 
                         class="img-fluid rounded-3" 
                         style="width:100%;height:clamp(200px, 30vh, 350px);object-fit:cover;cursor:pointer;"
                         onclick="openImageModal(this.src, this.alt)">
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- ============================================================
   بخش 4: ویدئو
   ============================================================ -->
{% if error.video_url or error.video_embed %}
<section class="container py-3 py-md-4" data-aos="fade-up">
    <div class="card border-0 shadow-sm" style="border-radius:20px;overflow:hidden;">
        <div class="card-body p-3 p-md-4">
            <h5 class="fw-bold mb-3"><i class="fas fa-video" style="color:#c41e3a;"></i> ویدئو آموزشی</h5>
            <div class="ratio ratio-16x9">
                {% if error.video_embed %}
                    {{ error.video_embed|safe }}
                {% elif error.video_url %}
                    <video controls style="width:100%;height:100%;border-radius:12px;">
                        <source src="{{ error.video_url }}" type="video/mp4">
                        مرورگر شما از پخش ویدئو پشتیبانی نمی‌کند.
                    </video>
                {% endif %}
            </div>
        </div>
    </div>
</section>
{% endif %}

<!-- ============================================================
   بخش 5: خطاهای مرتبط
   ============================================================ -->
{% if related_errors %}
<section class="container py-3 py-md-4" data-aos="fade-up">
    <h5 class="fw-bold mb-3"><i class="fas fa-link" style="color:#c41e3a;"></i> خطاهای مرتبط</h5>
    <div class="row g-3">
        {% for rel in related_errors %}
        <div class="col-md-4 col-lg-3" data-aos="fade-up" data-aos-delay="{{ loop.index * 50 }}">
            <a href="{{ url_for('error_detail', slug=rel.slug) }}" class="text-decoration-none">
                <div class="card border-0 shadow-sm h-100" style="border-radius:16px;overflow:hidden;border-right:3px solid #c41e3a;">
                    <div class="card-body p-3">
                        <h6 class="fw-bold mb-0" style="font-size:0.85rem;">{{ rel.error_title|truncate(25) }}</h6>
                        <div class="d-flex flex-wrap gap-1 mt-1">
                            <span class="badge-difficulty {{ rel.difficulty_level|default('medium') }}" style="font-size:0.55rem;">
                                {% if rel.difficulty_level == 'easy' %}آسان
                                {% elif rel.difficulty_level == 'medium' %}متوسط
                                {% else %}سخت{% endif %}
                            </span>
                            {% if rel.can_self_fix %}
                            <span class="badge bg-success" style="font-size:0.55rem;">
                                <i class="fas fa-check"></i>
                            </span>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </a>
        </div>
        {% endfor %}
    </div>
</section>
{% endif %}

<!-- ============================================================
   Modal برای نمایش بزرگ تصاویر
   ============================================================ -->
<div class="modal fade" id="imageModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content bg-transparent border-0">
            <div class="modal-body p-0">
                <img id="modalImage" src="" alt="" class="img-fluid rounded-3" style="width:100%;">
                <button type="button" class="btn btn-light rounded-circle position-absolute" 
                        style="top:10px;left:10px;z-index:10;width:40px;height:40px;"
                        data-bs-dismiss="modal">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================
   اسکریپت‌ها
   ============================================================ -->
<script>
    // ===== بزرگنمایی تصویر =====
    function openImageModal(src, alt) {
        var modal = new bootstrap.Modal(document.getElementById('imageModal'));
        document.getElementById('modalImage').src = src;
        document.getElementById('modalImage').alt = alt;
        modal.show();
    }
    
    // ===== کپی لینک =====
    function copyLink() {
        var url = window.location.href;
        navigator.clipboard.writeText(url).then(function() {
            alert('✅ لینک با موفقیت کپی شد!');
        }, function() {
            // Fallback
            var dummy = document.createElement('input');
            dummy.value = url;
            document.body.appendChild(dummy);
            dummy.select();
            document.execCommand('copy');
            document.body.removeChild(dummy);
            alert('✅ لینک با موفقیت کپی شد!');
        });
    }
    
    // ===== ثبت نظر "مفید بود" =====
    function markHelpful(errorId) {
        var btn = document.getElementById('helpfulBtn');
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> در حال ثبت...';
        
        fetch('/api/error/helpful/' + errorId, {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            }
        })
        .then(function(response) { return response.json(); })
        .then(function(data) {
            if (data.success) {
                btn.innerHTML = '<i class="fas fa-check-circle"></i> متشکریم!';
                btn.className = 'btn btn-success rounded-pill w-100 mt-3';
            } else {
                btn.innerHTML = '<i class="fas fa-thumbs-up"></i> ' + (data.message || 'مشکل در ثبت');
                btn.disabled = false;
            }
        })
        .catch(function() {
            btn.innerHTML = '<i class="fas fa-thumbs-up"></i> دوباره امتحان کنید';
            btn.disabled = false;
        });
    }
</script>

<!-- ============================================================
   استایل‌های اختصاصی
   ============================================================ -->
<style>
    .badge-difficulty {
        padding: 4px 12px;
        border-radius: 50px;
        font-size: 0.7rem;
    }
    .badge-difficulty.easy { background: #d4edda; color: #155724; }
    .badge-difficulty.medium { background: #fff3cd; color: #856404; }
    .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;
    }
    
    .cta-section .btn-warning:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 30px rgba(245,197,24,0.4);
    }
    
    /* ===== حالت چاپ ===== */
    @media print {
        .header, .footer, .float-buttons, .breadcrumb, .cta-section,
        .btn, .badge, .share-section, .contact-card {
            display: none !important;
        }
        .card {
            border: none !important;
            box-shadow: none !important;
        }
        body {
            background: #fff !important;
        }
        .container {
            max-width: 100% !important;
        }
    }
</style>

{% endblock %}