{% 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-exclamation-triangle text-danger"></i> مدیریت خطاها
        </h4>
        <p class="text-secondary small mb-0">مدیریت دسته‌بندی‌ها و راه‌حل‌های خطاها</p>
    </div>
    <div class="d-flex gap-2 flex-wrap">
        <a href="{{ url_for('admin_error_category_create') }}" class="btn btn-outline-primary btn-sm rounded-pill">
            <i class="fas fa-folder-plus"></i> دسته‌بندی جدید
        </a>
        <a href="{{ url_for('admin_error_solution_create') }}" class="btn btn-danger btn-sm rounded-pill">
            <i class="fas fa-plus"></i> خطای جدید
        </a>
    </div>
</div>

<!-- ===== کارت‌های آمار ===== -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="stat-card text-center">
            <div class="h3 text-danger mb-0">{{ errors|length|persian_numbers }}</div>
            <div class="text-secondary small">مجموع خطاها</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card text-center">
            <div class="h3 text-success mb-0">{{ categories|length|persian_numbers }}</div>
            <div class="text-secondary small">دسته‌بندی‌ها</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card text-center">
            <div class="h3 text-warning mb-0">
                {{ errors|selectattr('is_featured')|list|length|persian_numbers }}
            </div>
            <div class="text-secondary small">برجسته</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="stat-card text-center">
            <div class="h3 text-info mb-0">
                {{ errors|selectattr('can_self_fix')|list|length|persian_numbers }}
            </div>
            <div class="text-secondary small">قابل رفع توسط کاربر</div>
        </div>
    </div>
</div>

<!-- ===== جدول دسته‌بندی‌ها ===== -->
<div class="card border-0 shadow-sm mb-4" style="border-radius:16px;overflow:hidden;">
    <div class="card-header bg-white py-3">
        <h6 class="fw-bold mb-0"><i class="fas fa-folder text-primary"></i> دسته‌بندی‌های خطا</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="width:30px;">#</th>
                        <th>آیکون</th>
                        <th>نام</th>
                        <th>اسلاگ</th>
                        <th>تعداد خطا</th>
                        <th>وضعیت</th>
                        <th>عملیات</th>
                    </tr>
                </thead>
                <tbody>
                    {% if categories %}
                        {% for cat in categories %}
                        <tr>
                            <td>{{ loop.index|persian_numbers }}</td>
                            <td>
                                <i class="{{ cat.icon|default('fas fa-wrench') }}" style="font-size:1.2rem;color:#c41e3a;"></i>
                            </td>
                            <td>
                                <span class="fw-bold">{{ cat.name }}</span>
                                {% if cat.is_default %}
                                    <span class="badge bg-primary ms-1" style="font-size:0.55rem;">پیش‌فرض</span>
                                {% endif %}
                            </td>
                            <td><code>{{ cat.slug }}</code></td>
                            <td>
                                <span class="badge bg-secondary">{{ cat.errors.count()|persian_numbers }}</span>
                                {% set self_fix_count = cat.errors.filter_by(can_self_fix=True).count() %}
                                {% if self_fix_count > 0 %}
                                    <span class="badge bg-success" style="font-size:0.55rem;">
                                        <i class="fas fa-check"></i> {{ self_fix_count|persian_numbers }}
                                    </span>
                                {% endif %}
                            </td>
                            <td>
                                {% if cat.is_active %}
                                    <span class="badge bg-success">فعال</span>
                                {% else %}
                                    <span class="badge bg-danger">غیرفعال</span>
                                {% endif %}
                            </td>
                            <td>
                                <div class="d-flex gap-1 flex-wrap">
                                    <a href="{{ url_for('admin_error_category_edit', id=cat.id) }}" 
                                       class="btn btn-sm btn-outline-primary rounded-pill" style="font-size:0.65rem;">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ url_for('error_category_detail', slug=cat.slug) }}" 
                                       target="_blank" class="btn btn-sm btn-outline-info rounded-pill" style="font-size:0.65rem;">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="7" class="text-center text-secondary py-4">
                                <i class="fas fa-folder-open" style="font-size:2rem;opacity:0.3;"></i>
                                <p class="mt-2 mb-0">هیچ دسته‌بندی خطایی ثبت نشده است.</p>
                                <a href="{{ url_for('admin_error_category_create') }}" class="btn btn-primary btn-sm mt-2">
                                    <i class="fas fa-plus"></i> ایجاد دسته‌بندی
                                </a>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- ===== جدول لیست خطاها ===== -->
<div class="card border-0 shadow-sm" style="border-radius:16px;overflow:hidden;">
    <div class="card-header bg-white py-3 d-flex flex-wrap justify-content-between align-items-center">
        <h6 class="fw-bold mb-0"><i class="fas fa-list text-danger"></i> لیست خطاها</h6>
        <div class="d-flex gap-2">
            <input type="text" id="searchErrors" class="form-control form-control-sm" placeholder="جستجو..." style="width:200px;">
            <select id="filterCategory" class="form-select form-select-sm" style="width:150px;">
                <option value="">همه دسته‌بندی‌ها</option>
                {% for cat in categories %}
                    <option value="{{ cat.id }}">{{ cat.name }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="errorsTable">
                <thead class="table-light">
                    <tr>
                        <th style="width:30px;">#</th>
                        <th>عنوان خطا</th>
                        <th>دسته‌بندی</th>
                        <th>سطح دشواری</th>
                        <th>قابل رفع</th>
                        <th>برجسته</th>
                        <th>وضعیت</th>
                        <th>بازدید</th>
                        <th>عملیات</th>
                    </tr>
                </thead>
                <tbody>
                    {% if errors %}
                        {% for error in errors %}
                        <tr data-category="{{ error.category_id }}">
                            <td>{{ loop.index|persian_numbers }}</td>
                            <td>
                                <span class="fw-bold" style="font-size:0.9rem;">
                                    {{ error.error_title|truncate(30) }}
                                </span>
                                {% if error.error_code %}
                                    <span class="badge bg-secondary" style="font-size:0.5rem;">{{ error.error_code }}</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if error.category %}
                                    <span class="badge bg-secondary">{{ error.category.name }}</span>
                                {% else %}
                                    <span class="badge bg-danger">بدون دسته</span>
                                {% endif %}
                            </td>
                            <td>
                                <span class="badge-difficulty {{ error.difficulty_level|default('medium') }}">
                                    {% 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>
                            </td>
                            <td>
                                {% if error.can_self_fix %}
                                    <span class="badge bg-success"><i class="fas fa-check"></i></span>
                                {% else %}
                                    <span class="badge bg-danger"><i class="fas fa-times"></i></span>
                                {% endif %}
                            </td>
                            <td>
                                {% if error.is_featured %}
                                    <span class="badge bg-warning text-dark"><i class="fas fa-star"></i></span>
                                {% else %}
                                    <span class="badge bg-light text-dark">-</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if error.is_active %}
                                    <span class="badge bg-success">فعال</span>
                                {% else %}
                                    <span class="badge bg-danger">غیرفعال</span>
                                {% endif %}
                            </td>
                            <td>{{ error.view_count|default(0)|persian_numbers }}</td>
                            <td>
                                <div class="d-flex gap-1 flex-wrap">
                                    <a href="{{ url_for('admin_error_solution_edit', id=error.id) }}" 
                                       class="btn btn-sm btn-outline-primary rounded-pill" style="font-size:0.65rem;">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <a href="{{ url_for('error_detail', slug=error.slug) }}" 
                                       target="_blank" class="btn btn-sm btn-outline-info rounded-pill" style="font-size:0.65rem;">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <button onclick="confirmDelete({{ error.id }}, '{{ error.error_title|replace("'", "\\'") }}')" 
                                            class="btn btn-sm btn-outline-danger rounded-pill" style="font-size:0.65rem;">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                    <form id="deleteForm{{ error.id }}" method="POST" 
                                          action="{{ url_for('admin_error_solution_delete', id=error.id) }}" 
                                          style="display:none;"></form>
                                </div>
                            </td>
                        </tr>
                        {% endfor %}
                    {% else %}
                        <tr>
                            <td colspan="9" class="text-center text-secondary py-4">
                                <i class="fas fa-inbox" style="font-size:2rem;opacity:0.3;"></i>
                                <p class="mt-2 mb-0">هیچ خطایی ثبت نشده است.</p>
                                <a href="{{ url_for('admin_error_solution_create') }}" class="btn btn-danger btn-sm mt-2">
                                    <i class="fas fa-plus"></i> ایجاد خطا
                                </a>
                            </td>
                        </tr>
                    {% endif %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- ===== مودال حذف ===== -->
<div class="modal fade" id="deleteModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content" style="border-radius:16px;">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-bold"><i class="fas fa-exclamation-triangle text-danger"></i> تأیید حذف</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>آیا از حذف خطا <span id="deleteItemName" class="fw-bold text-danger"></span> مطمئن هستید؟</p>
                <p class="text-secondary small mb-0">این عمل غیرقابل بازگشت است و تمام اطلاعات مرتبط حذف خواهد شد.</p>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-secondary btn-sm rounded-pill" data-bs-dismiss="modal">انصراف</button>
                <button type="button" class="btn btn-danger btn-sm rounded-pill" id="confirmDeleteBtn">حذف</button>
            </div>
        </div>
    </div>
</div>

<!-- ============================================================
   اسکریپت‌ها
   ============================================================ -->
<script>
    // ===== جستجو و فیلتر =====
    document.getElementById('searchErrors').addEventListener('keyup', function() {
        filterTable();
    });
    
    document.getElementById('filterCategory').addEventListener('change', function() {
        filterTable();
    });
    
    function filterTable() {
        var search = document.getElementById('searchErrors').value.toLowerCase();
        var category = document.getElementById('filterCategory').value;
        var rows = document.querySelectorAll('#errorsTable tbody tr');
        
        rows.forEach(function(row) {
            var text = row.textContent.toLowerCase();
            var rowCategory = row.getAttribute('data-category') || '';
            
            var matchSearch = text.indexOf(search) > -1;
            var matchCategory = category === '' || rowCategory == category;
            
            row.style.display = (matchSearch && matchCategory) ? '' : 'none';
        });
    }
    
    // ===== حذف =====
    var deleteId = null;
    
    function confirmDelete(id, name) {
        deleteId = id;
        document.getElementById('deleteItemName').textContent = name;
        var modal = new bootstrap.Modal(document.getElementById('deleteModal'));
        modal.show();
    }
    
    document.getElementById('confirmDeleteBtn').addEventListener('click', function() {
        if (deleteId) {
            document.getElementById('deleteForm' + deleteId).submit();
        }
    });
</script>

<!-- ============================================================
   استایل‌های اختصاصی
   ============================================================ -->
<style>
    .badge-difficulty {
        padding: 3px 10px;
        border-radius: 50px;
        font-size: 0.6rem;
    }
    .badge-difficulty.easy { background: #d4edda; color: #155724; }
    .badge-difficulty.medium { background: #fff3cd; color: #856404; }
    .badge-difficulty.hard { background: #f8d7da; color: #721c24; }
    
    .table td {
        vertical-align: middle;
    }
    
    .card-header .form-control-sm,
    .card-header .form-select-sm {
        font-size: 0.75rem;
    }
</style>

{% endblock %}