<?php
// Get initial Darja if provided in request
$initialDarja = $_REQUEST['darjaSn'] ?? '';
?>
<div id="editSubjectsContent" dir="rtl" class="p-2">
	<!-- Main Form Card -->
	<div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
		<!-- Card Header -->
		<div class="card-header bg-primary bg-opacity-10 border-0 py-3 px-4">
			<h5 class="mb-0 fw-bold text-primary d-flex align-items-center justify-content-start urdu-regular fs-4">
				<i class="bi bi-pencil-square ms-2"></i> مضامین میں تبدیلی
			</h5>
		</div>

		<!-- Card Body -->
		<div class="card-body p-4 bg-white text-end">
			<!-- Darja Selection Section -->
			<div class="row mb-5 justify-content-center">
				<div class="col-6">
					<label class="form-label fw-bold text-dark mb-3 urdu-regular fs-4" for="darja">درجہ منتخب
						کریں</label>
					<div class="input-group input-group-lg shadow-sm rounded-3 overflow-hidden" dir="ltr">
						<span class="input-group-text bg-light border-0 text-primary"><i
								class="bi bi-journal-bookmark"></i></span>
						<?php
						// Using darjaatCmb but we need to ensure it works with our new JS.
						// We'll pass the initial value and class.
						$crud->darjaatCmb('darja', '', 'form-select border border-1 text-start urdu-regular', $initialDarja);
						?>
					</div>
					<div class="mt-2 text-muted small urdu-regular">
						کسی بھی درجہ کے مضامین تبدیل کرنے کے لیے درجہ منتخب کیجئے
					</div>
				</div>
			</div>

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

			<!-- Subjects Container -->
			<div id="subjectsList" class="subjects-container">
				<!-- Dynamically populated via JS -->
				<div class="text-center p-5 text-muted urdu-regular fs-5">
					<i class="bi bi-arrow-up-circle d-block fs-1 mb-3 opacity-50"></i>
					مضامین کی فہرست دیکھنے کے لیے پہلے درجہ منتخب کریں
				</div>
			</div>
		</div>
	</div>
</div>

<style>
	/* Custom Styling for the modern look */
	#editSubjectsContent .input-group {
		flex-direction: row-reverse;
	}

	#editSubjectsContent .form-select {
		background-position: left 0.75rem center;
		padding-left: 2.5rem;
		padding-right: 1.25rem;
		border: 2px solid transparent;
		transition: all 0.3s ease;
		cursor: pointer;
	}

	#editSubjectsContent .form-select:hover {
		background-color: #f8f9fa;
		border-color: rgba(13, 110, 253, 0.2);
	}

	#editSubjectsContent .form-select:focus {
		border-color: #0d6efd;
		box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.1);
		background-color: #fff;
	}

	/* Professional Optgroup and Option Styling */
	#editSubjectsContent optgroup {
		font-weight: 700;
		color: #0d6efd;
		background-color: #f1f8ff;
		padding: 10px;
		font-size: 1.1rem;
	}

	#editSubjectsContent option {
		font-weight: 400;
		color: #212529;
		background-color: #fff;
		padding: 8px 15px;
		font-size: 1rem;
	}

	#editSubjectsContent .card {
		border: 1px solid rgba(13, 110, 253, 0.1) !important;
	}

	.subjects-container {
		min-height: 200px;
		transition: all 0.3s ease;
	}

	/* Input focus styling */
	.subjects-container .form-control:focus {
		background-color: #fff !important;
		box-shadow: none;
		border: 1px solid #198754 !important;
	}
</style>

<!-- Page Specific JS -->
<script src="assets/js/edit_subjects.js"></script>