obanana_b2b_test/user-history.php

2569 lines
177 KiB
PHP
Raw Permalink 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";
$_SESSION["url"] = $_SERVER['REQUEST_URI'];
if ($_SESSION["userId"] <> "") {
$_SESSION["isLoggedIn"] = true;
$customer_data = getCustomerbyLoginId($_SESSION["userId"]);
} else {
$_SESSION["isLoggedIn"] = false;
header("location: login.php");
}
if ($_SESSION["isVendor"] == true) {
header("location: vendor-dashboard.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" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- 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" />
<!-- FLATICON -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
<!-- 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" />
<link href="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.css" rel="stylesheet">
<!-- 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>
<style>
.tab.active {
background-color: #ffffff;
/* Set your desired background color for the active tab */
color: #3474d4;
/* Set your desired text color for the active tab */
border: 1px solid #3474d4
/* Set your desired border color for the active tab */
}
.tab {
background-color: #3474d4;
color: #ffffff;
font-family: "Poppins, sans-serif";
font-weight: 400;
/* margin: 2px; */
text-align: center;
/* margin-right: -25px; */
}
.tab i {
font-size: 15px;
/* padding-left: 3px; */
}
.tableView:hover {
/* background-color: #f5f5f5; */
background-color: #e5e5e5;
}
.tab-content {
border: none;
margin-top: -30px;
}
.tableView {
td:nth-child(2) {
max-width: 250px;
}
td:nth-child(6) {
white-space: nowrap;
}
td:nth-child(7) {
white-space: nowrap;
}
}
.Title {
th:nth-child(4) {
white-space: nowrap;
}
th:nth-child(6) {
white-space: nowrap;
}
}
@media only screen and (max-width: 640px) {
#tableTitle {
font-size: 14px;
}
#shopNow {
font-size: 12px;
}
}
@media only screen and (max-width: 460px) {
#tableTitle {
font-size: 12px;
}
#shopNow {
font-size: 10px;
}
}
/* for status buttons */
@media only screen and (max-width: 10000px) {
.tab {
font-size: 15px;
width: 11rem;
}
}
@media only screen and (max-width: 685px) {
.tab {
font-size: 11px;
width: 7rem;
}
.tab i {
font-size: 10px;
}
}
@media only screen and (max-width: 566px) {
.tab {
font-size: 0px;
width: 5rem;
}
.tab i {
font-size: 14px;
}
}
</style>
<script>
function updateCartItemCount() {
$.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
if (data != "") {
console.log("Data: " + data + "\nStatus: " + status);
document.getElementById("cartItemCount").innerHTML = data;
}
});
}
function updateWishItemCount() {
$.get("wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data) {
if (data != "") {
document.getElementById("wishItemCount").innerHTML = data;
}
});
}
let messageInput1 = {};
let fileInput1 = {};
let messagePreview1 = {};
let removePreview1 = {};
let sendButton1 = {};
</script>
</head>
<body onload="updateCartItemCount(); updateWishItemCount()" class="shop_page">
<div id="ec-overlay">
<div class="ec-ellipsis">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<style>
#product-container1 {
/* position: absolute; */
display: flex;
justify-content: center;
align-items: center;
width: 100%;
flex-direction: column;
}
.prodDetails-feed {
display: flex;
justify-content: flex-start;
align-items: center;
flex-direction: column;
width: 80%;
}
/* .product-con-feed {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 80%;
} */
.rate-con {
font-size: 26px;
margin: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.ecicon {
color: #eeee !important;
cursor: pointer;
}
.ecicon.fill {
color: #ffaa00 !important;
cursor: pointer;
}
.rate-text {
font-size: 16px;
font-weight: 600;
text-align: left;
color: #000;
margin: 0 10px;
}
.message-preview-feed {
height: 100px;
width: 80%;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.message-preview-feed.hide {
height: 0px;
width: 0px;
border-radius: 5px;
display: flex;
justify-content: center;
align-items: center;
}
.message-input-feed {
border: 1px solid #eee;
border-radius: 15px;
width: 80%;
margin-right: 10px;
margin-top: 20px;
}
.send-btn-feed {
border-radius: 15px;
width: 20%;
height: 50px;
background-color: #ffaa00;
color: #fff;
margin-top: 20px;
cursor: pointer;
}
.send-btn-feed:hover {
background-color: #eb9c00;
}
.img-prev-feed {
height: 80px;
width: 80px;
border-radius: 5px;
object-fit: cover;
margin: 10px;
}
.vid-prev-feed {
height: 80px;
width: 80px;
border-radius: 5px;
object-fit: cover;
margin: 10px;
}
.remove-prev-feed {
cursor: pointer;
height: 20px;
width: 20px;
border-radius: 35px;
display: flex;
justify-content: center;
align-items: center;
font-weight: 400;
font-size: 10px;
/* position:absolute; */
z-index: 30;
background-color: #eee;
border: 1px solid #ccc;
/* top:-20px; */
font-size: 18px;
font-weight: 500;
padding: 10px;
margin-top: 20px;
margin-left: 30px;
}
.remove-prev-feed.hide {
display: none;
height: 0px;
width: 0px;
}
</style>
<!-- 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">User History</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">History</li>
</ul>
<!-- ec-breadcrumb-list end -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Ec breadcrumb end -->
<!-- User history section -->
<section class="ec-page-content ec-vendor-uploads ec-user-account 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-bg"></div>
<div class="ec-vendor-block-detail">
<img loading="lazy" class="v-img" src="assets/images/user/1.jpg" alt="vendor image">
<h5>Mariana Johns</h5>
</div> -->
<!-- 03-14-2024 Stacy added customer image -->
<div class="ec-vendor-block-bg"
style="background-color: orange; background-image: url(<?php echo $customer_data['customer_banner'] ?>) !important;">
</div>
<div class="ec-vendor-block-detail">
<?php
$customer_image = isset($customer_data[0]['customer_image']) ? $customer_data[0]['customer_image'] : 'https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg';
?>
<img loading="lazy" class="v-img" src=<?php echo $customer_image ?>
alt="vendor image">
</div>
<?php include 'user-profile-tabs.php' ?>
</div>
</div>
</div>
</div>
<div class="ec-shop-rightside col-lg-9 col-md-12">
<!-- 03-14-2024 Stacy added cards -->
<!-- <div class="row d-flex justify-content-around" id="rowTabs" >
<div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
<div class="tab h-40" data-tab-name="allOrders" onclick="showTab('allOrders'), document.getElementById('tableTitle').innerHTML = 'All Order History'">All Orders
<i class="fa-solid fa-cubes"></i>
</div>
</div>
<div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
<div class="tab h-40" data-tab-name="toPay" onclick="showTab('toPay'), document.getElementById('tableTitle').innerHTML = 'All To Pay Products'">To Pay
<i class="fa-solid fa-money-bill-1-wave"></i>
</div>
</div>
<div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
<div class="tab h-40" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Products'">To Ship
<i class="fa-solid fa-truck"></i>
</div>
</div>
<div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
<div class="tab h-40" data-tab-name="toReceive" onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Products'">To Receive
<i class="fa-solid fa-box-archive"></i>
</div>
</div>
<div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
<div class="tab h-40" data-tab-name="completed" onclick="showTab('completed'), document.getElementById('tableTitle').innerHTML = 'All Completed Purchase'">Completed
<i class="fa-solid fa-square-check"></i>
</div>
</div>
</div> -->
<div class="ec-vendor-dashboard-card">
<div class="ec-vendor-card-header">
<h5 id="tableTitle">All Order History</h5>
<!-- <div class="ec-header-btn" style="border:1px solid red; padding-right:-50px;">
<a class="btn btn-lg btn-primary" style="background:none; color:#3474d4;" href="#">View All</a>
</div> -->
<div class="ec-header-btn" id="tableTitle">
<!-- <a class="btn btn-lg btn-primary" style="background:none; color:#3474d4;" href="#">View All</a> -->
<a class="btn btn-lg btn-primary" id="shopNow" style="background:none; color:#3474d4;"
href="index.php">Shop Now</a>
</div>
</div>
<div class="card" style="border: none;">
<div class="card-body" style="margin-bottom:-20px;">
<div class="tab-container d-flex justify-content-around">
<!-- 03-25-2024 Stacy modified cards -->
<div class="tab active" data-tab-name="allOrders"
onclick="showTab('allOrders'), document.getElementById('tableTitle').innerHTML = 'All Order History'">
All Orders
<i class="fa-solid fa-cubes"></i>
</div>
<div class="tab" data-tab-name="toPay"
onclick="showTab('toPay'), document.getElementById('tableTitle').innerHTML = 'All To Pay Products'">
To Pay
<i class="fa-solid fa-money-bill-1-wave"></i>
</div>
<div class="tab" data-tab-name="toShip"
onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Products'">
To Ship
<i class="fa-solid fa-truck"></i>
</div>
<div class="tab" data-tab-name="toReceive"
onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Products'">
To Receive
<i class="fa-solid fa-box-archive"></i>
</div>
<div class="tab" data-tab-name="completed"
onclick="showTab('completed'), document.getElementById('tableTitle').innerHTML = 'All Completed Purchase'">
Complete
<i class="fa-solid fa-square-check"></i>
</div>
</div>
</div>
</div>
<!-- <div class="ec-vendor-card-header" style="border: none;">
<div class="tab-container d-flex justify-content-around">
<!-- 03-25-2024 Stacy modified cards -->
<!-- <div class="tab" data-tab-name="allOrders" onclick="showTab('allOrders'), document.getElementById('tableTitle').innerHTML = 'All Order History'">All orders
<i class="fa-solid fa-cubes"></i></div>
<div class="tab" data-tab-name="toPay" onclick="showTab('toPay'), document.getElementById('tableTitle').innerHTML = 'All To Pay Products'">To Pay
<i class="fa-solid fa-money-bill-1-wave"></i></div>
<div class="tab" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Products'">To Ship
<i class="fa-solid fa-truck"></i></div>
<div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Products'">To Receive
<i class="fa-solid fa-box-archive"></i></div>
<div class="tab" data-tab-name="completed" onclick="showTab('completed'), document.getElementById('tableTitle').innerHTML = 'All Completed Purchase'">Completed
<i class="fa-solid fa-square-check"></i></div>
</div>
</div> -->
<div class="ec-vendor-card-body">
<div class="ec-vendor-card-table">
<!-- 03-15-2024 Stacy added tab for all orders -->
<div id="allOrders" class=" tab-content mt-1 active">
<!-- Content for "all Orders" tab -->
<table id="allOrdersTbl" class="table ec-table">
<thead id="allOrdersTHead">
<tr class="Title">
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
</tr>
</thead>
<tbody>
<?php
if ($_SESSION["isLoggedIn"] && $customer_data) {
$customer = $customer_data[0];
$orders = getOrderbyCustomerId($customer['_id']);
$totalAmount = 0;
$orderExist = false;
if ($orders) {
$order_data = json_decode($orders, true);
$_SESSION['cart_items'] = $order_data;
foreach ($order_data as $order) {
// Ensure that the required data is available before accessing it
if (isset($order['status']) && (strtoupper($order['status']) === 'TO PAY' || strtoupper($order['status']) === 'TO SHIP' || strtoupper($order['status']) === 'TO RECEIVE' || strtoupper($order['status']) === 'COMPLETED') && isset($order['items'][0]['product'])) {
$orderExist = true;
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" style="cursor:pointer;"
onmouseover="this.style.backgroundColor='#e5e5e5'"
onmouseout="this.style.backgroundColor='#ffffff'"
data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
data-bs-target="#productDetails">
<td>
<?php
if(!empty($order['items'][0]['product']['product_image']))
{
?>
<img loading="lazy" class="prod-img"
src="<?php echo $order['items'][0]['product']['product_image']; ?>"
alt="product">
<?php
}
else {
?>
<img loading="lazy" class="prod-img"
src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
alt="product">
<?php
}
?>
</td>
<td><span class="text-truncate"
style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
</td>
<td><span
style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
</td>
<td><span
style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
</td>
<td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
</td>
<td><span><?php echo $order['status']; ?></span></td>
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span>
</td>
<!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
</tr>
<?php
}
}
// if (empty($order['status'])) {
// echo '<tr><p style="padding-top:30px; padding-left:20px;">No Purchased Order/s Yet.</p></tr>';
// }
}
}
// } else if (empty($order['status'])) {
// echo '<p style="padding-top:30px; padding-left:20px;">No Purchased Order/s Yet.</p>';
// }
?>
</tbody>
<?php
if (!$orderExist) {
echo '<p style="padding-top:30px; padding-left:20px;">No Order/s Yet.</p>';
?>
<script>
allOrdersTHead.style.display = 'none';
</script>
<?php
}
?>
</table>
</div>
<div id="toPay" class="tab-content mt-1">
<!-- Content for "To Pay" tab -->
<table id="toPayTbl" class="table ec-table">
<thead id="toPayTHead">
<tr class="Title">
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
</tr>
</thead>
<tbody>
<?php
if ($_SESSION["isLoggedIn"] && $customer_data) {
$customer = $customer_data[0];
$orders = getOrderbyCustomerId($customer['_id']);
$totalAmount = 0;
$orderExist = false;
if ($orders) {
$order_data = json_decode($orders, true);
$_SESSION['cart_items'] = $order_data;
foreach ($order_data as $order) {
// Ensure that the required data is available before accessing it
if (isset($order['status']) && (strtoupper($order['status']) === 'TO PAY') && isset($order['items'][0]['product'])) {
$orderExist = true;
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" style="cursor:pointer;"
onmouseover="this.style.backgroundColor='#e5e5e5'"
onmouseout="this.style.backgroundColor='#ffffff'"
data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
data-bs-target="#productDetails">
<td>
<?php
if(!empty($order['items'][0]['product']['product_image']))
{
?>
<img loading="lazy" class="prod-img"
src="<?php echo $order['items'][0]['product']['product_image']; ?>"
alt="product">
<?php
}
else {
?>
<img loading="lazy" class="prod-img"
src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
alt="product">
<?php
}
?>
</td>
<td><span class="text-truncate"
style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
</td>
<td><span
style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
</td>
<td><span
style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
</td>
<td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
</td>
<td><span><?php echo $order['status']; ?></span></td>
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span>
</td>
<!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
</tr>
<?php
}
}
}
}
?>
</tbody>
<?php
if (!$orderExist) {
echo '<p style="padding-top:30px; padding-left:20px;">No To Pay Order/s Yet.</p>';
?>
<script>
toPayTHead.style.display = 'none';
</script>
<?php
}
?>
</table>
</div>
<div id="toShip" class="tab-content mt-1">
<!-- Content for "To Ship" tab -->
<table id="toShipTbl" class="table ec-table">
<thead id="toShipTHead">
<tr class="Title">
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
<!-- <th scope="col">Tracking Number</th>
<th scope="col">Courier Name</th> -->
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
</tr>
</thead>
<tbody>
<?php
if ($_SESSION["isLoggedIn"] && $customer_data) {
$customer = $customer_data[0];
$orders = getOrderbyCustomerId($customer['_id']);
$totalAmount = 0;
$orderExist = false;
if ($orders) {
$order_data = json_decode($orders, true);
$_SESSION['cart_items'] = $order_data;
foreach ($order_data as $order) {
// Ensure that the required data is available before accessing it
if (isset($order['status']) && (strtoupper($order['status']) === 'TO SHIP') && isset($order['items'][0]['product'])) {
$orderExist = true;
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" style="cursor:pointer;"
onmouseover="this.style.backgroundColor='#e5e5e5'"
onmouseout="this.style.backgroundColor='#ffffff'"
data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
data-bs-target="#productDetails">
<td>
<?php
if(!empty($order['items'][0]['product']['product_image']))
{
?>
<img loading="lazy" class="prod-img"
src="<?php echo $order['items'][0]['product']['product_image']; ?>"
alt="product">
<?php
}
else {
?>
<img loading="lazy" class="prod-img"
src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
alt="product">
<?php
}
?>
</td>
<td><span class="text-truncate"
style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
</td>
<td><span
style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
</td>
<td><span
style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
</td>
<td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
</td>
<td><span><?php echo $order['status']; ?></span></td>
<!-- <td><span><?php echo $order['tracking_number']; ?></span></td>
<td><span><?php echo $order['courier_name']; ?></span></td> -->
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span>
</td>
</tr>
<?php
}
}
}
}
?>
</tbody>
<?php
if (!$orderExist) {
echo '<p style="padding-top:30px; padding-left:20px;">No To Ship Order/s Yet.</p>';
?>
<script>
toShipTHead.style.display = 'none';
</script>
<?php
}
?>
</table>
</div>
<div id="toReceive" class="tab-content mt-1">
<!-- Content for "To Receive" tab -->
<table id="toReceiveTbl" class="table ec-table">
<thead id="toReceiveTHead">
<tr class="Title">
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
<!-- <th scope="col">Tracking Number</th>
<th scope="col">Courier Name</th> -->
<th scope="col">Date</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<?php
if ($_SESSION["isLoggedIn"] && $customer_data) {
$customer = $customer_data[0];
$orders = getOrderbyCustomerId($customer['_id']);
$totalAmount = 0;
$orderExist = false;
if ($orders) {
$order_data = json_decode($orders, true);
$_SESSION['cart_items'] = $order_data;
foreach ($order_data as $order) {
// Ensure that the required data is available before accessing it
if (isset($order['status']) && (strtoupper($order['status']) === 'TO RECEIVE') && isset($order['items'][0]['product'])) {
$orderExist = true;
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" style="cursor:pointer;"
onmouseover="this.style.backgroundColor='#e5e5e5'"
onmouseout="this.style.backgroundColor='#ffffff'"
id="to-receive-<?php echo $order['_id']?>"
data-value=' <?php echo $jsonorder; ?>'>
<td data-bs-toggle="modal" data-bs-target="#productDetails">
<?php
if(!empty($order['items'][0]['product']['product_image']))
{
?>
<img loading="lazy" class="prod-img"
src="<?php echo $order['items'][0]['product']['product_image']; ?>"
alt="product">
<?php
}
else {
?>
<img loading="lazy" class="prod-img"
src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
alt="product">
<?php
}
?>
</td>
<td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
data-bs-target="#productDetails"><span class="text-truncate"
style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
</td>
<td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
data-bs-target="#productDetails"><span
style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
</td>
<td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
data-bs-target="#productDetails"><span
style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
</td>
<td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
data-bs-target="#productDetails"><span
style="width:3em;"><?php echo $order['total_amount'] ?></span>
</td>
<td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
data-bs-target="#productDetails">
<span><?php echo $order['status']; ?></span>
</td>
<!-- <td><span><?php # echo $order['tracking_number']; ?></span></td>
<td><span><?php # echo $order['courier_name']; ?></span></td> -->
<td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
data-bs-target="#productDetails">
<span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span>
</td>
<td>
<span class="tbl-btn">
<a class="btn btn-lg btn-primary"
onclick="updateCompletedStatus('<?php echo $order['_id']; ?>')">Received</a>
</span>
</td>
</tr>
<?php
}
}
}
}
?>
</tbody>
<?php
if (!$orderExist) {
echo '<p style="padding-top:30px; padding-left:20px;">No To Receive Order/s Yet.</p>';
?>
<script>
toReceiveTHead.style.display = 'none';
</script>
<?php
}
?>
</table>
</div>
<div id="completed" class="tab-content mt-1">
<!-- Content for "Completed" tab -->
<table id="completedTbl" class="table ec-table">
<thead id="completedTHead">
<tr class="Title">
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Quantity</th>
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
<!-- <th scope="col">Tracking Number</th>
<th scope="col">Courier Name</th> -->
<th scope="col">Date</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<?php
if ($_SESSION["isLoggedIn"] && $customer_data) {
$customer = $customer_data[0];
$orders = getOrderbyCustomerId($customer['_id']);
$totalAmount = 0;
$orderExist = false;
if ($orders) {
$order_data = json_decode($orders, true);
$_SESSION['cart_items'] = $order_data;
foreach ($order_data as $order) {
// Ensure that the required data is available before accessing it
if (isset($order['status']) && (strtoupper($order['status']) === 'COMPLETED') && isset($order['items'][0]['product'])) {
$orderExist = true;
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" style="cursor:pointer;"
onmouseover="this.style.backgroundColor='#e5e5e5'"
onmouseout="this.style.backgroundColor='#ffffff'"
data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
data-bs-target="#productDetails">
<td>
<?php
if(!empty($order['items'][0]['product']['product_image']))
{
?>
<img loading="lazy" class="prod-img"
src="<?php echo $order['items'][0]['product']['product_image']; ?>"
alt="product">
<?php
}
else {
?>
<img loading="lazy" class="prod-img"
src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
alt="product">
<?php
}
?>
</td>
<td><span class="text-truncate"
style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?>
</span></td>
<td><span
style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
</td>
<td><span
style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
</td>
<td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
</td>
<td><span><?php echo $order['status']; ?></span></td>
<!-- <td><span><?php echo $order['tracking_number']; ?></span></td>
<td><span><?php echo $order['courier_name']; ?></span></td> -->
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span>
</td>
<td style="display:flex; flex-direction:row; width:auto;">
<?php
$currentDate = time(); // Current Unix timestamp
if ($order['return_order']['status'] === 'To Approve') {
echo '<a class="btn btn-lg btn-primary" style="margin:10px; white-space:nowrap" disabled>Refund Requested</a>';
} elseif ($order['return_order']['status'] === 'To Ship') {
echo '<a class="btn btn-lg btn-primary" style="margin:10px; white-space:nowrap" disabled>For Refund</a>';
} else {
$orderDate = strtotime($order['updatedAt']);
$sevenDaysAfterOrder = strtotime('+7 days', $orderDate); // Seven days after the order date
if ($currentDate >= $sevenDaysAfterOrder || $order['isRate']=== true ) {
echo '<span class="tbl-btn" disabled></span>';
} else {
echo '<a class="btn btn-lg btn-primary" style="margin:10px; white-space:nowrap"
data-bs-toggle="modal"
data-bs-target="#modal-refund-' . $order['_id'] . '">Return/Refund</a>';
}
}
?>
<?php
if ( $order['isRate']!== true ) {
?>
<button data-bs-toggle="modal"
style="margin:10px; width:100px !important; background-color:#ffaa00;white-space:nowrap"
data-bs-target="#feedbackModal-<?php echo $order['_id'];?>"
class="btn btn-lg btn-primary feedback_card_btn">
<i class="fa-regular fa-star"></i> Rate it
</button>
<?php }else{ ?>
<button data-bs-toggle="modal"
style="margin:10px; width:100px !important; background-color:#ffaa00; white-space:nowrap"
class="btn btn-lg btn-primary feedback_card_btn" disabled>
<i class="fa-regular fa-star"></i> Rated
</button>
<?php } ?>
</td>
<!-- <td>
<span class="tbl-btn">
<a class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#modal-refund-<?php echo $order['_id']; ?>">Return/Refund</a>
</span>
</td> -->
<!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
</tr>
<div class="modal fade" id="feedbackModal-<?php echo $order['_id']; ?>"
tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class=" modalHeader">
<button type="button" class="close" data-bs-dismiss="modal"
aria-label="Close" data-message="no-product">
<span style="font-weight:400; font-size:26px"
aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div id="product-container1">
<div class="product-con display"
style="height:200px; width:80%">
<?php
if(!empty($order['items'][0]['product']['product_image']))
{
?>
<img loading="lazy" class="productImg"
src="<?php echo $order['items'][0]['product']['product_image']; ?>"
alt="product">
<?php
}
else {
?>
<img loading="lazy" class="productImg"
src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
alt="product">
<?php
}
?>
<div class="prodDetails-feed">
<p class="prodTxtName">
<?php echo $order['items'][0]['product']['name']; ?>
</p>
<p class="prodTxtPrice">
<?php echo $order['items'][0]['price']; ?>
</p>
</div>
</div>
<div class="rate-con "
id="star-rate-<?php echo $order['_id']; ?>">
<p class=" rate-text">Rating: </p>
<i class="ecicon eci-star" data-value="1"></i>
<i class="ecicon eci-star" data-value="2"></i>
<i class="ecicon eci-star" data-value="3"></i>
<i class="ecicon eci-star" data-value="4"></i>
<i class="ecicon eci-star" data-value="5"></i>
</div>
</div>
<div class="product-prev" id='prod-prev'>
</div>
<span class="remove-prev-feed hide"
id="remove-preview-feed-<?php echo $order['_id']; ?>"
style="" aria-hidden="true">&times;</span>
<div class="message-preview-feed hide"
id="message-preview-feed-<?php echo $order['_id']; ?>">
</div>
<div class="footer-chat" id="footer-chat">
<div class="gallery-icon">
<label
for="file-input-feed-<?php echo $order['_id']; ?>"
class=""><i
class="fa-regular fa-images"></i></label>
<input type="file" class="file-input-feed hide"
multiple
id="file-input-feed-<?php echo $order['_id']; ?>"
accept="image/*,video/*">
</div>
<textarea type="text" class="message-input-feed"
placeholder="Type a feedback..."
id="message-input-feed-<?php echo $order['_id']; ?>"></textarea>
<button class="send-btn-feed"
id="send-btn-feed-<?php echo $order['_id']; ?>">SUBMIT</button>
</div>
</div>
<!-- <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Send</button>
</div> -->
<script>
document.getElementById(
'feedbackModal-<?php echo $order['_id']; ?>')
.addEventListener('shown.bs.modal', async function() {
messageInput1['<?php echo $order['_id']; ?>'] =
document
.getElementById(
"message-input-feed-<?php echo $order['_id']; ?>"
);
fileInput1['<?php echo $order['_id']; ?>'] =
document
.getElementById(
"file-input-feed-<?php echo $order['_id']; ?>"
);
messagePreview1[
'<?php echo $order['_id']; ?>'] =
document
.getElementById(
'message-preview-feed-<?php echo $order['_id']; ?>'
);
removePreview1['<?php echo $order['_id']; ?>'] =
document
.getElementById(
"remove-preview-feed-<?php echo $order['_id']; ?>"
);
sendButton1['<?php echo $order['_id']; ?>'] =
document
.getElementById(
"send-btn-feed-<?php echo $order['_id']; ?>"
);
sendButton1['<?php echo $order['_id']; ?>']
.addEventListener('click', () => {
sendReview();
});
// async function uploadMediaFeed(file,
// mediaType) {
// const formData = new FormData();
// console.log(file)
// const currentDate = new Date();
// const formattedDate =
// currentDate
// .toISOString().replace(
// /[-T:]/g, "")
// .slice(0, -5);
// const fileName =
// `
// $ {
// formattedDate
// } - $ {
// file.name
// }
// `;
// formData.append('image_id',
// '<?php echo $order['items'][0]['product']['product_id'] ?>'
// );
// formData.append('category',
// 'product');
// formData.append('image', file);
// uploadImageRating(formData,
// '<?php echo $_SESSION["data_endpoint"]; ?>',
// sessionToken)
// .then(response => {
// console.log('Success:',
// response);
// if (!response.ok) {
// throw new Error(
// `
// Failed to upload $ {
// mediaType
// }
// `
// );
// } else {
// const responseData =
// await response
// .json();
// return responseData
// .filename;
// }
// })
// .catch(error => {
// console.error('Error:',
// error);
// });
// // const response = await fetch(
// // '<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
// // method: 'POST',
// // body: formData
// // });
// // const responseData = await response.json();
// }
async function sendReview() {
console.log(messageInput1)
console.log(fileInput1)
const comments = messageInput1[
'<?php echo $order['_id']; ?>'
]
.value
.trim();
const images = [];
const videos = [];
const variation =
'<?php echo $order['items'][0]['product']['name']; ?>'
const rating = globalRate;
const order_id =
'<?php echo $order['_id']; ?>'
const vendor_id =
'<?php echo $order['items'][0]['vendor_id']; ?>'
const customer_id =
'<?php echo $order['customer'][0]['customer_id']; ?>'
if (comments !== "" && !
fileInput1[
'<?php echo $order['_id']; ?>'
].files[
0]) {
sendButton1[
'<?php echo $order['_id']; ?>'
].textContent =
"Sending...";
sendButton1[
'<?php echo $order['_id']; ?>'
].disabled = true
let files = []
try {
// Send text message
await sendFeedback(
variation,
rating,
comments,
images,
videos,
customer_id,
order_id,
vendor_id,
files,
'<?php echo $order['items'][0]['product']['product_id'];?>',
'<?php echo $_SESSION["data_endpoint"]; ?>',
'<?php echo $_SESSION["token"]; ?>'
);
} catch (error) {
console.error(
'Error sending message:',
error.message);
}
} else if (fileInput1[
'<?php echo $order['_id']; ?>'
].files.length > 0) {
sendButton1[
'<?php echo $order['_id']; ?>'
].textContent =
"Sending...";
sendButton1[
'<?php echo $order['_id']; ?>'
].disabled = true
try {
const files =
fileInput1[
'<?php echo $order['_id']; ?>'
].files;
const
uploadPromises = [];
let imgCount = 0;
let vidCount = 0;
// Loop through each selected file
for (const file of
files) {
const fileType =
file.type
.split('/')[0];
if (fileType ===
'image') {
// const uploadPromise =
// uploadMediaFeed(file,
// 'image')
// .then(imageUrl => {
// images.push(
// `
https: //<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/product_uploads/${imageUrl}`
// );
// })
// .catch(error => {
// console.error(
// 'Error uploading image:',
// error
// .message
// );
// });
// uploadPromises.push(
// uploadPromise);
// images[imgCount] = file
// imgCount = imgCount + 1;
images.push(
file);
}
else if (
fileType ===
'video') {
// const uploadPromise =
// uploadMediaFeed(file,
// 'video')
// .then(videoUrl => {
// videos.push(
// videoUrl
// );
// })
// .catch(error => {
// console.error(
// 'Error uploading video:',
// error
// .message
// );
// });
// uploadPromises.push(
// uploadPromise);
// videos[vidCount] = file
// vidCount = vidCount + 1;
videos.push(
file)
}
}
// Wait for all uploads to complete
// Promise.all(uploadPromises)
// .then(async () => {
// Send image message if there are any image URLs
await sendFeedback
(variation,
rating,
comments,
images,
videos,
customer_id,
order_id,
vendor_id, files,
'<?php echo $order['items'][0]['product']['product_id'];?>',
'<?php echo $_SESSION["data_endpoint"]; ?>',
'<?php echo $_SESSION["token"]; ?>'
)
} catch (error) {
console.error(
'Error sending media message:',
error
.message
);
}
// })
// .finally(() => {
// sendButton1[
// '<?php echo $order['_id']; ?>'
// ].textContent =
// "Sent";
// sendButton1[
// '<?php echo $order['_id']; ?>'
// ].disabled =
// true;
// });
}
}
document.querySelectorAll(
'#star-rate-<?php echo $order['_id']; ?> i'
)
.forEach(
star => {
star.addEventListener(
'click',
function() {
const value =
parseInt(
this
.getAttribute(
'data-value'
));
if (globalRate ===
value) {
// If the clicked star is already filled and clicked again, reset the rating
globalRate =
0;
} else {
// Set the rating to the clicked star's value
globalRate =
value;
}
updateStars(
globalRate
);
// console.log(value);
});
});
function updateStars(rate) {
document.querySelectorAll(
'#star-rate-<?php echo $order['_id'];?> i'
)
.forEach(star => {
const value = parseInt(
star
.getAttribute(
'data-value'
));
if (value <= rate) {
star.classList.add(
'fill');
} else {
star.classList
.remove(
'fill');
}
});
}
// naming = [
// "message<?php echo $order['_id']; ?> ",
// "file<?php echo $order['_id']; ?> ",
// 'messageP<?php echo $order['_id']; ?>',
// "remove<?php echo $order['_id']; ?>",
// "send<?php echo $order['_id']; ?>"
// ]
// const messageInput1 = name[0];
// const fileInput1 = name[1];
// const messagePreview1 = name[2];
// const removePreview1 = name[3];
// const sendButton1 = name[4];
// Add event listener to trigger file input when gallery icon is clicked
// Add event listener to file input
fileInput1[
'<?php echo $order['_id']; ?>']
.addEventListener(
'change', () => {
const files = fileInput1[
'<?php echo $order['_id']; ?>'
]
.files;
if (files.length > 3) {
alert(
'You can select up to 3 files only.'
);
fileInput1[
'<?php echo $order['_id']; ?>'
]
.value =
''; // Clear selected files
return;
}
for (const file of files) {
if (!file.type
.startsWith(
'image/') &&
file
.type !==
'video/mp4') {
alert(
'Please select image or video files only.'
);
fileInput1[
'<?php echo $order['_id']; ?>'
]
.value =
''; // Clear selected files
return;
}
}
// Hide message input and show preview
// messageInput1.classList.add('hide');
messagePreview1[
'<?php echo $order['_id']; ?>'
]
.classList.remove(
'hide');
removePreview1[
'<?php echo $order['_id']; ?>'
]
.classList.remove(
'hide');
// Clear previous previews
messagePreview1[
'<?php echo $order['_id']; ?>'
]
.innerHTML = '';
// Display image or video preview for each file
for (const file of files) {
const fileType = file
.type
.split(
'/')[
0
]; // Get file type (image or video)
const reader =
new FileReader();
reader.onload = () => {
if (fileType ===
'image') {
const img =
document
.createElement(
'img'
);
img.src =
reader
.result;
img.classList
.add(
'img-prev-feed'
);
img.alt =
'Image preview';
messagePreview1
[
'<?php echo $order['_id']; ?>'
]
.appendChild(
img
);
} else if (
fileType ===
'video') {
const
video =
document
.createElement(
'video'
);
video
.controls =
true;
video
.classList
.add(
'vid-prev-feed'
);
const
source =
document
.createElement(
'source'
);
source.src =
reader
.result;
source
.type =
file
.type;
video
.appendChild(
source
);
messagePreview1
[
'<?php echo $order['_id']; ?>'
]
.appendChild(
video
);
}
};
reader.readAsDataURL(
file);
}
});
// sendButton1.addEventListener("click",
// sendMessage);
removePreview1[
'<?php echo $order['_id']; ?>']
.addEventListener(
"click",
removePreviewFunc);
function removePreviewFunc() {
// Remove selected file
fileInput1[
'<?php echo $order['_id']; ?>'
]
.value =
'';
// Hide message preview and show message input
// messageInput1.classList.remove('hide');
messagePreview1[
'<?php echo $order['_id']; ?>'
]
.classList
.add('hide');
removePreview1[
'<?php echo $order['_id']; ?>'
]
.classList
.add('hide');
// Clear message preview content
messagePreview1[
'<?php echo $order['_id']; ?>'
]
.innerHTML =
'';
}
});
</script>
</div>
</div>
</div>
<div class="modal fade" id="modal-refund-<?php echo $order['_id']; ?>"
tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg"
role="document">
<div class="modal-content">
<div class="modal-header justify-content-end border-bottom-0">
<button type="button" class="btn-close-icon"
data-bs-dismiss="modal" aria-label="Close">
<i class="mdi mdi-close"></i>
</button>
</div>
<div class="modal-body pt-0">
<form enctype="multipart/form-data" method="POST">
<div class="form-group">
<label
for="reason-<?php echo $order['_id']; ?>">Reason:</label>
<input type="text" class="form-control"
id="reason-<?php echo $order['_id']; ?>"
name="reason"
value="<?php echo $order['return_order']['reason']; ?>"
placeholder="Enter your Reason">
</div>
<div class="form-group">
<label
for="image-<?php echo $order['_id']; ?>">Upload
Image:</label>
<div class="input-group">
<label for="image-<?php echo $order['_id']; ?>"
class="custom-file-label">
<span class="mdi mdi-cloud-upload"
style="font-size: 50px; margin-right:10px;"></span>
</label>
<input type="file" class="ec-image-upload"
id="image-<?php echo $order['_id']; ?>"
name="uploadedImage" accept="image/*"
onchange="displaySelectedImage(this, '<?php echo $order['_id']; ?>')"
style="display: none;">
<div
id="image-preview-container-<?php echo $order['_id']; ?>">
</div>
</div>
</div>
<button type="submit" class="btn btn-primary"
id="submit-button-<?php echo $order['_id']; ?>">Submit</button>
</form>
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css">
<script>
var sessionToken =
`<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>`;
var email =
`<?php echo isset($_SESSION["email"]) ? $_SESSION["email"] : ""; ?>`;
var password =
`<?php echo isset($_SESSION["password"]) ? $_SESSION["password"] : ""; ?>`;
function login(username, password, callback) {
fetch("https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Api-Key": "{{apiKey}}"
},
body: JSON.stringify({
username: username,
password: password
})
})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error("Unable to login");
}
})
.then(data => {
fetch("update-token-session.php", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
token: data
.token
})
})
.then(response => response.json())
.then(result => {
if (result.status ===
'success') {
sessionToken = data
.token;
console.log(
"New Token:",
sessionToken);
callback(sessionToken);
} else {
throw new Error(
"Unable to update session token"
);
}
});
})
.catch(error => {
console.error("Error:", error.message);
});
}
function displaySelectedImage(input, orderId) {
var previewContainer = document.getElementById(
'image-preview-container-' + orderId);
var file = input.files[0];
previewContainer.innerHTML =
''; // Clear the previous image
var reader = new FileReader();
reader.onload = function(e) {
var img = document.createElement('img');
img.src = e.target.result;
img.style.width = '80px';
img.style.height = '80px';
img.style.objectFit = 'cover';
previewContainer.appendChild(img);
};
reader.readAsDataURL(file);
}
document.addEventListener('DOMContentLoaded',
function() {
document.getElementById(
'submit-button-<?php echo $order['_id']; ?>'
).addEventListener('click', function(
event) {
event.preventDefault();
var orderId =
'<?php echo $order['_id']; ?>';
var reason = document
.getElementById('reason-' +
orderId).value;
console.log('Order ID:',
orderId);
console.log('Reason:', reason);
login(email, password, function(
sessionToken) {
// Get the order ID and reason
// Upload image
var fileInput =
document
.getElementById(
'image-' +
orderId);
// console.log(fileInput);
var file = fileInput
.files[0];
console.log(file);
if (file) {
var formData =
new FormData();
formData.append(
'image_id',
orderId);
formData.append(
'category',
'order');
formData.append(
'image',
file);
console.log(
'FormData:',
formData
);
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
method: 'POST',
body: formData
})
.then(
response => {
if (response
.ok
) {
console
.log(
'success'
)
return response
.json();
} else {
console
.error(
'File upload failed'
);
console
.log(
'fail'
)
throw new Error(
'File upload failed'
);
}
})
.then(
data => {
console
.log(
'Upload response:',
data
);
const
filename =
data
.filename;
const
payload = {
return_order: {
reason: reason,
image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/order_uploads/${filename}`,
status: 'To Approve',
}
}
// const token = '<?php echo $_SESSION["token"] ?>';
fetch
('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/' +
orderId, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' +
sessionToken,
},
body: JSON
.stringify(
payload
),
}
)
.then(
response =>
response
.json()
)
.then(
updatedOrder => {
// Handle the updated order response as needed
console
.log(
'Order updated successfully:',
updatedOrder
);
location
.reload();
}
)
.catch(
error => {
console
.error(
'Error updating order:',
error
);
}
);
})
.catch(
error => {
console
.error(
'Error uploading image:',
error
);
});
}
})
});
});
</script>
</div>
</div>
</div>
</div>
<?php
}
}
}
}
?>
</tbody>
<?php
if (!$orderExist) {
echo '<p style="padding-top:30px; padding-left:20px;">No Completed Order/s Yet.</p>';
?>
<script>
completedTHead.style.display = 'none';
</script>
<?php
}
?>
</table>
</div>
<script>
let globalRate = 0;
var sessionToken = '<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>';
var email = '<?php echo isset($_SESSION["email"]) ? $_SESSION["email"] : ""; ?>';
var password =
'<?php echo isset($_SESSION["password"]) ? $_SESSION["password"] : ""; ?>';
function login(username, password, callback) {
fetch("https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/login", {
method: "POST",
headers: {
"Content-Type": "application/json",
"X-Api-Key": "{{apiKey}}"
},
body: JSON.stringify({
username: username,
password: password
})
})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error("Unable to login");
}
})
.then(data => {
fetch("update-token-session.php", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
token: data.token
})
})
.then(response => response.json())
.then(result => {
if (result.status === 'success') {
sessionToken = data.token;
console.log("New Token:", sessionToken);
callback(sessionToken);
} else {
throw new Error("Unable to update session token");
}
});
})
.catch(error => {
console.error("Error:", error.message);
});
}
document.addEventListener("DOMContentLoaded", function() {
// Check if there's an activeTab in local storage
var activeTab = localStorage.getItem('activeTab');
if (activeTab) {
showTab(activeTab);
}
});
function showTab(tabName) {
// Hide all tab contents
var tabContents = document.getElementsByClassName('tab-content');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove('active');
}
// Remove the 'active' class from all tabs
var tabs = document.getElementsByClassName('tab');
for (var i = 0; i < tabs.length; i++) {
tabs[i].classList.remove('active');
}
// Show the selected tab content
document.getElementById(tabName).classList.add('active');
// Add the 'active' class to the clicked tab
document.querySelector(`.tab[data-tab-name="${tabName}"]`).classList.add('active');
// Save the active tab to local storage
localStorage.setItem('activeTab', tabName);
}
function updateCompletedStatus(orderId, referenceNumber) {
login(email, password, async function(token) {
// const token = '<?php echo $_SESSION["token"] ?>';
const orderResponse = await fetch(
`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`
);
const orderData = await orderResponse.json();
// const updatedDetails = orderData.payment.details.map(detail => ({
// ...detail,
// attributes: {
// ...detail.attributes,
// data: {
// ...detail.attributes.data,
// attributes: {
// ...detail.attributes.data.attributes,
// status: 'paid'
// }
// }
// },
// status: 'paid'
// }));
fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`, {
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token,
},
body: JSON.stringify({
status: 'COMPLETED',
// payment: {
// status: 'PAID',
// reference_number: orderData.payment.reference_number,
// // details: updatedDetails,
// }
}),
})
.then(response => response.json())
.then(data => {
// Assuming the server responds with a JSON object indicating success or failure
if (data && data !== "") {
// Update the status in the table without reloading the page
// document.querySelector(`[data-order-id="${orderId}"] .order-status`).innerText = 'COMPLETED';
// location.reload();
var rowToMove = document.querySelector(
`#to-receive-${orderId}`);
if (rowToMove) {
// Get the values of the order
var image = rowToMove.querySelector(
'td:nth-child(1)').innerHTML;
var name = rowToMove.querySelector(
'td:nth-child(2)').innerHTML;
var quantity = rowToMove.querySelector(
'td:nth-child(3)').innerHTML;
var unitPrice = rowToMove.querySelector(
'td:nth-child(4)').innerHTML;
var price = rowToMove.querySelector(
'td:nth-child(5)').innerHTML;
var status = rowToMove.querySelector(
'td:nth-child(6)').innerHTML;
var date = rowToMove.querySelector(
'td:nth-child(7)').innerHTML;
// Construct the HTML for the new row in the "Completed" table
var newRowHTML = '<tr>' +
'<td>' + image + '</td>' +
'<td>' + name + '</td>' +
'<td>' + quantity + '</td>' +
'<td>' + unitPrice + '</td>' +
'<td>' + price + '</td>' +
'<td><span> COMPLETED </span></td>' +
'<td>' + date + '</td>' +
'<td>' +
'</td>' +
'</tr>';
// var newRowHTML = 'HERE!!!!!!!!!!!!!!!!!'
// Remove the row from the "To Receive" table
rowToMove.parentNode.removeChild(rowToMove);
// Append the HTML for the new row to the "Completed" table
document.querySelector('#completed tbody')
.innerHTML += newRowHTML;
}
// rowToMove.parentNode.removeChild(rowToMove);
} else {
alert('Failed to update order status');
}
})
.catch(error => {
console.error('Error:', error);
alert('An error occurred while updating order status');
});
})
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- End User history section -->
<!-- Footer Start -->
<?php include "footer.php" ?>
<!-- Footer Area End -->
<!-- Modal Start -->
<!-- 03-15-2024 Stacy added modal -->
<div class="modal fade" id="productDetails" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-body">
<!-- modal header placed under script -->
<div class="row" id="modalContent" style="display:flex; justify-content:center;">
<!-- modal body placed under script -->
</div>
</div>
</div>
</div>
</div>
<!-- Modal End -->
<script>
// 03-18-2024 Stacy added script for showing productDetails modal
document.getElementById('productDetails').addEventListener('shown.bs.modal', function(event) {
var jsonString = $(event.relatedTarget).data('value');
var jsonObject = JSON.parse(jsonString);
const modal = document.getElementById('modalContent');
const date = new Date(jsonObject.updatedAt);
const formatter = new Intl.DateTimeFormat('en-US', {
day: '2-digit',
month: 'long',
year: 'numeric'
});
const formattedDate = formatter.format(date);
if (jsonObject.status === 'TO PAY') { // Changed $order['status'] to jsonObject.status
modal.innerHTML = `
<div class="modal-header" style="height:5px;">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="row pt-3">
<div class="col-md-6">
<a href="${jsonObject.items[0].product.product_image}" target="_blank">
<img loading="lazy" class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</a>
</div>
<div class="col-md-6" style="margin:auto;">
<ul>
<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left;">Name:</p></b> <p style="width:70%; text-align:left;">${jsonObject.items[0].product.name}</p></li>
<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left;">Quantity:</p></b> <p style="width:70%; text-align:left;">${jsonObject.items[0].quantity}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left; white-space:nowrap;">Unit Price:</p></b> <p style="width:70%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left;">Price:</p></b> <p style="width:70%; text-align:left;"> ${jsonObject.total_amount}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left;">Status:</p></b> <p style="width:70%; text-align:left;"> ${jsonObject.status}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left;">Date:</p></b> <p style="width:70%; text-align:left;"> ${formattedDate}</p></li>
</ul>
</div>
</div>`;
}
if (jsonObject.status === 'TO SHIP') {
modal.innerHTML = `
<div class="modal-header" style="height:5px;">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="row pt-3">
<div class="col-md-6">
<a href="${jsonObject.items[0].product.product_image}" target="_blank">
<img loading="lazy" class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</a>
</div>
<div class="col-md-6" style="margin:auto;">
<ul>
<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].product.name}</p></li>
<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].quantity}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left; white-space:nowrap;">Unit Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.total_amount}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Status:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.status}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Tracking Number:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.tracking_number}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Courier Name:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.courier_name}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b> <p style="width:50%; text-align:left;"> ${formattedDate}</p></li>
</ul>
</div>
</div>`;
}
if (jsonObject.status === 'TO RECEIVE') {
modal.innerHTML = `
<div class="modal-header" style="height:5px;">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="row pt-3">
<div class="col-md-6">
<a href="${jsonObject.items[0].product.product_image}" target="_blank">
<img loading="lazy" class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</a>
</div>
<div class="col-md-6" style="margin:auto;">
<ul>
<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].product.name}</p></li>
<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].quantity}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left; white-space:nowrap;">Unit Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.total_amount}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Status:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.status}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Tracking Number:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.tracking_number}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Courier Name:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.courier_name}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b> <p style="width:50%; text-align:left;"> ${formattedDate}</p></li>
</ul>
</div>
</div>`;
}
if (jsonObject.status === 'COMPLETED') {
modal.innerHTML = `
<div class="modal-header" style="height:5px;">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="row pt-3">
<div class="col-md-6">
<a href="${jsonObject.items[0].product.product_image}" target="_blank">
<img loading="lazy" class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</a>
</div>
<div class="col-md-6" style="margin:auto;">
<ul>
<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].product.name}</p></li>
<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].quantity}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left; white-space:nowrap;">Unit Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.total_amount}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Status:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.status}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Tracking Number:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.tracking_number}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Courier Name:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.courier_name}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b> <p style="width:50%; text-align:left;"> ${formattedDate}</p></li>
</ul>
</div>
</div>`;
}
if (jsonObject.status === 'RETURNED') {
modal.innerHTML = `
<div class="modal-header" style="height:5px;">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="row pt-3">
<div class="col-md-6">
<a href="${jsonObject.items[0].product.product_image}" target="_blank">
<img loading="lazy" class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</a>
</div>
<div class="col-md-6" style="margin:auto;">
<ul>
<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].product.name}</p></li>
<li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].quantity}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left; white-space:nowrap;">Unit Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.total_amount}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Status:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.status}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Tracking Number:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.tracking_number}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Courier Name:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.courier_name}</p></li>
<li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b> <p style="width:50%; text-align:left;"> ${formattedDate}</p></li>
</ul>
</div>
</div>`;
}
console.log(jsonObject);
});
const modal = document.getElementById('productDetails');
console.log(modal);
</script>
<!-- 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 loading="lazy" 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 -->
<!-- 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 loading="lazy" 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 -->
<!-- DataTables -->
<script>
$(document).ready(function() {
$('#allOrdersTbl').DataTable();
});
$(document).ready(function() {
$('#toPayTbl').DataTable();
});
$(document).ready(function() {
$('#toShipTbl').DataTable();
});
$(document).ready(function() {
$('#toReceiveTbl').DataTable();
});
$(document).ready(function() {
$('#completedTbl').DataTable();
});
</script>
<!-- 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>
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.js"></script>
<!-- Main Js -->
<script src="assets/js/vendor/index.js"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/user-history.js"></script>
</body>
</html>