obanana_b2b_test/user-history.php

1498 lines
102 KiB
PHP
Raw Normal View History

2024-02-12 10:35:09 +08:00
<?php
include "functions.php";
2024-02-12 10:35:09 +08:00
$_SESSION["url"] = $_SERVER['REQUEST_URI'];
if ($_SESSION["userId"] <> "") {
$_SESSION["isLoggedIn"] = true;
$customer_data = getCustomerbyLoginId($_SESSION["userId"]);
} else {
$_SESSION["isLoggedIn"] = false;
2024-04-16 10:44:22 +08:00
header("location: login.php");
2024-02-12 10:35:09 +08:00
}
if ($_SESSION["isVendor"] == true) {
header("location: vendor-dashboard.php");
}
2024-02-12 10:35:09 +08:00
?>
<!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" />
2024-05-03 18:13:39 +08:00
<!-- FLATICON -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
2024-02-12 10:35:09 +08:00
<!-- 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" />
2024-05-03 18:13:39 +08:00
<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">
2024-02-12 10:35:09 +08:00
<!-- Background css -->
<link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
2024-05-03 18:13:39 +08:00
<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>
2024-02-12 10:35:09 +08:00
<style>
.tab.active {
background-color: #ffffff;
2024-02-12 10:35:09 +08:00
/* Set your desired background color for the active tab */
color: #3474d4;
2024-02-12 10:35:09 +08:00
/* 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;
}
}
2024-02-12 10:35:09 +08:00
@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;
}
2024-02-12 10:35:09 +08:00
}
/* 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;
}
}
2024-02-12 10:35:09 +08:00
</style>
2024-05-03 18:13:39 +08:00
2024-02-12 10:35:09 +08:00
<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;
}
});
}
</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>
<!-- Header start -->
<?php include "header.php" ?>
<!-- Header End -->
<!-- ekka Cart Start -->
<!-- ekka Cart End -->
2024-02-29 16:00:50 +08:00
<!-- Category Sidebar start -->
<?php include "category-slider.php" ?>
2024-02-12 10:35:09 +08:00
<!-- 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">
2024-02-12 10:35:09 +08:00
<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>
2024-02-12 10:35:09 +08:00
<?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> -->
2024-02-12 10:35:09 +08:00
<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>
2024-02-12 10:35:09 +08:00
</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> -->
2024-02-12 10:35:09 +08:00
<div class="ec-vendor-card-body">
<div class="ec-vendor-card-table">
<!-- 03-15-2024 Stacy added tab for all orders -->
2024-05-03 18:13:39 +08:00
<div id="allOrders" class=" tab-content mt-1 active">
<!-- Content for "all Orders" tab -->
2024-05-03 18:13:39 +08:00
<table id="allOrdersTbl" class="table ec-table">
2024-04-16 10:44:22 +08:00
<thead id="allOrdersTHead">
<tr class="Title">
2024-02-12 10:35:09 +08:00
<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;
2024-04-16 10:44:22 +08:00
$orderExist = false;
2024-02-12 10:35:09 +08:00
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
2024-04-22 09:50:50 +08:00
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'])) {
2024-04-16 10:44:22 +08:00
$orderExist = true;
2024-02-12 10:35:09 +08:00
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
2024-05-03 18:13:39 +08:00
<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">
2024-04-30 14:25:28 +08:00
<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>
2024-05-03 18:13:39 +08:00
<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>
2024-02-12 10:35:09 +08:00
<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
}
}
2024-04-22 09:50:50 +08:00
// if (empty($order['status'])) {
// echo '<tr><p style="padding-top:30px; padding-left:20px;">No Purchased Order/s Yet.</p></tr>';
// }
2024-02-12 10:35:09 +08:00
}
}
2024-04-16 10:44:22 +08:00
// } else if (empty($order['status'])) {
// echo '<p style="padding-top:30px; padding-left:20px;">No Purchased Order/s Yet.</p>';
// }
2024-02-12 10:35:09 +08:00
?>
</tbody>
2024-04-16 10:44:22 +08:00
<?php
if (!$orderExist) {
echo '<p style="padding-top:30px; padding-left:20px;">No Order/s Yet.</p>';
?>
<script>
allOrdersTHead.style.display = 'none';
</script>
<?php
}
?>
2024-02-12 10:35:09 +08:00
</table>
</div>
2024-05-03 18:13:39 +08:00
<div id="toPay" class="tab-content mt-1">
<!-- Content for "To Pay" tab -->
2024-05-03 18:13:39 +08:00
<table id="toPayTbl" class="table ec-table">
2024-04-16 10:44:22 +08:00
<thead id="toPayTHead">
<tr class="Title">
2024-02-12 10:35:09 +08:00
<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
2024-02-12 10:35:09 +08:00
if ($_SESSION["isLoggedIn"] && $customer_data) {
$customer = $customer_data[0];
$orders = getOrderbyCustomerId($customer['_id']);
$totalAmount = 0;
2024-04-16 10:44:22 +08:00
$orderExist = false;
2024-02-12 10:35:09 +08:00
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'])) {
2024-04-16 10:44:22 +08:00
$orderExist = true;
2024-02-12 10:35:09 +08:00
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
2024-05-03 18:13:39 +08:00
<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">
2024-04-30 14:25:28 +08:00
<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>
2024-05-03 18:13:39 +08:00
<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>
2024-02-12 10:35:09 +08:00
<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>
2024-04-16 10:44:22 +08:00
<?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
}
?>
2024-02-12 10:35:09 +08:00
</table>
</div>
2024-05-03 18:13:39 +08:00
<div id="toShip" class="tab-content mt-1">
<!-- Content for "To Ship" tab -->
2024-05-03 18:13:39 +08:00
<table id="toShipTbl" class="table ec-table">
2024-04-16 10:44:22 +08:00
<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;
2024-04-16 10:44:22 +08:00
$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'])) {
2024-04-16 10:44:22 +08:00
$orderExist = true;
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
2024-05-03 18:13:39 +08:00
<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">
2024-04-30 14:25:28 +08:00
<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>
2024-05-03 18:13:39 +08:00
<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>
2024-04-16 10:44:22 +08:00
<?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>
2024-05-03 18:13:39 +08:00
<div id="toReceive" class="tab-content mt-1">
<!-- Content for "To Receive" tab -->
2024-05-03 18:13:39 +08:00
<table id="toReceiveTbl" class="table ec-table">
2024-04-16 10:44:22 +08:00
<thead id="toReceiveTHead">
<tr class="Title">
2024-02-12 10:35:09 +08:00
<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> -->
2024-02-12 10:35:09 +08:00
<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;
2024-04-16 10:44:22 +08:00
$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'])) {
2024-04-16 10:44:22 +08:00
$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; ?>'>
2024-05-03 18:21:20 +08:00
<td data-bs-toggle="modal" data-bs-target="#productDetails">
2024-04-30 14:25:28 +08:00
<?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>
2024-05-03 18:13:39 +08:00
<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
2024-02-12 10:35:09 +08:00
}
}
}
}
?>
2024-02-12 10:35:09 +08:00
</tbody>
2024-04-16 10:44:22 +08:00
<?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
}
?>
2024-02-12 10:35:09 +08:00
</table>
</div>
2024-05-03 18:13:39 +08:00
<div id="completed" class="tab-content mt-1">
<!-- Content for "Completed" tab -->
2024-05-03 18:13:39 +08:00
<table id="completedTbl" class="table ec-table">
2024-04-16 10:44:22 +08:00
<thead id="completedTHead">
<tr class="Title">
2024-02-12 10:35:09 +08:00
<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> -->
2024-02-12 10:35:09 +08:00
<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;
2024-04-16 10:44:22 +08:00
$orderExist = false;
2024-04-30 14:25:28 +08:00
if ($orders) {
2024-02-12 10:35:09 +08:00
$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'])) {
2024-04-16 10:44:22 +08:00
$orderExist = true;
2024-02-12 10:35:09 +08:00
$totalAmount += $order['total_amount'];
2024-02-12 10:35:09 +08:00
?>
<?php
$jsonorder = json_encode($order);
?>
2024-05-03 18:13:39 +08:00
<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">
2024-04-30 14:25:28 +08:00
<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>
2024-05-03 18:13:39 +08:00
<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>
2024-02-12 10:35:09 +08:00
<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> -->
2024-02-12 10:35:09 +08:00
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
<td>
<?php
$currentDate = time(); // Current Unix timestamp
2024-02-12 10:35:09 +08:00
if ($order['return_order']['status'] === 'To Approve') {
echo '<span class="tbl-btn">Refund Requested</span>';
2024-03-07 10:18:12 +08:00
} elseif ($order['return_order']['status'] === 'To Ship') {
echo '<span class="tbl-btn">For Refund</span>';
} else {
$orderDate = strtotime($order['updatedAt']);
$sevenDaysAfterOrder = strtotime('+7 days', $orderDate); // Seven days after the order date
if ($currentDate >= $sevenDaysAfterOrder) {
echo '<span class="tbl-btn" disabled></span>';
} else {
echo '<a class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#modal-refund-' . $order['_id'] . '">Return/Refund</a>';
}
2024-02-12 10:35:09 +08:00
}
?>
</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="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>
2024-03-07 10:18:12 +08:00
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"] : ""; ?>`;
2024-02-12 10:35:09 +08:00
function login(username, password, callback) {
fetch("https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/login", {
2024-02-12 10:35:09 +08:00
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) {
2024-03-07 10:18:12 +08:00
event.preventDefault();
var orderId = '<?php echo $order['_id']; ?>';
2024-02-12 10:35:09 +08:00
var reason = document.getElementById('reason-' + orderId).value;
console.log('Order ID:', orderId);
console.log('Reason:', reason);
2024-03-07 10:18:12 +08:00
login(email, password, function(sessionToken) {
// Get the order ID and reason
2024-02-12 10:35:09 +08:00
// 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', {
2024-02-12 10:35:09 +08:00
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;
2024-03-07 10:18:12 +08:00
2024-02-12 10:35:09 +08:00
const payload = {
return_order: {
reason: reason,
image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/order_uploads/${filename}`,
2024-02-12 10:35:09 +08:00
status: 'To Approve',
}
}
// const token = '<?php echo $_SESSION["token"] ?>';
fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/' + orderId, {
2024-02-12 10:35:09 +08:00
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
2024-03-07 10:18:12 +08:00
'Authorization': 'Bearer ' + sessionToken,
2024-02-12 10:35:09 +08:00
},
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>
2024-04-16 10:44:22 +08:00
<?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
}
?>
2024-02-12 10:35:09 +08:00
</table>
</div>
<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"] : ""; ?>';
2024-03-20 09:36:52 +08:00
2024-02-12 10:35:09 +08:00
function login(username, password, callback) {
fetch("https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/login", {
2024-02-12 10:35:09 +08:00
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);
}
2024-03-20 09:36:52 +08:00
function updateCompletedStatus(orderId, referenceNumber) {
login(email, password, async function(token) {
2024-02-12 10:35:09 +08:00
// 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();
2024-05-03 18:21:20 +08:00
// 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}`, {
2024-02-12 10:35:09 +08:00
method: 'PATCH',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + token,
},
body: JSON.stringify({
status: 'COMPLETED',
2024-05-03 18:21:20 +08:00
// payment: {
// status: 'PAID',
// reference_number: orderData.payment.reference_number,
// // details: updatedDetails,
// }
2024-02-12 10:35:09 +08:00
}),
})
.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();
2024-05-03 18:21:20 +08:00
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);
2024-02-12 10:35:09 +08:00
} 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;">
<h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
<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"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
<li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
<li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
<li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.status === 'TO SHIP') {
modal.innerHTML = `
<div class="modal-header" style="height:5px;">
<h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
<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"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
<li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
<li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
<li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
<li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
<li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.status === 'TO RECEIVE') {
modal.innerHTML = `
<div class="modal-header" style="height:5px;">
<h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
<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"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
<li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
<li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
<li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
<li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
<li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.status === 'COMPLETED') {
modal.innerHTML = `
<div class="modal-header" style="height:5px;">
<h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
<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"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
<li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
<li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
<li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
<li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
<li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.status === 'RETURNED') {
modal.innerHTML = `
<div class="modal-header" style="height:5px;">
<h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
<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"><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
<li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
<li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
<li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
<li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
<li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
<li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
console.log(jsonObject);
});
const modal = document.getElementById('productDetails');
console.log(modal);
</script>
2024-02-12 10:35:09 +08:00
<!-- Footer navigation panel for responsive display -->
2024-05-03 18:13:39 +08:00
<!-- <div class="ec-nav-toolbar">
2024-02-12 10:35:09 +08:00
<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>
2024-05-03 18:13:39 +08:00
</div> -->
2024-02-12 10:35:09 +08:00
<!-- Footer navigation panel for responsive display end -->
<!-- raymart remove popup feb 20 2024 -->
2024-02-12 10:35:09 +08:00
<!-- Recent Purchase Popup -->
<!-- <div class="recent-purchase">
<img loading="lazy" src="assets/images/product-image/1.jpg" alt="payment image">
2024-02-12 10:35:09 +08:00
<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> -->
2024-02-12 10:35:09 +08:00
<!-- 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 -->
2024-05-21 09:18:10 +08:00
2024-02-12 10:35:09 +08:00
<!-- 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" />
2024-02-12 10:35:09 +08:00
</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 -->
2024-05-03 18:13:39 +08:00
<!-- 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>
2024-02-12 10:35:09 +08:00
<!-- 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>
2024-05-03 18:13:39 +08:00
<script src="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.js"></script>
2024-02-12 10:35:09 +08:00
<!-- Main Js -->
<script src="assets/js/vendor/index.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>