{% 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" 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 active" 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">
            <!-- Header -->
            <div class="row mb-4">
                <div class="col-md-8">
                    <h2 class="fw-bold mb-2">إضافة نشاط جديد</h2>
                    <p class="text-muted">تخطيط نشاط تعليمي أو ترفيهي للأطفال</p>
                </div>
                <div class="col-md-4 text-end">
                    <a href="{{ url_for('admin_programs') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-right me-2"></i>
                        العودة للقائمة
                    </a>
                </div>
            </div>

            <!-- Add Program Form -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-clipboard-list me-2"></i>
                        بيانات النشاط
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="row">
                            <!-- Program Title -->
                            <div class="col-md-8 mb-3">
                                <label for="title" class="form-label fw-bold">
                                    <i class="fas fa-heading me-2"></i>عنوان النشاط
                                </label>
                                <input type="text" class="form-control" id="title" name="title" required>
                            </div>

                            <!-- Program Date -->
                            <div class="col-md-4 mb-3">
                                <label for="program_date" class="form-label fw-bold">
                                    <i class="fas fa-calendar me-2"></i>تاريخ النشاط
                                </label>
                                <input type="date" class="form-control" id="program_date" name="program_date" required>
                            </div>

                            <!-- Class Selection -->
                            <div class="col-md-6 mb-3">
                                <label for="class" class="form-label fw-bold">
                                    <i class="fas fa-users me-2"></i>القسم المستهدف
                                </label>
                                <select class="form-select" id="class" name="class" required>
                                    <option value="">اختر القسم</option>
                                    <option value="all">جميع الأقسام</option>
                                    <option value="التمهيدي">التمهيدي</option>
                                    <option value="الروضة الأولى">الروضة الأولى</option>
                                    <option value="الروضة الثانية">الروضة الثانية</option>
                                    <option value="الروضة الثالثة">الروضة الثالثة</option>
                                </select>
                            </div>

                            <!-- Activity Type -->
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">
                                    <i class="fas fa-tags me-2"></i>نوع النشاط
                                </label>
                                <div class="btn-group w-100" role="group">
                                    <input type="radio" class="btn-check" name="activity_type" id="educational" value="تعليمي">
                                    <label class="btn btn-outline-primary" for="educational">تعليمي</label>

                                    <input type="radio" class="btn-check" name="activity_type" id="recreational" value="ترفيهي">
                                    <label class="btn btn-outline-success" for="recreational">ترفيهي</label>

                                    <input type="radio" class="btn-check" name="activity_type" id="sports" value="رياضي">
                                    <label class="btn btn-outline-info" for="sports">رياضي</label>

                                    <input type="radio" class="btn-check" name="activity_type" id="artistic" value="فني">
                                    <label class="btn btn-outline-warning" for="artistic">فني</label>
                                </div>
                            </div>

                            <!-- Description -->
                            <div class="col-12 mb-3">
                                <label for="description" class="form-label fw-bold">
                                    <i class="fas fa-align-left me-2"></i>وصف النشاط
                                </label>
                                <textarea class="form-control" id="description" name="description" rows="5" 
                                          placeholder="اكتب وصفاً تفصيلياً للنشاط، أهدافه التعليمية، والمواد المطلوبة..." required></textarea>
                            </div>
                        </div>

                        <!-- Quick Templates -->
                        <div class="row mb-4">
                            <div class="col-12">
                                <label class="form-label fw-bold">قوالب سريعة:</label>
                                <div class="btn-group flex-wrap" role="group">
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('drawing')">الرسم والتلوين</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('music')">الموسيقى والغناء</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('story')">قراءة القصص</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('math')">الرياضيات المرحة</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('science')">التجارب العلمية</button>
                                    <button type="button" class="btn btn-outline-secondary btn-sm" onclick="useTemplate('cooking')">الطبخ الصحي</button>
                                </div>
                            </div>
                        </div>

                        <!-- Submit Buttons -->
                        <div class="row">
                            <div class="col-12">
                                <div class="d-flex gap-2">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas fa-save me-2"></i>
                                        حفظ النشاط
                                    </button>
                                    <button type="reset" class="btn btn-outline-secondary">
                                        <i class="fas fa-redo me-2"></i>
                                        إعادة تعيين
                                    </button>
                                    <a href="{{ url_for('admin_programs') }}" class="btn btn-outline-danger">
                                        <i class="fas fa-times me-2"></i>
                                        إلغاء
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Activity Planning Tips -->
            <div class="card mt-4">
                <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-6">
                            <h6 class="fw-bold text-primary">الأنشطة التعليمية</h6>
                            <ul class="list-unstyled">
                                <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>
                        </div>
                        <div class="col-md-6">
                            <h6 class="fw-bold text-success">الأنشطة الترفيهية</h6>
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <i class="fas fa-star text-warning me-2"></i>
                                    اجعل النشاط ممتعاً وتفاعلياً
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-star text-warning me-2"></i>
                                    راعِ الفروق الفردية بين الأطفال
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-star text-warning me-2"></i>
                                    وفر بيئة آمنة ومحفزة
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Set today's date as default
document.addEventListener('DOMContentLoaded', function() {
    const today = new Date().toISOString().split('T')[0];
    document.getElementById('program_date').value = today;
});

// Activity templates
const templates = {
    drawing: {
        title: 'نشاط الرسم والتلوين',
        type: 'فني',
        description: 'نشاط فني يهدف إلى تنمية الإبداع والخيال لدى الأطفال من خلال الرسم والتلوين.\n\nالأهداف:\n- تنمية المهارات الحركية الدقيقة\n- تعزيز الإبداع والخيال\n- تعلم الألوان والأشكال\n\nالمواد المطلوبة:\n- أوراق رسم\n- أقلام تلوين\n- ألوان مائية\n- فرش رسم'
    },
    music: {
        title: 'نشاط الموسيقى والغناء',
        type: 'ترفيهي',
        description: 'نشاط موسيقي يهدف إلى تنمية الحس الموسيقي والتعبير الصوتي لدى الأطفال.\n\nالأهداف:\n- تنمية الحس الموسيقي\n- تعزيز الثقة بالنفس\n- تعلم الإيقاع والنغم\n\nالأنشطة:\n- الغناء الجماعي\n- العزف على آلات بسيطة\n- الحركة مع الموسيقى'
    },
    story: {
        title: 'نشاط قراءة القصص',
        type: 'تعليمي',
        description: 'نشاط تعليمي يهدف إلى تنمية حب القراءة والاستماع لدى الأطفال.\n\nالأهداف:\n- تنمية مهارات الاستماع\n- إثراء المفردات\n- تعزيز الخيال والإبداع\n\nالأنشطة:\n- قراءة القصص التفاعلية\n- مناقشة أحداث القصة\n- رسم شخصيات القصة'
    },
    math: {
        title: 'نشاط الرياضيات المرحة',
        type: 'تعليمي',
        description: 'نشاط تعليمي يهدف إلى تعليم المفاهيم الرياضية الأساسية بطريقة ممتعة.\n\nالأهداف:\n- تعلم الأرقام والعد\n- فهم المفاهيم الرياضية البسيطة\n- تنمية التفكير المنطقي\n\nالأنشطة:\n- ألعاب العد\n- التعرف على الأشكال الهندسية\n- حل الألغاز البسيطة'
    },
    science: {
        title: 'نشاط التجارب العلمية البسيطة',
        type: 'تعليمي',
        description: 'نشاط علمي يهدف إلى تنمية حب الاستطلاع والاكتشاف لدى الأطفال.\n\nالأهداف:\n- تنمية روح الاستطلاع\n- فهم الظواهر الطبيعية البسيطة\n- تعلم المنهج العلمي\n\nالتجارب:\n- تجربة الألوان المختلطة\n- نمو النباتات\n- خصائص الماء'
    },
    cooking: {
        title: 'نشاط الطبخ الصحي',
        type: 'تعليمي',
        description: 'نشاط تعليمي يهدف إلى تعليم الأطفال أهمية الغذاء الصحي.\n\nالأهداف:\n- تعلم أهمية الغذاء الصحي\n- تنمية المهارات الحركية\n- تعزيز روح التعاون\n\nالأنشطة:\n- تحضير وجبات صحية بسيطة\n- تعلم أسماء الخضار والفواكه\n- النظافة أثناء الطبخ'
    }
};

function useTemplate(templateKey) {
    const template = templates[templateKey];
    if (template) {
        document.getElementById('title').value = template.title;
        document.getElementById('description').value = template.description;
        
        // Select the appropriate activity type
        const typeRadio = document.querySelector(`input[name="activity_type"][value="${template.type}"]`);
        if (typeRadio) {
            typeRadio.checked = true;
        }
    }
}

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const title = document.getElementById('title').value.trim();
    const date = document.getElementById('program_date').value;
    const className = document.getElementById('class').value;
    const description = document.getElementById('description').value.trim();
    
    if (!title) {
        e.preventDefault();
        alert('يرجى إدخال عنوان النشاط');
        document.getElementById('title').focus();
        return;
    }
    
    if (!date) {
        e.preventDefault();
        alert('يرجى اختيار تاريخ النشاط');
        document.getElementById('program_date').focus();
        return;
    }
    
    if (!className) {
        e.preventDefault();
        alert('يرجى اختيار القسم المستهدف');
        document.getElementById('class').focus();
        return;
    }
    
    if (!description) {
        e.preventDefault();
        alert('يرجى كتابة وصف للنشاط');
        document.getElementById('description').focus();
        return;
    }
});
</script>
{% endblock %}