<?php
header("Content-Type: text/html; charset=UTF-8");
include('last_db_config.php');

$govs = $conn->query("SELECT GovID, GovName FROM government");
if (!$govs) die("خطأ في جلب بيانات المحافظات: " . $conn->error);
?>

<!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>
  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="unified-style.css">
</head>
<body>
  <header class="program-header">
    <div class="header-content">
      <img src="wezara.png" alt="شعار الوزارة" class="logo-right">
      <div class="title-container">
        <h1 class="program-title">البرنامج القومي لتنمية مهارات اللغة العربية بالمرحلة الابتدائية</h1>
      </div>
      <img src="week.png" alt="شعار البرنامج" class="logo-left">
    </div>
  </header>

  <main style="padding: 30px 20px;">
    <div class="container" style="max-width: 800px; margin: 0 auto;">
      <div class="card">
        <div class="card-header">
          <h2>تسجيل بيانات المطبق</h2>
        </div>
        <div class="card-body">
          <form action="new_register_save.php" method="POST" enctype="multipart/form-data" id="registrationForm">
            <div class="form-group">
              <label for="full_name">الاسم رباعي</label>
              <input type="text" id="full_name" name="full_name" class="form-control" placeholder="أدخل الاسم الرباعي" required>
              <small id="name_error" class="error-message">الاسم يجب أن يتكون من أربعة أجزاء على الأقل</small>
            </div>

            <div class="form-group">
              <label for="national_id">الرقم القومي</label>
              <input type="text" id="national_id" name="national_id" class="form-control" placeholder="14 رقمًا" maxlength="14" required>
              <small id="nid_error" class="error-message">يجب إدخال 14 رقمًا فقط</small>
            </div>

            <div class="form-group">
              <label for="mobile_phone">رقم الهاتف المحمول</label>
              <input type="tel" id="mobile_phone" name="mobile_phone" class="form-control" placeholder="مثال: 01012345678" pattern="01[0-2,5]{1}[0-9]{8}" maxlength="11" required>
              <small id="mobile_error" class="error-message">رقم هاتف غير صحيح. يجب أن يبدأ بـ 010، 011، 012، أو 015</small>
            </div>

            <div class="form-group">
              <label for="national_id_photo">صورة من الرقم القومي</label>
              <input type="file" id="national_id_photo" name="national_id_photo" class="form-control" accept=".jpg,.jpeg,.png,.pdf">
              <small class="form-text">يُسمح بملفات الصور (JPG, PNG) أو PDF - الحد الأقصى للحجم: 2MB</small>
              <small id="photo_error" class="error-message">يرجى اختيار ملف صالح</small>
            </div>

            <div class="form-group">
              <label for="governorate">المحافظة</label>
              <select id="governorate" name="governorate_id" class="form-control" required>
                <option value="">-- اختر المحافظة --</option>
                <?php while($row = $govs->fetch_assoc()): ?>
                  <option value="<?php echo $row['GovID']; ?>"><?php echo htmlspecialchars($row['GovName']); ?></option>
                <?php endwhile; ?>
              </select>
            </div>

            <div class="form-group">
              <label for="admin">الإدارة التعليمية التي يعمل بها المطبق</label>
              <select id="admin" name="admin_id" class="form-control" required>
                <option value="">-- اختر الإدارة التعليمية --</option>
              </select>
            </div>

            <button type="submit" class="btn">تسجيل</button>
          </form>
        </div>
      </div>
    </div>
  </main>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function() {
    $('#governorate').change(function() {
      var govId = $(this).val();
      if (govId) {
        $.ajax({
          url: 'action copy.php',
          method: 'POST',
          data: { GovID: govId },
          success: function(data) { $('#admin').html(data); },
          error: function() { $('#admin').html('<option value="">خطأ في جلب البيانات</option>'); }
        });
      } else {
        $('#admin').html('<option value="">-- اختر الإدارة التعليمية --</option>');
      }
    });
    
    // Validation functions (unchanged)
    $('#full_name').on('blur', function() {
      let parts = $(this).val().trim().split(/\s+/).filter(p => p.length);
      if (parts.length < 4) $('#name_error').show(); else $('#name_error').hide();
    });
    $('#national_id').on('input', function() {
      if (!/^\d{14}$/.test($(this).val().trim())) $('#nid_error').show(); else $('#nid_error').hide();
    });
    $('#mobile_phone').on('input', function() {
      if (!/^01[0-2,5]{1}[0-9]{8}$/.test($(this).val().trim())) $('#mobile_error').show(); else $('#mobile_error').hide();
    });
    $('#national_id_photo').on('change', function() {
      let file = this.files[0];
      let allowed = ['image/jpeg','image/jpg','image/png','application/pdf'];
      if (file && (!allowed.includes(file.type) || file.size > 2*1024*1024)) $('#photo_error').show(); else $('#photo_error').hide();
    });
    $('#registrationForm').on('submit', function(e) {
      let ok = true;
      if ($('#full_name').val().trim().split(/\s+/).filter(p=>p.length).length < 4) { $('#name_error').show(); ok = false; }
      if (!/^\d{14}$/.test($('#national_id').val().trim())) { $('#nid_error').show(); ok = false; }
      if (!/^01[0-2,5]{1}[0-9]{8}$/.test($('#mobile_phone').val().trim())) { $('#mobile_error').show(); ok = false; }
      let file = $('#national_id_photo')[0].files[0];
      if (file) {
        let allowed = ['image/jpeg','image/jpg','image/png','application/pdf'];
        if (!allowed.includes(file.type) || file.size > 2*1024*1024) { $('#photo_error').show(); ok = false; }
      }
      if (!ok) { e.preventDefault(); alert('يرجى تصحيح الأخطاء في النموذج'); }
    });
  });
  </script>
</body>
</html>