{% 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" href="{{ url_for('admin_programs') }}">
                    <i class="fas fa-clipboard-list me-2"></i>الأنشطة والبرامج
                </a>
                <a class="nav-link active" 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_users') }}" class="btn btn-secondary">
                        <i class="fas fa-arrow-right me-2"></i>
                        العودة للقائمة
                    </a>
                </div>
            </div>

            <!-- Add User 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">
                            <!-- Full 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>

                            <!-- Username -->
                            <div class="col-md-6 mb-3">
                                <label for="username" class="form-label fw-bold">
                                    <i class="fas fa-at me-2"></i>اسم المستخدم
                                </label>
                                <input type="text" class="form-control" id="username" name="username" required>
                                <div class="form-text">يجب أن يكون فريداً ولا يحتوي على مسافات</div>
                            </div>

                            <!-- Password -->
                            <div class="col-md-6 mb-3">
                                <label for="password" class="form-label fw-bold">
                                    <i class="fas fa-lock me-2"></i>كلمة المرور
                                </label>
                                <input type="password" class="form-control" id="password" name="password" required>
                                <div class="form-text">يجب أن تكون 6 أحرف على الأقل</div>
                            </div>

                            <!-- Confirm Password -->
                            <div class="col-md-6 mb-3">
                                <label for="confirm_password" class="form-label fw-bold">
                                    <i class="fas fa-lock me-2"></i>تأكيد كلمة المرور
                                </label>
                                <input type="password" class="form-control" id="confirm_password" name="confirm_password" required>
                            </div>

                            <!-- Role Selection -->
                            <div class="col-12 mb-4">
                                <label class="form-label fw-bold">
                                    <i class="fas fa-user-tag me-2"></i>دور المستخدم
                                </label>
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="card border-2" id="teacherCard">
                                            <div class="card-body text-center">
                                                <input type="radio" class="btn-check" name="role" id="teacher" value="teacher">
                                                <label class="w-100" for="teacher">
                                                    <i class="fas fa-chalkboard-teacher fa-3x text-success mb-3"></i>
                                                    <h5 class="fw-bold">معلم</h5>
                                                    <p class="text-muted">يمكنه تسجيل الحضور وإدارة الأطفال في قسمه</p>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="card border-2" id="parentCard">
                                            <div class="card-body text-center">
                                                <input type="radio" class="btn-check" name="role" id="parent" value="parent">
                                                <label class="w-100" for="parent">
                                                    <i class="fas fa-heart fa-3x text-warning mb-3"></i>
                                                    <h5 class="fw-bold">ولي أمر</h5>
                                                    <p class="text-muted">يمكنه متابعة بيانات طفله والتواصل مع الإدارة</p>
                                                </label>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- Teacher-specific fields -->
                            <div id="teacherFields" style="display: none;">
                                <div class="col-12 mb-3">
                                    <div class="card bg-light">
                                        <div class="card-body">
                                            <h6 class="fw-bold mb-3">
                                                <i class="fas fa-chalkboard-teacher me-2"></i>
                                                بيانات المعلم
                                            </h6>
                                            <div class="row">
                                                <div class="col-md-6">
                                                    <label for="assigned_class" class="form-label fw-bold">القسم المخصص</label>
                                                    <select class="form-select" id="assigned_class" name="assigned_class">
                                                        <option value="">اختر القسم (اختياري)</option>
                                                        <option value="التمهيدي">التمهيدي</option>
                                                        <option value="الروضة الأولى">الروضة الأولى</option>
                                                        <option value="الروضة الثانية">الروضة الثانية</option>
                                                        <option value="الروضة الثالثة">الروضة الثالثة</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </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-user-plus 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_users') }}" class="btn btn-outline-danger">
                                        <i class="fas fa-times me-2"></i>
                                        إلغاء
                                    </a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

            <!-- Account Security Tips -->
            <div class="card mt-4">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-shield-alt 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>
                                    استخدم كلمة مرور قوية (6 أحرف على الأقل)
                                </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-info text-info me-2"></i>
                                    يجب أن يكون اسم المستخدم فريداً
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-info text-info me-2"></i>
                                    لا يحتوي على مسافات أو رموز خاصة
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-info text-info me-2"></i>
                                    يُنصح باستخدام الأحرف الإنجليزية
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// Role selection handling
document.addEventListener('DOMContentLoaded', function() {
    const teacherRadio = document.getElementById('teacher');
    const parentRadio = document.getElementById('parent');
    const teacherFields = document.getElementById('teacherFields');
    const teacherCard = document.getElementById('teacherCard');
    const parentCard = document.getElementById('parentCard');
    
    teacherRadio.addEventListener('change', function() {
        if (this.checked) {
            teacherFields.style.display = 'block';
            teacherCard.classList.add('border-success');
            parentCard.classList.remove('border-warning');
        }
    });
    
    parentRadio.addEventListener('change', function() {
        if (this.checked) {
            teacherFields.style.display = 'none';
            parentCard.classList.add('border-warning');
            teacherCard.classList.remove('border-success');
        }
    });
});

// Username validation
document.getElementById('username').addEventListener('input', function() {
    const username = this.value;
    const validPattern = /^[a-zA-Z0-9_]+$/;
    
    if (username && !validPattern.test(username)) {
        this.setCustomValidity('اسم المستخدم يجب أن يحتوي على أحرف إنجليزية وأرقام فقط');
    } else {
        this.setCustomValidity('');
    }
});

// Password confirmation
document.getElementById('confirm_password').addEventListener('input', function() {
    const password = document.getElementById('password').value;
    const confirmPassword = this.value;
    
    if (password !== confirmPassword) {
        this.setCustomValidity('كلمات المرور غير متطابقة');
    } else {
        this.setCustomValidity('');
    }
});

// Form validation
document.querySelector('form').addEventListener('submit', function(e) {
    const name = document.getElementById('name').value.trim();
    const username = document.getElementById('username').value.trim();
    const password = document.getElementById('password').value;
    const confirmPassword = document.getElementById('confirm_password').value;
    const role = document.querySelector('input[name="role"]:checked');
    
    if (!name) {
        e.preventDefault();
        alert('يرجى إدخال الاسم الكامل');
        document.getElementById('name').focus();
        return;
    }
    
    if (!username) {
        e.preventDefault();
        alert('يرجى إدخال اسم المستخدم');
        document.getElementById('username').focus();
        return;
    }
    
    if (password.length < 6) {
        e.preventDefault();
        alert('كلمة المرور يجب أن تكون 6 أحرف على الأقل');
        document.getElementById('password').focus();
        return;
    }
    
    if (password !== confirmPassword) {
        e.preventDefault();
        alert('كلمات المرور غير متطابقة');
        document.getElementById('confirm_password').focus();
        return;
    }
    
    if (!role) {
        e.preventDefault();
        alert('يرجى اختيار دور المستخدم');
        return;
    }
});

// Generate random username suggestion
function generateUsername() {
    const name = document.getElementById('name').value.trim();
    if (name) {
        const firstName = name.split(' ')[0];
        const randomNum = Math.floor(Math.random() * 1000);
        const suggestion = firstName.toLowerCase().replace(/[^a-zA-Z]/g, '') + randomNum;
        document.getElementById('username').value = suggestion;
    }
}

// Add button to generate username
document.getElementById('name').addEventListener('blur', function() {
    if (this.value.trim() && !document.getElementById('username').value) {
        generateUsername();
    }
});
</script>
{% endblock %}