- version : 0.3

- description : make the UI with arabic and trying to add importing from
  .csv feature .

.gitignore

@@ -1 +1,2 @@
 __pycache__
+students.db

app.py

@@ -1,26 +1,28 @@
 import sqlite3
+import csv
+import io
+# The 'flash' import is no longer needed
 from flask import Flask, render_template, request, redirect, url_for
 
 # Create a Flask application instance
 app = Flask(__name__)
+# The 'secret_key' is no longer required as we are not using flash/sessions
+# app.secret_key = 'your_super_secret_key_12345'
+
 
 # --- Database Functions ---
 
 def get_db_connection():
     """Creates and returns a connection to the SQLite database."""
     conn = sqlite3.connect('students.db')
-    # Return rows as dictionaries, so we can access columns by name
     conn.row_factory = sqlite3.Row
     return conn
 
 def init_db():
-    """Initializes the database and creates the 'students' table if it doesn't exist."""
+    """Initializes the database. THIS IS ONLY RUN MANUALLY from the command line."""
     conn = get_db_connection()
-    # Use a 'with' statement to automatically handle closing the connection
     with conn:
-        # Drop the table if it exists to ensure the new schema is applied
         conn.execute('DROP TABLE IF EXISTS students')
-        # Create the table with the new, expanded schema
         conn.execute('''
             CREATE TABLE students (
                 id INTEGER PRIMARY KEY AUTOINCREMENT,
@@ -38,10 +40,9 @@ def init_db():
         ''')
     print("Database initialized and 'students' table created with the new schema.")
 
-# Command to initialize the database from the command line: flask init-db
 @app.cli.command('init-db')
 def init_db_command():
-    """Clear existing data and create new tables."""
+    """Clears existing data and creates new tables."""
     init_db()
 
 
@@ -49,43 +50,119 @@ def init_db_command():
 
 @app.route('/')
 def index():
-    """Renders the main page with the list of students."""
+    """Renders the main page and displays any messages passed in the URL."""
+    # Get the message from the URL query parameters
+    message = request.args.get('message', None)
+    category = request.args.get('category', None)
+    
     conn = get_db_connection()
-    # Select all columns to display in the table
     students = conn.execute('SELECT * FROM students ORDER BY id').fetchall()
     conn.close()
-    # The 'students' variable is passed to the HTML template
+    
-    return render_template('index.html', students=students)
+    # Pass the message and students to the template
+    return render_template('index.html', students=students, message=message, category=category)
 
 @app.route('/add', methods=['POST'])
 def add_student():
-    """Handles the form submission for adding a new student."""
+    """Handles the form submission for adding a single new student."""
-    # Get all the new data from the form submitted in index.html
+    try:
-    student_name = request.form['student_name']
+        student_name = request.form['student_name']
-    age = request.form['age']
+        age = request.form['age']
-    parent_name = request.form['parent_name']
+        parent_name = request.form['parent_name']
-    parent_phone_1 = request.form['parent_phone_1']
+        parent_phone_1 = request.form['parent_phone_1']
-    parent_phone_2 = request.form.get('parent_phone_2') # .get() for optional fields
+        parent_phone_2 = request.form.get('parent_phone_2')
-    student_phone = request.form.get('student_phone')   # .get() for optional fields
+        student_phone = request.form.get('student_phone')
-    grade = request.form['grade']
+        grade = request.form['grade']
-    school_name = request.form['school_name']
+        school_name = request.form['school_name']
-    address = request.form['address']
+        address = request.form['address']
-    memorizing = request.form['memorizing']
+        memorizing = request.form['memorizing']
+        
+        if not all([student_name, age, parent_name, parent_phone_1, grade, school_name, address, memorizing]):
+             # Instead of flashing, redirect with a message
+             return redirect(url_for('index', message='الرجاء تعبئة جميع الحقول المطلوبة.', category='danger'))
 
+        conn = get_db_connection()
+        conn.execute('''
+            INSERT INTO students (student_name, age, parent_name, parent_phone_1, parent_phone_2, student_phone, grade, school_name, address, memorizing)
+            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+        ''', (student_name, age, parent_name, parent_phone_1, parent_phone_2, student_phone, grade, school_name, address, memorizing))
+        conn.commit()
+        conn.close()
+        
+        message = 'تمت إضافة الطالب الجديد بنجاح!'
+        category = 'success'
+    except Exception as e:
+        message = f'حدث خطأ أثناء إضافة الطالب: {e}'
+        category = 'danger'
 
-    # Insert the new student record into the database with all fields
+    return redirect(url_for('index', message=message, category=category))
-    conn = get_db_connection()
+
-    conn.execute('''
+@app.route('/import', methods=['POST'])
-        INSERT INTO students (student_name, age, parent_name, parent_phone_1, parent_phone_2, student_phone, grade, school_name, address, memorizing)
+def import_csv():
-        VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+    """Handles CSV import and redirects with a status message in the URL."""
-    ''', (student_name, age, parent_name, parent_phone_1, parent_phone_2, student_phone, grade, school_name, address, memorizing))
+    if 'file' not in request.files or request.files['file'].filename == '':
-    conn.commit()
+        return redirect(url_for('index', message='لم يتم اختيار أي ملف.', category='danger'))
-    conn.close()
+
+    file = request.files['file']
+
+    if file and file.filename.endswith('.csv'):
+        students_to_add = [] # This is our "2D vector"
+        try:
+            stream = io.StringIO(file.stream.read().decode("utf-8-sig"), newline=None)
+            csv_reader = csv.reader(stream)
+            
+            # First, read all rows from CSV into the students_to_add list
+            for i, row in enumerate(csv_reader, start=1):
+                if len(row) != 10:
+                    msg = f'خطأ في ملف CSV في السطر رقم {i}: يجب أن يحتوي السطر على 10 أعمدة.'
+                    return redirect(url_for('index', message=msg, category='danger'))
+                try:
+                    # Validate and prepare the row data
+                    student_data = (
+                        row[0], int(row[1]), row[2], row[3],
+                        row[4] if row[4] else None, row[5] if row[5] else None,
+                        row[6], row[7], row[8], row[9]
+                    )
+                    students_to_add.append(student_data)
+                except ValueError:
+                    msg = f"خطأ في ملف CSV في السطر رقم {i}: يجب أن يكون العمر (العمود الثاني) رقماً."
+                    return redirect(url_for('index', message=msg, category='danger'))
+
+            # If the list was successfully built, proceed to add to the database
+            if students_to_add:
+                conn = get_db_connection()
+                # Use a try/except block for the database operation
+                try:
+                    # Now, loop through the "2D vector" and add each student one by one
+                    for student in students_to_add:
+                        conn.execute('''
+                            INSERT INTO students (student_name, age, parent_name, parent_phone_1, parent_phone_2, student_phone, grade, school_name, address, memorizing)
+                            VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+                        ''', student)
+                    
+                    # If all insertions succeed, commit them to the database
+                    conn.commit()
+                    message = f'تم استيراد وإضافة {len(students_to_add)} طالب بنجاح!'
+                    category = 'success'
+                except sqlite3.Error as e:
+                    # If any error occurs during insertion, the transaction is rolled back automatically
+                    message = f'حدث خطأ في قاعدة البيانات أثناء الإضافة: {e}'
+                    category = 'danger'
+                finally:
+                    # Always close the connection
+                    conn.close()
+            else:
+                message = 'ملف CSV فارغ أو لا يمكن معالجته.'
+                category = 'warning'
+
+        except Exception as e:
+            message = f'حدث خطأ غير متوقع أثناء عملية الاستيراد: {e}'
+            category = 'danger'
+        
+        return redirect(url_for('index', message=message, category=category))
+    else:
+        return redirect(url_for('index', message='صيغة الملف غير صالحة. الرجاء رفع ملف .csv فقط.', category='danger'))
 
-    # Redirect back to the main page to see the updated list
-    return redirect(url_for('index'))
 
 if __name__ == '__main__':
-    # You can remove the init_db() call from here if you are using the flask command
-    # It's good practice to manage the DB initialization separately.
     app.run(debug=True)

templates/index.html

@@ -1,104 +1,150 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Student Information</title>
+    <title>بيانات الطلاب</title>
     <!-- Tailwind CSS for styling -->
     <script src="https://cdn.tailwindcss.com"></script>
-    <!-- Google Fonts: Inter -->
+    <!-- Google Fonts: Cairo for Arabic -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        /* Use Inter as the default font */
+        body { font-family: 'Cairo', sans-serif; }
-        body {
-            font-family: 'Inter', sans-serif;
-        }
     </style>
 </head>
 <body class="bg-gray-50 text-gray-800">
 
     <div class="container mx-auto p-4 sm:p-6 lg:p-8 max-w-6xl">
 
+        <!-- Display Messages passed via URL parameters -->
+        {% if message and category %}
+            <div class="mb-6 space-y-3">
+                {% set bg_color = 'bg-blue-100 border-blue-500 text-blue-700' %}
+                {% if category == 'success' %}{% set bg_color = 'bg-green-100 border-green-500 text-green-700' %}{% endif %}
+                {% if category == 'danger' %}{% set bg_color = 'bg-red-100 border-red-500 text-red-700' %}{% endif %}
+                {% if category == 'warning' %}{% set bg_color = 'bg-yellow-100 border-yellow-500 text-yellow-700' %}{% endif %}
+                <div class="{{ bg_color }} border-r-4 border-l-0 p-4 rounded-md shadow" role="alert">
+                    <p class="font-bold">{{ message }}</p>
+                </div>
+            </div>
+        {% endif %}
+
         <!-- Header -->
         <header class="text-center mb-8">
-            <h1 class="text-3xl sm:text-4xl font-bold text-gray-900">Student Management System</h1>
+            <h1 class="text-3xl sm:text-4xl font-bold text-gray-900">نظام إدارة الطلاب</h1>
-            <p class="text-gray-600 mt-2">Enter and view student details below.</p>
+            <p class="text-gray-600 mt-2">أدخل بيانات الطلاب يدوياً أو قم باستيراد ملف CSV.</p>
         </header>
 
-        <!-- Student Entry Form -->
+        <!-- Manual Add Student Form (Initially Hidden) -->
-        <div class="bg-white p-8 rounded-xl shadow-lg mb-8">
+        <div id="add-student-form" class="bg-white p-8 rounded-xl shadow-lg mb-8 hidden">
-            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-4">Add New Student</h2>
+            <h2 class="text-2xl font-semibold mb-6 text-gray-800 border-b pb-4">إضافة طالب جديد</h2>
-            <form action="/add" method="POST">
+            <form action="{{ url_for('add_student') }}" method="POST">
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-6">
-                    <!-- Column 1 -->
                     <div>
-                        <label for="student_name" class="block text-sm font-medium text-gray-700 mb-1">Student Name</label>
+                        <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" placeholder="Full 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">
+                        <input type="text" name="student_name" id="student_name" placeholder="الاسم الكامل" 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">Age</label>
+                        <label for="age" class="block text-sm font-medium text-gray-700 mb-1">العمر</label>
-                        <input type="number" name="age" id="age" placeholder="e.g., 15" 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">
+                        <input type="number" name="age" id="age" placeholder="مثال: 15" 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">Parent's Name</label>
+                        <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" placeholder="Parent's Full 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">
+                        <input type="text" name="parent_name" id="parent_name" placeholder="الاسم الكامل لولي الأمر" 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">Parent Phone 1 (Required)</label>
+                        <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" placeholder="e.g., 09xxxxxxxx" 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">
+                        <input type="tel" name="parent_phone_1" id="parent_phone_1" placeholder="مثال: 09xxxxxxxx" 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">Parent Phone 2 (Optional)</label>
+                        <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" placeholder="e.g., 09xxxxxxxx" 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">
+                        <input type="tel" name="parent_phone_2" id="parent_phone_2" placeholder="مثال: 09xxxxxxxx" 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>
-                    <!-- Column 2 -->
-                    <div>
-                        <label for="student_phone" class="block text-sm font-medium text-gray-700 mb-1">Student Phone (Optional)</label>
-                        <input type="tel" name="student_phone" id="student_phone" placeholder="e.g., 09xxxxxxxx" 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">Grade</label>
+                        <label for="student_phone" class="block text-sm font-medium text-gray-700 mb-1">هاتف الطالب (اختياري)</label>
-                        <input type="text" name="grade" id="grade" placeholder="e.g., 10th 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">
+                        <input type="tel" name="student_phone" id="student_phone" placeholder="مثال: 09xxxxxxxx" 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">School Name</label>
+                        <label for="grade" class="block text-sm font-medium text-gray-700 mb-1">الصف</label>
-                        <input type="text" name="school_name" id="school_name" placeholder="e.g., Future Generation High" 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">
+                        <input type="text" name="grade" id="grade" placeholder="مثال: الصف العاشر" 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="address" class="block text-sm font-medium text-gray-700 mb-1">Address</label>
+                        <label for="school_name" class="block text-sm font-medium text-gray-700 mb-1">اسم المدرسة</label>
-                        <input type="text" name="address" id="address" placeholder="Street, City" 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">
+                        <input type="text" name="school_name" id="school_name" placeholder="مثال: مدرسة المستقبل" 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="address" class="block text-sm font-medium text-gray-700 mb-1">العنوان</label>
+                        <input type="text" name="address" id="address" placeholder="الشارع، المدينة" 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="memorizing" class="block text-sm font-medium text-gray-700 mb-1">Memorizing</label>
+                        <label for="memorizing" class="block text-sm font-medium text-gray-700 mb-1">المحفوظات</label>
-                        <input type="text" name="memorizing" id="memorizing" placeholder="e.g., Quran, Part 30" 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">
+                        <input type="text" name="memorizing" id="memorizing" placeholder="مثال: القرآن، جزء عم" 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-right">
+                <div class="mt-8 text-left">
-                    <button type="submit" 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 duration-200 ease-in-out">
+                    <button type="submit" 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">
-                        Add Student Record
+                        حفظ بيانات الطالب
                     </button>
                 </div>
             </form>
         </div>
+        
+        <!-- CSV Import Section -->
+        <div class="bg-white p-6 rounded-xl shadow-lg mb-8">
+            <h2 class="text-2xl font-semibold mb-4 text-gray-800 border-b pb-4">استيراد من ملف CSV</h2>
+             <div class="bg-yellow-50 border border-yellow-200 text-yellow-800 text-sm p-4 rounded-lg mt-4">
+                <p class="font-bold">هام: تنسيق ملف CSV</p>
+                <p>يجب أن يكون الملف بصيغة CSV ومرمّزاً بترميز UTF-8.</p>
+                <p>يجب **ألا يحتوي** الملف على صف للعناوين، ويجب أن تكون الأعمدة بالترتيب الدقيق التالي:</p>
+                <p class="mt-2" style="direction: ltr; text-align: right;">
+                  <code class="text-xs font-mono">اسم الطالب, العمر, اسم ولي الأمر, هاتف ولي الأمر 1, هاتف ولي الأمر 2, هاتف الطالب, الصف, اسم المدرسة, العنوان, المحفوظات</code>
+                </p>
+                <p>إذا كانت الحقول الاختيارية (هاتف ولي الأمر 2، هاتف الطالب) فارغة، اتركها كذلك.</p>
+            </div>
+             <div class="mt-6 text-left">
+                <form id="import-form" action="{{ url_for('import_csv') }}" method="POST" enctype="multipart/form-data">
+                    <!-- Hidden file input -->
+                    <input type="file" name="file" id="csv-file-input" class="hidden" required accept=".csv">
+
+                    <!-- Button to trigger file selection -->
+                    <button type="button" id="choose-file-button" class="px-8 py-3 bg-green-600 text-white font-semibold rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all">
+                        اختر ملف
+                    </button>
+
+                    <!-- Span to display the selected file name -->
+                    <span id="file-name-display" class="hidden ml-4 text-gray-700"></span>
+
+                    <!-- Submit button, initially hidden -->
+                    <button type="submit" id="submit-import-button" class="hidden 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>
+                </form>
+            </div>
+        </div>
 
         <!-- Student List Table -->
         <div class="bg-white p-6 rounded-xl shadow-lg">
-             <h2 class="text-2xl font-semibold mb-4 text-gray-800">Registered Students</h2>
+             <div class="flex justify-between items-center mb-4 pb-4 border-b">
+                <h2 class="text-2xl font-semibold text-gray-800">الطلاب المسجلون</h2>
+                <button id="add-manually-button" class="px-6 py-2 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>
+             </div>
              <div class="overflow-x-auto">
-                <table class="min-w-full divide-y divide-gray-200">
+                <table class="min-w-full divide-y divide-gray-200 text-right">
                     <thead class="bg-gray-50">
                         <tr>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
+                            <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Student Name</th>
+                            <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">اسم الطالب</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Age</th>
+                            <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">العمر</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Parent</th>
+                            <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">ولي الأمر</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Contact Numbers</th>
+                            <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">أرقام التواصل</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Grade</th>
+                            <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">الصف</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">School</th>
+                            <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">المدرسة</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
+                            <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">العنوان</th>
-                            <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Memorizing</th>
+                            <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">المحفوظات</th>
                         </tr>
                     </thead>
                     <tbody class="bg-white divide-y divide-gray-200">
@@ -110,9 +156,9 @@
                             <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ student['parent_name'] }}</td>
                             <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                                 <div class="flex flex-col">
-                                   <span>P1: {{ student['parent_phone_1'] }}</span>
+                                   <span>ولي الأمر 1: {{ student['parent_phone_1'] }}</span>
-                                   {% if student['parent_phone_2'] %}<span>P2: {{ student['parent_phone_2'] }}</span>{% endif %}
+                                   {% if student['parent_phone_2'] %}<span>ولي الأمر 2: {{ student['parent_phone_2'] }}</span>{% endif %}
-                                   {% if student['student_phone'] %}<span>S: {{ student['student_phone'] }}</span>{% endif %}
+                                   {% if student['student_phone'] %}<span>الطالب: {{ student['student_phone'] }}</span>{% endif %}
                                 </div>
                             </td>
                             <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ student['grade'] }}</td>
@@ -122,7 +168,7 @@
                         </tr>
                         {% else %}
                         <tr>
-                           <td colspan="9" class="text-center py-6 text-gray-500">No students have been added yet.</td>
+                           <td colspan="9" class="text-center py-6 text-gray-500">لم تتم إضافة أي طالب بعد.</td>
                         </tr>
                         {% endfor %}
                     </tbody>
@@ -131,5 +177,41 @@
         </div>
 
     </div>
+
+    <script>
+        // Get references to all necessary elements
+        const csvFileInput = document.getElementById('csv-file-input');
+        const chooseFileButton = document.getElementById('choose-file-button');
+        const submitImportButton = document.getElementById('submit-import-button');
+        const fileNameDisplay = document.getElementById('file-name-display');
+        const addManuallyButton = document.getElementById('add-manually-button');
+        const addStudentForm = document.getElementById('add-student-form');
+
+        // When the "Choose File" button is clicked, trigger the hidden file input
+        chooseFileButton.addEventListener('click', () => {
+            csvFileInput.click();
+        });
+
+        // When a file is selected in the hidden input...
+        csvFileInput.addEventListener('change', () => {
+            if (csvFileInput.files.length > 0) {
+                // Get the name of the selected file
+                const fileName = csvFileInput.files[0].name;
+                fileNameDisplay.textContent = `الملف المختار: ${fileName}`;
+                
+                // Show the file name and the submit button
+                fileNameDisplay.classList.remove('hidden');
+                submitImportButton.classList.remove('hidden');
+                
+                // Hide the original "Choose File" button
+                chooseFileButton.classList.add('hidden');
+            }
+        });
+
+        // Toggle the visibility of the "Add New Student" form
+        addManuallyButton.addEventListener('click', () => {
+            addStudentForm.classList.toggle('hidden');
+        });
+    </script>
 </body>
 </html>