<?php
/**
 * DMC Report (Single Student) Refactored
 * Using Bootstrap 5.3 and AJAX
 */

// $crud and App_DB are available from index.php
?>

<div class="container py-4">
	<!-- Header Section -->
	<div class="d-flex justify-content-between align-items-center mb-4 border-bottom pb-3 no-print">
		<h2 class="fw-bold mb-0 text-primary urdu-regular">
			<i class="bi bi-file-earmark-person me-2"></i> کشف الدرجات (DMC)
		</h2>
		<a href="index.php?cmd=dmcFrm" class="btn btn-outline-success rounded-pill urdu-regular">
			<i class="bi bi-person-badge me-2"></i> انفرادی ڈی ایم سی پر جائیں
		</a>
	</div>

	<!-- Filter Card -->
	<div class="card border-0 shadow-sm rounded-4 mb-4 no-print bg-light">
		<div class="card-body p-4">
			<form id="searchForm">
				<div class="row g-3 align-items-end text-end">
					<div class="col-md-4">
						<label class="form-label fw-bold urdu-regular fs-5">درجہ منتخب کریں</label>
						<?php $crud->darjaatCmb('darja', 'required', 'form-select form-select-lg text-end urdu-regular'); ?>
					</div>
					<div class="col-md-4">
						<label class="form-label fw-bold urdu-regular fs-5">طالب العلم</label>
						<select id="regSno" name="regSno" class="form-select form-select-lg text-end urdu-regular"
							required>
							<option value="">پہلے درجہ منتخب کریں</option>
						</select>
					</div>
					<div class="col-md-2">
						<label class="form-label fw-bold urdu-regular fs-5">سال</label>
						<?php
						$yr = "";
						if (isset($_SESSION['hijri'])) {
							$hij = explode("-", $_SESSION['hijri']);
							$yr = isset($hij[2]) ? $hij[2] : $hij[0];
						} else {
							$yr = date('Y') - 1;
						}
						?>
						<input type="number" id="year" name="year" class="form-control form-control-lg text-center"
							value="<?php echo $yr; ?>" required>
					</div>
					<div class="col-md-2">
						<button type="submit"
							class="btn btn-primary btn-lg w-100 rounded-pill shadow-sm urdu-regular fs-5">
							<i class="bi bi-search me-1"></i> تلاش کریں
						</button>
					</div>
				</div>
			</form>
		</div>
	</div>

	<!-- Report Area -->
	<div id="reportContainer" class="mt-4">
		<!-- Results will be injected here via JS -->
		<div class="text-center p-5 text-muted urdu-regular border rounded-4 bg-white shadow-sm opacity-50 no-print">
			<i class="bi bi-info-circle fs-1 mb-3 d-block"></i>
			<p class="fs-4">رپورٹ دیکھنے کے لئے اوپر کے خانے پُر کر کے تلاش کے بٹن پر کلک کریں۔</p>
		</div>
	</div>
</div>

<!-- Scripts -->
<script src="assets/js/dmc_frm_single_std_all.js"></script>

<style>
	@media print {
		.no-print {
			display: none !important;
		}

		.container {
			width: 100% !important;
			max-width: none !important;
			margin: 0 !important;
			padding: 0 !important;
		}

		#printableArea {
			box-shadow: none !important;
			border: none !important;
			padding: 0 !important;
		}

		body {
			background-color: #white !important;
		}
	}

	.urdu-regular {
		font-family: 'Jameel Noori Nastaleeq', 'Noto Nastaliq Urdu', serif;
	}

	.card {
		border: 1px solid rgba(0, 0, 0, 0.05) !important;
	}

	.form-select-lg {
		font-size: 1.1rem;
	}
</style>