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

{% block page_title %}ایجاد خطای جدید{% 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-plus-circle text-danger"></i> ایجاد خطای جدید
        </h4>
        <p class="text-secondary small mb-0">ثبت راه‌حل جدید برای خطاهای لوازم خانگی دوو</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 }}">{{ 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" placeholder="مثلاً: E1">
                    </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" placeholder="مثلاً: یخچال خنک نمی‌کند" 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" placeholder="توضیحات کامل خطا..." required></textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small">علائم خطا</label>
                        <textarea name="symptoms" class="form-control" rows="2" placeholder="علائم و نشانه‌های خطا..."></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" placeholder="مراحل گام‌به‌گام رفع خطا..."></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" placeholder="https://example.com/video.mp4">
                    </div>
                    <div class="col-md-6">
                        <label class="form-label fw-bold small">کد امبد ویدئو</label>
                        <input type="text" name="video_embed" class="form-control" placeholder="کد اگر از سایت‌های خارجی استفاده می‌کنید">
                    </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" placeholder="عنوان برای موتورهای جستجو">
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small">توضیحات سئو</label>
                        <textarea name="seo_description" class="form-control" rows="2" placeholder="توضیحات برای موتورهای جستجو"></textarea>
                    </div>
                    <div class="col-12">
                        <label class="form-label fw-bold small">کلمات کلیدی سئو</label>
                        <input type="text" name="seo_keywords" class="form-control" placeholder="کلمات کلیدی، جدا شده با کاما">
                    </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>
                
                <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 class="mb-3">
                    <label class="form-label fw-bold small">تصاویر اضافی</label>
                    <input type="file" name="additional_images" class="form-control" accept="image/*" multiple>
                </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">آسان</option>
                        <option value="medium" selected>متوسط</option>
                        <option value="hard">سخت</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="30">
                </div>
                
                <div class="mb-3">
                    <label class="form-label fw-bold small">ابزارهای مورد نیاز</label>
                    <input type="text" name="tools_needed" class="form-control" placeholder="پیچ‌گوشتی، آچار، ...">
                </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" checked>
                    <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">
                    <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" checked>
                    <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-danger 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 %}