<?php
/**
 * Registration Form – Bootstrap 5 Modern Version
 * AJAX-based save via APIs/saveRegistration.php
 */
$format = "DD/MM/YYYY";
$date = date("d/m/Y");
$yearHijri = $hijri->GregorianToHijri($date, $format);
$dateAdmition = $_SESSION["hijri"];
$hijriAry = explode("-", $_SESSION["hijri"]);
$dateEndDefault = (isset($hijriAry[0]) ? ($hijriAry[0] + 1) : date('Y')) . '-' . (isset($hijriAry[1]) ? $hijriAry[1] : '01') . '-' . (isset($hijriAry[2]) ? $hijriAry[2] : '01');

// Auto-generate next registration number with Hijri Prefix (YYYY-MM-RegNo)
$regNo = $crud->getValue("SELECT COUNT(sno) FROM regnumbers");
$hijriParts = explode('-', $_SESSION['hijri']);
$hijriPrefix = (count($hijriParts) >= 2) ? ($hijriParts[0] . '-' . $hijriParts[1] . '-') : '';
$nextRegNo = $hijriPrefix . $method->changeNumberFormate((int) $regNo + 1);
?>

<div id="registrationFormWrapper" dir="rtl">
	<!-- Page Header -->
	<div class="d-flex justify-content-between align-items-center mb-4">
		<div>
			<h2 class="fw-bold mb-0 text-primary">
				<i class="bi bi-person-plus me-2"></i>فارمِ داخلہ
			</h2>
			<p class="text-muted mb-0 small">
				<?php echo htmlspecialchars(M_Name); ?>
			</p>
		</div>
		<span class="badge bg-primary-subtle text-primary border border-primary-subtle fs-6 px-3 py-2">
			کل طلباء: <span id="tStds" class="fw-bold">
				<?php echo (int) $regNo; ?>
			</span>
		</span>
	</div>

	<!-- Alert placeholder -->
	<div id="formAlert"></div>

	<form id="registrationForm" novalidate>
		<div class="row g-4">

			<!-- =================== COLUMN LEFT: Form Fields =================== -->
			<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">
								<input type="text" id="stdName" name="stdName" class="form-control" required
									placeholder="طالب العلم کا مکمل نام لکھیں *">
								<div class="invalid-feedback">نام لازمی ہے۔</div>
							</div>

							<div class="col-md-6">
								<input type="text" id="fatherName" name="fatherName" class="form-control" required
									placeholder="والد کا نام *">
								<div class="invalid-feedback">ولدیت لازمی ہے۔</div>
							</div>

							<div class="col-md-4">
								<input type="text" id="nationality" name="nationality" class="form-control"
									placeholder="شہریت مثلاً پاکستانی *" required>
								<div class="invalid-feedback">شہریت لازمی ہے۔</div>
							</div>

							<div class="col-md-4">
								<input type="text" id="dob" name="dob" class="form-control hijri-picker"
									placeholder="تاریخِ پیدائش *" title="تاریخِ پیدائش *" readonly required>
								<div class="invalid-feedback">تاریخِ پیدائش لازمی ہے۔</div>
							</div>

							<div class="col-md-4">
								<input type="text" id="qualification" name="qualification" class="form-control" required
									placeholder="تعلیمی قابلیت مثلاً: میٹرک *">
								<div class="invalid-feedback">تعلیمی قابلیت لازمی ہے۔</div>
							</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" checked>
										<label class="form-check-label" for="isLocal2">غیر رہائشی</label>
									</div>
								</div>
							</div>

							<div class="col-md-6">
								<input type="text" id="fatherProfession" name="fatherProfession" class="form-control"
									required placeholder="والد کا پیشہ مثلاً تاجر *">
								<div class="invalid-feedback">والد کا پیشہ لازمی ہے۔</div>
							</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" for="guirdianName">سرپرست کا نام <span
										class="text-danger">*</span></label>
								<input type="text" id="guirdianName" name="guirdianName" class="form-control" required
									placeholder="سرپرست کا مکمل نام">
								<div class="invalid-feedback">سرپرست کا نام لازمی ہے۔</div>
							</div>

							<div class="col-md-3">
								<label class="form-label fw-semibold" for="cellNo">رابطہ نمبر <span
										class="text-danger">*</span></label>
								<input type="tel" id="cellNo" name="cellNo" class="form-control text-start" dir="ltr"
									required placeholder="0300-0000000">
								<div class="invalid-feedback">رابطہ نمبر لازمی ہے۔</div>
							</div>

							<div class="col-md-3">
								<label class="form-label fw-semibold" for="gurdianCellNo">سرپرست کا موبائل <span
										class="text-danger">*</span></label>
								<input type="tel" id="gurdianCellNo" name="gurdianCellNo"
									class="form-control text-start" dir="ltr" required placeholder="0300-0000000">
								<div class="invalid-feedback">سرپرست کا موبائل لازمی ہے۔</div>
							</div>


							<div class="col-md-5">
								<textarea id="permanentAddress" name="permanentAddress" class="form-control" rows="2"
									required placeholder="مستقل پتہ لکھیں"></textarea>
								<div class="invalid-feedback">مستقل پتہ لازمی ہے۔</div>
							</div>

							<div class="col-md-2 text-center">
								<a href="#" id="copyAddressBtn" class="text-primary text-decoration-none small"><i
										class="bi bi-copy me-1"></i> مستقل پتہ کاپی کریں</a>
							</div>
							<div class="col-md-5">
								<textarea id="presentAddress" name="presentAddress" class="form-control" rows="2"
									required placeholder="موجودہ پتہ لکھیں"></textarea>
								<div class="invalid-feedback">موجودہ پتہ لازمی ہے۔</div>
							</div>


							<div class="col-md-6">
								<label class="form-label fw-semibold" for="relationShipWithGuirdian">سرپرست سے رشتہ
									<span class="text-danger">*</span></label>
								<input type="text" id="relationShipWithGuirdian" name="relationShipWithGuirdian"
									class="form-control" required placeholder="مثلاً: والد، چچا">
								<div class="invalid-feedback">رشتہ لازمی ہے۔</div>
							</div>

							<div class="col-md-6">
								<label class="form-label fw-semibold" for="contact_email">ای میل (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>
					</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"
										autocomplete="off" required>
									<label class="btn btn-outline-primary" for="nicOpt1"><i
											class="bi bi-person-vcard me-1"></i>طالب علم کا CNIC</label>
									<input type="radio" class="btn-check" name="nicOpt" id="nicOpt2" value="2"
										autocomplete="off" required>
									<label class="btn btn-outline-success" for="nicOpt2"><i
											class="bi bi-person-vcard me-1"></i>سرپرست کا CNIC</label>
									<input type="radio" class="btn-check" name="nicOpt" id="nicOpt3" value="3"
										autocomplete="off" required>
									<label class="btn btn-outline-danger" for="nicOpt3"><i
											class="bi bi-file-earmark-person me-1"></i>فارم "ب"</label>
								</div>
								<div class="small text-danger mt-1 ms-2 d-none" id="nicOptFeedback"><i
										class="bi bi-exclamation-circle me-1"></i> ان میں سے کسی ایک شناختی دستاویز کا
									انتخاب لازمی ہے۔</div>
							</div>
							<div class="col-md-4 d-none" id="stdNicWrap">
								<label class="form-label fw-semibold" for="stdNic">طالب علم کا شناختی کارڈ نمبر</label>
								<input type="text" id="stdNic" name="stdNic" class="form-control text-start" dir="ltr"
									placeholder="#####-#######-#" pattern="[0-9]{5}-[0-9]{7}-[0-9]{1}">
								<div class="form-text mt-1 text-muted" dir="ltr"><small>Format: #####-#######-#</small>
								</div>
								<div class="invalid-feedback">درست فارمیٹ میں شناختی کارڈ نمبر لکھیں۔ (مثال کے طور پر:
									12345-1234567-1)</div>
							</div>
							<div class="col-md-4 d-none" id="guirdianNicWrap">
								<label class="form-label fw-semibold" for="guirdianNic">سرپرست کا شناختی کارڈ
									نمبر</label>
								<input type="text" id="guirdianNic" name="guirdianNic" class="form-control text-start"
									dir="ltr" placeholder="#####-#######-#" pattern="[0-9]{5}-[0-9]{7}-[0-9]{1}">
								<div class="form-text mt-1 text-muted" dir="ltr"><small>Format: #####-#######-#</small>
								</div>
								<div class="invalid-feedback">درست فارمیٹ میں شناختی کارڈ نمبر لکھیں۔ (مثال کے طور پر:
									12345-1234567-1)</div>
							</div>
							<div class="col-md-4 d-none" id="formBWrap">
								<label class="form-label fw-semibold" for="formB">فارم ب نمبر</label>
								<input type="text" id="formB" name="formB" class="form-control text-start" dir="ltr"
									placeholder="#####-#######-#" pattern="[0-9]{5}-[0-9]{7}-[0-9]{1}">
								<div class="form-text mt-1 text-muted" dir="ltr"><small>Format: #####-#######-#</small>
								</div>
								<div class="invalid-feedback">درست فارمیٹ میں فارم ب نمبر لکھیں۔ (مثال کے طور پر:
									12345-1234567-1)</div>
							</div>
						</div>
					</div>
				</div>

				<!-- Section: Witness & 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">
								<input type="text" id="guirdianNameAuth" name="guirdianNameAuth" class="form-control"
									required placeholder="گواہ کا نام *">
								<div class="invalid-feedback">نام گواہ لازمی ہے۔</div>
							</div>
							<div class="col-md-4">
								<input type="text" id="guirdianFNameAuth" name="guirdianFNameAuth" class="form-control"
									required placeholder="گواہ کے والد کا نام *">
								<div class="invalid-feedback">یہ خانہ لازمی ہے۔</div>
							</div>
							<div class="col-md-4">
								<input type="text" id="guirdianSign" name="guirdianSign" class="form-control"
									placeholder="دستخط / نشانِ انگوٹھا *">
							</div>
							<div class="col-md-4">
								<input type="text" id="signNazim" name="signNazim" class="form-control"
									placeholder="ناظم کے دستخط *">
							</div>
						</div>
					</div>
				</div>

				<!-- Section: Admission Details -->
				<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-6">
								<label class="form-label fw-semibold" for="darja">درجہ <span
										class="text-danger">*</span></label>
								<?php
								$crud->darjaatCmb('darja', 'class="form-select" required onchange="countRegNum(this.value)"');
								?>
								<div class="invalid-feedback">درجہ کا انتخاب کریں۔</div>
							</div>

							<div class="col-md-3">
								<label class="form-label fw-semibold" for="admissionNo">داخلہ نمبر <span
										class="text-danger">*</span></label>
								<input type="text" id="admissionNo" name="admissionNo" class="form-control" required
									placeholder="داخلہ نمبر">
								<div class="invalid-feedback">داخلہ نمبر لازمی ہے۔</div>
							</div>

							<div class="col-md-3">
								<label class="form-label fw-semibold" for="registrationNo">
									رجسٹریشن نمبر <span class="text-danger">*</span>
									<a href="#" class="small ms-1" id="checkRegNoBtn" title="چیک کریں"><i
											class="bi bi-check-circle"></i> Check</a>
								</label>
								<input type="text" id="registrationNo" name="registrationNo"
									class="form-control text-start" dir="ltr" required value="<?= $nextRegNo; ?>"
									data-hijri-prefix="<?= $hijriPrefix; ?>" readonly>
								<div id="regNoMsg" class="form-text"></div>
								<div class="invalid-feedback">رجسٹریشن نمبر لازمی ہے۔</div>
							</div>

							<div class="col-md-4">
								<label class="form-label fw-semibold" for="admissionDate">تاریخِ داخلہ <span
										class="text-danger">*</span></label>
								<input type="text" id="admissionDate" name="admissionDate"
									class="form-control hijri-picker" required value="<?= $dateAdmition; ?>"
									placeholder="YYYY-MM-DD" readonly>
								<div class="invalid-feedback">تاریخِ داخلہ لازمی ہے۔</div>
							</div>

							<div class="col-md-4">
								<label class="form-label fw-semibold" for="dateEnd">اختتامِ داخلہ <span
										class="text-danger">*</span></label>
								<input type="text" id="dateEnd" name="dateEnd" class="form-control hijri-picker"
									required value="<?= $dateEndDefault; ?>" placeholder="YYYY-MM-DD" readonly>
								<div class="invalid-feedback">اختتامِ داخلہ لازمی ہے۔</div>
							</div>

						</div>
					</div>
				</div>

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

			<!-- =================== COLUMN RIGHT: Photo Capture =================== -->
			<div class="col-lg-3">
				<div class="card border-0 shadow-sm sticky-top mb-4">
					<div class="card-header bg-secondary text-white fw-bold text-center">
						<i class="bi bi-camera-fill me-2"></i> طالب علم کی تصویر
					</div>
					<div class="card-body p-3 text-center">

						<!-- Preview -->
						<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>

						<!-- Camera viewfinder (hidden until open) -->
						<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">
								<button type="button" class="btn btn-success btn-sm" id="snapBtn">
									<i class="bi bi-camera me-1"></i> فوٹو کھینچیں
								</button>
								<button type="button" class="btn btn-secondary btn-sm" id="closeCameraBtn">
									<i class="bi bi-x-circle me-1"></i> بند کریں
								</button>
							</div>
						</div>

						<!-- Hidden canvas for capture -->
						<canvas id="captureCanvas" class="d-none"></canvas>

						<!-- Hidden inputs -->
						<input type="hidden" id="photoBase64" name="photoBase64">

						<!-- Action buttons -->
						<div class="d-grid gap-2 mt-2" id="photoActionBtns">
							<button type="button" class="btn btn-primary btn-sm" id="openCameraBtn">
								<i class="bi bi-webcam me-1"></i> کیمرہ سے تصویر لیں
							</button>
							<label class="btn btn-outline-secondary btn-sm mb-0" for="photoUpload">
								<i class="bi bi-upload me-1"></i> فائل سے اپ لوڈ کریں
							</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">
								<i class="bi bi-trash me-1"></i> تصویر ہٹائیں
							</button>
						</div>
					</div>
				</div>
			</div>

		</div><!-- /row -->

		<!-- Submit Row -->
		<div class="row mt-3 mb-5 g-3">
			<div class="col-12 d-flex gap-3 justify-content-start">
				<button type="submit" class="btn btn-primary btn-lg px-5" id="btnSave">
					<i class="bi bi-save me-2"></i> محفوظ کیجئے
				</button>
				<button type="reset" class="btn btn-outline-secondary btn-lg" id="btnReset">
					<i class="bi bi-arrow-counterclockwise me-2"></i> دوبارہ لکھیں
				</button>
			</div>
		</div>

	</form>

	<script src="assets/js/registration_form.js"></script>
</div><!-- /registrationFormWrapper -->