{% extends "base.html" %}

{% block title %}الصفحة الرئيسية - نظام إدارة روضة الأطفال{% endblock %}

{% block content %}
<div class="container my-5">
    <!-- Hero Section -->
    <div class="row justify-content-center mb-5">
        <div class="col-lg-8 text-center">
            <div class="card border-0 shadow-lg" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                <div class="card-body py-5">
                    <i class="fas fa-child fa-4x mb-4"></i>
                    <h1 class="display-4 fw-bold mb-3">نظام إدارة روضة الأطفال</h1>
                    <p class="lead mb-4">منصة شاملة لإدارة جميع أنشطة الروضة بكفاءة وسهولة</p>
                    <div class="row g-3 justify-content-center">
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x"></i>
                            <p class="mt-2 mb-0">إدارة الأطفال</p>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-calendar-check fa-2x"></i>
                            <p class="mt-2 mb-0">متابعة الحضور</p>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-money-bill-wave fa-2x"></i>
                            <p class="mt-2 mb-0">إدارة المدفوعات</p>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-clipboard-list fa-2x"></i>
                            <p class="mt-2 mb-0">الأنشطة والبرامج</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Login Portals -->
    <div class="row g-4 justify-content-center">
        <!-- Admin Portal -->
        <div class="col-lg-4 col-md-6">
            <div class="card h-100 border-0 shadow">
                <div class="card-body text-center p-4">
                    <div class="mb-4">
                        <i class="fas fa-user-shield fa-4x text-primary"></i>
                    </div>
                    <h3 class="card-title fw-bold mb-3">بوابة الإدارة</h3>
                    <p class="card-text text-muted mb-4">
                        إدارة شاملة للروضة تشمل الأطفال والمعلمين والأنشطة والتقارير المالية
                    </p>
                    <ul class="list-unstyled text-start mb-4">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>إدارة بيانات الأطفال</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>متابعة الحضور والغياب</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>إدارة المدفوعات</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>التقارير والإحصائيات</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>إدارة المستخدمين</li>
                    </ul>
                    <a href="{{ url_for('login') }}" class="btn btn-primary btn-lg w-100">
                        <i class="fas fa-sign-in-alt me-2"></i>
                        دخول الإدارة
                    </a>
                </div>
            </div>
        </div>

        <!-- Teacher Portal -->
        <div class="col-lg-4 col-md-6">
            <div class="card h-100 border-0 shadow">
                <div class="card-body text-center p-4">
                    <div class="mb-4">
                        <i class="fas fa-chalkboard-teacher fa-4x text-success"></i>
                    </div>
                    <h3 class="card-title fw-bold mb-3">بوابة المعلمين</h3>
                    <p class="card-text text-muted mb-4">
                        أدوات خاصة بالمعلمين لمتابعة الأطفال وتسجيل الحضور والأنشطة اليومية
                    </p>
                    <ul class="list-unstyled text-start mb-4">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>قائمة أطفال القسم</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>تسجيل الحضور اليومي</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>إضافة تقارير الأطفال</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>متابعة الأنشطة</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>التواصل مع الإدارة</li>
                    </ul>
                    <a href="{{ url_for('login') }}" class="btn btn-success btn-lg w-100">
                        <i class="fas fa-sign-in-alt me-2"></i>
                        دخول المعلمين
                    </a>
                </div>
            </div>
        </div>

        <!-- Parent Portal -->
        <div class="col-lg-4 col-md-6">
            <div class="card h-100 border-0 shadow">
                <div class="card-body text-center p-4">
                    <div class="mb-4">
                        <i class="fas fa-heart fa-4x text-warning"></i>
                    </div>
                    <h3 class="card-title fw-bold mb-3">بوابة أولياء الأمور</h3>
                    <p class="card-text text-muted mb-4">
                        متابعة شاملة لأطفالكم من حضور وأنشطة ومدفوعات والتواصل مع الروضة
                    </p>
                    <ul class="list-unstyled text-start mb-4">
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>بيانات الطفل</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>سجل الحضور والغياب</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>الأنشطة والبرامج</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>الوضع المالي</li>
                        <li class="mb-2"><i class="fas fa-check text-success me-2"></i>التواصل مع الإدارة</li>
                    </ul>
                    <a href="{{ url_for('login') }}" class="btn btn-warning btn-lg w-100">
                        <i class="fas fa-sign-in-alt me-2"></i>
                        دخول أولياء الأمور
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Features Section -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 shadow">
                <div class="card-body p-5">
                    <h2 class="text-center mb-5 fw-bold">مميزات النظام</h2>
                    <div class="row g-4">
                        <div class="col-lg-3 col-md-6 text-center">
                            <div class="p-3">
                                <i class="fas fa-mobile-alt fa-3x text-primary mb-3"></i>
                                <h5 class="fw-bold">متجاوب</h5>
                                <p class="text-muted">يعمل على جميع الأجهزة</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 text-center">
                            <div class="p-3">
                                <i class="fas fa-shield-alt fa-3x text-success mb-3"></i>
                                <h5 class="fw-bold">آمن</h5>
                                <p class="text-muted">حماية عالية للبيانات</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 text-center">
                            <div class="p-3">
                                <i class="fas fa-chart-line fa-3x text-info mb-3"></i>
                                <h5 class="fw-bold">تقارير</h5>
                                <p class="text-muted">إحصائيات شاملة</p>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-6 text-center">
                            <div class="p-3">
                                <i class="fas fa-clock fa-3x text-warning mb-3"></i>
                                <h5 class="fw-bold">سريع</h5>
                                <p class="text-muted">أداء عالي وسرعة</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Contact Info -->
    <div class="row mt-5">
        <div class="col-12">
            <div class="card border-0 shadow text-center">
                <div class="card-body p-4">
                    <h4 class="fw-bold mb-3">للمساعدة والدعم الفني</h4>
                    <p class="text-muted mb-3">فريق الدعم متاح لمساعدتكم في أي وقت</p>
                    <div class="row justify-content-center">
                        <div class="col-auto">
                            <i class="fas fa-phone text-primary me-2"></i>
                            <span>+966 50 123 4567</span>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-envelope text-success me-2"></i>
                            <span>support@kidro.com</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}