{% extends "base.html" %}

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

{% block content %}
<div class="container-fluid">
    <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-heart me-2"></i>
                    لوحة ولي الأمر
                </h5>
                <nav class="nav flex-column">
                    <a class="nav-link active" href="{{ url_for('parent_dashboard') }}">
                        <i class="fas fa-tachometer-alt me-2"></i>الرئيسية
                    </a>
                    <a class="nav-link" href="{{ url_for('parent_messages') }}">
                        <i class="fas fa-envelope me-2"></i>الرسائل
                    </a>
                    <a class="nav-link" href="{{ url_for('parent_send_message') }}">
                        <i class="fas fa-paper-plane 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">مرحباً {{ session.name }}</h2>
                        <p class="text-muted">متابعة أطفالك في الروضة</p>
                    </div>
                </div>

                <!-- Children Cards -->
                {% if children %}
                <div class="row g-4 mb-5">
                    {% for child in children %}
                    <div class="col-lg-6 col-md-12">
                        <div class="card border-0 shadow-sm h-100">
                            <div class="card-body p-4">
                                <div class="d-flex align-items-center mb-3">
                                    <div class="avatar bg-primary text-white rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 60px; height: 60px; font-size: 1.5rem;">
                                        {{ child.name[0] }}
                                    </div>
                                    <div>
                                        <h4 class="fw-bold mb-1">{{ child.name }}</h4>
                                        <p class="text-muted mb-0">{{ child.age }} سنوات - {{ child.class }}</p>
                                    </div>
                                </div>
                                
                                <div class="row text-center mb-3">
                                    <div class="col-4">
                                        <div class="p-2">
                                            <i class="fas fa-calendar-check fa-2x text-success mb-2"></i>
                                            <h6 class="fw-bold text-success">الحضور</h6>
                                            <small class="text-muted">ممتاز</small>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="p-2">
                                            <i class="fas fa-star fa-2x text-warning mb-2"></i>
                                            <h6 class="fw-bold text-warning">الأداء</h6>
                                            <small class="text-muted">جيد جداً</small>
                                        </div>
                                    </div>
                                    <div class="col-4">
                                        <div class="p-2">
                                            <i class="fas fa-heart fa-2x text-danger mb-2"></i>
                                            <h6 class="fw-bold text-danger">الصحة</h6>
                                            <small class="text-muted">
                                                {% if child.health_info %}
                                                    يوجد ملاحظات
                                                {% else %}
                                                    ممتاز
                                                {% endif %}
                                            </small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="d-grid">
                                    <a href="{{ url_for('parent_child_details', child_id=child.id) }}" class="btn btn-primary">
                                        <i class="fas fa-eye me-2"></i>
                                        عرض التفاصيل الكاملة
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                {% else %}
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body text-center py-5">
                                <i class="fas fa-users fa-3x text-muted mb-3"></i>
                                <h5 class="text-muted">لا توجد أطفال مسجلين</h5>
                                <p class="text-muted">يرجى التواصل مع الإدارة لربط أطفالك بحسابك</p>
                                <a href="{{ url_for('parent_send_message') }}" class="btn btn-primary">
                                    <i class="fas fa-envelope me-2"></i>
                                    التواصل مع الإدارة
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

                <!-- 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('parent_messages') }}" class="btn btn-outline-primary w-100">
                                            <i class="fas fa-envelope me-2"></i>
                                            عرض الرسائل
                                        </a>
                                    </div>
                                    <div class="col-lg-3 col-md-6">
                                        <a href="{{ url_for('parent_send_message') }}" class="btn btn-outline-success w-100">
                                            <i class="fas fa-paper-plane me-2"></i>
                                            إرسال رسالة
                                        </a>
                                    </div>
                                    <div class="col-lg-3 col-md-6">
                                        <button class="btn btn-outline-info w-100" onclick="viewNotifications()">
                                            <i class="fas fa-bell me-2"></i>
                                            الإشعارات
                                        </button>
                                    </div>
                                    <div class="col-lg-3 col-md-6">
                                        <button class="btn btn-outline-warning w-100" onclick="downloadReport()">
                                            <i class="fas fa-download me-2"></i>
                                            تحميل تقرير
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Important Announcements -->
                <div class="row">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-header">
                                <h6 class="mb-0">
                                    <i class="fas fa-bullhorn me-2"></i>
                                    إعلانات مهمة
                                </h6>
                            </div>
                            <div class="card-body">
                                <div class="alert alert-info border-0">
                                    <div class="d-flex">
                                        <i class="fas fa-info-circle fa-2x text-info me-3"></i>
                                        <div>
                                            <h6 class="fw-bold">إجازة منتصف الفصل</h6>
                                            <p class="mb-0">ستبدأ إجازة منتصف الفصل يوم الخميس القادم ولمدة أسبوع. نتمنى لأطفالكم إجازة سعيدة!</p>
                                            <small class="text-muted">منذ يومين</small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="alert alert-success border-0">
                                    <div class="d-flex">
                                        <i class="fas fa-calendar-alt fa-2x text-success me-3"></i>
                                        <div>
                                            <h6 class="fw-bold">يوم مفتوح للأهالي</h6>
                                            <p class="mb-0">ندعوكم لحضور اليوم المفتوح يوم السبت القادم من الساعة 9 صباحاً حتى 12 ظهراً.</p>
                                            <small class="text-muted">منذ 3 أيام</small>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="alert alert-warning border-0">
                                    <div class="d-flex">
                                        <i class="fas fa-exclamation-triangle fa-2x text-warning me-3"></i>
                                        <div>
                                            <h6 class="fw-bold">تحديث أوقات الدوام</h6>
                                            <p class="mb-0">تم تعديل أوقات الدوام لتبدأ من الساعة 7:30 صباحاً بدلاً من 8:00 صباحاً.</p>
                                            <small class="text-muted">منذ أسبوع</small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Notifications Modal -->
<div class="modal fade" id="notificationsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">الإشعارات</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="notificationsBody">
                <!-- Content will be loaded here -->
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function viewNotifications() {
    document.getElementById('notificationsBody').innerHTML = `
        <div class="list-group list-group-flush">
            <div class="list-group-item d-flex align-items-start">
                <i class="fas fa-check-circle text-success fa-2x me-3 mt-1"></i>
                <div>
                    <h6 class="fw-bold mb-1">تم تسجيل حضور طفلك اليوم</h6>
                    <p class="mb-1 text-muted">وصل طفلك إلى الروضة في الوقت المحدد</p>
                    <small class="text-muted">منذ ساعتين</small>
                </div>
            </div>
            <div class="list-group-item d-flex align-items-start">
                <i class="fas fa-star text-warning fa-2x me-3 mt-1"></i>
                <div>
                    <h6 class="fw-bold mb-1">تقييم ممتاز في النشاط</h6>
                    <p class="mb-1 text-muted">حصل طفلك على تقييم ممتاز في نشاط الرسم</p>
                    <small class="text-muted">أمس</small>
                </div>
            </div>
            <div class="list-group-item d-flex align-items-start">
                <i class="fas fa-calendar text-info fa-2x me-3 mt-1"></i>
                <div>
                    <h6 class="fw-bold mb-1">نشاط جديد مجدول</h6>
                    <p class="mb-1 text-muted">تم جدولة نشاط الموسيقى لغد</p>
                    <small class="text-muted">منذ يومين</small>
                </div>
            </div>
        </div>
    `;
    
    const modal = new bootstrap.Modal(document.getElementById('notificationsModal'));
    modal.show();
}

function downloadReport() {
    alert('سيتم تحميل التقرير الشهري لطفلك قريباً');
}
</script>
{% endblock %}