{% extends 'cars/base.html' %}
{% load custom_filters %}

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

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h1 class="h3 mb-1">داشبورد</h1>
                <p class="text-muted mb-0">خلاصه فعالیت‌های شما در سیستم</p>
            </div>
        </div>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row mb-4">
    {% if user.user_type == 'admin' %}
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-users fa-2x text-primary mb-3"></i>
                    <h3 class="fw-bold">{{ users_count|default:0 }}</h3>
                    <p class="text-muted mb-0">تعداد کاربران</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-car fa-2x text-success mb-3"></i>
                    <h3 class="fw-bold">{{ cars_count|default:0 }}</h3>
                    <p class="text-muted mb-0">تعداد خودروها</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-clipboard-check fa-2x text-warning mb-3"></i>
                    <h3 class="fw-bold">{{ inspections_count|default:0 }}</h3>
                    <p class="text-muted mb-0">تعداد بازرسی‌ها</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-cube fa-2x text-info mb-3"></i>
                    <h3 class="fw-bold">{{ items_count|default:0 }}</h3>
                    <p class="text-muted mb-0">تعداد اقلام</p>
                </div>
            </div>
        </div>
    {% elif user.user_type == 'inspector' %}
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-clock fa-2x text-warning mb-3"></i>
                    <h3 class="fw-bold">{{ pending_count|default:0 }}</h3>
                    <p class="text-muted mb-0">در انتظار بازرسی</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-check-circle fa-2x text-success mb-3"></i>
                    <h3 class="fw-bold">{{ approved_count|default:0 }}</h3>
                    <p class="text-muted mb-0">تایید شده</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-times-circle fa-2x text-danger mb-3"></i>
                    <h3 class="fw-bold">{{ rejected_count|default:0 }}</h3>
                    <p class="text-muted mb-0">رد شده</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-clipboard-list fa-2x text-info mb-3"></i>
                    <h3 class="fw-bold">{{ inspections_count|default:0 }}</h3>
                    <p class="text-muted mb-0">بازرسی‌های انجام شده</p>
                </div>
            </div>
        </div>
    {% else %}
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-car fa-2x text-primary mb-3"></i>
                    <h3 class="fw-bold">{{ cars_count|default:0 }}</h3>
                    <p class="text-muted mb-0">خودروهای ثبت شده</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-clock fa-2x text-warning mb-3"></i>
                    <h3 class="fw-bold">{{ pending_count|default:0 }}</h3>
                    <p class="text-muted mb-0">در انتظار تایید</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-check-circle fa-2x text-success mb-3"></i>
                    <h3 class="fw-bold">{{ approved_count|default:0 }}</h3>
                    <p class="text-muted mb-0">تایید شده</p>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-3">
            <div class="card h-100">
                <div class="card-body text-center">
                    <i class="fas fa-times-circle fa-2x text-danger mb-3"></i>
                    <h3 class="fw-bold">{{ rejected_count|default:0 }}</h3>
                    <p class="text-muted mb-0">رد شده</p>
                </div>
            </div>
        </div>
    {% endif %}
</div>

<!-- Recent Activity / Cars -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0 fw-bold">
                    {% if user.user_type == 'admin' %}
                        آخرین فعالیت‌های سیستم
                    {% elif user.user_type == 'inspector' %}
                        خودروهای اخیر استان شما
                    {% else %}
                        خودروهای اخیر شما
                    {% endif %}
                </h5>
            </div>
            <div class="card-body">
                {% if user.user_type == 'admin' %}
                    {% if recent_logs %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>عملیات</th>
                                        <th>توضیحات</th>
                                        <th>کاربر</th>
                                        <th>تاریخ</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for log in recent_logs %}
                                    <tr>
                                        <td class="fw-medium">{{ log.action }}</td>
                                        <td class="text-muted">{{ log.description|truncatechars:60 }}</td>
                                        <td>{{ log.user.get_full_name|default:log.user.username }}</td>
                                        <td class="text-muted text-sm">{{ log.created_at|date:"Y/m/d H:i" }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-history fa-2x mb-3 text-muted"></i>
                            <p class="mb-0">هیچ فعالیتی در سیستم ثبت نشده است</p>
                        </div>
                    {% endif %}
                {% else %}
                    {% if recent_cars %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>شماره بدنه</th>
                                        <th>مدل</th>
                                        <th>مالک</th>
                                        <th>وضعیت</th>
                                        <th>تاریخ ثبت</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for car in recent_cars %}
                                    <tr>
                                        <td class="fw-medium">{{ car.chassis_number }}</td>
                                        <td>{{ car.model }}</td>
                                        <td>{{ car.owner_name }}</td>
                                        <td>
                                            <span class="badge 
                                                {% if car.status == 'approved' %}bg-success
                                                {% elif car.status == 'rejected' %}bg-danger
                                                {% elif car.status == 'inspection' %}bg-warning text-dark
                                                {% elif car.status == 'finance' %}bg-info
                                                {% elif car.status == 'manager' %}bg-primary
                                                {% else %}bg-secondary{% endif %}">
                                                {{ car.get_status_display }}
                                            </span>
                                        </td>
                                        <td class="text-muted">{{ car.created_at|date:"Y/m/d" }}</td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center text-muted py-4">
                            <i class="fas fa-car fa-2x mb-3 text-muted"></i>
                            <p class="mb-0">هنوز خودرویی ثبت نشده است</p>
                        </div>
                    {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- Action Buttons -->
<div class="row mt-4">
    <div class="col-12">
        {% if user.user_type != 'inspector' and user.user_type != 'admin' %}
        <div class="text-center">
            <a href="{% url 'start_sale' %}" class="btn btn-primary btn-lg">
                <i class="fas fa-plus-circle me-2"></i>
                ثبت خودرو جدید
            </a>
        </div>
        {% endif %}
        
        {% if user.user_type == 'inspector' %}
        <div class="card">
            <div class="card-body text-center">
                <h5 class="card-title">بازرسی خودرو</h5>
                <p class="card-text text-muted">خودروهای در انتظار بازرسی را بررسی کنید.</p>
                <a href="{% url 'inspection_list' %}" class="btn btn-primary">
                    <i class="fas fa-clipboard-check me-2"></i>
                    رفتن به لیست بازرسی
                </a>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<style>
.card {
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}

.stat-card i {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.stat-card h3 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.badge {
    font-size: 0.75rem;
    padding: 0.35rem 0.65rem;
}

.table th {
    font-weight: 600;
    font-size: 0.875rem;
}

.table td {
    font-size: 0.875rem;
    vertical-align: middle;
}

.btn {
    border-radius: 8px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .stat-card h3 {
        font-size: 1.5rem;
    }
    
    .stat-card i {
        font-size: 1.75rem;
    }
}
</style>
{% endblock %}