<?php
/**
 * Registration Update Form – Modern Bootstrap 5 Version
 * AJAX-based search and update via APIs/registrationUpdateForm.php
 */
?>

<div id="registrationUpdateWrapper" dir="rtl">
	<!-- Page Header -->
	<div class="mb-4">
		<h2 class="fw-bold mb-0 text-primary">
			<i class="bi bi-person-gear me-2"></i> طالب علم کا ریکارڈ تبدیل کریں
		</h2>
		<p class="text-muted small"><?php echo htmlspecialchars(M_Name); ?></p>
	</div>

	<!-- Search Section -->
	<div class="card border-0 shadow-sm mb-4 bg-light">
		<div class="card-body p-4">
			<form id="searchForm">
				<div class="row g-3 align-items-end">
					<div class="col-md-5">
						<label class="form-label fw-semibold" for="registrationNoSearch">رجسٹریشن نمبر درج
							کریں</label>
						<input type="text" id="registrationNoSearch" name="registrationNoSearch"
							class="form-control form-control-lg text-start" dir="ltr" placeholder="1447-09-000002">
					</div>
					<div class="col-md-5">
						<label class="form-label fw-semibold" for="darjaS">حالیہ درجہ</label>
						<?php $crud->darjaatCmb('darjaS', 'class="form-select form-select-lg"'); ?>
					</div>
					<div class="col-md-2">
						<button type="submit" id="btnSearch" class="btn btn-primary btn-lg w-100">
							<i class="bi bi-search me-2"></i> تلاش کریں
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<hr class="my-4 opacity-25">

	<!-- Update Form Section (Hidden until search result) -->
	<div id="updateFormSection" class="d-none">
		<form id="registrationForm" novalidate>
			<!-- Hidden Fields -->
			<input type="hidden" id="sno" name="sno">
			<input type="hidden" id="currentDarja" name="currentDarja">
			<input type="hidden" id="photoBase64" name="photoBase64">

			<div class="row g-4">
				<!-- COLUMN LEFT: Main Form -->
				<div class="col-lg-9">

					<!-- Section: Basic Info -->
					<div class="card border-0 shadow-sm mb-4">
						<div class="card-header bg-primary text-white fw-bold">
							<i class="bi bi-person-fill me-2"></i> ذاتی معلومات
						</div>
						<div class="card-body p-4">
							<div class="row g-3">
								<div class="col-md-6">
									<label class="form-label fw-semibold">طالب علم کا نام</label>
									<input type="text" id="stdName" name="stdName" class="form-control" required>
								</div>
								<div class="col-md-6">
									<label class="form-label fw-semibold">ولدیت</label>
									<input type="text" id="fatherName" name="fatherName" class="form-control" required>
								</div>
								<div class="col-md-4">
									<label class="form-label fw-semibold">شہریت</label>
									<input type="text" id="nationality" name="nationality" class="form-control"
										required>
								</div>
								<div class="col-md-4">
									<label class="form-label fw-semibold">تاریخِ پیدائش</label>
									<input type="text" id="dob" name="dob" class="form-control hijri-picker" readonly
										required>
								</div>
								<div class="col-md-4">
									<label class="form-label fw-semibold">تعلیمی قابلیت</label>
									<input type="text" id="qualification" name="qualification" class="form-control"
										required>
								</div>
								<div class="col-md-6">
									<div class="d-flex gap-4 pt-2">
										<div class="form-check">
											<input class="form-check-input" type="radio" name="isLocal" id="isLocal1"
												value="1">
											<label class="form-check-label" for="isLocal1">رہائشی</label>
										</div>
										<div class="form-check">
											<input class="form-check-input" type="radio" name="isLocal" id="isLocal2"
												value="0">
											<label class="form-check-label" for="isLocal2">غیر رہائشی</label>
										</div>
									</div>
								</div>
								<div class="col-md-6">
									<label class="form-label fw-semibold">والد کا پیشہ</label>
									<input type="text" id="fatherProfession" name="fatherProfession"
										class="form-control" required>
								</div>
							</div>
						</div>
					</div>

					<!-- Section: Guardian Info -->
					<div class="card border-0 shadow-sm mb-4">
						<div class="card-header bg-success text-white fw-bold">
							<i class="bi bi-people-fill me-2"></i> سرپرست / ضامن کی معلومات
						</div>
						<div class="card-body p-4">
							<div class="row g-3">
								<div class="col-md-6">
									<label class="form-label fw-semibold">سرپرست کا نام</label>
									<input type="text" id="guirdianName" name="guirdianName" class="form-control"
										required>
								</div>
								<div class="col-md-3">
									<label class="form-label fw-semibold">رابطہ نمبر</label>
									<input type="tel" id="cellNo" name="cellNo" class="form-control text-start"
										dir="ltr" required>
								</div>
								<div class="col-md-3">
									<label class="form-label fw-semibold">سرپرست کا موبائل</label>
									<input type="tel" id="gurdianCellNo" name="gurdianCellNo"
										class="form-control text-start" dir="ltr" required>
								</div>
								<div class="col-md-3">
									<label class="form-label fw-semibold">ای میل (Email) <span
											class="text-muted small">(اختیاری)</span></label>
									<input type="email" id="contact_email" name="contact_email"
										class="form-control text-start" dir="ltr" placeholder="اختیاری">
								</div>
								<div class="col-md-6">
									<label class="form-label fw-semibold">مستقل پتہ</label>
									<textarea id="permanentAddress" name="permanentAddress" class="form-control"
										rows="2" required></textarea>
								</div>
								<div class="col-md-6">
									<div class="d-flex justify-content-between">
										<label class="form-label fw-semibold">موجودہ پتہ</label>
										<a href="#" id="copyAddressBtn"
											class="text-primary text-decoration-none small"><i
												class="bi bi-copy me-1"></i> نقل کریں</a>
									</div>
									<textarea id="presentAddress" name="presentAddress" class="form-control" rows="2"
										required></textarea>
								</div>
								<div class="col-md-12">
									<label class="form-label fw-semibold">سرپرست سے رشتہ</label>
									<input type="text" id="relationShipWithGuirdian" name="relationShipWithGuirdian"
										class="form-control" required>
								</div>
							</div>
						</div>
					</div>

					<!-- Section: ID Document -->
					<div class="card border-0 shadow-sm mb-4">
						<div class="card-header bg-warning text-dark fw-bold">
							<i class="bi bi-card-text me-2"></i> شناختی دستاویز
						</div>
						<div class="card-body p-4">
							<div class="row g-3">
								<div class="col-12">
									<div class="btn-group w-100" role="group">
										<input type="radio" class="btn-check" name="nicOpt" id="nicOpt1" value="1">
										<label class="btn btn-outline-primary" for="nicOpt1">طالب علم کا CNIC</label>
										<input type="radio" class="btn-check" name="nicOpt" id="nicOpt2" value="2">
										<label class="btn btn-outline-success" for="nicOpt2">سرپرست کا CNIC</label>
										<input type="radio" class="btn-check" name="nicOpt" id="nicOpt3" value="3">
										<label class="btn btn-outline-danger" for="nicOpt3">فارم "ب"</label>
									</div>
								</div>
								<div class="col-md-4 d-none" id="stdNicWrap">
									<label class="form-label fw-semibold">CNIC نمبر</label>
									<input type="text" id="stdNic" name="stdNic" class="form-control text-start"
										dir="ltr">
								</div>
								<div class="col-md-4 d-none" id="guirdianNicWrap">
									<label class="form-label fw-semibold">والد کا CNIC</label>
									<input type="text" id="guirdianNic" name="guirdianNic"
										class="form-control text-start" dir="ltr">
								</div>
								<div class="col-md-4 d-none" id="formBWrap">
									<label class="form-label fw-semibold">فارم ب نمبر</label>
									<input type="text" id="formB" name="formB" class="form-control text-start"
										dir="ltr">
								</div>
							</div>
						</div>
					</div>

					<!-- Section: Auth -->
					<div class="card border-0 shadow-sm mb-4">
						<div class="card-header bg-info text-white fw-bold">
							<i class="bi bi-pen me-2"></i> تصدیق
						</div>
						<div class="card-body p-4">
							<div class="row g-3">
								<div class="col-md-4">
									<label class="form-label fw-semibold">گواہ کا نام</label>
									<input type="text" id="guirdianNameAuth" name="guirdianNameAuth"
										class="form-control" required>
								</div>
								<div class="col-md-4">
									<label class="form-label fw-semibold">گواہ کے والد کا نام</label>
									<input type="text" id="guirdianFNameAuth" name="guirdianFNameAuth"
										class="form-control" required>
								</div>
								<div class="col-md-4">
									<label class="form-label fw-semibold">دستخط / نشانِ انگوٹھا</label>
									<input type="text" id="guirdianSign" name="guirdianSign" class="form-control">
								</div>
								<div class="col-md-4">
									<label class="form-label fw-semibold">ناظم کے دستخط</label>
									<input type="text" id="signNazim" name="signNazim" class="form-control">
								</div>
							</div>
						</div>
					</div>

					<!-- Section: Admission -->
					<div class="card border-0 shadow-sm mb-4">
						<div class="card-header bg-dark text-white fw-bold">
							<i class="bi bi-mortarboard me-2"></i> داخلہ کی تفصیل
						</div>
						<div class="card-body p-4">
							<div class="row g-3">
								<div class="col-md-4">
									<label class="form-label fw-semibold">منتخب درجہ</label>
									<?php $crud->darjaatCmb('darja', 'class="form-select" required'); ?>
								</div>
								<div class="col-md-4">
									<label class="form-label fw-semibold">رجسٹریشن نمبر</label>
									<input type="text" id="registrationNo" name="registrationNo"
										class="form-control text-start" dir="ltr" required>
								</div>
								<div class="col-md-4">
									<label class="form-label fw-semibold">تاریخِ داخلہ</label>
									<input type="text" id="admissionDate" name="admissionDate"
										class="form-control hijri-picker" readonly required>
								</div>
								<div class="col-md-4">
									<label class="form-label fw-semibold">تاریخِ اختتام</label>
									<input type="text" id="dateEnd" name="dateEnd" class="form-control hijri-picker"
										readonly required>
								</div>
							</div>
						</div>
					</div>

				</div><!-- /col-lg-9 -->

				<!-- COLUMN RIGHT: Photo -->
				<div class="col-lg-3">
					<div class="card border-0 shadow-sm sticky-top mt-1 mb-4">
						<div class="card-header bg-secondary text-white fw-bold text-center">فوٹو تبدیل کریں</div>
						<div class="card-body p-3 text-center">
							<div id="photoPreview"
								class="photo-preview-container rounded mb-3 d-flex align-items-center justify-content-center overflow-hidden position-relative">
								<i class="bi bi-person-fill photo-placeholder-icon"></i>
							</div>

							<div id="cameraContainer" class="mb-2 d-none">
								<video id="videoFeed" class="w-100 rounded mh-100" autoplay playsinline muted></video>
								<select id="cameraSource" class="form-select form-select-sm mt-1 mb-1"></select>
								<div class="d-grid gap-1 mt-1">
									<button type="button" class="btn btn-success btn-sm" id="snapBtn">کیپچر</button>
									<button type="button" class="btn btn-secondary btn-sm" id="closeCameraBtn">بند
										کریں</button>
								</div>
							</div>
							<canvas id="captureCanvas" class="d-none"></canvas>

							<div class="d-grid gap-2" id="photoActionBtns">
								<button type="button" class="btn btn-primary btn-sm" id="openCameraBtn">کیمرہ استعمال
									کریں</button>
								<label class="btn btn-outline-secondary btn-sm mb-0" for="photoUpload">فائل اپ لوڈ
									کریں</label>
								<input type="file" id="photoUpload" accept="image/*" class="d-none">
								<button type="button" class="btn btn-outline-danger btn-sm d-none"
									id="clearPhotoBtn">تصویر ہٹائیں</button>
							</div>
						</div>
					</div>
				</div>
			</div><!-- /row -->

			<!-- Form Actions -->
			<div class="row mt-4 mb-5 g-3">
				<div class="col-12 d-flex gap-3 justify-content-between">
					<div class="d-flex gap-2">
						<button type="submit" class="btn btn-primary btn-lg px-5" id="btnSave">
							<i class="bi bi-save me-2"></i> تبدیلیاں محفوظ کریں
						</button>
						<button type="button" class="btn btn-outline-danger" id="btnKharij">طالب علم کو خارج
							کریں</button>
						<button type="button" class="btn btn-danger" id="btnDel">ریکارڈ ختم کریں</button>
					</div>
				</div>
			</div>
		</form>
	</div><!-- /updateFormSection -->

	<script src="assets/js/registration_update_form.js"></script>
</div>