{% 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 active" 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" 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_children') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-right me-2"></i>
                        العودة للقائمة
                    </a>
                </div>
            </div>

            <!-- Add Child Form -->
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-user-plus me-2"></i>
                        بيانات الطفل
                    </h5>
                </div>
                <div class="card-body">
                    <form method="POST">
                        <div class="row">
                            <!-- Child Name -->
                            <div class="col-md-6 mb-3">
                                <label for="name" class="form-label fw-bold">
                                    <i class="fas fa-user me-2"></i>اسم الطفل
                                </label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>

                            <!-- Age -->
                            <div class="col-md-6 mb-3">
                                <label for="age" class="form-label fw-bold">
                                    <i class="fas fa-birthday-cake me-2"></i>العمر
                                </label>
                                <select class="form-select" id="age" name="age" required>
                                    <option value="">اختر العمر</option>
                                    <option value="3">3 سنوات</option>
                                    <option value="4">4 سنوات</option>
                                    <option value="5">5 سنوات</option>
                                    <option value="6">6 سنوات</option>
                                </select>
                            </div>

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

                            <!-- Parent -->
                            <div class="col-md-6 mb-3">
                                <label for="parent_id" class="form-label fw-bold">
                                    <i class="fas fa-heart me-2"></i>ولي الأمر
                                </label>
                                <select class="form-select" id="parent_id" name="parent_id">
                                    <option value="">اختر ولي الأمر (اختياري)</option>
                                    {% for parent in parents %}
                                    <option value="{{ parent.id }}">{{ parent.name }}</option>
                                    {% endfor %}
                                </select>
                            </div>

                            <!-- Health Info -->
                            <div class="col-12 mb-3">
                                <label for="health_info" class="form-label fw-bold">
                                    <i class="fas fa-heartbeat me-2"></i>الحالة الصحية والملاحظات
                                </label>
                                <textarea class="form-control" id="health_info" name="health_info" rows="4" 
                                          placeholder="أدخل أي ملاحظات صحية أو حساسية أو احتياجات خاصة للطفل..."></textarea>
                                <div class="form-text">اتركه فارغاً إذا كان الطفل سليماً ولا يوجد ملاحظات</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_children') }}" class="btn btn-outline-danger">
                                        <i class="fas fa-times me-2"></i>
                                        إلغاء
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Help Section -->
            <div class="card mt-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-info-circle 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-warning">الحالة الصحية</h6>
                            <ul class="list-unstyled">
                                <li class="mb-2">
                                    <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                    اذكر أي حساسية للطعام أو الأدوية
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                    اذكر أي احتياجات خاصة
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-exclamation-triangle text-warning me-2"></i>
                                    هذه المعلومات مهمة لسلامة الطفل
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Form validation
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    
    form.addEventListener('submit', function(e) {
        const name = document.getElementById('name').value.trim();
        const age = document.getElementById('age').value;
        const className = document.getElementById('class').value;
        
        if (!name) {
            e.preventDefault();
            alert('يرجى إدخال اسم الطفل');
            document.getElementById('name').focus();
            return;
        }
        
        if (!age) {
            e.preventDefault();
            alert('يرجى اختيار عمر الطفل');
            document.getElementById('age').focus();
            return;
        }
        
        if (!className) {
            e.preventDefault();
            alert('يرجى اختيار قسم الطفل');
            document.getElementById('class').focus();
            return;
        }
    });
});
</script>
{% endblock %}