X7ROOT File Manager
Current Path:
/home/hamdjcne/app.hamdalillahitravel.com/app/Views/auth
home
/
hamdjcne
/
app.hamdalillahitravel.com
/
app
/
Views
/
auth
/
ðŸ“
..
📄
forgot.php
(9.01 KB)
📄
login.php
(8.21 KB)
📄
profile.php
(52.12 KB)
📄
register.php
(23.03 KB)
Editing: profile.php
<?php use App\Models\Crud; $this->Crud = new Crud(); ?> <?= $this->extend('designs/backend'); ?> <?= $this->section('title'); ?> <?= $title; ?> <?= $this->endSection(); ?> <?= $this->section('content'); ?> <!--begin::Wrapper--> <div class="app-wrapper d-flex " style="margin-left: 1px; "> <!--begin::Wrapper container--> <div class="app-container container-fluid "> <!--begin::Main--> <div class="app-main flex-column flex-row-fluid " id="kt_app_main"> <!--begin::Content wrapper--> <div class="d-flex flex-column flex-column-fluid"> <!--begin::Toolbar--> <div id="kt_app_toolbar" class="app-toolbar "> <!--begin::Toolbar container--> <div class="d-flex flex-stack flex-row-fluid"> <!--begin::Toolbar wrapper--> <div class="d-flex flex-column flex-row-fluid"> <!--begin::Breadcrumb--> <ul class="breadcrumb breadcrumb-separatorless fw-semibold mb-3"> <!--begin::Item--> <li class="breadcrumb-item text-gray-600 fw-bold lh-1"> <a href="<?=site_url(); ?>" class="text-white text-hover-success"> <i class="ki-duotone ki-home text-gray-500 fs-2"></i> </a> </li> <!--end::Item--> <!--begin::Item--> <li class="breadcrumb-item"> <i class="ki-duotone ki-right fs-3 text-gray-500 mx-n1"></i> </li> <!--end::Item--> <!--begin::Item--> <li class="breadcrumb-item text-gray-600 fw-bold lh-1"> Account </li> <!--end::Item--> </ul> <!--end::Breadcrumb--> <!--begin::Page title--> <div class="page-title d-flex align-items-center me-3"> <!--begin::Title--> <h1 class="page-heading d-flex text-gray-900 fw-bolder fs-1 flex-column justify-content-center my-0"> Account Overview </h1> <!--end::Title--> </div> <!--end::Page title--> </div> </div> </div> <!--begin::Content--> <div id="kt_app_content" class="app-content "> <div class="card mb-5 mb-xl-10"> <div class="card-body pt-9 pb-0"> <!--begin::Details--> <div class="d-flex flex-wrap flex-sm-nowrap"> <!--begin: Pic--> <div class="me-7 mb-4"> <div class="symbol symbol-100px symbol-lg-160px symbol-fixed position-relative"> <img src="<?=site_url($img); ?>" alt="image" /> <div class="position-absolute translate-middle bottom-0 start-100 mb-6 bg-success rounded-circle border border-4 border-body h-20px w-20px"> </div> </div> </div> <!--end::Pic--> <!--begin::Info--> <div class="flex-grow-1"> <!--begin::Title--> <div class="d-flex justify-content-between align-items-start flex-wrap mb-2"> <!--begin::User--> <div class="d-flex flex-column"> <!--begin::Name--> <div class="d-flex align-items-center mb-2"> <a href="javascript:;" class="text-gray-900 text-hover-success fs-2 fw-bold me-1"><?=ucwords($fullname); ?></a> <a href="javascript:;"><i class="ki-duotone ki-verify fs-1 text-primary"><span class="path1"></span><span class="path2"></span></i></a> </div> <!--end::Name--> <!--begin::Info--> <div class="d-flex flex-wrap fw-semibold fs-6 mb-4 pe-2"> <a href="javascript:;" class="d-flex align-items-center text-gray-500 text-hover-success me-5 mb-2"> <i class="ki-duotone ki-profile-circle fs-4 me-1"><span class="path1"></span><span class="path2"></span><span class="path3"></span></i> <?=ucwords($role); ?> </a> <a href="javascript:;" class="d-flex align-items-center text-gray-500 text-hover-success me-5 mb-2"> <i class="ki-duotone ki-geolocation fs-4 me-1"><span class="path1"></span><span class="path2"></span></i> <?=$state; ?> </a> <a href="javascript:;" class="d-flex align-items-center text-gray-500 text-hover-success mb-2"> <i class="ki-duotone ki-sms fs-4"><span class="path1"></span><span class="path2"></span></i> <?=$email; ?> </a> </div> <!--end::Info--> </div> </div> </div> <!--end::Info--> </div> <!--end::Details--> <!--begin::Navs--> <ul class="nav nav-stretch nav-line-tabs nav-line-tabs-2x border-transparent fs-5 fw-bold"> <!--begin::Nav item--> <li class="nav-item mt-2"> <a class="nav-link text-active-success ms-0 me-10 py-5 active" data-bs-toggle="tab" href="#overview"> Overview </a> </li> <!--end::Nav item--> <!--begin::Nav item--> <li class="nav-item mt-2"> <a class="nav-link text-active-success ms-0 me-10 py-5 " data-bs-toggle="tab" href="#edit-profile"> Edit Profile </a> </li> <!--end::Nav item--> <!--begin::Nav item--> <li class="nav-item mt-2"> <a class="nav-link text-active-success ms-0 me-10 py-5 " data-bs-toggle="tab" href="#transaction-security"> Security </a> </li> </ul> <!--begin::Navs--> </div> </div> <!--end::Navbar--> <div class="tab-content" id="myTabContent"> <div class="tab-pane fade show active" id="overview" role="tabpanel"> <div class="card mb-5 mb-xl-10" id="kt_profile_details_view"> <!--begin::Card header--> <div class="card-header cursor-pointer"> <!--begin::Card title--> <div class="card-title m-0"> <h3 class="fw-bold m-0">Profile Details</h3> </div> </div> <!--begin::Card header--> <!--begin::Card body--> <div class="card-body p-9"> <!--begin::Row--> <div class="row mb-7"> <!--begin::Label--> <label class="col-lg-4 fw-semibold text-muted">Full Name</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8"> <span class="fw-bold fs-6 text-gray-800"><?=ucwords($fullname);?></span> </div> <!--end::Col--> </div> <!--end::Row--> <?php if(!empty($company_name)){?> <!--begin::Input group--> <div class="row mb-7"> <!--begin::Label--> <label class="col-lg-4 fw-semibold text-muted">Company</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8 fv-row"> <span class="fw-semibold text-gray-800 fs-6"><?=ucwords($company_name); ?></span> </div> <!--end::Col--> </div> <!--end::Input group--> <?php } ?> <!--begin::Input group--> <div class="row mb-7"> <!--begin::Label--> <label class="col-lg-4 fw-semibold text-muted"> Contact Phone </label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8 d-flex align-items-center"> <span class="fw-bold fs-6 text-gray-800 me-2"><?=$phone; ?></span> </div> <!--end::Col--> </div> <!--end::Input group--> <?php if(!empty($city)){?> <!--begin::Input group--> <div class="row mb-7"> <!--begin::Label--> <label class="col-lg-4 fw-semibold text-muted">City</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8"> <a href="#" class="fw-semibold fs-6 text-gray-800 text-hover-success"><?=$city; ?></a> </div> <!--end::Col--> </div> <?php } ?> <!--begin::Input group--> <div class="row mb-7"> <!--begin::Label--> <label class="col-lg-4 fw-semibold text-muted">State</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8"> <a href="#" class="fw-semibold fs-6 text-gray-800 text-hover-success"><?=$state; ?></a> </div> <!--end::Col--> </div> <!--end::Input group--> <!--begin::Input group--> <div class="row mb-7"> <!--begin::Label--> <label class="col-lg-4 fw-semibold text-muted"> Country </label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8"> <span class="fw-bold fs-6 text-gray-800">Nigeria</span> </div> <!--end::Col--> </div> <!--end::Input group--> <!--begin::Input group--> <div class="row mb-10"> <!--begin::Label--> <label class="col-lg-4 fw-semibold text-muted">Address</label> <!--begin::Label--> <!--begin::Label--> <div class="col-lg-8"> <span class="fw-semibold fs-6 text-gray-800"><?=$address; ?></span> </div> <!--begin::Label--> </div> </div> <!--end::Card body--> </div> </div> <div class="tab-pane fade" id="edit-profile" role="tabpanel"> <!--begin::Basic info--> <div class="card mb-5 mb-xl-10"> <!--begin::Card header--> <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_profile_details" aria-expanded="true" aria-controls="kt_account_profile_details"> <!--begin::Card title--> <div class="card-title m-0"> <h3 class="fw-bold m-0">Edit Profile</h3> </div> <!--end::Card title--> </div> <!--begin::Card header--> <!--begin::Content--> <div id="kt_account_settings_profile_details" class="collapse show"> <!--begin::Form--> <?php echo form_open_multipart('auth/profile/update', array('id'=>'bb_ajax_form', 'class'=>'form')); ?> <!--begin::Card body--> <div class="card-body border-top p-9"> <!--begin::Input group--> <div class="row mb-6"> <!--begin::Label--> <label class="col-lg-4 col-form-label fw-semibold fs-6">Avatar</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8"> <!--begin::Image input--> <div class="image-input image-input-outline" data-kt-image-input="true" style="background-image: url('<?=site_url($img); ?>')"> <!--begin::Preview existing avatar--> <div class="image-input-wrapper w-125px h-125px" style="background-image: url(<?=site_url($img); ?>)"></div> <!--end::Preview existing avatar--> <!--begin::Label--> <label class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="change" data-bs-toggle="tooltip" title="Change avatar"> <i class="ki-duotone ki-pencil fs-7"><span class="path1"></span><span class="path2"></span></i> <input type="hidden" name="img_id" value="<?=$img; ?>"> <!--begin::Inputs--> <input type="file" name="avatar" accept=".png, .jpg, .jpeg"/> <input type="hidden" name="avatar_remove"/> <!--end::Inputs--> </label> <!--end::Label--> <!--begin::Cancel--> <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="cancel" data-bs-toggle="tooltip" title="Cancel avatar"> <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i> </span> <!--end::Cancel--> <!--begin::Remove--> <span class="btn btn-icon btn-circle btn-active-color-primary w-25px h-25px bg-body shadow" data-kt-image-input-action="remove" data-bs-toggle="tooltip" title="Remove avatar"> <i class="ki-duotone ki-cross fs-2"><span class="path1"></span><span class="path2"></span></i> </span> <!--end::Remove--> </div> <!--end::Image input--> <!--begin::Hint--> <div class="form-text">Allowed file types: png, jpg, jpeg.</div> <!--end::Hint--> </div> <!--end::Col--> </div> <!--end::Input group--> <?php $parts = explode(' ', $fullname, 2); // Split into two parts based on the first space $firstname = isset($parts[0]) ? $parts[0] : ''; $surname = isset($parts[1]) ? $parts[1] : ''; ?> <!--begin::Input group--> <div class="row mb-6"> <!--begin::Label--> <label class="col-lg-4 col-form-label required fw-semibold fs-6">Full Name</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8"> <!--begin::Row--> <div class="row"> <!--begin::Col--> <div class="col-lg-6 fv-row"> <input type="text" name="firstname" class="form-control form-control-lg form-control-solid mb-3 mb-lg-0" placeholder="First name" value="<?=ucwords($firstname); ?>" /> </div> <!--end::Col--> <!--begin::Col--> <div class="col-lg-6 fv-row"> <input type="text" name="surname" class="form-control form-control-lg form-control-solid" placeholder="Last name" value="<?=ucwords($surname); ?>" /> </div> <!--end::Col--> </div> <!--end::Row--> </div> <!--end::Col--> </div> <!--end::Input group--> <?php if(!empty($company_name)){?> <!--begin::Input group--> <div class="row mb-6"> <!--begin::Label--> <label class="col-lg-4 col-form-label required fw-semibold fs-6">Company</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8 fv-row"> <input type="text" name="company_name" class="form-control form-control-lg form-control-solid" placeholder="Company name" value="<?=ucwords($company_name); ?>" /> </div> <!--end::Col--> </div> <?php } ?> <!--end::Input group--> <!--begin::Input group--> <div class="row mb-6"> <!--begin::Label--> <label class="col-lg-4 col-form-label fw-semibold fs-6"> <span class="required">Contact Phone</span> </label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8 fv-row"> <input type="tel" name="phone" class="form-control form-control-lg form-control-solid" placeholder="Phone number" required value="<?=$phone; ?>" /> </div> <!--end::Col--> </div> <!--end::Input group--> <!--begin::Input group--> <div class="row mb-6"> <!--begin::Label--> <label class="col-lg-4 col-form-label fw-semibold fs-6">Contact Email</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8 fv-row"> <input type="email" name="email" class="form-control form-control-lg form-control-solid" placeholder="Contact Email" value="<?=$email; ?>" /> </div> <!--end::Col--> </div> <div class="row mb-6"> <!--begin::Label--> <label class="col-lg-4 col-form-label fw-semibold fs-6">Pick Address on the Map</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8 fv-row"> <input id="autocomplete" class="form-control form-control-lg mb-3" type="text" placeholder="Search for a location" /> <div id="mapz" style="width: 100%; height: 500px;"></div> </div> <!--end::Col--> </div> <div class="row mb-6"> <!--begin::Label--> <label class="col-lg-4 col-form-label fw-semibold fs-6">State</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8 fv-row"> <input name="state_id" id="state_id" class="form-control form-control-solid form-control-lg " value="<?=$state; ?>" placeholder="Ogun" readonly/> </div> <!--end::Col--> </div> <div class="row mb-6"> <!--begin::Label--> <label class="col-lg-4 col-form-label fw-semibold fs-6">City</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8 fv-row"> <input name="lga_id" id="lga_id" class="form-control form-control-solid form-control-lg " value="<?=$city; ?>" placeholder="Abeokuta" readonly/> </div> <!--end::Col--> </div> <div class="row mb-6"> <!--begin::Label--> <label class="col-lg-4 col-form-label fw-semibold fs-6">Address</label> <!--end::Label--> <!--begin::Col--> <div class="col-lg-8 fv-row"> <input name="address" id="address" class="form-control form-control-solid form-control-lg " value="<?=$address; ?>" placeholder="" readonly/> </div> <!--end::Col--> </div> </div> <!--begin::Actions--> <div class="card-footer d-flex justify-content-end py-6 px-9"> <button type="submit" class="btn btn-primary" id="">Save Changes</button> </div> <div class="row mb-3"><div id="bb_ajax_msg"></div></div> <!--end::Actions--> </form> </div> <!--end::Content--> </div> </div> <div class="tab-pane fade" id="transaction-security" role="tabpanel"> <!--begin::Sign-in Method--> <div class="card mb-5 mb-xl-10" > <!--begin::Card header--> <div class="card-header border-0 cursor-pointer" role="button" data-bs-toggle="collapse" data-bs-target="#kt_account_signin_method"> <div class="card-title m-0"> <h3 class="fw-bold m-0">Security</h3> </div> </div> <!--end::Card header--> <!--begin::Content--> <div id="kt_account_settings_signin_method" class="collapse show"> <!--begin::Card body--> <div class="card-body border-top p-9"> <!--begin::Email Address--> <div class="d-flex flex-wrap align-items-center"> <!--begin::Label--> <div id="kt_signin_email"> <div class="fs-6 fw-bold mb-1">Email Address</div> <div class="fw-semibold text-gray-600"><?=$email; ?></div> </div> </div> <!--end::Email Address--> <!--begin::Separator--> <div class="separator separator-dashed my-6"></div> <!--end::Separator--> <div class="d-flex flex-wrap align-items-center my-6"> <div id="reset_resp"></div> </div> <!--begin::Password--> <div class="d-flex flex-wrap align-items-center mb-10"> <!--begin::Label--> <div id="kt_signin_password"> <div class="fs-6 fw-bold mb-1">Password</div> <div class="fw-semibold text-gray-600">************</div> </div> <!--end::Label--> <!--begin::Edit--> <div id="kt_signin_password_edit" style="display:none;" class="flex-row-fluid" > <!--begin::Form--> <div class="row mb-1"> <div class="col-lg-4"> <div class="fv-row mb-0"> <label for="currentpassword" class="form-label fs-6 fw-bold mb-3">Current Password</label> <input type="password" class="form-control form-control-lg form-control-solid " name="current_password" id="current_password" /> </div> </div> <div class="col-lg-4"> <div class="fv-row mb-0"> <label for="new_password" class="form-label fs-6 fw-bold mb-3">New Password</label> <input type="password" class="form-control form-control-lg form-control-solid " name="new_password" id="new_password" /> </div> </div> <div class="col-lg-4"> <div class="fv-row mb-0"> <label for="confirm_password" class="form-label fs-6 fw-bold mb-3">Confirm New Password</label> <input type="password" class="form-control form-control-lg form-control-solid " name="confirm_password" id="confirm_password" /> </div> </div> </div> <div class="form-text mb-5">Password must be at least 8 character and contain symbols</div> <div class="d-flex"> <button id="kt_password_submit" type="button" class="btn btn-primary me-2 px-6">Update Password</button> <button id="kt_password_cancel" type="button" class="btn btn-color-gray-500 btn-active-light-primary px-6">Cancel</button> </div> <!--end::Form--> </div> <!--end::Edit--> <!--begin::Action--> <div id="kt_signin_password_button" class="ms-auto"> <button class="btn btn-light btn-active-light-primary" >Reset Password</button> </div> <!--end::Action--> </div> <!--end::Password--> </div> <!--end::Card body--> </div> <!--end::Content--> </div> <!--end::Sign-in Method--> </div> </div> <!--end::details View--> </div> <!--end::Content--> </div> <!--end::Content wrapper--> <!--begin::Footer--> <div id="kt_app_footer" class="app-footer d-flex flex-column flex-md-row align-items-center flex-center flex-md-stack "> <div class="text-gray-900 order-2 order-md-1"> <span class="text-gray-500 fw-semibold me-1"><?=date('Y'); ?>©</span> <a href="javascript:;" target="_blank" class="text-gray-500 text-hover-success"><?=app_name; ?></a> </div> </div> <!--end::Footer--> </div> <!--end:::Main--> </div> <!--end::Wrapper container--> </div> <!--end::Wrapper--> <?= $this->endSection(); ?> <?= $this->section('scripts'); ?> <script src="<?= site_url(); ?>assets/js/jsform.js"></script> <script> var site_url = '<?= site_url(); ?>'; $('.select2').select2(); $(function () { }); function copyReferralLink() { var copyText = document.getElementById("referral_link"); copyText.select(); copyText.setSelectionRange(0, 99999); // For mobile devices navigator.clipboard.writeText(copyText.value); alert("Referral link copied to clipboard!"); } $('#kt_signin_password_button').click(function (){ $('#kt_signin_password').hide(500); $('#kt_signin_password_button').hide(500); $('#kt_signin_password_edit').show(500); }); $('#kt_password_cancel').click(function (){ $('#kt_signin_password').show(500); $('#kt_signin_password_button').show(500); $('#kt_signin_password_edit').hide(500); }); $('#kt_pin_btn').click(function (){ send_pin(); $('#kt_signin_pin').hide(500); $('#kt_pin_btn').hide(500); $('#kt_pin').show(500); }); $('#kt_pin_cancel').click(function (){ $('#kt_signin_pin').show(500); $('#kt_pin_btn').show(500); $('#kt_pin').hide(500); }); function send_pin(){ $('#reset_resp').html('<div class="col-sm-12 text-center"><div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div><br>Processing Please Wait..</div>'); $.ajax({ url: '<?= site_url('dashboard/purchase/send_pin') ?>', type: 'POST', success: function (response) { $('#reset_resp').html(response); } }); } $(document).ready(function () { $('#kt_password_submit').click(function () { // Get form values var currentPassword = $('#current_password').val().trim(); var newPassword = $('#new_password').val().trim(); var confirmPassword = $('#confirm_password').val().trim(); $('#reset_resp').html('<div class="col-sm-12 fs-2 text-center" data-kt-indicator="on"> <span class="indicator-progress">Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span></div>').css('color', 'black'); // Validation flags var isValid = true; var errorMessage = ""; // Validate current password if (!currentPassword) { isValid = false; errorMessage += "Current password is required.\n"; } // Validate new password if (!newPassword) { isValid = false; errorMessage += "New password is required.\n"; } else if (newPassword.length < 5) { isValid = false; errorMessage += "New password must be at least 5 characters.\n"; } // Validate confirm password if (newPassword !== confirmPassword) { isValid = false; errorMessage += "Passwords do not match.\n"; } // Display error message or submit form if (!isValid) { $('#reset_resp').html(errorMessage).css('color', 'red'); // Display errors } else { $.ajax({ url: site_url + 'auth/profile/reset_password', type: 'post', data: {current_password:currentPassword, new_password:newPassword}, success: function(data) { $('#reset_resp').html(data).css('color', 'black'); } }); } }); // Cancel button action $('#kt_password_cancel').click(function () { // Clear all input fields $('#current_password, #new_password, #confirm_password').val(''); }); $('#kt_pin_submit').click(function () { // Run send_pin function var otp = $('#otp').val().trim(); var password = $('#password').val().trim(); var pin = $('#pin').val().trim(); $('#reset_resp').html('<div class="col-sm-12 fs-2 text-center" data-kt-indicator="on"> <span class="indicator-progress">Please wait... <span class="spinner-border spinner-border-sm align-middle ms-2"></span></span></div>').css('color', 'black'); // Validation flags var isValid = true; var errorMessage = ""; // Validate OTP if (!otp) { isValid = false; errorMessage += "OTP is required.\n"; } else if (!/^[a-zA-Z0-9]+$/.test(otp)) { isValid = false; errorMessage += "OTP must be alphanumeric.\n"; } // Validate Password if (!password) { isValid = false; errorMessage += "Password is required.\n"; } else if (password.length < 4) { isValid = false; errorMessage += "Password must be at least 4 characters.\n"; } // Validate PIN if (!pin) { isValid = false; errorMessage += "Transaction PIN is required.\n"; } else if (!/^\d{4}$/.test(pin)) { isValid = false; errorMessage += "Transaction PIN must be exactly 4 numeric digits.\n"; } // Display error message or submit form if (!isValid) { $('#reset_resp').html(errorMessage).css('color', 'red'); // Display errors } else { // Send data via AJAX $.ajax({ url: site_url + 'auth/profile/reset_pin', type: 'post', data: { password: password, otp: otp, pin: pin }, success: function (data) { $('#reset_resp').html(data).css('color', 'black'); }, error: function () { $('#reset_resp').html('An error occurred while resetting the PIN. Please try again.').css('color', 'red'); } }); } // Delay execution by 2000 milliseconds (2 seconds) }); // Cancel button action $('#kt_pin_cancel').click(function () { // Clear all input fields $('#otp, #password, #pin').val(''); }); }); function readURL(input, id) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { if (id != 'vid') { $('#' + id).attr('src', e.target.result); } else { $('#' + id).show(500); } } reader.readAsDataURL(input.files[0]); } } $("#img-upload").change(function () { readURL(this, 'img0'); }); </script> <script> let map, marker, autocomplete, geocoder; // Initialize map and autocomplete function initializeMapAndAutocomplete(userLocation) { const nigeriaBounds = { north: 13.885645, south: 4.272504, west: 2.676932, east: 14.678014, }; // Input fields for state, LGA, address, latitude, and longitude const stateInput = document.getElementById("state_id"); const lgaInput = document.getElementById("lga_id"); const addressInput = document.getElementById("address"); // Initialize map map = new google.maps.Map(document.getElementById("mapz"), { center: userLocation, zoom: 10, restriction: { latLngBounds: nigeriaBounds, strictBounds: false, }, }); // Initialize marker marker = new google.maps.Marker({ position: userLocation, map: map, draggable: true, }); // Initialize geocoder geocoder = new google.maps.Geocoder(); // Update location and address when marker is dragged marker.addListener("dragend", function () { const position = marker.getPosition(); updateAddressFields(position); }); // Update marker position and address on map click map.addListener("click", function (event) { marker.setPosition(event.latLng); updateAddressFields(event.latLng); }); // Initialize autocomplete const input = document.getElementById("autocomplete"); autocomplete = new google.maps.places.Autocomplete(input, { componentRestrictions: { country: "ng" }, fields: ["geometry", "formatted_address", "address_components"], }); // Listen for place selection autocomplete.addListener("place_changed", function () { const place = autocomplete.getPlace(); if (place.geometry) { const position = place.geometry.location; // Zoom into the selected place map.setCenter(position); map.setZoom(15); // Adjust zoom level as needed marker.setPosition(position); updateAddressFields(position, place); } }); // Function to update address fields function updateAddressFields(location, place = null) { if (!place) { geocoder.geocode({ location }, function (results, status) { if (status === "OK" && results[0]) { const formattedAddress = formatAddress(results[0].address_components); addressInput.value = formattedAddress; // Update address input with formatted address extractAddressComponents(results[0]); // Extract state and LGA } }); } else { const formattedAddress = formatAddress(place.address_components || []); addressInput.value = place.formatted_address || formattedAddress; extractAddressComponents(place); } } // Function to format address into a readable string function formatAddress(components) { const addressParts = []; components.forEach((component) => { if ( component.types.includes("street_number") || // Street number component.types.includes("route") || // Street name component.types.includes("sublocality_level_1") || // Area/Suburb component.types.includes("locality") || // City/Town component.types.includes("administrative_area_level_2") || // LGA component.types.includes("administrative_area_level_1") || // State component.types.includes("postal_code") // Postal code ) { addressParts.push(component.long_name); } }); return addressParts.join(", "); // Combine parts into a readable address } // Function to extract state, LGA, and other components function extractAddressComponents(result) { const components = result.address_components || []; let state = ""; let lga = ""; components.forEach((component) => { if (component.types.includes("administrative_area_level_1")) { state = component.long_name; } if (component.types.includes("administrative_area_level_2")) { lga = component.long_name; } }); stateInput.value = state; lgaInput.value = lga; } // Initialize fields with user location updateAddressFields(userLocation); } // Get the device's current location and initialize map function getCurrentLocation() { // Check if geolocation is supported if (navigator.geolocation) { navigator.geolocation.getCurrentPosition( function (position) { const userLocation = { lat: position.coords.latitude, lng: position.coords.longitude, }; console.log("Using device current location:", userLocation); initializeMapAndAutocomplete(userLocation); }, function (error) { console.error("Error getting device location:", error.message); // If user denies or error occurs, fallback to a default location (example Lagos) const fallbackLocation = { lat: 6.5244, lng: 3.3792 }; console.log("Using fallback location:", fallbackLocation); initializeMapAndAutocomplete(fallbackLocation); }, { enableHighAccuracy: true, timeout: 10000, // 10 seconds maximumAge: 0 } ); } else { console.error("Geolocation not supported by this browser."); // Fallback if geolocation completely unsupported const fallbackLocation = { lat: 6.5244, lng: 3.3792 }; console.log("Using fallback location:", fallbackLocation); initializeMapAndAutocomplete(fallbackLocation); } } // Initialize map and autocomplete when page loads window.onload = getCurrentLocation; </script> <?= $this->endSection(); ?>
Upload File
Create Folder