<div class="container py-5" dir="rtl">
	<div class="row justify-content-center">
		<div class="col-12 col-md-8 col-lg-6">
			<div class="card border-0 shadow-lg rounded-4 overflow-hidden">
				<div class="card-header bg-primary py-4 text-center">
					<div class="mb-2">
						<i class="bi bi-shield-lock-fill text-white fs-1"></i>
					</div>
					<h4 class="card-title mb-0 text-white fw-bold">پاس ورڈ تبدیلی</h4>
					<p class="text-white-50 small mb-0 mt-1">اپنے اکاؤنٹ کی حفاظت کے لیے پاس ورڈ تبدیل کریں</p>
				</div>
				<div class="card-body p-4 p-md-5">
					<?php
					$crud = new App_DB(DBU::$dba_user);
					$userNameStr = "SELECT ownreName FROM login WHERE userid = :userid";
					$ownerName = $crud->getValue($userNameStr, ['userid' => $_SESSION['userid']]);
					?>
					<div class="alert alert-info border-0 rounded-3 mb-4 py-3">
						<div class="d-flex align-items-center">
							<i class="bi bi-person-circle fs-4 me-3 text-primary"></i>
							<div>
								<small class="text-muted d-block">خوش آمدید، لائسنس خریدار</small>
								<span class="fw-bold text-dark"><?php echo htmlspecialchars($ownerName); ?></span>
							</div>
						</div>
					</div>

					<form id="changePasswordForm">
						<div class="mb-4">
							<label class="form-label fw-semibold" for="oldPassword">پرانا پاس ورڈ</label>
							<div class="input-group">
								<span class="input-group-text bg-light border-0 px-3"><i class="bi bi-key"></i></span>
								<input type="password" name="oldPassword" id="oldPassword"
									class="form-control bg-light border-0 py-3"
									placeholder="اپنا پرانا پاس ورڈ درج کریں" required>
								<button class="btn btn-light border-0 px-3 password-toggle text-muted" type="button">
									<i class="bi bi-eye"></i>
								</button>
							</div>
						</div>

						<div class="mb-4">
							<label class="form-label fw-semibold" for="newPassword">نیا پاس ورڈ</label>
							<div class="input-group mb-2">
								<span class="input-group-text bg-light border-0 px-3"><i class="bi bi-lock"></i></span>
								<input type="password" name="newPassword" id="newPassword"
									class="form-control bg-light border-0 py-3" placeholder="نیا پاس ورڈ درج کریں"
									required>
								<button class="btn btn-light border-0 px-3 password-toggle text-muted" type="button">
									<i class="bi bi-eye"></i>
								</button>
							</div>
							<!-- Password Strength Indicator -->
							<div class="progress mb-1" style="height: 6px;">
								<div id="strengthMeter" class="progress-bar" role="progressbar" style="width: 0%;"
									aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
							</div>
							<div class="d-flex justify-content-between align-items-center">
								<small id="strengthText" class="fw-medium small transition-all">بہت کمزور</small>
								<small class="text-muted extra-small">کم از کم 8 حروف، نمبر اور علامات استعمال
									کریں</small>
							</div>
						</div>

						<div class="mb-4">
							<label class="form-label fw-semibold" for="confirmPassword">نیا پاس ورڈ دوبارہ لکھیں</label>
							<div class="input-group">
								<span class="input-group-text bg-light border-0 px-3"><i
										class="bi bi-check2-circle"></i></span>
								<input type="password" name="confirmPassword" id="confirmPassword"
									class="form-control bg-light border-0 py-3" placeholder="نئے پاس ورڈ کی تصدیق کریں"
									required>
								<button class="btn btn-light border-0 px-3 password-toggle text-muted" type="button">
									<i class="bi bi-eye"></i>
								</button>
							</div>
							<div id="matchWarning" class="text-danger small mt-1" style="display: none;">پاس ورڈ ایک
								جیسے نہیں ہیں</div>
						</div>

						<div class="mt-5">
							<button type="submit" id="btnChangePassword"
								class="btn btn-primary w-100 py-3 rounded-3 fw-bold shadow">
								<i class="bi bi-arrow-repeat me-2"></i>پاس ورڈ تبدیل کریں
							</button>
						</div>
					</form>
				</div>
				<div class="card-footer bg-light border-0 py-3 text-center">
					<p class="mb-0 text-muted small">اگر آپ پاس ورڈ بھول گئے ہیں تو براہ کرم سسٹم ایڈمنسٹریٹر سے رابطہ
						کریں۔</p>
				</div>
			</div>
		</div>
	</div>
</div>

<style>
	.rounded-4 {
		border-radius: 1.5rem !important;
	}

	.extra-small {
		font-size: 0.75rem;
	}

	.transition-all {
		transition: all 0.3s ease;
	}

	.form-control:focus {
		box-shadow: none;
		background-color: #fff !important;
		border: 1px solid var(--bs-primary) !important;
	}

	.input-group-text {
		border-radius: 0.5rem 0 0 0.5rem !important;
	}

	.form-control {
		border-radius: 0 0.5rem 0.5rem 0 !important;
	}

	[dir="rtl"] .input-group-text {
		border-radius: 0 0.5rem 0.5rem 0 !important;
	}

	[dir="rtl"] .form-control {
		border-radius: 0 !important;
	}

	[dir="rtl"] .password-toggle {
		border-radius: 0.5rem 0 0 0.5rem !important;
	}

	.password-toggle:focus {
		box-shadow: none;
		background-color: #f8f9fa !important;
	}
</style>

<!-- Integration JS -->
<script src="assets/js/change_password.js"></script>