{% extends 'base.html' %}
{% block title %}پنل مدیریت کل{% endblock %}

{% block content %}
<div class="glass-card mb-4 p-3 d-flex justify-content-between align-items-center">
    <h4 class="m-0 fw-bold d-flex align-items-center text-dark">
        <i class="bi bi-speedometer2 text-primary me-2 fs-3"></i> 
        داشبورد مدیریت کل
    </h4>
    <a href="/logout" class="btn btn-outline-danger px-4 rounded-pill fw-bold">
        <i class="bi bi-power me-1"></i> خروج
    </a>
</div>

<div class="row g-4 mb-5">
    <div class="col-md-4">
        <div class="glass-card text-center py-4 border-top border-primary border-5 rounded-4">
            <div class="text-primary mb-2"><i class="bi bi-people-fill fs-1"></i></div>
            <h6 class="text-muted fw-bold">کل نوبت‌های ثبت شده</h6>
            <div class="display-4 fw-bold mt-2 text-dark">{{ stats.total }}</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="glass-card text-center py-4 border-top border-warning border-5 rounded-4">
            <div class="text-warning mb-2"><i class="bi bi-hourglass-split fs-1"></i></div>
            <h6 class="text-muted fw-bold">افراد در انتظار</h6>
            <div class="display-4 fw-bold mt-2 text-dark">{{ stats.waiting }}</div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="glass-card text-center py-4 border-top border-success border-5 rounded-4">
            <div class="text-success mb-2"><i class="bi bi-check-circle-fill fs-1"></i></div>
            <h6 class="text-muted fw-bold">نوبت‌های تکمیل شده</h6>
            <div class="display-4 fw-bold mt-2 text-dark">{{ stats.completed }}</div>
        </div>
    </div>
</div>

<div class="glass-card">
    <h5 class="mb-4 fw-bold border-bottom pb-3"><i class="bi bi-journal-text text-primary me-2"></i>آخرین رویدادهای سیستم (Audit Log)</h5>
    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead class="table-light">
                <tr>
                    <th scope="col" class="py-3">شناسه کاربر</th>
                    <th scope="col" class="py-3">نوع عملیات</th>
                    <th scope="col" class="py-3">جزئیات و توضیحات</th>
                    <th scope="col" class="py-3 text-start">زمان ثبت</th>
                </tr>
            </thead>
            <tbody>
                {% for log in logs %}
                <tr>
                    <td class="fw-bold">{{ log.user_id if log.user_id else 'سیستم' }}</td>
                    <td><span class="badge bg-secondary px-3 py-2 rounded-pill">{{ log.action }}</span></td>
                    <td class="text-muted">{{ log.details }}</td>
                    <td dir="ltr" class="text-start small text-muted">{{ log.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="4" class="text-center text-muted py-5">
                        <i class="bi bi-inbox fs-1 d-block mb-3"></i>هیچ رویدادی ثبت نشده است.
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}