obanana_b2b_test/vendor-settings.php

1233 lines
66 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<?php
include "functions.php";
if ($_SESSION["userId"] <> "") {
$_SESSION["isLoggedIn"] = true;
// $customer_data = getCustomerbyLoginId($_SESSION["userId"]);
$vendorLoginId = searchVendorbyLoginId($_SESSION["userId"]);
$vendorLoginIdjson = json_decode($vendorLoginId, true);
// var_dump( $vendorLoginIdjson);
if (isset($vendorLoginIdjson['results'][0])) {
$vendorData = $vendorLoginIdjson['results'][0];
$vendorId = $vendorData['_id'];
$_SESSION["LoggedInVendorId"] = $vendorId;
}
// $vendor= getVendorbyId($vendorLoginIdjson['results'][0]['_id']);
// // var_dump($vendor);
// $array = json_decode($vendor,true);
// var_dump($array);
} else {
$_SESSION["isLoggedIn"] = false;
header("location: login.php");
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<title>oBanana B2B - Elevate Your Business</title>
<meta name="keywords" content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
<meta name="description" content="Best ecommerce html template for single and multi vendor store.">
<meta name="author" content="ashishmaraviya">
<!-- site Favicon -->
<link rel="icon" href="assets/images/favicon/favicon.png" sizes="32x32" />
<link rel="apple-touch-icon" href="assets/images/favicon/favicon.png" />
<meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
<!-- css Icon Font -->
<link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
<!-- css All Plugins Files -->
<link rel="stylesheet" href="assets/css/plugins/animate.css" />
<link rel="stylesheet" href="assets/css/plugins/swiper-bundle.min.css" />
<link rel="stylesheet" href="assets/css/plugins/jquery-ui.min.css" />
<link rel="stylesheet" href="assets/css/plugins/countdownTimer.css" />
<link rel="stylesheet" href="assets/css/plugins/slick.min.css" />
<link rel="stylesheet" href="assets/css/plugins/bootstrap.css" />
<!-- Main Style -->
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="assets/css/style2.css" />
<link rel="stylesheet" href="assets/css/responsive.css" />
<!-- Background css -->
<link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body class="shop_page">
<div id="ec-overlay">
<div class="ec-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<!-- Header start -->
<?php include "header.php" ?>
<!-- Header End -->
<!-- ekka Cart Start -->
<!-- ekka Cart End -->
<!-- Category Sidebar start -->
<?php include "category-slider.php" ?>
<!-- Ec breadcrumb start -->
<div class="sticky-header-next-sec ec-breadcrumb section-space-mb">
<div class="container">
<div class="row">
<div class="col-12">
<div class="row ec_breadcrumb_inner">
<div class="col-md-6 col-sm-12">
<h2 class="ec-breadcrumb-title">Vendor Settings</h2>
</div>
<div class="col-md-6 col-sm-12">
<!-- ec-breadcrumb-list start -->
<ul class="ec-breadcrumb-list">
<li class="ec-breadcrumb-item"><a href="index.php">Home</a></li>
<li class="ec-breadcrumb-item active">Settings</li>
</ul>
<!-- ec-breadcrumb-list end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Ec breadcrumb end -->
<!-- Vendor setting section -->
<section class="ec-page-content ec-vendor-uploads section-space-p">
<div class="container">
<div class="row">
<!-- Sidebar Area Start -->
<div class="ec-shop-leftside ec-vendor-sidebar col-lg-3 col-md-12">
<div class="ec-sidebar-wrap ec-border-box">
<!-- Sidebar Category Block -->
<div class="ec-sidebar-block">
<div class="ec-vendor-block">
<!-- <div class="ec-vendor-block-items">
<ul>
<li><a href="vendor-dashboard.php">Dashboard</a></li>
<li><a href="vendor-profile.html">Public Profile</a></li>
<li><a href="vendor-uploads.html">Uploads</a></li>
<li><a href="vendor-uploads.php">Uploads</a></li>
<li><a href="#">Track Shipping</a></li>
<li><a href="vendor-settings.php">Settings (Edit)</a></li>
<li><a href="vendor-dashboard.php">Dashboard</a></li>
<li><a href="vendor-uploads-add-product-action.php">Upload Product</a></li>
<li><a href="vendor-settings.php">Settings (Edit)</a></li>
</ul>
</div> -->
<?php include "vendor-user-tabs.php" ?>
</div>
</div>
</div>
</div>
<div class="ec-shop-rightside col-lg-9 col-md-12">
<div class="ec-vendor-dashboard-card ec-vendor-setting-card">
<div class="ec-vendor-card-body">
<?php
?>
<div class="row">
<div class="col-md-12">
<div class="ec-vendor-block-profile">
<!-- 02-23-2023 Jun Jihad Vendor Header Paceholder -->
<div class="ec-vendor-block-img space-bottom-30 ">
<?php
if (!isset($vendorData['vendor_banner']) || empty($vendorData['vendor_banner'])) {
$banner_style = 'background-color: orange !important; background-image: none !important; width: 100% !important; height: 200px !important; background-size: cover !important; background-position: center !important; border-radius: 5px !important;';
} else {
$banner_style = 'background-image: url(' . $vendorData['vendor_banner'] . ') !important; width: 100% !important; height: 200px !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-blend-mode: overlay !important; background-color: rgba(0, 0, 0, 0.6) !important; border-radius: 5px !important;';
}
?>
<div class="ec-vendor-block-bg" style="<?php echo $banner_style; ?>">
<a href="#" class="btn btn-lg btn-primary" data-link-action="editmodal" title="Edit Detail" data-bs-toggle="modal" data-bs-target="#edit_modal">Edit Detail</a>
</div>
<div class="ec-vendor-block-detail">
<!-- 02-26-2024 Stacy added placeholder-->
<?php
$vendor_image = isset($vendorData[0]['vendor_image']) ? $vendorData[0]['vendor_image'] : 'https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg';
?>
<img class="v-img" src=<?php echo $vendor_image ?> alt="vendor image">
<h5 class="name"><?php echo $vendorData['user_login'] ?></h5>
</div>
</div>
<!-- 02-23-2023 Jun Jihad Vendor Header Paceholder -->
<!-- 02-23-2023 Jun Jihad Vendor Description -->
<div class="ec-vendor-block-about space-bottom-30">
<h5>About Us</h5>
<?php if (!empty($vendorData['vendor_description'])): ?>
<p><?php echo $vendorData['vendor_description']; ?></p>
<?php else: ?>
<p>No description available.</p>
<?php endif; ?>
</div>
<!-- 02-23-2023 Jun Jihad Vendor Description -->
<h5>Account Information</h5>
<div class="row">
<div class="col-md-6 col-sm-12">
<div class="ec-vendor-detail-block ec-vendor-block-email space-bottom-30">
<h6>E-mail address </h6>
<ul>
<li style="padding:3%"><strong><?php echo $vendorData["user_email"] ?></strong></li>
</ul>
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="ec-vendor-detail-block ec-vendor-block-contact space-bottom-30">
<h6>Contact nubmer</h6>
<ul>
<li style="padding:3%"><strong><?php echo $vendorData["phone"] ?></strong></li>
</ul>
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="ec-vendor-detail-block ec-vendor-block-contact space-bottom-30">
<h6>Address <button type="button" class="btn btn-primary" id="vendorAddressModalBtn" data-bs-toggle="modal" data-bs-target="#vendorAddressModal">My Addresses</button></h6>
<div class="shipping">
<?php foreach ($vendorData['address'] as $address) : ?>
<?php if ($address['shipping']) : ?>
<div class="sName">
<span>Name:
<span id="selectedFName"><?php echo $address['first_name']; ?></span>
<span id="selectedLName"> <?php echo $address['last_name']; ?></span>
</span>
</div>
<div class="sContact">
<span id="selectedContact">Contact #: <?php echo $address['phone']; ?></span>
</div>
<div class="sAddress">
<span>Address:
<span id="sBuilding"><?php echo $address['address_1']; ?></span>
<span id="sStreet"><?php echo $address['address_2']; ?></span>
<span id="sBarangay"><?php echo $address['barangay']; ?></span>
<span id="sCity"><?php echo $address['city']; ?></span>
<span id="sProvince"><?php echo $address['province']; ?></span>
<span id="sCountry"><?php echo $address['country']; ?></span>
</span>
</div>
<?php endif; ?>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="vendorAddressModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
<div class="modal-content">
<div class="modal-body" style="overflow-y: auto; max-height: 90vh;">
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#secondModal">Add New Address</button>
<!-- Display a list of addresses and let the user choose -->
<form id="addressForm">
<!-- <?php var_dump($vendorData) ?> -->
<?php foreach ($vendorLoginIdjson['results'] as $vendor_index => $vendor) { ?>
<?php foreach ($vendor['address'] as $address_index => $address) { ?>
<div class="card mb-3">
<div class="card-body">
<div class="selectCon">
<div class="selectWrap" style="display: flex; justify-content: center; align-items: center; width: 50%;">
<input type="radio" style="padding-left: 0px !important; margin: 0px 0px !important;" name="selectedBillingAddress[<?php echo $vendor_index; ?>]" id="billing_address_<?php echo $vendor_index; ?>_<?php echo $address_index; ?>" value="<?php echo $vendor_index; ?>_<?php echo $address_index; ?>" class="form-check-input" onchange="updateAddressBilling('<?php echo $vendor['_id']; ?>', <?php echo $address_index; ?>, true)" <?php echo $address["billing"] ? 'checked' : ''; ?>>
<label class="form-check-label" style="margin: 0px 10px !important;" for="billing_address_<?php echo $vendor_index; ?>_<?php echo $address_index; ?>">
Billing Address
</label>
</div>
<div class="selectWrap" style="display: flex; justify-content: center; align-items: center; width: 50%;">
<input type="radio" style="padding-left: 0px !important; margin: 0px 0px !important;" name="selectedShippingAddress[<?php echo $vendor_index; ?>]" id="shipping_address_<?php echo $vendor_index; ?>_<?php echo $address_index; ?>" value="<?php echo $vendor_index; ?>_<?php echo $address_index; ?>" class="form-check-input" onchange="updateAddressShipping('<?php echo $vendor['_id']; ?>', <?php echo $address_index; ?>, true)" <?php echo $address["shipping"] ? 'checked' : ''; ?>>
<label class="form-check-label" style="margin: 0px 10px !important;" for="shipping_address_<?php echo $vendor_index; ?>_<?php echo $address_index; ?>">
Shipping Address
</label>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12 mx-auto"> <!-- Adjust the column size as needed -->
<label class="form-check-label" for="address_<?php echo $vendor_index; ?>_<?php echo $address_index; ?>">
<?php echo $address['first_name']; ?> <?php echo $address['last_name']; ?><br>
<?php echo $address['address_1']; ?> <?php echo $address['address_2']; ?>
<?php echo $address['barangay']; ?>, <?php echo $address['city']; ?>,
<?php echo $address['province']; ?> <?php echo $address['country']; ?><br>
Phone: <?php echo $address['phone']; ?>
</label>
</div>
</div>
</div>
</div>
</div>
<?php } ?>
<?php } ?>
</form>
</div>
</div>
</div>
</div>
<div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
<div class="modal-content">
<div class="modal-body" style="overflow-y: auto; max-height: 90vh;">
<form>
<div class="form-group">
<label for="addressFirstName" class="text-dark font-weight-medium pt-3 mb-2">First Name</label>
<input type="text" class="form-control" id="addressFirstName">
</div>
<div class="form-group">
<label for="addressLastName" class="text-dark font-weight-medium pt-3 mb-2">Last Name</label>
<input type="text" class="form-control" id="addressLastName">
</div>
<div class="form-group">
<label for="addressContact" class="text-dark font-weight-medium pt-3 mb-2">Contact Number</label>
<input type="number" class="form-control" id="addressContact">
</div>
<div class="form-group">
<label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2"> Building,Number </label>
<input type="text" class="form-control" id="addressBuilding">
</div>
<div class="form-group">
<label for="addressStreet" class="text-dark font-weight-medium pt-3 mb-2"> Street </label>
<input type="text" class="form-control" id="addressStreet">
</div>
<div class="form-group">
<label for="provinceSelect">Province</label>
<select class="form-select" id="provinceSelect">
<option value="" disabled selected hidden>Select Province</option>
</select>
</div>
<div class="form-group">
<label for="citySelect">Municipality/City</label>
<select class="form-select" id="citySelect" required>
<option value="" disabled selected hidden>Select Municipality/City</option>
</select>
</div>
<div class="form-group">
<label for="barangaySelect">Barangay</label>
<select class="form-select" id="barangaySelect" required>
<option value="" disabled selected hidden>Select Barangay</option>
</select>
</div>
<div class="form-group">
<label for="addressCountry" class="text-dark font-weight-medium pt-3 mb-2">Country</label>
<input type="text" class="form-control" id="addressCountry">
</div>
<button type="button" class="btn btn-primary" id="submitBtn">Submit</button>
</form>
</div>
</div>
</div>
</div>
<script>
function editUser() {
// var fileInput = document.getElementById('fileInput' + vendorId);
// var file = fileInput.files[0];
const vendorid = `<?php echo $_SESSION["LoggedInVendorId"]; ?>`;
const company = document.getElementById('company-').value;
const firstName = document.getElementById('cfirstname-').value;
const lastName = document.getElementById('clastname-').value;
const phone = document.getElementById('cphone-').value;
const description = document.getElementById('cdescription-').value;
// If no file selected, only update the email
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/${vendorid}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
user_login: company,
first_name: firstName,
last_name: lastName,
phone: phone,
vendor_description:description
})
})
.then(response => {
if (response.ok) {
console.log('Email update successful');
location.reload();
// Handle any other actions after the successful email update
} else {
console.error('Email update failed');
// Handle errors or display a message to the user
}
})
.catch(error => {
console.error('Error during fetch:', error);
// Handle network or other errors
});
}
//S 03-06-2024 Stacy added upload function
function addProduct() {
console.log("Session Token:", sessionToken);
login(email, password, function() {
// Removed the call to updateSessionToken
window.open("vendor-uploads-add-product-action.php", "_self");
});
}
</script>
<script>
const vendorid = `<?php echo $_SESSION["LoggedInVendorId"]; ?>`;
document.addEventListener('DOMContentLoaded', function() {
const provinceSelect = $('#provinceSelect');
const citySelect = $('#citySelect');
const barangaySelect = $('#barangaySelect');
provinceSelect.select2({
dropdownParent: $('#secondModal'),
containerCssClass: 'select2-zindex-high'
});
citySelect.select2({
dropdownParent: $('#secondModal'),
containerCssClass: 'select2-zindex-high'
});
barangaySelect.select2({
dropdownParent: $('#secondModal'),
containerCssClass: 'select2-zindex-high'
});
// Fetch provinces data
fetch('https://psgc.gitlab.io/api/provinces')
.then(response => {
if (response.ok) {
return response.json();
} else {
console.error('Failed to fetch provinces');
throw new Error('Failed to fetch provinces');
}
})
.then(provincesData => {
provincesData.forEach(province => {
const option = new Option(province.name, province.code);
provinceSelect.append(option);
});
const extraOption = new Option('Metro Manila', '130000000');
provinceSelect.append(extraOption);
provinceSelect.on('change', function() {
citySelect.html('<option value="" disabled selected hidden>Select City</option>');
barangaySelect.html('<option value="" disabled selected hidden>Select Barangay</option>');
updateCities();
});
})
.catch(error => {
console.error('Error:', error);
});
function updateCities() {
const selectedProvinceCode = provinceSelect.val();
if (selectedProvinceCode) {
let citiesEndpoint;
if (selectedProvinceCode === '130000000') {
citiesEndpoint = 'https://psgc.gitlab.io/api/regions/130000000/cities-municipalities/';
} else {
citiesEndpoint = `https://psgc.gitlab.io/api/provinces/${selectedProvinceCode}/cities-municipalities/`;
}
fetch(citiesEndpoint)
.then(response => {
if (response.ok) {
return response.json();
} else {
console.error('Failed to fetch cities/municipalities');
throw new Error('Failed to fetch cities/municipalities');
}
})
.then(citiesData => {
citiesData.forEach(city => {
const option = new Option(city.name, city.code);
citySelect.append(option);
});
})
.catch(error => {
console.error('Error:', error);
});
}
}
citySelect.on('change', function() {
barangaySelect.html('<option value="" disabled selected hidden>Select Barangay</option>');
const selectedCityCode = citySelect.val();
if (selectedCityCode) {
fetch(`https://psgc.gitlab.io/api/cities-municipalities/${selectedCityCode}/barangays/`)
.then(response => {
if (response.ok) {
return response.json();
} else {
console.error('Failed to fetch barangays');
throw new Error('Failed to fetch barangays');
}
})
.then(barangaysData => {
barangaysData.forEach(barangay => {
const option = new Option(barangay.name, barangay.code);
barangaySelect.append(option);
});
})
.catch(error => {
console.error('Error:', error);
});
}
});
$('#submitBtn').on('click', function() {
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid)
.then(response => response.json())
.then(data => {
const existingAddresses = data.address || [];
const firstName = $('#addressFirstName').val();
const lastName = $('#addressLastName').val();
const contact = $('#addressContact').val();
const buildingNumber = $('#addressBuilding').val();
const street = $('#addressStreet').val();
const province = $('#provinceSelect :selected').text();
const city = $('#citySelect :selected').text();
const barangay = $('#barangaySelect :selected').text();
const country = $('#addressCountry').val();
const newAddress = {
first_name: firstName,
last_name: lastName,
phone: contact,
address_1: buildingNumber,
address_2: street,
city: city,
province: province,
barangay: barangay,
country: country,
};
existingAddresses.push(newAddress);
return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
address: existingAddresses
}),
});
})
.then(response => {
if (response.ok) {
location.reload();
} else {
console.error('Failed to submit data');
alert('Failed to submit data');
}
})
.catch(error => {
console.error('Error:', error);
alert('Error submitting data');
});
});
});
</script>
<script>
async function updateAddressBilling(vendorid, addressIndex, isBilling) {
try {
const apiUrl = `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/${vendorid}`;
const response = await fetch(apiUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error(`Failed to fetch vendor data: ${response.status}`);
}
const vendorsData = await response.json();
vendorsData.address.forEach((address, index) => {
if (index === addressIndex) {
if (isBilling !== undefined) {
address.billing = isBilling;
const radioButtonId = `#billing_address_${vendorid}_${addressIndex}`;
$(radioButtonId).prop('checked', isBilling);
}
// if (isShipping !== undefined) {
// address.shipping = isShipping;
// }
} else {
// Set other addresses to false
address.billing = false;
// address.shipping = false;
}
});
// Send a PATCH request to update the customer data
const updateResponse = await fetch(apiUrl, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
address: vendorsData.address
}),
});
if (!updateResponse.ok) {
throw new Error(`Failed to update address: ${updateResponse.status}`);
}
console.log(`Address updated successfully for customer ${vendorid}`);
} catch (error) {
console.error('Error updating address:', error.message);
}
}
async function updateAddressShipping(vendorid, addressIndex, isShipping) {
try {
const apiUrl = `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/${vendorid}`;
const response = await fetch(apiUrl, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
});
if (!response.ok) {
throw new Error(`Failed to fetch customer data: ${response.status}`);
}
// console.log(customerId + " ." + addressIndex + "." +isBilling + "." + isShipping)
const vendorsData = await response.json();
// Iterate through addresses and update billing/shipping flags
vendorsData.address.forEach((address, index) => {
if (index === addressIndex) {
// if (isBilling !== undefined) {
// address.billing = isBilling;
// }
if (isShipping !== undefined) {
address.shipping = isShipping;
}
} else {
// Set other addresses to false
// address.billing = false;
address.shipping = false;
}
});
// Send a PATCH request to update the customer data
const updateResponse = await fetch(apiUrl, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
address: vendorsData.address
}),
});
if (!updateResponse.ok) {
throw new Error(`Failed to update address: ${updateResponse.status}`);
}
const selectedShippingElement = document.getElementById('selectedFName');
const selectedLNameElement = document.getElementById('selectedLName');
const selectedContactElement = document.getElementById('selectedContact');
const sBuildingElement = document.getElementById('sBuilding');
const sStreetElement = document.getElementById('sStreet');
const sBarangayElement = document.getElementById('sBarangay');
const sCityElement = document.getElementById('sCity');
const sProvinceElement = document.getElementById('sProvince');
const sCountryElement = document.getElementById('sCountry');
if (selectedShippingElement) {
selectedShippingElement.textContent = vendorsData.address[addressIndex].first_name;
// Update other address details similarly
selectedLNameElement.textContent = vendorsData.address[addressIndex].last_name;
selectedContactElement.textContent = 'Contact #: ' + vendorsData.address[addressIndex].phone;
sBuildingElement.textContent = vendorsData.address[addressIndex].address_1;
sStreetElement.textContent = vendorsData.address[addressIndex].address_2;
sBarangayElement.textContent = vendorsData.address[addressIndex].barangay;
sCityElement.textContent = vendorsData.address[addressIndex].city;
sProvinceElement.textContent = vendorsData.address[addressIndex].province;
sCountryElement.textContent = vendorsData.address[addressIndex].country;
}
console.log(`Address updated successfully for customer ${vendorid}`);
} catch (error) {
console.error('Error updating address:', error.message);
}
}
</script>
</section>
<!-- End Vendor setting section -->
<!-- Footer Start -->
<?php include "footer.php" ?>
<!-- Footer Area End -->
<!-- Start Modal Copy-->
<!-- Modal -->
<div class="modal fade" id="edit_modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<div class="row">
<div class="ec-vendor-block-img space-bottom-30">
<div class="ec-vendor-block-bg cover-upload">
<div class="thumb-upload">
<div class="thumb-edit">
<input type='file' id="thumbUpload01" class="ec-image-upload" accept=".png, .jpg, .jpeg" onchange="uploadProfileBanner()" />
<label><i class="fi-rr-edit"></i></label>
</div>
<div class="thumb-preview ec-preview">
<div class="image-thumb-preview">
<?php
if (!isset($vendorData['vendor_banner']) || empty($vendorData['vendor_banner'])) {
$banner_style2 = 'background-color: orange !important; background-image: none !important; width: 100% !important; height: 200px !important; background-size: cover !important; background-position: center !important; border-radius: 5px !important;';
echo '<div class="image-thumb-preview ec-image-preview v-img" style="' . $banner_style2 . '"></div>';
} else {
echo '<img class="image-thumb-preview ec-image-preview v-img" src="' . $vendorData['vendor_banner'] . '" alt="edit" />';
}
?>
</div>
</div>
</div>
</div>
<div class="ec-vendor-block-detail">
<div class="thumb-upload">
<div class="thumb-edit">
<input type='file' id="imageUpload" class="ec-image-upload" accept=".png, .jpg, .jpeg" onchange="uploadVendorProfileImage()" />
<label><i class="fi-rr-edit"></i></label>
</div>
<div class="thumb-preview ec-preview">
<div class="image-thumb-preview">
<?php if (!empty($vendorData['vendor_image'])): ?>
<img class="image-thumb-preview ec-image-preview v-img" src="<?php echo $vendorData['vendor_image']; ?>" alt="edit" />
<?php else: ?>
<img class="image-thumb-preview ec-image-preview v-img" src="https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg" alt="edit" />
<?php endif; ?>
</div>
</div>
</div>
</div>
<script>
function uploadVendorProfileImage() {
var vendorid = '<?php echo $_SESSION["LoggedInVendorId"] ?>';
var file = document.getElementById('imageUpload').files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const maxWidth = 1200;
const maxHeight = 1000;
const aspectRatio = img.width / img.height;
let newWidth = img.width;
let newHeight = img.height;
if (img.width > maxWidth) {
newWidth = maxWidth;
newHeight = newWidth / aspectRatio;
}
if (newHeight > maxHeight) {
newHeight = maxHeight;
newWidth = newHeight * aspectRatio;
}
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);
canvas.toBlob((blob) => {
const resizedFile = new File([blob], file.name, {
type: 'image/jpeg'
});
var formData = new FormData();
formData.append('image_id', vendorid);
formData.append('category', 'vendor');
formData.append('image', resizedFile);
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
return response.json();
} else {
console.error('File upload failed');
throw new Error('File upload failed');
}
})
.then(result => {
const filename = encodeURI(result.filename);
const payload = {
vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
};
console.log('Payload:', payload);
return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
})
.then(secondResponse => {
if (secondResponse.ok) {
console.log('Second request successful');
location.reload();
} else {
console.error('Second request failed');
}
})
.catch(error => {
console.error('Error during fetch:', error);
});
}, 'image/jpeg');
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
}
function uploadProfileBanner() {
var vendorid = '<?php echo $_SESSION["LoggedInVendorId"] ?>';
var file = document.getElementById('thumbUpload01').files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(event) {
const img = new Image();
img.onload = function() {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const maxWidth = 1200;
const maxHeight = 1000;
const aspectRatio = img.width / img.height;
let newWidth = img.width;
let newHeight = img.height;
if (img.width > maxWidth) {
newWidth = maxWidth;
newHeight = newWidth / aspectRatio;
}
if (newHeight > maxHeight) {
newHeight = maxHeight;
newWidth = newHeight * aspectRatio;
}
canvas.width = newWidth;
canvas.height = newHeight;
ctx.drawImage(img, 0, 0, newWidth, newHeight);
canvas.toBlob((blob) => {
const resizedFile = new File([blob], file.name, {
type: 'image/jpeg'
});
var formData = new FormData();
formData.append('image_id', vendorid + '_banner');
formData.append('category', 'vendor');
formData.append('image', resizedFile);
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
method: 'POST',
body: formData
})
.then(response => {
if (response.ok) {
return response.json();
} else {
console.error('File upload failed');
throw new Error('File upload failed');
}
})
.then(result => {
const filename = encodeURI(result.filename);
// const filename = result.filename;
const payload = {
vendor_banner: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
};
console.log('Payload:', payload);
return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
})
.then(secondResponse => {
if (secondResponse.ok) {
console.log('Second request successful');
location.reload();
} else {
console.error('Second request failed');
}
})
.catch(error => {
console.error('Error during fetch:', error);
});
}, 'image/jpeg');
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
}
}
</script>
<div class="ec-vendor-upload-detail">
<form class="row g-3">
<!-- <div class="col-md-6 space-t-15">
<label class="form-label">First name</label>
<input type="text" class="form-control">
</div> -->
<div class="form-group">
<label for="company-" class="text-dark font-weight-medium pt-3 mb-2">Company</label>
<input type="text" class="form-control" id="company-" value="<?php echo $vendorData['user_login'] ?>">
</div>
<div class="form-group">
<label for="cfirstname-" class="text-dark font-weight-medium pt-3 mb-2">Contact First Name</label>
<input type="text" class="form-control" id="cfirstname-" value="<?php echo $vendorData['first_name'] ?>">
</div>
<div class="form-group">
<label for="clastname-" class="text-dark font-weight-medium pt-3 mb-2">Contact Last Name</label>
<input type="text" class="form-control" id="clastname-" value="<?php echo $vendorData['last_name'] ?>">
</div>
<div class="form-group">
<label for="cphone-" class="text-dark font-weight-medium pt-3 mb-2">Contact Number</label>
<input type="text" class="form-control" id="cphone-" value="<?php echo $vendorData['phone'] ?>">
</div>
<!-- 02-23-2023 Jun Jihad Vendor Description Field-->
<div class="form-group">
<label for="cdescription-" class="text-dark font-weight-medium pt-3 mb-2">Vendor Description</label>
<textarea class="form-control" id="cdescription-"><?php echo $vendorData['vendor_description']; ?></textarea>
</div>
<!-- 02-23-2023 Jun Jihad Vendor Description Field-->
<!-- <div class="col-md-12 space-t-15">
<button type="submit" class="btn btn-primary">Update</button>
<a href="#" class="btn btn-lg btn-secondary qty_close" data-bs-dismiss="modal"
aria-label="Close">Close</a>
</div> -->
</form>
<button type="button" class="btn btn-primary btn-pill my-3" onclick="editUser()">Upload</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal end -->
<!-- Footer navigation panel for responsive display -->
<div class="ec-nav-toolbar">
<div class="container">
<div class="ec-nav-panel">
<div class="ec-nav-panel-icons">
<a href="#ec-mobile-menu" class="navbar-toggler-btn ec-header-btn ec-side-toggle"><i class="fi-rr-menu-burger"></i></a>
</div>
<div class="ec-nav-panel-icons">
<a href="#ec-side-cart" class="toggle-cart ec-header-btn ec-side-toggle"><i class="fi-rr-shopping-bag"></i><span class="ec-cart-noti ec-header-count cart-count-lable">3</span></a>
</div>
<div class="ec-nav-panel-icons">
<a href="index.php" class="ec-header-btn"><i class="fi-rr-home"></i></a>
</div>
<div class="ec-nav-panel-icons">
<a href="wishlist.html" class="ec-header-btn"><i class="fi-rr-heart"></i><span class="ec-cart-noti">4</span></a>
</div>
<div class="ec-nav-panel-icons">
<a href="login.php" class="ec-header-btn"><i class="fi-rr-user"></i></a>
</div>
</div>
</div>
</div>
<!-- Footer navigation panel for responsive display end -->
<!-- raymart remove popup feb 20 2024 -->
<!-- Recent Purchase Popup -->
<!-- <div class="recent-purchase">
<img src="assets/images/product-image/1.jpg" alt="payment image">
<div class="detail">
<p>Someone in new just bought</p>
<h6>stylish baby shoes</h6>
<p>10 Minutes ago</p>
</div>
<a href="javascript:void(0)" class="icon-btn recent-close">×</a>
</div> -->
<!-- Recent Purchase Popup end -->
<!-- Cart Floating Button -->
<div class="ec-cart-float">
<a href="#ec-side-cart" class="ec-header-btn ec-side-toggle">
<div class="header-icon"><i class="fi-rr-shopping-basket"></i>
</div>
<span class="ec-cart-count cart-count-lable">3</span>
</a>
</div>
<!-- Cart Floating Button end -->
<!-- Whatsapp -->
<div class="ec-style ec-right-bottom">
<!-- Start Floating Panel Container -->
<div class="ec-panel">
<!-- Panel Header -->
<div class="ec-header">
<strong>Need Help?</strong>
<p>Chat with us on WhatsApp</p>
</div>
<!-- Panel Content -->
<div class="ec-body">
<ul>
<!-- Start Single Contact List -->
<li>
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
<div class="d-flex bd-highlight">
<!-- Profile Picture -->
<div class="ec-img-cont">
<img src="assets/images/whatsapp/profile_01.jpg" class="ec-user-img" alt="Profile image">
<span class="ec-status-icon"></span>
</div>
<!-- Display Name & Last Seen -->
<div class="ec-user-info">
<span>Sahar Darya</span>
<p>Sahar left 7 mins ago</p>
</div>
<!-- Chat iCon -->
<div class="ec-chat-icon">
<i class="fa fa-whatsapp"></i>
</div>
</div>
</a>
</li>
<!--/ End Single Contact List -->
<!-- Start Single Contact List -->
<li>
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
<div class="d-flex bd-highlight">
<!-- Profile Picture -->
<div class="ec-img-cont">
<img src="assets/images/whatsapp/profile_02.jpg" class="ec-user-img" alt="Profile image">
<span class="ec-status-icon ec-online"></span>
</div>
<!-- Display Name & Last Seen -->
<div class="ec-user-info">
<span>Yolduz Rafi</span>
<p>Yolduz is online</p>
</div>
<!-- Chat iCon -->
<div class="ec-chat-icon">
<i class="fa fa-whatsapp"></i>
</div>
</div>
</a>
</li>
<!--/ End Single Contact List -->
<!-- Start Single Contact List -->
<li>
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
<div class="d-flex bd-highlight">
<!-- Profile Picture -->
<div class="ec-img-cont">
<img src="assets/images/whatsapp/profile_03.jpg" class="ec-user-img" alt="Profile image">
<span class="ec-status-icon ec-offline"></span>
</div>
<!-- Display Name & Last Seen -->
<div class="ec-user-info">
<span>Nargis Hawa</span>
<p>Nargis left 30 mins ago</p>
</div>
<!-- Chat iCon -->
<div class="ec-chat-icon">
<i class="fa fa-whatsapp"></i>
</div>
</div>
</a>
</li>
<!--/ End Single Contact List -->
<!-- Start Single Contact List -->
<li>
<a class="ec-list" data-number="918866774266" data-message="Please help me! I have got wrong product - ORDER ID is : #654321485">
<div class="d-flex bd-highlight">
<!-- Profile Picture -->
<div class="ec-img-cont">
<img src="assets/images/whatsapp/profile_04.jpg" class="ec-user-img" alt="Profile image">
<span class="ec-status-icon ec-offline"></span>
</div>
<!-- Display Name & Last Seen -->
<div class="ec-user-info">
<span>Khadija Mehr</span>
<p>Khadija left 50 mins ago</p>
</div>
<!-- Chat iCon -->
<div class="ec-chat-icon">
<i class="fa fa-whatsapp"></i>
</div>
</div>
</a>
</li>
<!--/ End Single Contact List -->
</ul>
</div>
</div>
<!--/ End Floating Panel Container -->
<!-- Start Right Floating Button-->
<div class="ec-right-bottom">
<div class="ec-box">
<div class="ec-button rotateBackward">
<img class="whatsapp" src="assets/images/common/whatsapp.png" alt="whatsapp icon" />
</div>
</div>
</div>
<!--/ End Right Floating Button-->
</div>
<!-- Whatsapp end -->
<!-- Feature tools -->
<div class="ec-tools-sidebar-overlay"></div>
<div class="ec-tools-sidebar">
<div class="tool-title">
<h3>Features</h3>
</div>
<a href="#" class="ec-tools-sidebar-toggle in-out">
<img alt="icon" src="assets/images/common/settings.png" />
</a>
<div class="ec-tools-detail">
<div class="ec-tools-sidebar-content ec-change-color ec-color-desc">
<h3>Color Scheme</h3>
<ul class="bg-panel">
<li class="active" data-color="01"><a href="#" class="colorcode1"></a></li>
<li data-color="02"><a href="#" class="colorcode2"></a></li>
<li data-color="03"><a href="#" class="colorcode3"></a></li>
<li data-color="04"><a href="#" class="colorcode4"></a></li>
<li data-color="05"><a href="#" class="colorcode5"></a></li>
</ul>
</div>
<div class="ec-tools-sidebar-content">
<h3>Backgrounds</h3>
<ul class="bg-panel">
<li class="bg"><a class="back-bg-1" id="bg-1">Background-1</a></li>
<li class="bg"><a class="back-bg-2" id="bg-2">Background-2</a></li>
<li class="bg"><a class="back-bg-3" id="bg-3">Background-3</a></li>
<li class="bg"><a class="back-bg-4" id="bg-4">Default</a></li>
</ul>
</div>
<div class="ec-tools-sidebar-content">
<h3>Full Screen mode</h3>
<div class="ec-fullscreen-mode">
<div class="ec-fullscreen-switch">
<div class="ec-fullscreen-btn">Mode</div>
<div class="ec-fullscreen-on">On</div>
<div class="ec-fullscreen-off">Off</div>
</div>
</div>
</div>
<div class="ec-tools-sidebar-content">
<h3>Dark mode</h3>
<div class="ec-change-mode">
<div class="ec-mode-switch">
<div class="ec-mode-btn">Mode</div>
<div class="ec-mode-on">On</div>
<div class="ec-mode-off">Off</div>
</div>
</div>
</div>
<div class="ec-tools-sidebar-content">
<h3>RTL mode</h3>
<div class="ec-change-rtl">
<div class="ec-rtl-switch">
<div class="ec-rtl-btn">Rtl</div>
<div class="ec-rtl-on">On</div>
<div class="ec-rtl-off">Off</div>
</div>
</div>
</div>
<div class="ec-tools-sidebar-content">
<h3>Clear local storage</h3>
<a class="clear-cach" href="javascript:void(0)">Clear Cache & Default</a>
</div>
</div>
</div>
<!-- Feature tools end -->
<!-- Vendor JS -->
<!-- <script src="assets/js/vendor/jquery-3.5.1.min.js"></script> -->
<script src="assets/js/vendor/popper.min.js"></script>
<script src="assets/js/vendor/bootstrap.min.js"></script>
<script src="assets/js/vendor/jquery-migrate-3.3.0.min.js"></script>
<script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
<!--Plugins JS-->
<script src="assets/js/plugins/swiper-bundle.min.js"></script>
<script src="assets/js/plugins/countdownTimer.min.js"></script>
<script src="assets/js/plugins/scrollup.js"></script>
<script src="assets/js/plugins/jquery.zoom.min.js"></script>
<script src="assets/js/plugins/slick.min.js"></script>
<script src="assets/js/plugins/infiniteslidev2.js"></script>
<script src="assets/js/vendor/jquery.magnific-popup.min.js"></script>
<script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
<script src="assets/js/plugins/nouislider.js"></script>
<!-- Main Js -->
<script src="assets/js/vendor/index.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>