<?php
require_once 'config.php';

// Start session for evaluator name
session_start();
if (!isset($_SESSION['evaluator_name'])) {
    header("Location: register.php");
    exit();
}
$evaluatorName = htmlspecialchars($_SESSION['evaluator_name'], ENT_QUOTES, 'UTF-8');

$governments = getGovernments($conn);
$selectedGov = isset($_GET['gov_id']) ? intval($_GET['gov_id']) : 0;
$selectedEdara = isset($_GET['edara_id']) ? intval($_GET['edara_id']) : 0;
$selectedSchool = isset($_GET['school_id']) ? intval($_GET['school_id']) : 0;

$edaras = [];
$schools = [];
$schoolData = null;

if ($selectedGov > 0) {
    $edaras = getEdaras($conn, $selectedGov);
}

if ($selectedEdara > 0) {
    $schools = getSchools($conn, $selectedEdara);
}

if ($selectedSchool > 0) {
    $schoolData = getSchoolData($conn, $selectedSchool);
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نظام إدارة بيانات المدارس</title>
    
    <!-- Preconnect for faster loading -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- Unified Style -->
    <link rel="stylesheet" href="unified-style.css">
    
    <!-- Load fonts with display swap -->
    <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
    <noscript>
        <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
    </noscript>
    
    <style>
        /* School page specific styles using CSS variables */
        body {
            background: var(--bg-light);
            min-height: 100vh;
            padding: 20px;
            font-family: 'Tajawal', 'Segoe UI', Arial, sans-serif;
        }
        
        /* Wider container - 90% width */
        .container-school {
            max-width: 90%;
            padding: 0 15px;
            margin: 0 auto;
        }
        
        .card-custom {
            background: var(--white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin-bottom: 30px;
            border: none;
            overflow: hidden;
            transition: box-shadow 0.3s ease;
        }
        
        .card-custom:hover {
            box-shadow: var(--shadow-hover);
        }
        
        .card-header-custom {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: var(--white);
            padding: 20px 25px;
            font-weight: 700;
            font-size: 1.2em;
            border-bottom: 3px solid var(--accent);
        }
        
        .card-body-custom {
            padding: 2rem;
        }
        
        .form-label {
            font-weight: 600;
            color: var(--text-dark);
        }
        
        .form-control, .form-select {
            border-radius: var(--radius-sm);
            border: 2px solid var(--border);
            padding: 10px 15px;
            transition: all 0.3s ease;
            font-family: 'Tajawal', sans-serif;
        }
        
        .form-control:focus, .form-select:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 0.2rem rgba(13, 110, 110, 0.25);
        }
        
        .btn-primary-custom {
            background: var(--primary);
            border: none;
            padding: 12px 30px;
            border-radius: var(--radius-sm);
            font-weight: 700;
            font-size: 1.1em;
            transition: all 0.3s ease;
            color: var(--white);
            cursor: pointer;
        }
        
        .btn-primary-custom:hover {
            background: var(--accent);
            color: var(--text-dark);
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }
        
        .btn-success-custom {
            background: #1d7a4b;
            border: none;
            padding: 12px 30px;
            border-radius: var(--radius-sm);
            font-weight: 700;
            font-size: 1.1em;
            transition: all 0.3s ease;
            color: var(--white);
            cursor: pointer;
        }
        
        .btn-success-custom:hover {
            background: #15663d;
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }
        
        .btn-secondary-custom {
            background: var(--text-muted);
            border: none;
            padding: 12px 30px;
            border-radius: var(--radius-sm);
            font-weight: 700;
            font-size: 1.1em;
            transition: all 0.3s ease;
            color: var(--white);
            cursor: pointer;
        }
        
        .btn-secondary-custom:hover {
            background: var(--text-dark);
            transform: translateY(-2px);
        }
        
        .section-title {
            color: var(--primary);
            font-weight: 700;
            border-bottom: 3px solid var(--accent);
            padding-bottom: 10px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .required::after {
            content: '*';
            color: #dc3545;
            margin-right: 5px;
        }
        
        .alert-success-custom {
            background: #d4edda;
            border: 2px solid #28a745;
            border-radius: var(--radius-sm);
            padding: 15px;
            margin-bottom: 20px;
            color: #155724;
        }
        
        .filter-section {
            background: #f8f9fa;
            padding: 20px;
            border-radius: var(--radius-sm);
            margin-bottom: 20px;
            border: 1px solid var(--border);
        }
        
        /* Wider filter dropdowns */
        .filter-section .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -8px;
        }
        
        .filter-section .row > [class*="col-"] {
            padding: 0 8px;
        }
        
        .filter-section .col-md-4 {
            flex: 0 0 33.333%;
            max-width: 33.333%;
        }
        
        /* Make dropdowns wider and more prominent */
        .filter-section .form-select {
            width: 100%;
            padding: 12px 15px;
            font-size: 1rem;
            min-height: 50px;
            background-color: var(--white);
        }
        
        .filter-section .form-label {
            font-size: 0.95rem;
            margin-bottom: 6px;
            display: block;
        }
        
        /* Button section */
        .filter-section .mt-3 {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 1.5rem;
        }
        
        .data-display {
            background: #e8f4fd;
            padding: 15px;
            border-radius: var(--radius-sm);
            border-right: 4px solid var(--primary);
            margin-bottom: 15px;
        }
        
        .topbar-school {
            background: var(--white);
            width: 90%;
            margin: 20px auto;
            padding: 12px 25px;
            border-radius: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 10px;
            box-shadow: var(--shadow);
        }
        
        .topbar-school .welcome {
            font-weight: 700;
            color: var(--primary);
        }
        
        .topbar-school .welcome i {
            color: var(--accent);
            margin-left: 8px;
        }
        
        .topbar-links a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 600;
            margin-right: 20px;
            transition: color 0.2s;
        }
        
        .topbar-links a:hover {
            color: var(--accent);
        }
        
        .topbar-links a.active {
            color: var(--accent);
            border-bottom: 2px solid var(--accent);
        }
        
        /* Row and column grid system (Bootstrap-like) */
        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -12px;
        }
        
        .row > [class*="col-"] {
            padding: 0 12px;
        }
        
        .col-md-3 { flex: 0 0 25%; max-width: 25%; }
        .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
        .col-md-6 { flex: 0 0 50%; max-width: 50%; }
        .col-md-12 { flex: 0 0 100%; max-width: 100%; }
        .col-12 { flex: 0 0 100%; max-width: 100%; }
        
        .mt-3 { margin-top: 1rem; }
        .mt-4 { margin-top: 1.5rem; }
        .me-2 { margin-left: 0.5rem; }
        .mb-3 { margin-bottom: 1rem; }
        
        .text-center { text-align: center; }
        
        .g-3 {
            margin: 0 -12px;
        }
        
        .g-3 > [class*="col-"] {
            padding: 0 12px;
            margin-bottom: 16px;
        }
        
        /* Responsive adjustments */
        @media (max-width: 1200px) {
            .container-school {
                max-width: 95%;
            }
            .topbar-school {
                width: 95%;
            }
        }
        
        @media (max-width: 992px) {
            .container-school {
                max-width: 97%;
            }
            .topbar-school {
                width: 97%;
            }
            .filter-section .col-md-4 {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }
        
        @media (max-width: 768px) {
            .container-school {
                max-width: 100%;
                padding: 0 10px;
            }
            .topbar-school {
                width: 100%;
                flex-direction: column;
                text-align: center;
                border-radius: 20px;
            }
            .topbar-links a {
                margin: 0 10px;
            }
            .filter-section .row > div {
                margin-bottom: 10px;
            }
            .filter-section .col-md-4 {
                flex: 0 0 100%;
                max-width: 100%;
            }
            .col-md-3, .col-md-4, .col-md-6 {
                flex: 0 0 100%;
                max-width: 100%;
            }
            .card-body-custom {
                padding: 1.2rem;
            }
        }
        
        @media (max-width: 480px) {
            .container-school {
                max-width: 100%;
                padding: 0 8px;
            }
            .topbar-school {
                width: 100%;
                padding: 12px 15px;
            }
            .card-header-custom {
                font-size: 1em;
                padding: 15px;
            }
            .btn-primary-custom, 
            .btn-success-custom, 
            .btn-secondary-custom {
                width: 100%;
                margin-bottom: 10px;
            }
            .filter-section {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <!-- Unified Header -->
    <header class="program-header">
        <div class="header-content">
            <img src="wezara.png" alt="شعار الوزارة" class="logo-right" loading="lazy" width="70" height="70">
            <div class="title-container">
                <h1 class="program-title">البرنامج القومي لتنمية مهارات اللغة العربية بالمرحلة الابتدائية</h1>
            </div>
            <img src="week.png" alt="شعار البرنامج" class="logo-left" loading="lazy" width="70" height="70">
        </div>
    </header>

    <!-- Topbar - 90% width -->
    <div class="topbar-school">
        <div class="welcome">
            <i class="fas fa-user-circle"></i> مرحبًا د. <?= $evaluatorName ?> 👋
        </div>
        <div class="topbar-links">
            <a href="index.php"><i class="fas fa-home"></i> الرئيسية</a>
            <a href="schooldesc.php" class="active"><i class="fas fa-school"></i> بيانات المدارس</a>
            <a href="new_rows_fail_students.php"><i class="fas fa-user-graduate"></i> تقييم الطلاب</a>
            <a href="view_data.php"><i class="fas fa-eye"></i> عرض البيانات</a>
            <a href="logout.php"><i class="fas fa-sign-out-alt"></i> تسجيل خروج</a>
        </div>
    </div>

    <!-- Container - 90% width (wider) -->
    <div class="container-school">
        <div class="card-custom">
            <div class="card-header-custom">
                <i class="fas fa-school me-2"></i>
                نظام معلومات إدارة التعليم - البيانات الأساسية للمدارس
            </div>
            <div class="card-body-custom">
                <?php if (isset($_GET['success']) && $_GET['success'] == 1): ?>
                <div class="alert-success-custom">
                    <i class="fas fa-check-circle me-2"></i>
                    تم حفظ البيانات بنجاح!
                </div>
                <?php endif; ?>

                <!-- Filter Section -->
                <div class="filter-section">
                    <h5 class="section-title"><i class="fas fa-filter"></i>اختر المدرسة</h5>
                    <form method="GET" action="" id="filterForm">
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="gov_id" class="form-label">المحافظة</label>
                                <select name="gov_id" id="gov_id" class="form-select" required>
                                    <option value="">-- اختر المحافظة --</option>
                                    <?php foreach ($governments as $gov): ?>
                                    <option value="<?= $gov['GovID'] ?>" <?= $selectedGov == $gov['GovID'] ? 'selected' : '' ?>>
                                        <?= htmlspecialchars($gov['GovName']) ?>
                                    </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="edara_id" class="form-label">الإدارة التعليمية</label>
                                <select name="edara_id" id="edara_id" class="form-select" <?= empty($edaras) ? 'disabled' : '' ?>>
                                    <option value="">-- اختر الإدارة --</option>
                                    <?php foreach ($edaras as $edara): ?>
                                    <option value="<?= $edara['EdaraID'] ?>" <?= $selectedEdara == $edara['EdaraID'] ? 'selected' : '' ?>>
                                        <?= htmlspecialchars($edara['EdaraName']) ?>
                                    </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label for="school_id" class="form-label">المدرسة</label>
                                <select name="school_id" id="school_id" class="form-select" <?= empty($schools) ? 'disabled' : '' ?>>
                                    <option value="">-- اختر المدرسة --</option>
                                    <?php foreach ($schools as $school): ?>
                                    <option value="<?= $school['SchoolID'] ?>" <?= $selectedSchool == $school['SchoolID'] ? 'selected' : '' ?>>
                                        <?= htmlspecialchars($school['SchoolName']) ?>
                                    </option>
                                    <?php endforeach; ?>
                                </select>
                            </div>
                        </div>
                        <div class="mt-3">
                            <button type="submit" class="btn-primary-custom">
                                <i class="fas fa-search me-2"></i>عرض البيانات
                            </button>
                            <?php if ($selectedSchool > 0): ?>
                            <button type="button" class="btn-success-custom" onclick="document.getElementById('dataForm').scrollIntoView();">
                                <i class="fas fa-edit me-2"></i>تعديل البيانات
                            </button>
                            <?php endif; ?>
                        </div>
                    </form>
                </div>

                <?php if ($selectedSchool > 0): ?>
                <!-- Data Entry Form -->
                <div id="dataForm">
                    <h5 class="section-title"><i class="fas fa-edit"></i>إدخال البيانات الأساسية</h5>
                    <form method="POST" action="save_data.php">
                        <input type="hidden" name="SchoolID" value="<?= $selectedSchool ?>">
                        
                        <div class="row g-3">
                            <!-- Basic Data -->
                            <div class="col-12">
                                <h6 style="color: var(--primary); font-weight: 700;"><i class="fas fa-info-circle"></i> البيانات الأساسية</h6>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label required">نوع المدرسة</label>
                                <select name="school_type" class="form-select" required>
                                    <option value="">-- اختر --</option>
                                    <option value="خاصة" <?= isset($schoolData['school_type']) && $schoolData['school_type'] == 'خاصة' ? 'selected' : '' ?>>خاصة</option>
                                    <option value="حكومية" <?= isset($schoolData['school_type']) && $schoolData['school_type'] == 'حكومية' ? 'selected' : '' ?>>حكومية</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label required">فترة الدراسة</label>
                                <select name="study_period" class="form-select" required>
                                    <option value="">-- اختر --</option>
                                    <option value="يوم كامل" <?= isset($schoolData['study_period']) && $schoolData['study_period'] == 'يوم كامل' ? 'selected' : '' ?>>يوم كامل</option>
                                    <option value="فترة صباحية" <?= isset($schoolData['study_period']) && $schoolData['study_period'] == 'فترة صباحية' ? 'selected' : '' ?>>فترة صباحية</option>
                                    <option value="فترة مسائية" <?= isset($schoolData['study_period']) && $schoolData['study_period'] == 'فترة مسائية' ? 'selected' : '' ?>>فترة مسائية</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label required">البيئة</label>
                                <select name="environment" class="form-select" required>
                                    <option value="">-- اختر --</option>
                                    <option value="حضر" <?= isset($schoolData['environment']) && $schoolData['environment'] == 'حضر' ? 'selected' : '' ?>>حضر</option>
                                    <option value="ريف" <?= isset($schoolData['environment']) && $schoolData['environment'] == 'ريف' ? 'selected' : '' ?>>ريف</option>
                                </select>
                            </div>

                            <!-- Resources -->
                            <div class="col-12 mt-3">
                                <h6 style="color: var(--primary); font-weight: 700;"><i class="fas fa-plug"></i> الموارد والبنية الأساسية</h6>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">يوجد كهرباء</label>
                                <select name="has_electricity" class="form-select">
                                    <option value="0" <?= isset($schoolData['has_electricity']) && $schoolData['has_electricity'] == 0 ? 'selected' : '' ?>>لا</option>
                                    <option value="1" <?= isset($schoolData['has_electricity']) && $schoolData['has_electricity'] == 1 ? 'selected' : '' ?>>نعم</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">يوجد انترنت</label>
                                <select name="has_internet" class="form-select">
                                    <option value="0" <?= isset($schoolData['has_internet']) && $schoolData['has_internet'] == 0 ? 'selected' : '' ?>>لا</option>
                                    <option value="1" <?= isset($schoolData['has_internet']) && $schoolData['has_internet'] == 1 ? 'selected' : '' ?>>نعم</option>
                                </select>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">عدد دورات المياه</label>
                                <input type="number" name="toilet_count" class="form-control" min="0" value="<?= isset($schoolData['toilet_count']) ? $schoolData['toilet_count'] : 0 ?>">
                            </div>

                            <!-- Teachers Data -->
                            <div class="col-12 mt-3">
                                <h6 style="color: var(--primary); font-weight: 700;"><i class="fas fa-chalkboard-teacher"></i> بيانات المعلمين</h6>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">عدد المعلمين الإناث</label>
                                <input type="number" name="female_teachers" class="form-control" min="0" value="<?= isset($schoolData['female_teachers']) ? $schoolData['female_teachers'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">عدد المعلمين الذكور</label>
                                <input type="number" name="male_teachers" class="form-control" min="0" value="<?= isset($schoolData['male_teachers']) ? $schoolData['male_teachers'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">الإجمالي</label>
                                <input type="number" name="total_teachers" class="form-control" min="0" value="<?= isset($schoolData['total_teachers']) ? $schoolData['total_teachers'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">مؤهل جامعي فأكثر</label>
                                <input type="number" name="university_qualified" class="form-control" min="0" value="<?= isset($schoolData['university_qualified']) ? $schoolData['university_qualified'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">مؤهل أقل من جامعي</label>
                                <input type="number" name="below_university_qualified" class="form-control" min="0" value="<?= isset($schoolData['below_university_qualified']) ? $schoolData['below_university_qualified'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">خبرة 10 سنوات فأكثر</label>
                                <input type="number" name="experience_10_plus" class="form-control" min="0" value="<?= isset($schoolData['experience_10_plus']) ? $schoolData['experience_10_plus'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">خبرة أقل من 10 سنوات</label>
                                <input type="number" name="experience_less_10" class="form-control" min="0" value="<?= isset($schoolData['experience_less_10']) ? $schoolData['experience_less_10'] : 0 ?>">
                            </div>

                            <!-- Students Data -->
                            <div class="col-12 mt-3">
                                <h6 style="color: var(--primary); font-weight: 700;"><i class="fas fa-users"></i> بيانات الطلاب</h6>
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">إجمالي عدد الطلاب</label>
                                <input type="number" name="total_students" class="form-control" min="0" value="<?= isset($schoolData['total_students']) ? $schoolData['total_students'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">إجمالي عدد الطلاب (ذكور)</label>
                                <input type="number" name="total_male_students" class="form-control" min="0" value="<?= isset($schoolData['total_male_students']) ? $schoolData['total_male_students'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">إجمالي عدد الطالبات (إناث)</label>
                                <input type="number" name="total_female_students" class="form-control" min="0" value="<?= isset($schoolData['total_female_students']) ? $schoolData['total_female_students'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">طلبة الصف الأول</label>
                                <input type="number" name="grade_1_students" class="form-control" min="0" value="<?= isset($schoolData['grade_1_students']) ? $schoolData['grade_1_students'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">طلبة الصف الثاني</label>
                                <input type="number" name="grade_2_students" class="form-control" min="0" value="<?= isset($schoolData['grade_2_students']) ? $schoolData['grade_2_students'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">طلبة الصف الثالث</label>
                                <input type="number" name="grade_3_students" class="form-control" min="0" value="<?= isset($schoolData['grade_3_students']) ? $schoolData['grade_3_students'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">طلبة الصف الرابع</label>
                                <input type="number" name="grade_4_students" class="form-control" min="0" value="<?= isset($schoolData['grade_4_students']) ? $schoolData['grade_4_students'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">طلبة الصف الخامس</label>
                                <input type="number" name="grade_5_students" class="form-control" min="0" value="<?= isset($schoolData['grade_5_students']) ? $schoolData['grade_5_students'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">طلبة الصف السادس</label>
                                <input type="number" name="grade_6_students" class="form-control" min="0" value="<?= isset($schoolData['grade_6_students']) ? $schoolData['grade_6_students'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">الطلاب المصريين</label>
                                <input type="number" name="egyptian_students" class="form-control" min="0" value="<?= isset($schoolData['egyptian_students']) ? $schoolData['egyptian_students'] : 0 ?>">
                            </div>
                            <div class="col-md-3">
                                <label class="form-label">الطلاب غير المصريين</label>
                                <input type="number" name="non_egyptian_students" class="form-control" min="0" value="<?= isset($schoolData['non_egyptian_students']) ? $schoolData['non_egyptian_students'] : 0 ?>">
                            </div>
                        </div>

                        <div class="mt-4 text-center">
                            <button type="submit" class="btn-primary-custom btn-lg">
                                <i class="fas fa-save me-2"></i>حفظ البيانات
                            </button>
                            <button type="reset" class="btn-secondary-custom btn-lg">
                                <i class="fas fa-undo me-2"></i>إعادة تعيين
                            </button>
                        </div>
                    </form>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

    <!-- JavaScript at the bottom for better performance -->
    <script>
        // Auto-submit on selection change for cascading dropdowns
        document.addEventListener('DOMContentLoaded', function() {
            const govSelect = document.getElementById('gov_id');
            const edaraSelect = document.getElementById('edara_id');
            const schoolSelect = document.getElementById('school_id');
            const filterForm = document.getElementById('filterForm');
            
            if (govSelect) {
                govSelect.addEventListener('change', function() {
                    filterForm.submit();
                });
            }
            
            if (edaraSelect) {
                edaraSelect.addEventListener('change', function() {
                    if (this.value) {
                        filterForm.submit();
                    }
                });
            }
            
            if (schoolSelect) {
                schoolSelect.addEventListener('change', function() {
                    if (this.value) {
                        filterForm.submit();
                    }
                });
            }
        });
    </script>
</body>
</html>