{% extends 'template.html' %}

{% block title %}تعديل معلومات الطالب{% endblock %}

{% block content %}
    <header class="text-center">
        <h1 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">تعديل معلومات الطالب</h1>
        
        {# Navigation Bar #}
        <nav class="mb-8">
            <ul class="flex justify-center space-x-4 space-x-reverse bg-white p-2 rounded-full shadow-lg inline-flex">
                <li>
                    <a href="{{ url_for('index') }}" class="text-gray-700 hover:text-blue-700 hover:bg-blue-50 font-medium px-6 py-3 rounded-full transition-all duration-300 ease-in-out hover:shadow-sm transform hover:scale-105">الصفحة الرئيسية</a>
                </li>
                <li>
                    <a href="{{ url_for('record') }}" class="text-gray-700 hover:text-blue-700 hover:bg-blue-50 font-medium px-6 py-3 rounded-full transition-all duration-300 ease-in-out hover:shadow-sm transform hover:scale-105">تسجيل حضور أو حفظ</a>
                </li>
                <li>
                    <a href="{{ url_for('points') }}" class="text-gray-700 hover:text-blue-700 hover:bg-blue-50 font-medium px-6 py-3 rounded-full transition-all duration-300 ease-in-out hover:shadow-sm transform hover:scale-105">النقاط</a>
                </li>
            </ul>
        </nav>
    </header>

    <div class="bg-white p-8 rounded-xl shadow-lg mb-8">
        <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-4">تعديل معلومات الطالب: {{ student.student_name }}</h2>
        <form id="modify-student-form" action="{{ url_for('modify_student', student_id=student.id) }}" method="POST">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
                <div>
                    <label for="student_name" class="block text-sm font-medium text-gray-700 mb-1">اسم الطالب</label>
                    <input type="text" name="student_name" id="student_name" value="{{ student.student_name }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="age" class="block text-sm font-medium text-gray-700 mb-1">العمر</label>
                    <input type="number" name="age" id="age" value="{{ student.age }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="parent_name" class="block text-sm font-medium text-gray-700 mb-1">اسم ولي الأمر</label>
                    <input type="text" name="parent_name" id="parent_name" value="{{ student.parent_name }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="parent_phone_1" class="block text-sm font-medium text-gray-700 mb-1">هاتف ولي الأمر 1 (مطلوب)</label>
                    <input type="tel" name="parent_phone_1" id="parent_phone_1" value="{{ student.parent_phone_1 }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="parent_phone_2" class="block text-sm font-medium text-gray-700 mb-1">هاتف ولي الأمر 2 (اختياري)</label>
                    <input type="tel" name="parent_phone_2" id="parent_phone_2" value="{{ student.parent_phone_2 or '' }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="student_phone" class="block text-sm font-medium text-gray-700 mb-1">هاتف الطالب (اختياري)</label>
                    <input type="tel" name="student_phone" id="student_phone" value="{{ student.student_phone or '' }}" class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="grade" class="block text-sm font-medium text-gray-700 mb-1">الصف</label>
                    <input type="text" name="grade" id="grade" value="{{ student.grade }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label for="school_name" class="block text-sm font-medium text-gray-700 mb-1">اسم المدرسة</label>
                    <input type="text" name="school_name" id="school_name" value="{{ student.school_name }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="md:col-span-2">
                    <label for="address" class="block text-sm font-medium text-gray-700 mb-1">العنوان</label>
                    <input type="text" name="address" id="address" value="{{ student.address }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div class="md:col-span-2">
                    <label for="memorizing" class="block text-sm font-medium text-gray-700 mb-1">المحفوظات</label>
                    <input type="text" name="memorizing" id="memorizing" value="{{ student.memorizing }}" required class="w-full px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
            </div>
            <div class="mt-8 text-left flex space-x-4 space-x-reverse">
                <button type="submit" id="submit-modify-button" class="px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all">
                    حفظ التعديلات
                </button>
                <a href="{{ url_for('index') }}" class="px-8 py-3 bg-gray-300 text-gray-800 font-semibold rounded-lg shadow-md hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition-all">
                    إلغاء
                </a>
            </div>
        </form>
    </div>

    <script>
        // Prevent double submission for the modify form
        const modifyStudentForm = document.getElementById('modify-student-form');
        const submitModifyButton = document.getElementById('submit-modify-button');

        if (modifyStudentForm && submitModifyButton) {
            modifyStudentForm.addEventListener('submit', () => {
                submitModifyButton.disabled = true;
                submitModifyButton.textContent = 'جاري الحفظ...'; // "Saving..."
            });
        }
    </script>
{% endblock %}