{% 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-chalkboard-teacher me-2"></i>
                لوحة المعلم
            </h5>
            <nav class="nav flex-column">
                <a class="nav-link active" href="{{ url_for('teacher_dashboard') }}">
                    <i class="fas fa-tachometer-alt me-2"></i>الرئيسية
                </a>
                <a class="nav-link" href="{{ url_for('teacher_attendance') }}">
                    <i class="fas fa-calendar-check me-2"></i>تسجيل الحضور
                </a>
                <a class="nav-link" href="{{ url_for('teacher_programs') }}">
                    <i class="fas fa-clipboard-list 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">
                        {% if assigned_class %}
                            معلم قسم {{ assigned_class }} - إدارة {{ children|length }} طفل
                        {% else %}
                            معلم في الروضة
                        {% endif %}
                    </p>
                </div>
            </div>

            <!-- Quick Stats -->
            <div class="row g-4 mb-5">
                <div class="col-lg-4 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">{{ children|length }}</h3>
                            <p class="mb-0">أطفال في القسم</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 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">{{ present_today }}</h3>
                            <p class="mb-0">حاضر اليوم</p>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="card stats-card">
                        <div class="card-body text-center">
                            <i class="fas fa-percentage fa-3x mb-3"></i>
                            <h3 class="fw-bold">{{ ((present_today / children|length * 100)|round(1)) if children|length > 0 else 0 }}%</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-4 col-md-6">
                                    <a href="{{ url_for('teacher_attendance') }}" class="btn btn-success w-100">
                                        <i class="fas fa-calendar-check me-2"></i>
                                        تسجيل الحضور اليومي
                                    </a>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <a href="{{ url_for('teacher_programs') }}" class="btn btn-info w-100">
                                        <i class="fas fa-clipboard-list me-2"></i>
                                        عرض الأنشطة
                                    </a>
                                </div>
                                <div class="col-lg-4 col-md-6">
                                    <button class="btn btn-warning w-100" onclick="contactAdmin()">
                                        <i class="fas fa-envelope me-2"></i>
                                        التواصل مع الإدارة
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Children in Class -->
            {% if children %}
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="fas fa-users me-2"></i>
                                أطفال قسم {{ assigned_class }}
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                {% for child in children %}
                                <div class="col-lg-4 col-md-6 mb-3">
                                    <div class="card border-start border-primary border-4">
                                        <div class="card-body p-3">
                                            <div class="d-flex align-items-center">
                                                <div class="avatar bg-primary text-white rounded-circle me-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
                                                    {{ child.name[0] }}
                                                </div>
                                                <div>
                                                    <h6 class="fw-bold mb-1">{{ child.name }}</h6>
                                                    <p class="text-muted mb-1">{{ child.age }} سنوات</p>
                                                    {% if child.health_info %}
                                                        <small class="text-warning">
                                                            <i class="fas fa-exclamation-triangle me-1"></i>
                                                            يوجد ملاحظات صحية
                                                        </small>
                                                    {% else %}
                                                        <small class="text-success">
                                                            <i class="fas fa-check-circle me-1"></i>
                                                            سليم
                                                        </small>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </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>
                            <button class="btn btn-primary" onclick="contactAdmin()">
                                <i class="fas fa-envelope me-2"></i>
                                التواصل مع الإدارة
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- Today's Schedule -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="fas fa-clock me-2"></i>
                                جدول اليوم
                            </h6>
                        </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">8:00 - 8:30 صباحاً</h6>
                                        <p class="text-muted mb-0">استقبال الأطفال وتسجيل الحضور</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-info"></div>
                                    <div class="timeline-content">
                                        <h6 class="mb-1">8:30 - 9:30 صباحاً</h6>
                                        <p class="text-muted mb-0">النشاط التعليمي الأول</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-warning"></div>
                                    <div class="timeline-content">
                                        <h6 class="mb-1">9:30 - 10:00 صباحاً</h6>
                                        <p class="text-muted mb-0">وقت الإفطار والراحة</p>
                                    </div>
                                </div>
                                <div class="timeline-item">
                                    <div class="timeline-marker bg-primary"></div>
                                    <div class="timeline-content">
                                        <h6 class="mb-1">10:00 - 11:00 صباحاً</h6>
                                        <p class="text-muted mb-0">النشاط الترفيهي</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Contact Admin Modal -->
<div class="modal fade" id="contactModal" 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">
                <form>
                    <div class="mb-3">
                        <label for="subject" class="form-label">الموضوع</label>
                        <input type="text" class="form-control" id="subject" placeholder="موضوع الرسالة">
                    </div>
                    <div class="mb-3">
                        <label for="message" class="form-label">الرسالة</label>
                        <textarea class="form-control" id="message" rows="4" placeholder="اكتب رسالتك هنا..."></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إلغاء</button>
                <button type="button" class="btn btn-primary" onclick="sendMessage()">إرسال الرسالة</button>
            </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 %}

{% block extra_js %}
<script>
function contactAdmin() {
    const modal = new bootstrap.Modal(document.getElementById('contactModal'));
    modal.show();
}

function sendMessage() {
    const subject = document.getElementById('subject').value;
    const message = document.getElementById('message').value;
    
    if (!subject || !message) {
        alert('يرجى ملء جميع الحقول');
        return;
    }
    
    // In a real application, this would send the message to the admin
    alert('تم إرسال رسالتك للإدارة بنجاح');
    
    // Close modal and reset form
    bootstrap.Modal.getInstance(document.getElementById('contactModal')).hide();
    document.getElementById('subject').value = '';
    document.getElementById('message').value = '';
}
</script>
{% endblock %}