<?php
header('Content-Type: text/html; charset=utf-8');
?>

<style>
  <?php include "styles.css" ?>
  <?php include "menu.css" ?>
</style>
<?php

// Include the database connection file
include('last_db_config.php');
?>

<html dir="rtl">
<header>
<title>التقويم الالكترونى 2025 للمرحلة الابتدائية</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="menu.css">
  <div class="menu">
  <div class="header">
    <img src="download.png" alt="شعار يمين" class="logo-right">
    <h1 class="header-title"><b>البرنامج القومي لتنمية مهارات القراءة والكتابة بالمرحلة الابتدائية</h1>
    <img src="week.png" alt="شعار يسار" class="logo-left">
</div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script type="text/javascript"></SCRIPT>

<style>
        .يحتاج-إلى-دعم { background-color: red; font-weight:bold;}
        .متمكن { background-color: green; font-weight:bold;}
    </style>

</header>

<body>

  <div class="container">
        
    <form id="survey-form" method='post'>
      <div class="form-div">
        <div class="form-group">
          <label for="GovID" >المحافظة</label>
          <select id="GovID" name="GovID" class="form-control" required>
            <option value="">اختر المحافظة</option>
            <?php 
          $queryitem="SELECT * FROM government order by GovName;";
          $result=mysqli_query($conn,$queryitem);
          if ($result->num_rows > 0) {
            while ($row = $result->fetch_assoc()) {
            echo '<option value="'.$row['GovID'].'">'.$row['GovName'].'</option>';
            }
            }else{
            echo '<option value="">لا يوجد محافظات </option>';
            }
            ?>
          </select>
        </div>

				<!-- Edara dropdown -->
        <div class="form-group">
          <label for="EdaraID">الإدارة التعليمية</label>
          <select id="EdaraID"  value ="" name="EdaraID" class="form-control" required>
            <option disabled selected value>اختر الإدارة التعليمية</option>
          </select>
                       
            
        </div>
         <div class="form-group">
         <!--school dropdown -->
          <label for="school" >المدرسة</label>

          <select id="schoolID"  value ="" name="SchoolID" class="form-control" required>
            <option disabled selected value>اختر اسم المدرسة</option>
          </select>
           
        </div>

        <div class="form-group">
         <!--class dropdown -->
          <label for="class" >الصف</label>

          <select id="classID"  value ="" name="classID" class="form-control" required>
            <option value="">اختر الصف الدراسى</option>
            <option value="3">الصف الثالث</option>
            <option value="4">الصف الرابع</option>
            <option value="5">الصف الخامس</option>
            <option value="6">الصف السادس</option>
          </select>
           
         </div>    

      </div>
    <div class="form-div">
    <div class="form-group">
          <div>
        <h2 style="text-align: center;">تقرير درجات الطلاب</h2>

    <table border="1">
        <thead>
            <tr>
                <th>الاسم</th>
                <th>النوع</th>
                <th>السؤال 1</th>
                <th>السؤال 2</th>
                <th>السؤال 3</th>
                <th>السؤال 4</th>
                <th>السؤال 5</th>
                <th>السؤال 6</th>
                <th>السؤال 7</th>
                <th>السؤال 8</th>
                <th>السؤال 9</th>
                <th>السؤال 10</th>
                <th>السؤال 11</th>
                <th>السؤال 12</th>
                <th>السؤال 13</th>
                <th>المجموع</th>
                <th>الحالة</th>
            </tr>
        </thead>
        <tbody id="studentsTable">
            <tr><td colspan="15" style="font-size: 20px; background:red;"><b>لم يتم اختيار أي مدرسة بعد.</td></tr>
        </tbody>
    </table>

          </div>
          
        </div>
      </div>
      
     
    </form>
  </div>
  <script>
$(document).ready(function(){
  $("#GovID").on("change",function(){
    var govID = $(this).val();
    $.post("action copy.php", 
    {
      GovID: govID
    },
    function(data, status){
      //document.write(data);
      $('#EdaraID').html(data);
      $('#schoolID').html('<option value="">اختر الادارة أولا</option>');
    });
  });

  $("#EdaraID").on("change",function(){
    var edaraID = $(this).val();
    $.post("action copy.php", 
    {
      EdaraID: edaraID
    },
    function(data, status){
      //document.write(data);
      $('#schoolID').html(data);
      //$('#schoolID').html('<option value="">اختر الادارة أولا</option>');
    });
  });


  $("#schoolID").change(function(){
    var schoolId = $(this).val();
    $.post("report_get_students.php", 
    {
      SchoolID: schoolId
    },
    function(data, status){
      //document.write(data);
      $("#studentsTable").html(data);
      //$('#schoolID').html('<option value="">اختر الادارة أولا</option>');
    }); 
    
    
 });

 function loadStudents() {
                var school_id = $('#schoolID').val();
                var class_level = $('#classID').val();

                if (school_id && class_level) {
                    $('#studentsTable').html('<option value="">جاري التحميل...</option>');

                    $.post("xxx_report_get_students.php", { SchoolID: school_id, Class: class_level }, 
                    function(data, status) {
                        $("#studentsTable").html(data);
                    });
                }
            }

            $('#schoolID, #classID').change(loadStudents);

});
</script>


</body>

</html>