File "profile_page.php"
Full Path: /home/ccipcixf/public_html/miportal/profile_page.php
File size: 19.03 KB
MIME-type: text/x-php
Charset: utf-8
<?php
include("userauth_middleware.php");
include("admin/includes/config.php");
include("user_includes/header.php");
// Fetch the user's details using the session user_id
$user_id = $_SESSION['user_acc_id'];
// Fetch user details from the database
$stmt = $pdo->prepare("SELECT username, user_email, fullname, phone, gender, dob, address, city, age, user_cnic, user_payment, bank_name, bank_acc_title, bank_acc_number, nayapay_title, nayapay_number, sadapay_title, sadapay_number, easypaisa_title, easypaisa_number, jazzcash_title, jazzcash_number, user_image FROM tb_user WHERE user_id = ?");
$stmt->execute([$user_id]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);
// If no user data is found, handle this gracefully
if (!$user) {
echo "User not found!";
exit;
}
?>
<div class="dashboard-main-body">
<div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
<h6 class="fw-semibold mb-0">View Profile</h6>
<ul class="d-flex align-items-center gap-2">
<li class="fw-medium">
<a href="user_dashboard.php" class="d-flex align-items-center gap-1 hover-text-primary">
<iconify-icon icon="solar:home-smile-angle-outline" class="icon text-lg"></iconify-icon>
Dashboard
</a>
</li>
<li>-</li>
<li class="fw-medium">View Profile</li>
</ul>
</div>
<div class="row gy-4">
<div class="col-lg-5">
<div class="user-grid-card position-relative border radius-16 overflow-hidden bg-base h-100">
<img src="assets/images/user-grid/user-grid-bg1.png" alt="" class="w-100 object-fit-cover">
<div class="pb-24 ms-16 mb-24 me-16 mt--100">
<div class="text-center border border-top-0 border-start-0 border-end-0">
<img src="uploads/profile_images/<?php echo $user['user_image']; ?>" alt="User Image" class="border br-white border-width-2-px w-200-px h-200-px rounded-circle object-fit-cover">
<h6 class="mb-0 mt-16"><?php echo htmlspecialchars($user['fullname']); ?></h6>
<span class="text-secondary-light mb-16"><?php echo htmlspecialchars($user['user_email']); ?></span>
</div>
<div class="mt-24">
<h6 class="text-xl mb-16">Personal Info</h6>
<ul>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light">Full Name</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['fullname']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light">Email</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['user_email']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light">Phone Number</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['phone']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Gender</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['gender']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> DOB</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['dob']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Address</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['address']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> City</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['city']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Age</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['age']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> CNIC</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['user_cnic']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Payment</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['user_payment']); ?></span>
</li>
<?php
// Check for the value of 'user_payment' directly
if ($user['user_payment'] === 'bank') { ?>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Bank Name</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['bank_name']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Bank Account Title</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['bank_acc_title']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Bank Account Number</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['bank_acc_number']); ?></span>
</li>
<?php } elseif ($user['user_payment'] === 'nayapay') { ?>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Nayapay Title</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['nayapay_title']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Nayapay Number</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['nayapay_number']); ?></span>
</li>
<?php } elseif ($user['user_payment'] === 'sadapay') { ?>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Sadapay Title</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['sadapay_title']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Sadapay Number</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['sadapay_number']); ?></span>
</li>
<?php } elseif ($user['user_payment'] === 'jazzcash') { ?>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Jazzcash Title</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['jazzcash_title']); ?></span>
</li>
<li class="d-flex align-items-center gap-1 mb-12">
<span class="w-30 text-md fw-semibold text-primary-light"> Jazzcash Number</span>
<span class="w-70 text-secondary-light fw-medium">: <?php echo htmlspecialchars($user['jazzcash_number']); ?></span>
</li>
<?php } ?>
</ul>
</div>
</div>
</div>
</div>
<div class="col-lg-7">
<div class="card h-100">
<h4 class="text-center mt-5 ">
Edit Your Profile
</h4>
<div class="card-body p-24">
<div class="tab-content" id="pills-tabContent">
<div class="tab-pane fade show active" id="pills-edit-profile" role="tabpanel" aria-labelledby="pills-edit-profile-tab" tabindex="0">
<form action="edit_profile.php" method="POST" enctype="multipart/form-data">
<h6 class="text-md text-primary-light mb-16 text-center">Profile Image</h6>
<!-- Upload Image Start -->
<div class="mb-24 mt-16 d-flex justify-content-center">
<div class="avatar-upload">
<div class="avatar-edit position-absolute bottom-0 end-0 me-24 mt-16 z-1 cursor-pointer">
<input required name="profile_image" type='file' id="imageUpload" accept=".png, .jpg, .jpeg" hidden>
<label for="imageUpload" class="w-32-px h-32-px d-flex justify-content-center align-items-center bg-primary-50 text-primary-600 border border-primary-600 bg-hover-primary-100 text-lg rounded-circle">
<iconify-icon icon="solar:camera-outline" class="icon"></iconify-icon>
</label>
</div>
<div class="avatar-preview">
<div id="imagePreview">
</div>
</div>
</div>
</div>
<!-- Upload Image End -->
<div class="row">
<div class="col-sm-6">
<div class="mb-20">
<label for="name" class="form-label fw-semibold text-primary-light text-sm mb-8">Full Name <span class="text-danger-600">*</span></label>
<input name="fullname" type="text" class="form-control radius-8" id="name" placeholder="Enter Full Name">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="email" class="form-label fw-semibold text-primary-light text-sm mb-8">Email <span class="text-danger-600">*</span></label>
<input disabled type="email" class="form-control radius-8" id="email" placeholder="Enter email address" value="<?php echo $_SESSION['user_acc_email'] ?>">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="validationCustomPhone" class="form-label fw-semibold text-primary-light text-sm mb-8">Phone: <span style="color: red;">*(0312-1234234) </span> </label>
<input pattern="^[0-9]{4}-[0-9]{7}$" name="user_phone" type="tel" class="form-control radius-8" id="validationCustomPhone" placeholder="Enter phone number">
<div class="invalid-feedback">Please provide a valid phone number (format: 0000-0000000).</div>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="depart" class="form-label fw-semibold text-primary-light text-sm mb-8">Gender <span class="text-danger-600">*</span> </label>
<select name="user_gender" class="form-control radius-8 form-select" id="depart">
<option selected disabled>Choose Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="desig" class="form-label fw-semibold text-primary-light text-sm mb-8">Date of Birth <span class="text-danger-600">*</span> </label>
<input name="user_dob" type="date" class="form-control radius-8" id="number">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="Language" class="form-label fw-semibold text-primary-light text-sm mb-8">Current Address <span class="text-danger-600">*</span> </label>
<input name="user_address" type="text" class="form-control radius-8" id="#" placeholder="Enter Current Address">
</div>
</div>
<div class="col-sm-6">
<div class="mb-20">
<label for="Language" class="form-label fw-semibold text-primary-light text-sm mb-8">Age<span class="text-danger-600">*</span> </label>
<input min="18" max="60" name="user_age" type="number" class="form-control radius-8" id="#" placeholder="Enter Age">
</div>
</div>
</div>
<div class="d-flex align-items-center justify-content-center gap-3 mt-5">
<button name="btn_submit" type="submit" class="btn btn-primary border border-primary-600 text-md px-56 py-12 radius-8">
Setup Profile
</button>
</div>
</form>
<?php if (isset($_SESSION['success'])) { ?>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
Swal.fire({
icon: 'success',
title: 'Profile Updated',
text: '<?php echo $_SESSION['success']; ?>',
confirmButtonText: 'OK'
});
</script>
<?php unset($_SESSION['success']); // Remove success message after displaying
?>
<?php } ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<?php include("user_includes/footer.php") ?>
<script>
// ======================== Upload Image Start =====================
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#imagePreview').css('background-image', 'url(' + e.target.result + ')');
$('#imagePreview').hide();
$('#imagePreview').fadeIn(650);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imageUpload").change(function() {
readURL(this);
});
// ======================== Upload Image End =====================
// Phone input formatting dynamically as user types
const phoneInput = document.getElementById('validationCustomPhone');
phoneInput.addEventListener('input', (e) => {
let input = phoneInput.value.replace(/\D/g, ''); // Remove all non-digit characters
if (input.length > 4) {
input = input.substring(0, 4) + '-' + input.substring(4); // Insert hyphen after the first 4 digits
}
phoneInput.value = input.substring(0, 12); // Restrict input length to 12 characters (0000-0000000)
});
</script>