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

{% block page_title %}داشبورد مدیریت{% endblock %}

{% block content %}

<!-- ===== کارت‌های آمار اصلی ===== -->
<div class="row g-3 g-md-4">
    <div class="col-6 col-md-3">
        <a href="{{ url_for('admin_users') }}" class="text-decoration-none">
            <div class="stat-card">
                <div class="icon" style="background:rgba(196,30,58,0.1);color:#c41e3a;">
                    <i class="fas fa-users"></i>
                </div>
                <div class="number persian-number">{{ total_users|default(0)|persian_numbers }}</div>
                <div class="label">کاربران کل</div>
                <small class="text-muted" style="font-size:0.7rem;">مدیریت <i class="fas fa-arrow-left"></i></small>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3">
        <a href="{{ url_for('admin_services') }}" class="text-decoration-none">
            <div class="stat-card">
                <div class="icon" style="background:rgba(40,167,69,0.1);color:#28a745;">
                    <i class="fas fa-wrench"></i>
                </div>
                <div class="number persian-number">{{ total_services|default(0)|persian_numbers }}</div>
                <div class="label">خدمات</div>
                <small class="text-muted" style="font-size:0.7rem;">مدیریت <i class="fas fa-arrow-left"></i></small>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3">
        <a href="{{ url_for('admin_bookings') }}" class="text-decoration-none">
            <div class="stat-card">
                <div class="icon" style="background:rgba(255,193,7,0.1);color:#ffc107;">
                    <i class="fas fa-calendar-check"></i>
                </div>
                <div class="number persian-number">{{ total_bookings|default(0)|persian_numbers }}</div>
                <div class="label">رزروها</div>
                <small class="text-muted" style="font-size:0.7rem;">مدیریت <i class="fas fa-arrow-left"></i></small>
            </div>
        </a>
    </div>
    <div class="col-6 col-md-3">
        <a href="{{ url_for('admin_reviews') }}" class="text-decoration-none">
            <div class="stat-card">
                <div class="icon" style="background:rgba(23,162,184,0.1);color:#17a2b8;">
                    <i class="fas fa-star"></i>
                </div>
                <div class="number persian-number">{{ pending_reviews|default(0)|persian_numbers }}</div>
                <div class="label">نظرات در انتظار تایید</div>
                <small class="text-muted" style="font-size:0.7rem;">مدیریت <i class="fas fa-arrow-left"></i></small>
            </div>
        </a>
    </div>
</div>

<!-- ===== کارت‌های دسترسی سریع ===== -->
<div class="row g-3 g-md-4 mt-2">
    <div class="col-4 col-md-2">
        <a href="{{ url_for('admin_technicians') }}" class="text-decoration-none">
            <div class="stat-card text-center" style="padding:15px 10px;">
                <i class="fas fa-user-cog" style="font-size:1.8rem;color:#c41e3a;"></i>
                <div class="number" style="font-size:1.2rem;">{{ total_technicians|default(0)|persian_numbers }}</div>
                <div class="label" style="font-size:0.65rem;">تکنسین‌ها</div>
            </div>
        </a>
    </div>
    <div class="col-4 col-md-2">
        <a href="{{ url_for('admin_regions') }}" class="text-decoration-none">
            <div class="stat-card text-center" style="padding:15px 10px;">
                <i class="fas fa-map-marked-alt" style="font-size:1.8rem;color:#17a2b8;"></i>
                <div class="number" style="font-size:1.2rem;">{{ total_regions|default(0)|persian_numbers }}</div>
                <div class="label" style="font-size:0.65rem;">مناطق</div>
            </div>
        </a>
    </div>
    <div class="col-4 col-md-2">
        <a href="{{ url_for('admin_articles') }}" class="text-decoration-none">
            <div class="stat-card text-center" style="padding:15px 10px;">
                <i class="fas fa-newspaper" style="font-size:1.8rem;color:#28a745;"></i>
                <div class="number" style="font-size:1.2rem;">{{ total_articles|default(0)|persian_numbers }}</div>
                <div class="label" style="font-size:0.65rem;">مقالات</div>
            </div>
        </a>
    </div>
    <div class="col-4 col-md-2">
        <a href="{{ url_for('admin_errors') }}" class="text-decoration-none">
            <div class="stat-card text-center" style="padding:15px 10px;">
                <i class="fas fa-exclamation-triangle" style="font-size:1.8rem;color:#dc3545;"></i>
                <div class="number" style="font-size:1.2rem;">{{ total_errors|default(0)|persian_numbers }}</div>
                <div class="label" style="font-size:0.65rem;">خطاها</div>
            </div>
        </a>
    </div>
    <div class="col-4 col-md-2">
        <a href="{{ url_for('admin_seo_pages') }}" class="text-decoration-none">
            <div class="stat-card text-center" style="padding:15px 10px;">
                <i class="fas fa-file-alt" style="font-size:1.8rem;color:#17a2b8;"></i>
                <div class="number" style="font-size:1.2rem;">{{ total_seo_pages|default(0)|persian_numbers }}</div>
                <div class="label" style="font-size:0.65rem;">صفحات سئو</div>
            </div>
        </a>
    </div>
    <div class="col-4 col-md-2">
        <a href="{{ url_for('admin_header_images') }}" class="text-decoration-none">
            <div class="stat-card text-center" style="padding:15px 10px;">
                <i class="fas fa-images" style="font-size:1.8rem;color:#6f42c1;"></i>
                <div class="number" style="font-size:1.2rem;">{{ total_header_images|default(0)|persian_numbers }}</div>
                <div class="label" style="font-size:0.65rem;">تصاویر هدر</div>
            </div>
        </a>
    </div>
</div>

<!-- ===== کارت‌های سیستم ===== -->
<div class="row g-3 g-md-4 mt-2">
    <div class="col-4 col-md-3">
        <a href="{{ url_for('admin_keywords') }}" class="text-decoration-none">
            <div class="stat-card text-center" style="padding:15px 10px;">
                <i class="fas fa-tags" style="font-size:1.8rem;color:#6f42c1;"></i>
                <div class="number" style="font-size:1.2rem;">{{ total_keywords|default(0)|persian_numbers }}</div>
                <div class="label" style="font-size:0.65rem;">کلمات کلیدی</div>
            </div>
        </a>
    </div>
    <div class="col-4 col-md-3">
        <a href="{{ url_for('admin_backup') }}" class="text-decoration-none">
            <div class="stat-card text-center" style="padding:15px 10px;">
                <i class="fas fa-database" style="font-size:1.8rem;color:#fd7e14;"></i>
                <div class="number" style="font-size:1.2rem;">{{ total_backups|default(0)|persian_numbers }}</div>
                <div class="label" style="font-size:0.65rem;">فایل بکاپ</div>
            </div>
        </a>
    </div>
    <div class="col-4 col-md-3">
        <a href="{{ url_for('admin_settings') }}" class="text-decoration-none">
            <div class="stat-card text-center" style="padding:15px 10px;">
                <i class="fas fa-cog" style="font-size:1.8rem;color:#6c757d;"></i>
                <div class="number" style="font-size:1.2rem;">{{ total_settings|default('...') }}</div>
                <div class="label" style="font-size:0.65rem;">تنظیمات</div>
            </div>
        </a>
    </div>
    <div class="col-4 col-md-3">
        <a href="{{ url_for('admin_robots_edit') }}" class="text-decoration-none">
            <div class="stat-card text-center" style="padding:15px 10px;">
                <i class="fas fa-robot" style="font-size:1.8rem;color:#6c757d;"></i>
                <div class="number" style="font-size:1.2rem;">
                    {% if robots_exists %}✅{% else %}❌{% endif %}
                </div>
                <div class="label" style="font-size:0.65rem;">robots.txt</div>
                <small class="text-muted" style="font-size:0.55rem;">
                    {% if robots_exists %}موجود{% else %}ایجاد کن{% endif %}
                </small>
            </div>
        </a>
    </div>
</div>

<!-- ===== کارت‌های سئو ===== -->
<div class="row g-3 g-md-4 mt-2">
    <div class="col-md-6">
        <div class="stat-card">
            <div class="d-flex justify-content-between align-items-center mb-2">
                <h6 class="fw-bold mb-0"><i class="fas fa-chart-line" style="color:#c41e3a;"></i> وضعیت سئو</h6>
                <a href="{{ url_for('admin_seo') }}" class="btn btn-sm btn-outline-danger rounded-pill">مدیریت</a>
            </div>
            <div class="row g-2">
                <div class="col-6">
                    <div class="p-2 bg-light rounded-3 text-center">
                        <div class="h4 mb-0 persian-number">{{ seo_score|default(0)|persian_numbers }}</div>
                        <small class="text-muted">امتیاز سئو</small>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-2 bg-light rounded-3 text-center">
                        <div class="h4 mb-0 persian-number">{{ total_keywords|default(0)|persian_numbers }}</div>
                        <small class="text-muted">کلمات کلیدی</small>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-2 bg-light rounded-3 text-center">
                        <div class="h4 mb-0 persian-number">{{ total_seo_pages|default(0)|persian_numbers }}</div>
                        <small class="text-muted">صفحات سئو</small>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-2 bg-light rounded-3 text-center">
                        <div class="h4 mb-0 persian-number">{{ sitemap_urls|default(0)|persian_numbers }}</div>
                        <small class="text-muted">URL سایتمپ</small>
                    </div>
                </div>
            </div>
            {% if seo_last_update %}
            <small class="text-muted d-block mt-2">
                <i class="fas fa-clock"></i> آخرین بروزرسانی: {{ seo_last_update|persian_date }}
            </small>
            {% endif %}
        </div>
    </div>
    <div class="col-md-6">
        <div class="stat-card">
            <h6 class="fw-bold mb-2"><i class="fas fa-exclamation-triangle" style="color:#dc3545;"></i> آمار خطاها</h6>
            <div class="row g-2">
                <div class="col-6">
                    <div class="p-2 bg-light rounded-3 text-center">
                        <div class="h4 mb-0 persian-number text-danger">{{ total_errors|default(0)|persian_numbers }}</div>
                        <small class="text-muted">مجموع خطاها</small>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-2 bg-light rounded-3 text-center">
                        <div class="h4 mb-0 persian-number text-success">{{ total_self_fix_errors|default(0)|persian_numbers }}</div>
                        <small class="text-muted">قابل رفع</small>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-2 bg-light rounded-3 text-center">
                        <div class="h4 mb-0 persian-number text-warning">{{ total_featured_errors|default(0)|persian_numbers }}</div>
                        <small class="text-muted">برجسته</small>
                    </div>
                </div>
                <div class="col-6">
                    <div class="p-2 bg-light rounded-3 text-center">
                        <div class="h4 mb-0 persian-number text-info">{{ total_error_categories|default(0)|persian_numbers }}</div>
                        <small class="text-muted">دسته‌بندی</small>
                    </div>
                </div>
            </div>
            <a href="{{ url_for('admin_errors') }}" class="btn btn-sm btn-outline-danger rounded-pill mt-2 w-100">
                مدیریت خطاها <i class="fas fa-arrow-left"></i>
            </a>
        </div>
    </div>
</div>

<!-- ===== نمودار و آمار بیشتر ===== -->
<div class="row g-3 g-md-4 mt-2">
    <div class="col-md-8">
        <div class="stat-card">
            <h6 class="fw-bold mb-3"><i class="fas fa-chart-line" style="color:#c41e3a;"></i> آمار رزروهای ماهانه</h6>
            <div style="height:230px; position:relative;">
                <canvas id="bookingsChart"></canvas>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="stat-card">
            <h6 class="fw-bold mb-3"><i class="fas fa-tag" style="color:#c41e3a;"></i> وضعیت رزروها</h6>
            <div class="d-flex justify-content-between mb-2">
                <span>در انتظار</span>
                <span class="fw-bold persian-number">{{ pending_bookings|default(0)|persian_numbers }}</span>
            </div>
            <div class="d-flex justify-content-between mb-2">
                <span>تایید شده</span>
                <span class="fw-bold persian-number">{{ confirmed_bookings|default(0)|persian_numbers }}</span>
            </div>
            <div class="d-flex justify-content-between mb-2">
                <span>در حال انجام</span>
                <span class="fw-bold persian-number">{{ in_progress_bookings|default(0)|persian_numbers }}</span>
            </div>
            <div class="d-flex justify-content-between mb-2">
                <span>تکمیل شده</span>
                <span class="fw-bold persian-number">{{ completed_bookings|default(0)|persian_numbers }}</span>
            </div>
            <div class="d-flex justify-content-between">
                <span>لغو شده</span>
                <span class="fw-bold persian-number">{{ cancelled_bookings|default(0)|persian_numbers }}</span>
            </div>
        </div>
    </div>
</div>

<!-- ===== آخرین فعالیت‌ها ===== -->
<div class="row g-3 g-md-4 mt-2">
    <div class="col-md-6">
        <div class="stat-card">
            <h6 class="fw-bold mb-3"><i class="fas fa-clock" style="color:#c41e3a;"></i> آخرین رزروها</h6>
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0">
                    <thead>
                        <tr>
                            <th>شماره</th>
                            <th>کاربر</th>
                            <th>سرویس</th>
                            <th>وضعیت</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for booking in recent_bookings[:5] %}
                        <tr>
                            <td><span class="badge bg-secondary">{{ booking.booking_number }}</span></td>
                            <td>{{ booking.user.fullname }}</td>
                            <td>{{ booking.service.title|truncate(15) }}</td>
                            <td>
                                <span class="badge bg-{{ booking.get_status_color() }}">
                                    {% if booking.status == 'pending' %}در انتظار
                                    {% elif booking.status == 'confirmed' %}تایید
                                    {% elif booking.status == 'in_progress' %}انجام
                                    {% elif booking.status == 'completed' %}تکمیل
                                    {% elif booking.status == 'cancelled' %}لغو
                                    {% endif %}
                                </span>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="stat-card">
            <h6 class="fw-bold mb-3"><i class="fas fa-users" style="color:#c41e3a;"></i> آخرین کاربران</h6>
            <div class="table-responsive">
                <table class="table table-sm table-hover mb-0">
                    <thead>
                        <tr>
                            <th>نام</th>
                            <th>تلفن</th>
                            <th>نقش</th>
                            <th>تاریخ</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in recent_users[:5] %}
                        <tr>
                            <td>{{ user.fullname }}</td>
                            <td>{{ user.phone }}</td>
                            <td>
                                <span class="badge bg-{% if user.role == 'admin' %}danger{% elif user.role == 'technician' %}warning{% else %}info{% endif %}">
                                    {% if user.role == 'admin' %}ادمین
                                    {% elif user.role == 'technician' %}تکنسین
                                    {% else %}کاربر{% endif %}
                                </span>
                            </td>
                            <td>{{ user.created_at|persian_date }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<!-- ===== اسکریپت نمودار ===== -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var ctx = document.getElementById('bookingsChart');
    if (ctx) {
        new Chart(ctx, {
            type: 'bar',
            data: {
                labels: {{ months|tojson|safe }},
                datasets: [{
                    label: 'تعداد رزروها',
                    data: {{ monthly_bookings|tojson|safe }},
                    backgroundColor: 'rgba(196,30,58,0.65)',
                    borderColor: '#c41e3a',
                    borderWidth: 2,
                    borderRadius: 6,
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { display: false }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: { 
                            stepSize: 1,
                            font: { size: 10 }
                        }
                    },
                    x: {
                        ticks: { font: { size: 10 } }
                    }
                }
            }
        });
    }
});
</script>

<!-- ============================================================
   استایل‌های اختصاصی
   ============================================================ -->
<style>
    .persian-number {
        font-feature-settings: "ss02";
    }
    .stat-card {
        background: #fff;
        border-radius: 16px;
        padding: 18px 15px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        transition: 0.3s;
        height: 100%;
        border: 1px solid rgba(0,0,0,0.04);
        cursor: pointer;
    }
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px rgba(0,0,0,0.12);
    }
    .stat-card .icon {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.3rem;
        margin-bottom: 8px;
    }
    .stat-card .number {
        font-size: 1.8rem;
        font-weight: 900;
        line-height: 1.2;
    }
    .stat-card .label {
        font-size: 0.8rem;
        color: #6c757d;
        margin-top: 2px;
    }
    .table th {
        font-size: 0.7rem;
        color: #6c757d;
        font-weight: 600;
    }
    .table td {
        font-size: 0.8rem;
        vertical-align: middle;
    }
    .table tr:hover {
        background: rgba(196,30,58,0.03);
    }
    @media (max-width: 768px) {
        .stat-card .number {
            font-size: 1.3rem;
        }
        .stat-card .icon {
            width: 35px;
            height: 35px;
            font-size: 1rem;
        }
    }
</style>

{% endblock %}