{% 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" 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 active" 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">
            <!-- Header -->
            <div class="row mb-4">
                <div class="col-md-8">
                    <h2 class="fw-bold mb-2">الأنشطة والبرامج</h2>
                    <p class="text-muted">
                        {% if assigned_class %}
                            الأنشطة المجدولة لقسم {{ assigned_class }}
                        {% else %}
                            الأنشطة والبرامج المتاحة
                        {% endif %}
                    </p>
                </div>
                <div class="col-md-4 text-end">
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-outline-primary" onclick="filterPrograms('today')">
                            <i class="fas fa-calendar-day me-2"></i>
                            اليوم
                        </button>
                        <button type="button" class="btn btn-outline-info" onclick="filterPrograms('week')">
                            <i class="fas fa-calendar-week me-2"></i>
                            هذا الأسبوع
                        </button>
                    </div>
                </div>
            </div>

            <!-- Programs List -->
            {% if programs %}
            <div class="row" id="programsList">
                {% for program in programs %}
                <div class="col-lg-6 mb-4 program-card" data-date="{{ program.program_date }}">
                    <div class="card border-start border-primary border-4 h-100">
                        <div class="card-body">
                            <div class="d-flex justify-content-between align-items-start mb-3">
                                <div>
                                    <h5 class="fw-bold mb-2">{{ program.title }}</h5>
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-calendar text-primary me-2"></i>
                                        <span class="text-muted">{{ program.program_date }}</span>
                                    </div>
                                    <div class="d-flex align-items-center mb-2">
                                        <i class="fas fa-users text-success me-2"></i>
                                        <span class="text-muted">
                                            {% if program.class == 'all' %}
                                                جميع الأقسام
                                            {% else %}
                                                {{ program.class }}
                                            {% endif %}
                                        </span>
                                    </div>
                                </div>
                                <div class="text-end">
                                    {% set days_diff = ((program.program_date | string)[:10] | strptime('%Y-%m-%d') - (moment().strftime('%Y-%m-%d') | strptime('%Y-%m-%d'))).days %}
                                    {% if days_diff == 0 %}
                                        <span class="badge bg-success">اليوم</span>
                                    {% elif days_diff == 1 %}
                                        <span class="badge bg-warning">غداً</span>
                                    {% elif days_diff > 1 %}
                                        <span class="badge bg-info">قادم</span>
                                    {% else %}
                                        <span class="badge bg-secondary">منتهي</span>
                                    {% endif %}
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <p class="text-muted mb-0">{{ program.description[:100] }}{% if program.description|length > 100 %}...{% endif %}</p>
                            </div>
                            
                            <div class="d-flex justify-content-between align-items-center">
                                <button class="btn btn-outline-primary btn-sm" onclick="viewProgram({{ program.id }})">
                                    <i class="fas fa-eye me-1"></i>
                                    عرض التفاصيل
                                </button>
                                <button class="btn btn-outline-success btn-sm" onclick="markCompleted({{ program.id }})">
                                    <i class="fas fa-check me-1"></i>
                                    تم التنفيذ
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="fas fa-clipboard-list fa-3x text-muted mb-3"></i>
                    <h5 class="text-muted">لا توجد أنشطة مجدولة</h5>
                    <p class="text-muted">
                        {% if assigned_class %}
                            لا توجد أنشطة مجدولة لقسم {{ assigned_class }} حالياً
                        {% else %}
                            لا توجد أنشطة متاحة حالياً
                        {% endif %}
                    </p>
                </div>
            </div>
            {% endif %}

            <!-- Activity Planning Tips -->
            <div class="row mt-5">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header">
                            <h6 class="mb-0">
                                <i class="fas fa-lightbulb me-2"></i>
                                نصائح لتنفيذ الأنشطة
                            </h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <div class="text-center p-3">
                                        <i class="fas fa-clock fa-2x text-primary mb-3"></i>
                                        <h6 class="fw-bold">إدارة الوقت</h6>
                                        <p class="text-muted small">خطط للنشاط مسبقاً وحدد الوقت المناسب لكل جزء</p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="text-center p-3">
                                        <i class="fas fa-users fa-2x text-success mb-3"></i>
                                        <h6 class="fw-bold">مشاركة الأطفال</h6>
                                        <p class="text-muted small">تأكد من مشاركة جميع الأطفال في النشاط</p>
                                    </div>
                                </div>
                                <div class="col-md-4">
                                    <div class="text-center p-3">
                                        <i class="fas fa-shield-alt fa-2x text-warning mb-3"></i>
                                        <h6 class="fw-bold">السلامة أولاً</h6>
                                        <p class="text-muted small">تأكد من سلامة الأدوات والبيئة المحيطة</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Program Details Modal -->
<div class="modal fade" id="programModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <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="programModalBody">
                <!-- Content will be loaded here -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                <button type="button" class="btn btn-success" onclick="markCompleted()">
                    <i class="fas fa-check me-2"></i>
                    تم التنفيذ
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function filterPrograms(filter) {
    const cards = document.querySelectorAll('.program-card');
    const today = new Date();
    const todayStr = today.toISOString().split('T')[0];
    
    // Calculate week start (assuming week starts on Sunday)
    const weekStart = new Date(today);
    weekStart.setDate(today.getDate() - today.getDay());
    const weekEnd = new Date(weekStart);
    weekEnd.setDate(weekStart.getDate() + 6);
    
    cards.forEach(card => {
        const programDate = card.getAttribute('data-date');
        let show = true;
        
        if (filter === 'today') {
            show = programDate === todayStr;
        } else if (filter === 'week') {
            const progDate = new Date(programDate);
            show = progDate >= weekStart && progDate <= weekEnd;
        }
        
        card.style.display = show ? 'block' : 'none';
    });
    
    // Update active button
    document.querySelectorAll('.btn-group .btn').forEach(btn => {
        btn.classList.remove('active');
    });
    event.target.classList.add('active');
}

function viewProgram(programId) {
    document.getElementById('programModalBody').innerHTML = `
        <div class="text-center">
            <i class="fas fa-spinner fa-spin fa-2x"></i>
            <p class="mt-2">جاري تحميل تفاصيل النشاط...</p>
        </div>
    `;
    
    const modal = new bootstrap.Modal(document.getElementById('programModal'));
    modal.show();
    
    // Simulate loading program details
    setTimeout(() => {
        document.getElementById('programModalBody').innerHTML = `
            <div class="card border-0">
                <div class="card-body">
                    <div class="text-center mb-4">
                        <i class="fas fa-clipboard-list fa-3x text-primary mb-3"></i>
                        <h4 class="fw-bold">نشاط الرسم والتلوين</h4>
                        <span class="badge bg-success">اليوم</span>
                    </div>
                    
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <h6 class="fw-bold text-primary">معلومات النشاط</h6>
                            <p><strong>التاريخ:</strong> ${new Date().toLocaleDateString('ar-SA')}</p>
                            <p><strong>القسم:</strong> الروضة الأولى</p>
                            <p><strong>المدة المتوقعة:</strong> 45 دقيقة</p>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold text-success">الأهداف التعليمية</h6>
                            <ul class="list-unstyled">
                                <li><i class="fas fa-check text-success me-2"></i>تنمية الإبداع</li>
                                <li><i class="fas fa-check text-success me-2"></i>تعلم الألوان</li>
                                <li><i class="fas fa-check text-success me-2"></i>تطوير المهارات الحركية</li>
                            </ul>
                        </div>
                    </div>
                    
                    <div class="mb-4">
                        <h6 class="fw-bold text-info">وصف النشاط</h6>
                        <p class="text-muted">
                            نشاط فني يهدف إلى تنمية الإبداع والخيال لدى الأطفال من خلال الرسم والتلوين.
                            سيتعلم الأطفال كيفية استخدام الألوان المختلفة وتطوير مهاراتهم الحركية الدقيقة.
                        </p>
                    </div>
                    
                    <div class="mb-4">
                        <h6 class="fw-bold text-warning">المواد المطلوبة</h6>
                        <div class="row">
                            <div class="col-md-6">
                                <ul class="list-unstyled">
                                    <li><i class="fas fa-circle text-primary me-2"></i>أوراق رسم</li>
                                    <li><i class="fas fa-circle text-success me-2"></i>أقلام تلوين</li>
                                </ul>
                            </div>
                            <div class="col-md-6">
                                <ul class="list-unstyled">
                                    <li><i class="fas fa-circle text-warning me-2"></i>ألوان مائية</li>
                                    <li><i class="fas fa-circle text-info me-2"></i>فرش رسم</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="alert alert-info">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>ملاحظة:</strong> تأكد من توفر جميع المواد قبل بدء النشاط وحافظ على نظافة المكان.
                    </div>
                </div>
            </div>
        `;
    }, 1000);
}

function markCompleted(programId) {
    if (confirm('هل تم تنفيذ هذا النشاط بنجاح؟')) {
        // In a real application, this would update the program status
        alert('تم تسجيل النشاط كمنفذ بنجاح!');
        
        // Close modal if open
        const modal = bootstrap.Modal.getInstance(document.getElementById('programModal'));
        if (modal) {
            modal.hide();
        }
    }
}

// Initialize with today's programs
document.addEventListener('DOMContentLoaded', function() {
    // Auto-select today's filter
    const todayBtn = document.querySelector('[onclick="filterPrograms(\'today\')"]');
    if (todayBtn) {
        todayBtn.classList.add('active');
        filterPrograms('today');
    }
});
</script>
{% endblock %}