{% extends "base.html" %}

{% block title %}لوحة تحكم الإدارة - نظام إدارة روضة الأطفال{% endblock %}

{% block content %}
<div class="row">
    <!-- Sidebar -->
    <div class="col-lg-3 col-md-4">
        <div class="sidebar p-3">
            <h5 class="text-white mb-4">
                <i class="fas fa-user-shield me-2"></i>
                لوحة الإدارة
            </h5>
            <nav class="nav flex-column">
                <a class="nav-link active" href="{{ url_for('admin_dashboard') }}">
                    <i class="fas fa-tachometer-alt me-2"></i>الرئيسية
                </a>
                <a class="nav-link" href="{{ url_for('admin_children') }}">
                    <i class="fas fa-users me-2"></i>إدارة الأطفال
                </a>
                <a class="nav-link" href="{{ url_for('admin_attendance') }}">
                    <i class="fas fa-calendar-check me-2"></i>الحضور والغياب
                </a>
                <a class="nav-link" href="{{ url_for('admin_payments') }}">
                    <i class="fas fa-money-bill-wave me-2"></i>المدفوعات
                </a>
                <a class="nav-link" href="{{ url_for('admin_programs') }}">
                    <i class="fas fa-clipboard-list me-2"></i>الأنشطة والبرامج
                </a>
                <a class="nav-link" href="{{ url_for('admin_users') }}">
                    <i class="fas fa-user-cog me-2"></i>إدارة المستخدمين
                </a>
            </nav>
        </div>
    </div>

    <!-- Main Content -->
    <div class="col-lg-9 col-md-8">
        <div class="p-4">
            <!-- Welcome Header -->
            <div class="row mb-4">
                <div class="col-12">
                    <h2 class="fw-bold mb-2">مرحباً بك في لوحة الإدارة</h2>
                    <p class="text-muted">نظرة عامة على أداء الروضة اليوم</p>
                </div>
            </div>

            <!-- Statistics Cards -->
            <div class="row g-4 mb-5">
                <div class="col-lg-3 col-md-6">
                    <div class="card stats-card">
                        <div class="card-body text-center">
                            <i class="fas fa-users fa-3x mb-3"></i>
                            <h3 class="fw-bold">{{ stats.total_children }}</h3>
                            <p class="mb-0">إجمالي الأطفال</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card stats-card">
                        <div class="card-body text-center">
                            <i class="fas fa-chalkboard-teacher fa-3x mb-3"></i>
                            <h3 class="fw-bold">{{ stats.total_teachers }}</h3>
                            <p class="mb-0">المعلمين</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card stats-card">
                        <div class="card-body text-center">
                            <i class="fas fa-heart fa-3x mb-3"></i>
                            <h3 class="fw-bold">{{ stats.total_parents }}</h3>
                            <p class="mb-0">أولياء الأمور</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="card stats-card">
                        <div class="card-body text-center">
                            <i class="fas fa-calendar-check fa-3x mb-3"></i>
                            <h3 class="fw-bold">{{ stats.present_today }}</h3>
                            <p class="mb-0">الحضور اليوم</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Quick Actions -->
            <div class="row mb-5">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-bolt me-2"></i>
                                الإجراءات السريعة
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-lg-3 col-md-6">
                                    <a href="{{ url_for('admin_add_child') }}" class="btn btn-primary w-100">
                                        <i class="fas fa-plus me-2"></i>
                                        إضافة طفل جديد
                                    </a>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <a href="{{ url_for('admin_attendance') }}" class="btn btn-success w-100">
                                        <i class="fas fa-calendar-check me-2"></i>
                                        تسجيل الحضور
                                    </a>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <a href="{{ url_for('admin_add_payment') }}" class="btn btn-warning w-100">
                                        <i class="fas fa-money-bill-wave me-2"></i>
                                        إضافة دفعة
                                    </a>
                                </div>
                                <div class="col-lg-3 col-md-6">
                                    <a href="{{ url_for('admin_add_program') }}" class="btn btn-info w-100">
                                        <i class="fas fa-clipboard-list me-2"></i>
                                        إضافة نشاط
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Recent Activities -->
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-clock me-2"></i>
                                آخر الأنشطة
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="timeline">
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-success"></div>
                                    <div class="timeline-content">
                                        <h6 class="mb-1">تم تسجيل حضور اليوم</h6>
                                        <p class="text-muted mb-0">{{ stats.present_today }} طفل حاضر اليوم</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-info"></div>
                                    <div class="timeline-content">
                                        <h6 class="mb-1">إجمالي الأطفال المسجلين</h6>
                                        <p class="text-muted mb-0">{{ stats.total_children }} طفل في الروضة</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-warning"></div>
                                    <div class="timeline-content">
                                        <h6 class="mb-1">فريق العمل</h6>
                                        <p class="text-muted mb-0">{{ stats.total_teachers }} معلم و {{ stats.total_parents }} ولي أمر</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.timeline {
    position: relative;
    padding-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

.timeline-marker {
    position: absolute;
    left: -35px;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: -30px;
    top: 17px;
    width: 2px;
    height: calc(100% + 5px);
    background-color: #dee2e6;
}
</style>
{% endblock %}