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

{% block page_title %}ویرایش خطا - {{ solution.error_title|truncate(30) }}{% endblock %}

{% block content %}

<!-- ===== هدر ===== -->
<div class="d-flex flex-wrap justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0">
            <i class="fas fa-edit text-warning"></i> ویرایش خطا
        </h4>
        <p class="text-secondary small mb-0">
            ویرایش راه‌حل خطا: <span class="fw-bold text-danger">{{ solution.error_title }}</span>
        </p>
    </div>
    <a href="{{ url_for('admin_errors') }}" class="btn btn-secondary btn-sm rounded-pill">
        <i class="fas fa-arrow-right"></i> بازگشت
    </a>
</div>

<!-- ===== فرم ===== -->
<form method="POST" enctype="multipart/form-data" class="row g-4">
    <div class="col-lg-8">
        <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 mb-3"><i class="fas fa-info-circle text-danger"></i> اطلاعات اصلی</h6>
                
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">دسته‌بندی <span class="text-danger">*</span></label>
                        <select name="category_id" class="form-select" required>
                            <option value="">انتخاب دسته‌بندی...</option>
                            {% for cat in categories %}
                                <option value="{{ cat.id }}" {% if solution.category_id == cat.id %}selected{% endif %}>
                                    {{ cat.name }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">کد خطا</label>
                        <input type="text" name="error_code" class="form-control" value="{{ solution.error_code|default('') }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small">عنوان خطا <span class="text-danger">*</span></label>
                        <input type="text" name="error_title" class="form-control" value="{{ solution.error_title }}" required>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small">توضیحات خطا <span class="text-danger">*</span></label>
                        <textarea name="error_description" class="form-control" rows="3" required>{{ solution.error_description }}</textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small">علائم خطا</label>
                        <textarea name="symptoms" class="form-control" rows="2">{{ solution.symptoms|default('') }}</textarea>
                    </div>
                </div>
                
                <hr class="my-4">
                
                <!-- ===== راه‌حل ===== -->
                <h6 class="fw-bold mb-3"><i class="fas fa-tools text-success"></i> راه‌حل خطا</h6>
                
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label fw-bold small">مراحل رفع خطا</label>
                        <textarea name="solution_steps" class="form-control" rows="5">{{ solution.solution_steps|default('') }}</textarea>
                    </div>
                </div>
                
                <hr class="my-4">
                
                <!-- ===== ویدئو ===== -->
                <h6 class="fw-bold mb-3"><i class="fas fa-video text-primary"></i> ویدئو آموزشی</h6>
                
                <div class="row g-3">
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">لینک ویدئو</label>
                        <input type="url" name="video_url" class="form-control" value="{{ solution.video_url|default('') }}">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">کد امبد ویدئو</label>
                        <input type="text" name="video_embed" class="form-control" value="{{ solution.video_embed|default('') }}">
                    </div>
                </div>
                
                <hr class="my-4">
                
                <!-- ===== سئو ===== -->
                <h6 class="fw-bold mb-3"><i class="fas fa-search text-info"></i> اطلاعات سئو</h6>
                
                <div class="row g-3">
                    <div class="col-12">
                        <label class="form-label fw-bold small">عنوان سئو</label>
                        <input type="text" name="seo_title" class="form-control" value="{{ solution.seo_title|default('') }}">
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small">توضیحات سئو</label>
                        <textarea name="seo_description" class="form-control" rows="2">{{ solution.seo_description|default('') }}</textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small">کلمات کلیدی سئو</label>
                        <input type="text" name="seo_keywords" class="form-control" value="{{ solution.seo_keywords|default('') }}">
                    </div>
                </div>
            </div>
        </div>
    </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 mb-3"><i class="fas fa-images text-primary"></i> تصاویر</h6>
                
                {% if solution.main_image %}
                <div class="mb-3">
                    <label class="form-label fw-bold small">تصویر اصلی فعلی</label>
                    <img src="{{ solution.main_image }}" alt="{{ solution.error_title }}" 
                         class="img-fluid rounded-3" style="width:100%;max-height:150px;object-fit:cover;">
                </div>
                {% endif %}
                
                <div class="mb-3">
                    <label class="form-label fw-bold small">تصویر اصلی جدید</label>
                    <input type="file" name="main_image" class="form-control" accept="image/*">
                </div>
            </div>
        </div>
        
        <!-- ===== تنظیمات ===== -->
        <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 mb-3"><i class="fas fa-cog text-secondary"></i> تنظیمات</h6>
                
                <div class="mb-3">
                    <label class="form-label fw-bold small">سطح دشواری</label>
                    <select name="difficulty_level" class="form-select">
                        <option value="easy" {% if solution.difficulty_level == 'easy' %}selected{% endif %}>آسان</option>
                        <option value="medium" {% if solution.difficulty_level == 'medium' %}selected{% endif %}>متوسط</option>
                        <option value="hard" {% if solution.difficulty_level == 'hard' %}selected{% endif %}>سخت</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold small">زمان تخمینی (دقیقه)</label>
                    <input type="number" name="estimated_time" class="form-control" value="{{ solution.estimated_time|default(30) }}">
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold small">ابزارهای مورد نیاز</label>
                    <input type="text" name="tools_needed" class="form-control" value="{{ solution.tools_needed|default('') }}">
                </div>
            </div>
        </div>
        
        <!-- ===== وضعیت ===== -->
        <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 mb-3"><i class="fas fa-toggle-on text-success"></i> وضعیت</h6>
                
                <div class="form-check mb-2">
                    <input type="checkbox" name="can_self_fix" class="form-check-input" id="canSelfFix" 
                           {% if solution.can_self_fix %}checked{% endif %}>
                    <label class="form-check-label" for="canSelfFix">قابل رفع توسط کاربر</label>
                </div>
                
                <div class="form-check mb-2">
                    <input type="checkbox" name="is_featured" class="form-check-input" id="isFeatured"
                           {% if solution.is_featured %}checked{% endif %}>
                    <label class="form-check-label" for="isFeatured">برجسته</label>
                </div>
                
                <div class="form-check mb-2">
                    <input type="checkbox" name="is_active" class="form-check-input" id="isActive"
                           {% if solution.is_active %}checked{% endif %}>
                    <label class="form-check-label" for="isActive">فعال</label>
                </div>
            </div>
        </div>
        
        <!-- ===== دکمه ارسال ===== -->
        <div class="d-grid gap-2 mt-3">
            <button type="submit" class="btn btn-warning rounded-pill py-2">
                <i class="fas fa-save"></i> بروزرسانی خطا
            </button>
            <a href="{{ url_for('admin_errors') }}" class="btn btn-outline-secondary rounded-pill py-2">
                <i class="fas fa-times"></i> انصراف
            </a>
        </div>
    </div>
</form>

<!-- ============================================================
   استایل‌های اختصاصی
   ============================================================ -->
<style>
    .form-label {
        font-size: 0.8rem;
        color: #1a1a2e;
    }
    .form-control, .form-select {
        font-size: 0.85rem;
        border-radius: 12px;
        border: 1px solid #dee2e6;
        transition: 0.3s;
    }
    .form-control:focus, .form-select:focus {
        border-color: #c41e3a;
        box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
    }
    .form-check-input:checked {
        background-color: #c41e3a;
        border-color: #c41e3a;
    }
</style>

{% endblock %}