<link href="<?php echo base_url('assets/css/admin-panel.css'); ?>?v=20260826b" rel="stylesheet">

<?php
$u = isset($user) && is_array($user) ? $user : array();
$uid = isset($id) ? (string) $id : '';
$name = '';
if (!empty($u['userName'])) {
	$name = (string) $u['userName'];
} elseif (!empty($u['name'])) {
	$name = (string) $u['name'];
}
$email = isset($u['email']) ? (string) $u['email'] : '';
$image = isset($u['image']) ? (string) $u['image'] : '';
$placeholder = base_url('assets/images/dummy-man.png');
?>

<style>
	.profile-avatar {
		width: 128px;
		height: 128px;
		border-radius: 50%;
		object-fit: cover;
		border: 4px solid rgba(105, 129, 197, 0.4);
		background: #fff;
		cursor: pointer;
	}
</style>

<div class="care-admin">
	<div class="ca-hero">
		<div class="ca-hero-inner row align-items-center g-3">
			<div class="col-lg-8">
				<p class="ca-kicker">Account</p>
				<h1 class="ca-title"><?php echo isset($page_title) ? htmlspecialchars($page_title) : 'My profile'; ?></h1>
				<p class="ca-sub mb-0">Update your name, email, password, and photo. Email and password also change in Firebase Auth.</p>
			</div>
			<div class="col-lg-4">
				<div class="ca-nav justify-content-lg-end">
					<button form="formMyProfile" type="submit" class="btn btn-primary">Save changes</button>
				</div>
			</div>
		</div>
	</div>

	<div class="ca-card">
		<div class="ca-card-header">
			<h5 class="ca-card-title mb-0"><i class="fa-regular fa-user me-2 text-success"></i>Profile</h5>
		</div>
		<div class="ca-card-body">
			<form id="formMyProfile" method="post" enctype="multipart/form-data" autocomplete="off" action="<?php echo base_url('customer/updateuserdata/' . rawurlencode($uid)); ?>">
				<div class="row g-3">
					<div class="col-12 text-center">
						<label class="d-inline-block mb-2" for="profile_image">
							<img id="profilePreview" src="<?php echo htmlspecialchars($image !== '' ? $image : $placeholder); ?>" alt="Profile photo" class="profile-avatar">
						</label>
						<input class="form-control d-none" type="file" name="profile_image" id="profile_image" accept="image/*">
						<div class="form-text">Click the photo to change it.</div>
					</div>
					<div class="col-12 col-md-6">
						<label class="form-label">Name</label>
						<input class="form-control" name="userName" value="<?php echo htmlspecialchars($name); ?>" required>
					</div>
					<div class="col-12 col-md-6">
						<label class="form-label">Email</label>
						<input class="form-control" type="email" name="email" value="<?php echo htmlspecialchars($email); ?>" required>
						<div class="form-text">Changing this also updates Firebase Auth.</div>
					</div>
					<div class="col-12 col-md-6">
						<label class="form-label">New password</label>
						<input class="form-control" type="password" name="newpassword" minlength="6" autocomplete="new-password" placeholder="Leave blank to keep current">
						<div class="form-text">Min 6 characters. Updates Auth and your user document.</div>
					</div>
					<div class="col-12">
						<p class="small text-muted mb-0">User ID: <code><?php echo htmlspecialchars($uid); ?></code></p>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>

<script>
(function () {
	var input = document.getElementById('profile_image');
	var preview = document.getElementById('profilePreview');
	if (!input || !preview) return;
	input.addEventListener('change', function () {
		if (!input.files || !input.files[0]) return;
		preview.src = URL.createObjectURL(input.files[0]);
	});
})();
</script>
