طلب القبول - جامعة النهضة الدولية

<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>تقديم طلب الالتحاق</title>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<script id="tailwind-config">
  tailwind.config = {
    darkMode: "class",
    theme: {
      extend: {
        colors: {
          "on-error-container": "#570008","on-primary": "#f0f2ff","primary-fixed-dim": "#5091ff",
          "surface-container": "#eae7e7","on-error": "#ffefee","background": "#f9f6f5",
          "on-background": "#2f2f2e","primary": "#0058ba","outline": "#787676",
          "surface-variant": "#dfdcdc","on-tertiary-fixed": "#41004d",
          "surface-container-highest": "#dfdcdc","tertiary-container": "#f39cfb",
          "error-dim": "#9f0519","on-tertiary": "#ffeefb","secondary-fixed-dim": "#b3c1ff",
          "on-primary-container": "#00214e","primary-fixed": "#6c9fff","surface-bright": "#f9f6f5",
          "on-tertiary-fixed-variant": "#6a1f77","on-primary-fixed-variant": "#002a60",
          "tertiary-dim": "#7a2f86","on-primary-fixed": "#000000","on-surface": "#2f2f2e",
          "surface-container-low": "#f3f0ef","on-secondary-fixed-variant": "#2b48ac",
          "on-secondary-fixed": "#00298b","on-secondary": "#f2f1ff","outline-variant": "#afadac",
          "surface": "#ffffff","secondary-dim": "#2a47ab","primary-container": "#6c9fff",
          "tertiary-fixed": "#f39cfb","secondary": "#3854b7","inverse-on-surface": "#9e9c9c",
          "secondary-container": "#c6cfff","inverse-primary": "#4a8eff","secondary-fixed": "#c6cfff",
          "surface-tint": "#0058ba","tertiary-fixed-dim": "#e48fed","on-tertiary-container": "#60136d",
          "error-container": "#fb5151","on-secondary-container": "#1f3ea2","surface-dim": "#d6d4d3",
          "inverse-surface": "#0e0e0e","error": "#b31b25","surface-container-lowest": "#ffffff",
          "on-surface-variant": "#5c5b5b","primary-dim": "#004da4","tertiary": "#883c93",
          "surface-container-high": "#e4e2e1"
        },
        borderRadius: { "DEFAULT": "0.75rem","lg": "1.5rem","xl": "2rem","full": "9999px" },
        fontFamily: { "arabic": ["IBM Plex Sans Arabic","sans-serif"] }
      }
    }
  }
</script>
<style>
  body { font-family: 'IBM Plex Sans Arabic', sans-serif; background: radial-gradient(circle at 50% 0%, #ffffff 0%, #f0f4f8 100%); background-attachment: fixed; margin: 0; padding: 40px 0; overflow-x: hidden; }
  .signature-gradient { background: linear-gradient(135deg, #0058ba 0%, #6c9fff 100%); }
  .icon-gradient { background: linear-gradient(135deg, #0058ba 0%, #6c9fff 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
  .signature-glow { box-shadow: 0 10px 40px 0 rgba(0, 88, 186, 0.06); }
  .material-symbols-outlined { font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; display: inline-block; vertical-align: middle; }
  input:focus, select:focus { outline: none; border: 1px solid rgba(108,159,255,0.4); transform: scale(1.01); transition: all 0.2s ease-in-out; }
  input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
  select { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; background-image: none !important; }
  select::-ms-expand { display: none; }
  .custom-dd { position: relative; }
  .custom-dd .dd-toggle { cursor: pointer; user-select: none; width: 100%; background: rgba(223,220,220,0.4); border: 1px solid transparent; border-radius: 0.75rem; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; transition: all 0.2s; }
  .custom-dd.open .dd-toggle { border-color: rgba(108,159,255,0.6); background: rgba(108,159,255,0.08); }
  .custom-dd .dd-menu { display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 200; background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); border-radius: 0.75rem; box-shadow: 0 15px 40px rgba(0,0,0,0.1); border: 1px solid rgba(108,159,255,0.2); flex-direction: column; max-height: 220px; overflow: hidden; }
  .custom-dd.open .dd-menu { display: flex; }
  .dd-search-wrap { padding: 8px 10px; border-bottom: 1px solid rgba(175,173,172,0.25); background: rgba(255,255,255,0.99); position: sticky; top: 0; z-index: 1; }
  .dd-search-wrap input { width: 100%; background: rgba(223,220,220,0.5); border: none; border-radius: 0.5rem; padding: 6px 12px; font-size: 13px; font-family: 'IBM Plex Sans Arabic', sans-serif; color: #2f2f2e; }
  .dd-search-wrap input:focus { transform: none; border: none; outline: none; }
  .dd-list { overflow-y: auto; flex: 1; }
  .dd-item { padding: 8px 16px; font-size: 13.5px; cursor: pointer; border-bottom: 1px solid rgba(175,173,172,0.12); transition: background 0.12s; color: #2f2f2e; }
  .dd-item:hover { background: rgba(108,159,255,0.12); }
  .dd-item.active { background: rgba(108,159,255,0.18); color: #0058ba; font-weight: 600; }
  .dd-placeholder { opacity: 0.4; }
  .dp-popup { display: none; position: absolute; top: calc(100% + 4px); right: 0; width: 280px; z-index: 200; background: rgba(255,255,255,0.98); backdrop-filter: blur(24px); border-radius: 1rem; box-shadow: 0 20px 50px rgba(0,88,186,0.1); border: 1px solid rgba(108,159,255,0.2); padding: 14px; }
  .dp-popup.open { display: block; }
  .dp-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
  .dp-nav { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; background: rgba(108,159,255,0.1); transition: background 0.15s; }
  .dp-nav:hover { background: rgba(108,159,255,0.25); }
  .dp-selects { display: flex; gap: 4px; align-items: center; }
  .dp-sel { background: rgba(108,159,255,0.1); border: none; border-radius: 0.5rem; padding: 4px 6px; font-family: 'IBM Plex Sans Arabic', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; color: #2f2f2e; }
  .dp-weekdays { display: grid; grid-template-columns: repeat(7,1fr); text-align: center; margin-bottom: 4px; }
  .dp-wd { font-size: 10px; font-weight: 700; color: #5c5b5b; padding: 2px 0; }
  .dp-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
  .dp-day { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 11px; border-radius: 50%; cursor: pointer; transition: background 0.12s; }
  .dp-day:not(.dp-empty):hover { background: rgba(108,159,255,0.2); }
  .dp-day.dp-sel-day { background: #0058ba !important; color: white; font-weight: 700; }
  .dp-day.dp-empty { pointer-events: none; opacity: 0; }
  #stepper-fill { position: absolute; top: 50%; right: 0; height: 4px; transform: translateY(-50%); z-index: 0; background: linear-gradient(135deg,#0058ba,#6c9fff); transition: width 0.5s ease; width: 0%; }
  .step-section, #success-message { animation: fadeUp 0.35s ease; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
  .input-error { border: 1px solid red !important; }
</style>
</head>
<body class="text-on-surface flex flex-col items-center">

<header class="w-full max-w-[1280px] mx-auto px-6 py-4 flex justify-start items-center gap-3">
  <div class="w-10 h-10 bg-white border border-surface-container-high rounded-full flex items-center justify-center shrink-0 shadow-sm">
    <span class="material-symbols-outlined text-primary">app_registration</span>
  </div>
  <h1 class="font-arabic text-xl md:text-2xl font-bold text-inverse-surface tracking-tight">تقديم طلب الالتحاق</h1>
</header>

<main class="w-full max-w-[1280px] px-4 md:px-6 pb-4">
  <div id="stepper-container" class="mb-6 md:mb-8 px-2">
    <div class="relative flex items-center justify-between">
      <div class="absolute top-1/2 left-0 w-full h-1 bg-surface-container-high -translate-y-1/2 z-0 rounded-full"></div>
      <div id="stepper-fill" class="rounded-full"></div>
      <div class="relative z-10 flex flex-col items-center gap-2" id="si-1">
        <span class="text-[10px] md:text-xs font-bold text-primary mb-1 si-label hidden sm:block">البيانات</span>
        <div class="w-8 h-8 md:w-10 md:h-10 signature-gradient rounded-full flex items-center justify-center text-white font-bold ring-4 ring-white si-circle shadow-sm" id="sc-1">1</div>
      </div>
      <div class="relative z-10 flex flex-col items-center gap-2" id="si-2">
        <span class="text-[10px] md:text-xs font-medium text-on-surface-variant opacity-60 mb-1 si-label hidden sm:block">العنوان</span>
        <div class="w-8 h-8 md:w-10 md:h-10 bg-white border border-surface-container-high rounded-full flex items-center justify-center text-on-surface-variant font-medium ring-4 ring-white si-circle shadow-sm" id="sc-2">2</div>
      </div>
      <div class="relative z-10 flex flex-col items-center gap-2" id="si-3">
        <span class="text-[10px] md:text-xs font-medium text-on-surface-variant opacity-60 mb-1 si-label hidden sm:block">اختيار البرنامج</span>
        <div class="w-8 h-8 md:w-10 md:h-10 bg-white border border-surface-container-high rounded-full flex items-center justify-center text-on-surface-variant font-medium ring-4 ring-white si-circle shadow-sm" id="sc-3">3</div>
      </div>
      <div class="relative z-10 flex flex-col items-center gap-2" id="si-4">
        <span class="text-[10px] md:text-xs font-medium text-on-surface-variant opacity-60 mb-1 si-label hidden sm:block">المرفقات</span>
        <div class="w-8 h-8 md:w-10 md:h-10 bg-white border border-surface-container-high rounded-full flex items-center justify-center text-on-surface-variant font-medium ring-4 ring-white si-circle shadow-sm" id="sc-4">4</div>
      </div>
    </div>
  </div>

<section class="step-section bg-white rounded-xl p-6 md:p-8 signature-glow border border-surface-container-high" id="step-1">
      <div class="mb-6 text-center md:text-right">
        <h2 class="text-xl md:text-2xl font-bold text-inverse-surface mb-1">البيانات الشخصية</h2>
        <p class="text-xs md:text-sm text-on-surface-variant opacity-80">يرجى إدخال بياناتك كما هي واردة في المستندات الرسمية</p>
      </div>
      <div class="space-y-4 md:space-y-5">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">الاسم الأول *</label>
            <input id="fname" name="First_Name" required class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40" placeholder="أدخل الاسم الأول" type="text"/>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">الاسم الثاني *</label>
            <input id="sname" name="Middle_Name" required class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40" placeholder="أدخل الاسم الثاني" type="text"/>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">الاسم الأخير *</label>
            <input id="lname" name="Last_Name" required class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40" placeholder="أدخل الاسم الأخير" type="text"/>
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">تاريخ الميلاد *</label>
            <div class="relative" id="dp-container">
              <input required name="Birth_Date" class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 pl-10 text-sm text-on-surface placeholder:opacity-40 cursor-pointer" id="dp-input" placeholder="اختر تاريخ الميلاد" readonly type="text"/>
              <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-primary cursor-pointer" style="font-size: 20px;" id="dp-icon">calendar_today</span>
              <div class="dp-popup" id="dp-popup">
                <div class="dp-header">
                  <div class="dp-nav" id="dp-btn-next"><span class="material-symbols-outlined text-primary" style="font-size:18px">chevron_right</span></div>
                  <div class="dp-selects">
                    <select class="dp-sel" id="dp-month-sel"></select>
                    <select class="dp-sel" id="dp-year-sel"></select>
                  </div>
                  <div class="dp-nav" id="dp-btn-prev"><span class="material-symbols-outlined text-primary" style="font-size:18px">chevron_left</span></div>
                </div>
                <div class="dp-weekdays">
                  <div class="dp-wd">ح</div><div class="dp-wd">ن</div><div class="dp-wd">ث</div><div class="dp-wd">ر</div><div class="dp-wd">خ</div><div class="dp-wd">ج</div><div class="dp-wd">س</div>
                </div>
                <div class="dp-grid" id="dp-grid"></div>
              </div>
            </div>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">الجنس *</label>
            <div class="relative">
              <select name="Gender" required class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 pl-10 text-sm text-on-surface focus:ring-primary/50">
                <option disabled selected value="">اختر الجنس</option>
                <option value="Male">ذكر</option>
                <option value="Female">أنثى</option>
              </select>
              <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-primary pointer-events-none">expand_more</span>
            </div>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">رقم جواز السفر *</label>
            <input name="Passport_Number" required class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40" placeholder="أدخل رقم جواز السفر" type="text"/>
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="flex flex-col gap-1.5 relative">
            <label class="text-xs font-bold text-on-surface-variant px-1">الجنسية *</label>
            <input type="text" id="nationality-val" name="Nationality" required class="absolute bottom-0 opacity-0 w-full h-0 pointer-events-none" />
            <div class="custom-dd" id="dd-nationality">
              <div class="dd-toggle py-2.5 px-4 text-sm bg-surface-variant/40 border-none">
                <span class="dd-display dd-placeholder">اختر الجنسية</span>
                <span class="material-symbols-outlined text-primary-dim dd-arrow">expand_more</span>
              </div>
              <div class="dd-menu">
                <div class="dd-search-wrap"><input placeholder="🔍  ابحث عن دولة..." type="text" class="dd-search"/></div>
                <div class="dd-list" id="dd-nationality-list"></div>
              </div>
            </div>
          </div>
          <div class="flex flex-col gap-1.5 relative">
            <label class="text-xs font-bold text-on-surface-variant px-1">بلد الإقامة *</label>
            <input type="text" id="residence-val" name="Country_of_Residence" required class="absolute bottom-0 opacity-0 w-full h-0 pointer-events-none" />
            <div class="custom-dd" id="dd-residence">
              <div class="dd-toggle py-2.5 px-4 text-sm bg-surface-variant/40 border-none">
                <span class="dd-display dd-placeholder">اختر البلد</span>
                <span class="material-symbols-outlined text-primary-dim dd-arrow">expand_more</span>
              </div>
              <div class="dd-menu">
                <div class="dd-search-wrap"><input placeholder="🔍  ابحث عن دولة..." type="text" class="dd-search"/></div>
                <div class="dd-list" id="dd-residence-list"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-8 flex justify-between items-center gap-4">
        <div></div><p class="text-xs text-on-surface-variant font-medium hidden md:block">خطوة 1 من 4</p>
        <button type="button" class="signature-gradient text-white px-6 py-2.5 md:px-8 md:py-3 text-sm rounded-lg font-bold shadow-md hover:scale-105 transition-all flex items-center gap-1 group ring-4 ring-primary/20" onclick="nextStep()">
          <span>التالي</span><span class="material-symbols-outlined text-[20px] transform group-hover:-translate-x-1 transition-transform">chevron_left</span>
        </button>
      </div>
    </section>

<section class="step-section hidden bg-white rounded-xl p-6 md:p-8 signature-glow border border-surface-container-high" id="step-2">
      <div class="mb-6 text-center md:text-right">
        <h2 class="text-xl md:text-2xl font-bold text-inverse-surface mb-1">عنوان الإقامة</h2>
        <p class="text-xs md:text-sm text-on-surface-variant opacity-80">يرجى إدخال عنوان إقامتك الحالي بدقة (اختياري)</p>
      </div>
      <div class="space-y-4">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">المدينة</label>
            <input name="City" class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40" placeholder="أدخل اسم المدينة" type="text"/>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">المنطقة / المحافظة</label>
            <input name="Region" class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40" placeholder="أدخل اسم المنطقة" type="text"/>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">اسم الشارع</label>
            <input name="Street" class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40" placeholder="اسم الشارع والرقم" type="text"/>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">الرمز البريدي</label>
            <input name="Postal_Code" class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40" placeholder="أدخل الرمز البريدي" type="text"/>
          </div>
        </div>
      </div>
      <div class="mt-8 flex justify-between items-center gap-4">
        <button type="button" class="bg-surface-variant/50 border border-surface-container-high text-on-surface px-6 py-2.5 md:px-8 md:py-3 text-sm rounded-lg font-bold hover:scale-105 transition-all flex items-center gap-1" onclick="prevStep()">
          <span class="material-symbols-outlined text-[20px]">chevron_right</span><span>السابق</span>
        </button>
        <p class="text-xs text-on-surface-variant font-medium hidden md:block">خطوة 2 من 4</p>
        <button type="button" class="signature-gradient text-white px-6 py-2.5 md:px-8 md:py-3 text-sm rounded-lg font-bold shadow-md hover:scale-105 transition-all flex items-center gap-1 group ring-4 ring-primary/20" onclick="nextStep()">
          <span>التالي</span><span class="material-symbols-outlined text-[20px] transform group-hover:-translate-x-1 transition-transform">chevron_left</span>
        </button>
      </div>
    </section>

<section class="step-section hidden bg-white rounded-xl p-6 md:p-8 signature-glow border border-surface-container-high" id="step-3">
      <div class="mb-6 text-center md:text-right">
        <h2 class="text-xl md:text-2xl font-bold text-inverse-surface mb-1">بيانات التواصل واختيار البرنامج</h2>
        <p class="text-xs md:text-sm text-on-surface-variant opacity-80">يرجى إدخال معلومات التواصل الخاصة بك واختيار التخصص</p>
      </div>
      <div class="space-y-5">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">البريد الإلكتروني *</label>
            <input name="Email_Address" required class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40 focus:ring-primary/50" placeholder="example@email.com" type="email"/>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">رقم الهاتف *</label>
            <input name="Phone_Number" required class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40" placeholder="+00 000 000 0000" type="tel" dir="ltr" style="text-align: right;"/>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">رقم الواتساب *</label>
            <input name="WhatsApp_Number" required class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 text-sm text-on-surface placeholder:opacity-40" placeholder="+00 000 000 0000" type="tel" dir="ltr" style="text-align: right;"/>
          </div>
        </div>
        <hr class="border-surface-container-high">
        <div class="flex flex-col gap-3">
          <label class="text-xs font-bold text-on-surface-variant px-1">الدرجة العلمية المطلوبة *</label>
          <div class="flex gap-4">
            <label class="flex items-center gap-3 cursor-pointer p-3 rounded-lg border border-surface-container-highest bg-surface-variant/20 hover:bg-primary-container/10 transition flex-1">
              <input type="radio" name="Required_Degree" value="Bachelor" required class="w-4 h-4 text-primary border-outline focus:ring-primary" onchange="updateAttachmentsUI()">
              <span class="text-sm font-medium">بكالوريوس</span>
            </label>
            <label class="flex items-center gap-3 cursor-pointer p-3 rounded-lg border border-surface-container-highest bg-surface-variant/20 hover:bg-primary-container/10 transition flex-1">
              <input type="radio" name="Required_Degree" value="Master" required class="w-4 h-4 text-primary border-outline focus:ring-primary" onchange="updateAttachmentsUI()">
              <span class="text-sm font-medium">ماجستير</span>
            </label>
          </div>
        </div>
        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">الكلية *</label>
            <div class="relative">
              <select id="college-select" name="College" required onchange="updateMajors()" class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 pl-10 text-sm text-on-surface focus:ring-primary/50">
                <option disabled selected value="">اختر الكلية</option>
                <option value="quality">كلية التخصصات النوعية</option>
                <option value="law">كلية الحقوق</option>
                <option value="islamic">كلية الشريعة الإسلامية</option>
                <option value="languages">كلية اللغات</option>
              </select>
              <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-primary pointer-events-none">expand_more</span>
            </div>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">التخصص المطلوب *</label>
            <div class="relative">
              <select id="major-select" name="Major" required class="w-full bg-surface-variant/40 border-none rounded-DEFAULT py-2.5 px-4 pl-10 text-sm text-on-surface focus:ring-primary/50 disabled:opacity-50" disabled>
                <option disabled selected value="">يرجى اختيار الكلية أولاً</option>
              </select>
              <span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-primary pointer-events-none">expand_more</span>
            </div>
          </div>
        </div>
      </div>
      <div class="mt-8 flex justify-between items-center gap-4">
        <button type="button" class="bg-surface-variant/50 border border-surface-container-high text-on-surface px-6 py-2.5 md:px-8 md:py-3 text-sm rounded-lg font-bold hover:scale-105 transition-all flex items-center gap-1" onclick="prevStep()">
          <span class="material-symbols-outlined text-[20px]">chevron_right</span><span>السابق</span>
        </button>
        <p class="text-xs text-on-surface-variant font-medium hidden md:block">خطوة 3 من 4</p>
        <button type="button" class="signature-gradient text-white px-6 py-2.5 md:px-8 md:py-3 text-sm rounded-lg font-bold shadow-md hover:scale-105 transition-all flex items-center gap-1 group ring-4 ring-primary/20" onclick="nextStep()">
          <span>التالي</span><span class="material-symbols-outlined text-[20px] transform group-hover:-translate-x-1 transition-transform">chevron_left</span>
        </button>
      </div>
    </section>

<section class="step-section hidden bg-white rounded-xl p-6 md:p-8 signature-glow border border-surface-container-high" id="step-4">
      <div class="mb-6 text-center md:text-right">
        <h2 class="text-xl md:text-2xl font-bold text-inverse-surface mb-1">المرفقات والشروط</h2>
        <p class="text-xs md:text-sm text-on-surface-variant opacity-80">يرجى رفع المستندات المطلوبة والموافقة على الشروط</p>
      </div>
      <div class="space-y-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">صورة شخصية - خلفية بيضاء *</label>
            <label class="w-full bg-white border-2 border-dashed border-primary/30 shadow-sm rounded-DEFAULT py-6 px-4 text-center cursor-pointer hover:border-primary/60 hover:bg-blue-50/30 transition-colors group">
              <span class="material-symbols-outlined icon-gradient block mb-1" style="font-size:32px">add_a_photo</span>
              <p class="text-xs text-on-surface-variant">انقر لرفع الصورة</p>
              <p class="text-[10px] text-on-surface-variant opacity-60 mt-1">PDF, JPG, PNG — حتى 5MB</p>
              <input type="file" name="Personal_Photo_Attachment" required class="hidden" accept=".pdf,.jpg,.jpeg,.png" onchange="updateFileName(this)"/>
              <p class="file-name text-[11px] text-primary font-bold mt-2 hidden break-all"></p>
            </label>
          </div>
          <div class="flex flex-col gap-1.5">
            <label class="text-xs font-bold text-on-surface-variant px-1">صورة جواز السفر *</label>
            <label class="w-full bg-white border-2 border-dashed border-primary/30 shadow-sm rounded-DEFAULT py-6 px-4 text-center cursor-pointer hover:border-primary/60 hover:bg-blue-50/30 transition-colors group">
              <span class="material-symbols-outlined icon-gradient block mb-1" style="font-size:32px">upload_file</span>
              <p class="text-xs text-on-surface-variant">انقر لرفع الملف</p>
              <p class="text-[10px] text-on-surface-variant opacity-60 mt-1">PDF, JPG, PNG — حتى 5MB</p>
              <input type="file" name="Passport_Copy_Attachment" required class="hidden" accept=".pdf,.jpg,.jpeg,.png" onchange="updateFileName(this)"/>
              <p class="file-name text-[11px] text-primary font-bold mt-2 hidden break-all"></p>
            </label>
          </div>
          <div id="req-highschool" class="flex flex-col gap-1.5 hidden">
            <label class="text-xs font-bold text-on-surface-variant px-1">شهادة الثانوية *</label>
            <label class="w-full bg-white border-2 border-dashed border-primary/30 shadow-sm rounded-DEFAULT py-6 px-4 text-center cursor-pointer hover:border-primary/60 hover:bg-blue-50/30 transition-colors group">
              <span class="material-symbols-outlined icon-gradient block mb-1" style="font-size:32px">school</span>
              <p class="text-xs text-on-surface-variant">انقر لرفع الشهادة</p>
              <p class="text-[10px] text-on-surface-variant opacity-60 mt-1">PDF, JPG, PNG — حتى 5MB</p>
              <input type="file" name="HighSchool_Certificate_Attachment" class="hidden dyn-file" accept=".pdf,.jpg,.jpeg,.png" onchange="updateFileName(this)"/>
              <p class="file-name text-[11px] text-primary font-bold mt-2 hidden break-all"></p>
            </label>
          </div>
          <div id="req-bachelor" class="flex flex-col gap-1.5 hidden">
            <label class="text-xs font-bold text-on-surface-variant px-1">شهادة البكالوريوس *</label>
            <label class="w-full bg-white border-2 border-dashed border-primary/30 shadow-sm rounded-DEFAULT py-6 px-4 text-center cursor-pointer hover:border-primary/60 hover:bg-blue-50/30 transition-colors group">
              <span class="material-symbols-outlined icon-gradient block mb-1" style="font-size:32px">workspace_premium</span>
              <p class="text-xs text-on-surface-variant">انقر لرفع الشهادة</p>
              <p class="text-[10px] text-on-surface-variant opacity-60 mt-1">PDF, JPG, PNG — حتى 5MB</p>
              <input type="file" name="Bachelor_Certificate_Attachment" class="hidden dyn-file" accept=".pdf,.jpg,.jpeg,.png" onchange="updateFileName(this)"/>
              <p class="file-name text-[11px] text-primary font-bold mt-2 hidden break-all"></p>
            </label>
          </div>
        </div>
        <div class="bg-surface-variant/20 p-4 rounded-xl border border-surface-container-high">
          <label class="flex items-start gap-3 cursor-pointer">
            <input type="checkbox" name="Agreed_to_Terms" required class="mt-0.5 w-4 h-4 text-primary border-outline rounded focus:ring-primary shrink-0">
            <div class="text-xs md:text-sm text-on-surface-variant leading-relaxed">
              <ul class="list-disc list-inside space-y-1">
                <li>أوافق على الشروط والأحكام، وأقرّ بصحة المعلومات المقدمة في هذا الطلب.</li>
                <li>أوافق على استخدام هذه المعلومات لأغراض القبول، وأتعهد بالالتزام بالأنظمة.</li>
                <li>أدرك أن تقديم معلومات غير صحيحة قد يؤدي لإلغاء قبولي لاحقًا.</li>
              </ul>
            </div>
          </label>
        </div>
      </div>
      <div class="mt-8 flex justify-between items-center gap-4">
        <button type="button" class="bg-surface-variant/50 border border-surface-container-high text-on-surface px-6 py-2.5 md:px-8 md:py-3 text-sm rounded-lg font-bold hover:scale-105 transition-all flex items-center gap-1" onclick="prevStep()">
          <span class="material-symbols-outlined text-[20px]">chevron_right</span><span>السابق</span>
        </button>
        <p class="text-xs text-on-surface-variant font-medium hidden md:block">خطوة 4 من 4</p>
        <button type="submit" class="signature-gradient text-white px-6 py-2.5 md:px-8 md:py-3 text-sm rounded-lg font-bold shadow-md hover:scale-105 transition-all flex items-center gap-1 ring-4 ring-primary/20">
          <span class="material-symbols-outlined text-[20px]">check_circle</span><span>إرسال الطلب</span>
        </button>
      </div>
    </section>
  </form>

<section id="success-message" class="hidden bg-white rounded-xl p-8 md:p-12 signature-glow border border-surface-container-high text-center mx-auto max-w-2xl mt-4">
    <div class="w-20 h-20 bg-green-100 text-green-600 rounded-full flex items-center justify-center mx-auto mb-6"><span class="material-symbols-outlined" style="font-size: 48px;">task_alt</span></div>
    <p class="text-lg md:text-xl text-on-surface mb-2">الطالب: <span id="student-name-display" class="font-bold text-primary"></span></p>
    <h2 class="text-2xl md:text-3xl font-bold text-inverse-surface mb-6">تم استلام طلب التحاقك بنجاح</h2>
    <div class="space-y-4 text-sm md:text-base text-on-surface-variant leading-relaxed text-right">
      <p>شكراً لتقديم طلب الإلتحاق إلى جامعة النهضة.</p>
      <p>لقد استلمنا بياناتك والمرفقات. وسيتم مراجعتها من قبل قسم القبول والتسجيل خلال أقرب وقت.</p>
      <div class="bg-surface-variant/20 p-5 rounded-xl border border-surface-container-high mt-6 text-right">
        <p class="font-bold text-on-surface mb-2">نحن هنا لدعمك:</p>
        <p>للاستفسارات أو متابعة حالة الطلب يرجى التواصل عبر:</p>
        <a href="mailto:admissions@nahdaiu.co.uk" class="text-primary font-bold hover:underline inline-block mt-1 dir-ltr" dir="ltr">admissions@nahdaiu.co.uk</a>
      </div>
    </div>
  </section>
</main>

class SearchableDropdown {
  constructor(wrapperId, listId, placeholder, hiddenInputId) {
    this.wrap = document.getElementById(wrapperId); this.listEl = document.getElementById(listId); this.toggleEl = this.wrap.querySelector('.dd-toggle'); this.display = this.wrap.querySelector('.dd-display'); this.arrow = this.wrap.querySelector('.dd-arrow'); this.searchEl = this.wrap.querySelector('.dd-search'); this.hiddenInput = document.getElementById(hiddenInputId); this.selected = null; this._buildList(COUNTRIES); this._bind();
  }
  _buildList(items) {
    this.listEl.innerHTML = '';
    if (!items.length) { this.listEl.innerHTML = '<div class="dd-item" style="opacity:.5;cursor:default">لا توجد نتائج</div>'; return; }
    items.forEach(c => { const el = document.createElement('div'); el.className = 'dd-item' + (c === this.selected ? ' active' : ''); el.textContent = c; el.addEventListener('click', () => this._select(c)); this.listEl.appendChild(el); });
  }
  _bind() {
    this.toggleEl.addEventListener('click', e => { e.stopPropagation(); this._toggle(); });
    this.searchEl.addEventListener('input', () => { const q = this.searchEl.value.trim(); this._buildList(q ? COUNTRIES.filter(c => c.includes(q)) : COUNTRIES); });
    document.addEventListener('click', e => { if (!this.wrap.contains(e.target)) this._close(); });
  }
  _toggle() { this.wrap.classList.contains('open') ? this._close() : this._open(); }
  _open() { document.querySelectorAll('.custom-dd.open').forEach(d => { if (d !== this.wrap) d.classList.remove('open'); }); this.wrap.classList.add('open'); this.arrow.textContent = 'expand_less'; setTimeout(() => this.searchEl.focus(), 60); }
  _close() { this.wrap.classList.remove('open'); this.arrow.textContent = 'expand_more'; this.searchEl.value = ''; this._buildList(COUNTRIES); }
  _select(country) { this.selected = country; this.display.textContent = country; this.display.classList.remove('dd-placeholder'); this.hiddenInput.value = country; this.hiddenInput.classList.remove('input-error'); this._buildList(COUNTRIES); this._close(); }
}

async function submitForm() {
  if (validateCurrentStep()) {
    const form = document.getElementById('main-form'); const submitBtn = form.querySelector('button[type="submit"]'); const originalBtnHTML = submitBtn.innerHTML;
    submitBtn.innerHTML = '<span class="material-symbols-outlined text-[20px] animate-spin">refresh</span> <span>جاري الإرسال...</span>'; submitBtn.disabled = true;

try {
      const formData = new FormData(form);
      const response = await fetch('https://api.web3forms.com/submit', { method: 'POST', body: formData });
      const data = await response.json();
      
      if (data.success) {
        const fname = document.getElementById('fname').value.trim(); const sname = document.getElementById('sname').value.trim(); const lname = document.getElementById('lname').value.trim();
        document.getElementById('student-name-display').textContent = `${fname} ${sname} ${lname}`;
        document.getElementById('stepper-container').classList.add('hidden'); document.getElementById('main-form').classList.add('hidden'); document.getElementById('success-message').classList.remove('hidden');
        if (window.parent && window.parent.postMessage) { window.parent.postMessage('formScrollTop', '*'); }
      } else {
        alert("رسالة خطأ من الخادم: " + (data.message || "تأكد من تفعيل خطة المرفقات أو حجم الملف"));
        submitBtn.innerHTML = originalBtnHTML; submitBtn.disabled = false;
      }
    } catch (error) {
      alert("تعذر الاتصال بالخادم، يرجى المحاولة مرة أخرى.");
      submitBtn.innerHTML = originalBtnHTML; submitBtn.disabled = false;
    }
  }
}

document.addEventListener('DOMContentLoaded', () => { initDP(); new SearchableDropdown('dd-nationality', 'dd-nationality-list', 'اختر الجنسية', 'nationality-val'); new SearchableDropdown('dd-residence', 'dd-residence-list', 'اختر البلد', 'residence-val'); updateStepper(); });
</script>
</body>
</html>