Merge pull request 'stacy_branch' (#46) from stacy_branch into main

Reviewed-on: #46
This commit is contained in:
MarkHipe 2024-03-26 16:10:56 +08:00
commit 6648db6a5d
6 changed files with 993 additions and 183 deletions

View File

@ -224,9 +224,9 @@ if ($_SESSION["userId"] <> "") {
$vendorOfProduct = getVendorbyId($forAll[$pid]['vendor_api_id']);
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 ec-product-content" data-animation="fadeIn">
<div class="ec-product-inner">
<div class="ec-product-inner" style="width: 260px;">
<!-- raymart added style feb 26 2024 -->
<div class="ec-pro-image-outer" style="width: 290; height: 350px;">
<div class="ec-pro-image-outer">
<!-- <div class="ec-pro-image-outer"> -->
<div class="ec-pro-image">
<a href="product-left-sidebar.php?id=<?php echo $forAll[$pid]["_id"]; ?>">
@ -237,7 +237,7 @@ if ($_SESSION["userId"] <> "") {
if (!empty($image_urls)) {
$first_image_url = trim($image_urls[0]);
?>
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 330px;" />
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 280px;" />
<?php
}
} else {
@ -344,9 +344,9 @@ if ($_SESSION["userId"] <> "") {
$vendorOfProduct = getVendorbyId($electronics[$pid]['vendor_api_id']);
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 ec-product-content" data-animation="fadeIn">
<div class="ec-product-inner">
<div class="ec-product-inner" style="width: 260px;">
<!-- raymart added style feb 26 2024 -->
<div class="ec-pro-image-outer" style="width: 290; height: 350px;">
<div class="ec-pro-image-outer">
<!-- <div class="ec-pro-image-outer"> -->
<div class="ec-pro-image">
<a href="product-left-sidebar.php?id=<?php echo $electronics[$pid]["_id"]; ?>">
@ -357,7 +357,7 @@ if ($_SESSION["userId"] <> "") {
if (!empty($image_urls)) {
$first_image_url = trim($image_urls[0]);
?>
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 330px;"/>
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 280px;" />
<?php
}
} else {
@ -466,9 +466,9 @@ if ($_SESSION["userId"] <> "") {
$vendorOfProduct = getVendorbyId($smartHome[$pid]['vendor_api_id']);
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 ec-product-content" data-animation="fadeIn">
<div class="ec-product-inner">
<div class="ec-product-inner" style="width: 260px;">
<!-- raymart added style feb 26 2024 -->
<div class="ec-pro-image-outer" style="width: 290; height: 350px;">
<div class="ec-pro-image-outer">
<!-- <div class="ec-pro-image-outer"> -->
<div class="ec-pro-image">
<a href="product-left-sidebar.php?id=<?php echo $smartHome[$pid]["_id"]; ?>">
@ -479,7 +479,7 @@ if ($_SESSION["userId"] <> "") {
if (!empty($image_urls)) {
$first_image_url = trim($image_urls[0]);
?>
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 330px;"/>
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 280px;" />
<?php
}
} else {
@ -586,9 +586,9 @@ if ($_SESSION["userId"] <> "") {
$vendorOfProduct = getVendorbyId($forVehicle[$pid]['vendor_api_id']);
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 ec-product-content" data-animation="fadeIn">
<div class="ec-product-inner">
<div class="ec-product-inner" style="width: 260px;">
<!-- raymart added style feb 26 2024-->
<div class="ec-pro-image-outer" style="width: 290; height: 350px;">
<div class="ec-pro-image-outer">
<!-- <div class="ec-pro-image-outer"> -->
<div class="ec-pro-image">
<a href="product-left-sidebar.php?id=<?php echo $forVehicle[$pid]["_id"]; ?>">
@ -599,7 +599,7 @@ if ($_SESSION["userId"] <> "") {
if (!empty($image_urls)) {
$first_image_url = trim($image_urls[0]);
?>
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 330px;"/>
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 280px;" />
<?php
}
} else {
@ -1211,9 +1211,9 @@ if ($_SESSION["userId"] <> "") {
$vendorOfProduct = getVendorbyId($newArrival[$pid]['vendor_api_id']);
?>
<div class="col-lg-3 col-md-6 col-sm-6 col-xs-6 mb-6 ec-product-content" data-animation="flipInY">
<div class="ec-product-inner">
<div class="ec-product-inner" style="width: 260px;">
<!-- raymart added style feb 26 2024 -->
<div class="ec-pro-image-outer" style="width: 290; height: 350px;">
<div class="ec-pro-image-outer">
<!-- <div class="ec-pro-image-outer"> -->
<div class="ec-pro-image">
<a href="product-left-sidebar.php?id=<?php echo $newArrival[$pid]["_id"]; ?>">
@ -1224,7 +1224,7 @@ if ($_SESSION["userId"] <> "") {
if (!empty($image_urls)) {
$first_image_url = trim($image_urls[0]);
?>
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 330px;" />
<img class="main-image" src="<?php echo $first_image_url; ?>" alt="edit" style="border: 1px solid #eeeeee; height: 280px;" />
<?php
}
} else {

View File

@ -1,5 +1,9 @@
<?php
include "functions.php";
$customers = getVendorbyId($_SESSION["customerId"]);
$customerData = json_decode($customers, true);
?>
<!DOCTYPE html>
<html lang="en">

View File

@ -335,7 +335,7 @@ if (!empty($_GET['minPrice']) || !empty($_GET['maxPrice']) || !empty($_GET['cate
}
} else {
?>
<img class="hover-image" src="https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png" alt="edit" />
<img style="width: 290px; height: 200px; object-fit: cover;" class="hover-image" src="https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png" alt="edit" />
<?php
}
?>

View File

@ -65,22 +65,24 @@ if ($_SESSION["userId"] <> "") {
font-weight: 400;
/* margin: 2px; */
text-align: center;
margin-right: -25px;
/* margin-right: -25px; */
}
.tab i {
font-size: 15px;
/* padding-left: 3px; */
}
.tableView:hover {
background-color: #f5f5f5;
/* background-color: #f5f5f5; */
background-color: #e5e5e5;
}
.tab-content {
border: none;
margin-top: -30px;
}
.theadTitle {
/* .theadTitle {
background-color: #dddddd;
padding-top: -50px;
}
padding-top: -90px;
} */
@media only screen and (max-width: 640px) {
#tableTitle {
@ -98,6 +100,32 @@ if ($_SESSION["userId"] <> "") {
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>
@ -196,9 +224,8 @@ if ($_SESSION["userId"] <> "") {
</div>
</div>
<div class="ec-shop-rightside col-lg-9 col-md-12">
<!-- 03-14-2024 Stacy added cards -->
<div class="row" id="rowTabs" style="justify-content:center; padding-bottom:20px; padding-right:20px; display:flex; align-items:center; text-align:center;">
<!-- <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>
@ -224,7 +251,8 @@ if ($_SESSION["userId"] <> "") {
<i class="fa-solid fa-square-check"></i>
</div>
</div>
</div>
</div> -->
<div class="ec-vendor-dashboard-card">
<div class="ec-vendor-card-header">
<h5 id="tableTitle">All Order History</h5>
@ -236,20 +264,49 @@ if ($_SESSION["userId"] <> "") {
<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">
<!-- <div class="tab-container">
<div class="tab" data-tab-name="toPay" onclick="showTab('toPay')">To Pay</div>
<div class="tab" data-tab-name="toShip" onclick="showTab('toShip')">To Ship</div>
<div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive')">To Receive</div>
<div class="tab" data-tab-name="completed" onclick="showTab('completed')">Completed</div>
</div> -->
<!-- 03-15-2024 Stacy added tab for all orders -->
<div id="allOrders" class="tab-content active">
<div id="allOrders" class=" tab-content active">
<!-- Content for "all Orders" tab -->
<table class="table ec-table">
<thead class="theadTitle">
<thead>
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
@ -288,6 +345,7 @@ if ($_SESSION["userId"] <> "") {
// echo '<img class="prod-img" src="https://api.obanana.com/images/storage/web_images/1710214273217-no_image.png" alt="product">';
// }
?>
<img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product">
</td>
<!-- <img class="prod-img" src="<?php # echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td> -->
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
@ -525,6 +583,9 @@ if ($_SESSION["userId"] <> "") {
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
@ -751,7 +812,6 @@ if ($_SESSION["userId"] <> "") {
</table>
</div>
<script>
var sessionToken = '<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>';
var email = '<?php echo isset($_SESSION["email"]) ? $_SESSION["email"] : ""; ?>';
@ -883,25 +943,21 @@ if ($_SESSION["userId"] <> "") {
<?php include "footer.php" ?>
<!-- Footer Area End -->
<!-- Modal -->
<!-- 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">
<div class="modal-header" style="height:5px;">
<button type="button" class="btn-close-icon" style="align-items: end;" data-bs-dismiss="modal" aria-label="Close">
<i class="mdi mdi-close"></i>
</button>
</div>
<div class="row" id="modalContent" style="justify-content:center; align-items:center;">
<!-- modal content placed under script -->
<!-- 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 -->
<!-- Modal End -->
<script>
// 03-18-2024 Stacy added script for showing productDetails modal
@ -910,24 +966,27 @@ if ($_SESSION["userId"] <> "") {
var jsonString = $(event.relatedTarget).data('value');
var jsonObject = JSON.parse(jsonString);
const modal = document.getElementById('modalContent'); // No changes here
const modal = document.getElementById('modalContent');
const date = new Date(jsonObject.updatedAt); const formatter = new Intl. DateTimeFormat('en-US', { day: '2-digit', month: '2-digit', year: 'numeric' }); const formattedDate = formatter. format(date);
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="row" style="margin-left:20px;">
<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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</div>
<div class="col-md-6" style="margin:auto;">
<ul style="font-size:14px;">
<li><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
<li><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
<li><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
<li><b>Price:</b> ${jsonObject.total_amount}</li>
<li><b>Status:</b> ${jsonObject.status}</li>
<li><b>Date:</b> ${formattedDate}</li>
<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>`;
@ -935,20 +994,23 @@ if ($_SESSION["userId"] <> "") {
if (jsonObject.status === 'TO SHIP') {
modal.innerHTML = `
<div class="row" style="margin-left:20px;">
<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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</div>
<div class="col-md-6" style="margin:auto;">
<ul style="font-size:14px;">
<li><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
<li><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
<li><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
<li><b>Price:</b> ${jsonObject.total_amount}</li>
<li><b>Status:</b> ${jsonObject.status}</li>
<li><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
<li><b>Courier Name:</b> ${jsonObject.courier_name}</li>
<li><b>Date:</b> ${formattedDate}</li>
<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>`;
@ -956,20 +1018,23 @@ if ($_SESSION["userId"] <> "") {
if (jsonObject.status === 'TO RECEIVE') {
modal.innerHTML = `
<div class="row" style="margin-left:20px;">
<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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</div>
<div class="col-md-6" style="margin:auto;">
<ul style="font-size:14px;">
<li><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
<li><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
<li><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
<li><b>Price:</b> ${jsonObject.total_amount}</li>
<li><b>Status:</b> ${jsonObject.status}</li>
<li><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
<li><b>Courier Name:</b> ${jsonObject.courier_name}</li>
<li><b>Date:</b> ${formattedDate}</li>
<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>`;
@ -977,20 +1042,23 @@ if ($_SESSION["userId"] <> "") {
if (jsonObject.status === 'COMPLETED') {
modal.innerHTML = `
<div class="row" style="margin-left:20px;">
<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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</div>
<div class="col-md-6" style="margin:auto;">
<ul style="font-size:14px;">
<li><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
<li><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
<li><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
<li><b>Price:</b> ${jsonObject.total_amount}</li>
<li><b>Status:</b> ${jsonObject.status}</li>
<li><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
<li><b>Courier Name:</b> ${jsonObject.courier_name}</li>
<li><b>Date:</b> ${formattedDate}</li>
<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>`;
@ -998,20 +1066,24 @@ if ($_SESSION["userId"] <> "") {
if (jsonObject.status === 'RETURNED') {
modal.innerHTML = `
<div class="row" style="margin-left:20px;">
<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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</div>
<div class="col-md-6" style="margin:auto;">
<ul style="font-size:14px;">
<li><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
<li><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
<li><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
<li><b>Price:</b> ${jsonObject.total_amount}</li>
<li><b>Status:</b> ${jsonObject.status}</li>
<li><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
<li><b>Courier Name:</b> ${jsonObject.courier_name}</li>
<li><b>Date:</b> ${formattedDate}</li>
<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>`;

View File

@ -40,6 +40,9 @@ if ($_SESSION["userId"] <> "") {
<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" />
@ -49,13 +52,92 @@ if ($_SESSION["userId"] <> "") {
<link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
<style>
.tab.active {
background-color: #ffaa00;
background-color: #ffffff;
/* Set your desired background color for the active tab */
color: #ffffff;
color: #ffaa00;
/* Set your desired text color for the active tab */
border: 1px solid #ffaa00
/* Set your desired border color for the active tab */
}
.tab {
background-color: #ffaa00;
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;
}
/* .theadTitle {
background-color: #dddddd;
padding-top: -90px;
} */
@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: 13px;
width: 9rem;
}
}
@media only screen and (max-width: 1200px) {
.tab {
font-size: 10px;
width: 7rem;
}
.tab i {
font-size: 9px;
}
}
@media only screen and (max-width: 700px) {
.tab {
font-size: 9px;
width: 6rem;
}
.tab i {
font-size: 9px;
}
}
@media only screen and (max-width: 620px) {
.tab {
font-size: 0px;
width:5rem;
}
.tab i {
font-size: 13px;
}
}
</style>
<script>
function updateCartItemCount() {
$.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
@ -152,28 +234,94 @@ if ($_SESSION["userId"] <> "") {
</div>
</div>
<div class="ec-shop-rightside col-lg-9 col-md-12">
<div class="ec-vendor-dashboard-card">
<div class="ec-vendor-card-header">
<h5>Refund History</h5>
<div class="ec-header-btn">
<a class="btn btn-lg btn-primary" href="#">Shop Now</a>
<!-- 03-14-2024 Stacy added cards -->
<!-- <div class="row" id="rowTabs" style="justify-content:center; padding-bottom:20px; padding-right:20px; display:flex; align-items:center; text-align:center;">
<div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
<div class="tab h-40" data-tab-name="allRefunds" onclick="showTab('allRefunds'), document.getElementById('tableTitle').innerHTML = 'All Refund History'">All Refunds
<i class="fa-solid fa-money-bills"></i>
</div>
</div>
<div id="tableTabs" class="col-lg-3 col-md-6" style="width:8rem;">
<div class="tab h-40" data-tab-name="toApprove" onclick="showTab('toApprove'), document.getElementById('tableTitle').innerHTML = 'All To Approve Refunds'">To Approve
<i class="fa-solid fa-rectangle-list"></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 Refunds'">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 Refunds'">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 To Refund Products'">To Refund
<i class="fa-solid fa-square-check"></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 Refund'">Complete
<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 Refund History</h5>
<div class="ec-header-btn">
<!-- <a class="btn btn-lg btn-primary" href="#">Shop Now</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="allRefunds" onclick="showTab('allRefunds'), document.getElementById('tableTitle').innerHTML = 'All Refund History'">All Refunds
<i class="fa-solid fa-money-bills"></i></div>
<div class="tab" data-tab-name="toApprove" onclick="showTab('toApprove'), document.getElementById('tableTitle').innerHTML = 'All To Approve Refunds'">To Approve
<i class="fa-solid fa-rectangle-list"></i></div>
<div class="tab" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Refunds'">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 Refunds'">To Receive
<i class="fa-solid fa-box-archive"></i></div>
<div class="tab" data-tab-name="toRefund" onclick="showTab('toRefund'), document.getElementById('tableTitle').innerHTML = 'All To Refund Products'">To Refund
<i class="fa-solid fa-money-bill-1-wave"></i></div>
<div class="tab" data-tab-name="returnComplete" onclick="showTab('returnComplete'), document.getElementById('tableTitle').innerHTML = 'All Completed Refund'">Complete
<i class="fa-solid fa-square-check"></i></div>
</div>
</div>
</div>
<div class="ec-vendor-card-body">
<div class="ec-vendor-card-table">
<div class="tab-container">
<div class="tab" data-tab-name="toApprove" onclick="showTab('toApprove')">To Approve</div>
<div class="tab" data-tab-name="toShip" onclick="showTab('toShip')">To Ship</div>
<div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive')">To Receive</div>
<div class="tab" data-tab-name="toRefund" onclick="showTab('toRefund')">To Refund</div>
<div class="tab" data-tab-name="returnComplete" onclick="showTab('returnComplete')">Return Complete</div>
</div>
<div id="toApprove" class="tab-content active">
<!-- <div class="tab-container">
<!-- 03-25-2024 Stacy modified cards -->
<!-- <div class="tab" data-tab-name="allRefunds" onclick="showTab('allRefunds'), document.getElementById('tableTitle').innerHTML = 'All Refund History'">All Refunds
<i class="fa-solid fa-money-bills"></i></div>
<div class="tab" data-tab-name="toApprove" onclick="showTab('toApprove'), document.getElementById('tableTitle').innerHTML = 'All To Approve Refunds'">To Approve
<i class="fa-solid fa-rectangle-list"></i></div>
<div class="tab" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Refunds'">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 Refunds'">To Receive
<i class="fa-solid fa-box-archive"></i></div>
<div class="tab" data-tab-name="toRefund" onclick="showTab('toRefund'), document.getElementById('tableTitle').innerHTML = 'All To Refund Products'">To Refund
<i class="fa-solid fa-square-check"></i></div>
<div class="tab" data-tab-name="returnComplete" onclick="showTab('returnComplete'), document.getElementById('tableTitle').innerHTML = 'All Completed Refund'">Return Complete
<i class="fa-solid fa-square-check"></i></div>
</div> -->
<!-- Content for "To Pay" tab -->
<!-- 03-15-2024 Stacy added tab for all orders -->
<div id="allRefunds" class="tab-content active">
<!-- Content for "all Orders" tab -->
<table class="table ec-table">
<thead>
<thead class="theadTitle">
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
@ -181,8 +329,69 @@ if ($_SESSION["userId"] <> "") {
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Refund Status</th>
<th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</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;
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['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO APPROVE') || (strtoupper($order['return_order']['status']) === 'TO SHIP')
|| (strtoupper($order['return_order']['status']) === 'TO RECEIVE') || (strtoupper($order['return_order']['status']) === 'TO REFUND')
|| (strtoupper($order['return_order']['status']) === 'RETURN COMPLETE') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></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>
</table>
</div>
<div id="toApprove" class="tab-content">
<!-- Content for "To Approve" tab -->
<table class="table ec-table">
<thead class="theadTitle">
<tr>
<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">Refund Status</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
@ -202,15 +411,18 @@ if ($_SESSION["userId"] <> "") {
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO APPROVE') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<tr>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<td><span><?php echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></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> -->
@ -224,11 +436,12 @@ if ($_SESSION["userId"] <> "") {
</tbody>
</table>
</div>
<div id="toShip" class="tab-content">
<div id="toShip" class="tab-content">
<!-- Content for "To Ship" tab -->
<table class="table ec-table">
<thead>
<thead class="theadTitle">
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
@ -236,8 +449,8 @@ if ($_SESSION["userId"] <> "") {
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Refund Status</th>
<th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
@ -257,15 +470,18 @@ if ($_SESSION["userId"] <> "") {
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO SHIP') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<tr>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<td><span><?php echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></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> -->
@ -280,9 +496,11 @@ if ($_SESSION["userId"] <> "") {
</table>
</div>
<div id="toReceive" class="tab-content">
<!-- Content for "To Receive" tab -->
<table class="table ec-table">
<thead>
<thead class="theadTitle">
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
@ -290,9 +508,10 @@ if ($_SESSION["userId"] <> "") {
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Refund Status</th>
<th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
</tr>
</thead>
@ -310,15 +529,18 @@ if ($_SESSION["userId"] <> "") {
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO RECEIVE') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<tr>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<td><span><?php echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
<!-- <td>
<span class="tbl-btn">
@ -336,9 +558,11 @@ if ($_SESSION["userId"] <> "") {
</table>
</div>
<div id="toRefund" class="tab-content">
<!-- Content for "To Refund" tab -->
<table class="table ec-table">
<thead>
<thead class="theadTitle">
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
@ -346,9 +570,10 @@ if ($_SESSION["userId"] <> "") {
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Refund Status</th>
<th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
</tr>
</thead>
@ -366,15 +591,18 @@ if ($_SESSION["userId"] <> "") {
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO REFUND') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<tr>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<td><span><?php echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
<!-- <td>
<span class="tbl-btn">
@ -392,9 +620,11 @@ if ($_SESSION["userId"] <> "") {
</table>
</div>
<div id="returnComplete" class="tab-content">
<!-- Content for "Return Complete" tab -->
<table class="table ec-table">
<thead>
<thead class="theadTitle">
<tr>
<th scope="col">Image</th>
<th scope="col">Name</th>
@ -402,8 +632,8 @@ if ($_SESSION["userId"] <> "") {
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Refund Status</th>
<th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
</tr>
@ -422,15 +652,18 @@ if ($_SESSION["userId"] <> "") {
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'RETURN COMPLETE') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<tr>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<td><span><?php echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
<!-- <td>
<span class="tbl-btn">
@ -667,9 +900,170 @@ if ($_SESSION["userId"] <> "") {
<!-- 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-21-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.return_order.status === 'To Approve') {
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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</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>Refund Status:</b> ${jsonObject.return_order.status}</li>
<li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
<li class="fs-6"><b>Refund Proof:</b></li>
<li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.return_order.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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</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>Refund Status:</b> ${jsonObject.return_order.status}</li>
<li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
<li class="fs-6"><b>Refund Proof:</b></li>
<li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.return_order.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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</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>Refund Status:</b> ${jsonObject.return_order.status}</li>
<li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
<li class="fs-6"><b>Refund Proof:</b></li>
<li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.return_order.status === 'To Refund') {
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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</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>Refund Status:</b> ${jsonObject.return_order.status}</li>
<li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
<li class="fs-6"><b>Refund Proof:</b></li>
<li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.return_order.status === 'Return Complete') {
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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</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>Refund Status:</b> ${jsonObject.return_order.status}</li>
<li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
<li class="fs-6"><b>Refund Proof:</b></li>
<li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></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>
<!-- Footer navigation panel for responsive display -->
<div class="ec-nav-toolbar">
<div class="container">

View File

@ -57,6 +57,9 @@ if (is_array($vendorOrderss)) {
<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" />
@ -66,13 +69,92 @@ if (is_array($vendorOrderss)) {
<link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
<style>
.tab.active {
background-color: #ffaa00;
background-color: #ffffff;
/* Set your desired background color for the active tab */
color: #ffffff;
color: #ffaa00;
/* Set your desired text color for the active tab */
border: 1px solid #ffaa00
/* Set your desired border color for the active tab */
}
.tab {
background-color: #ffaa00;
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;
}
/* .theadTitle {
background-color: #dddddd;
padding-top: -90px;
} */
@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: 13px;
width: 9rem;
}
}
@media only screen and (max-width: 1200px) {
.tab {
font-size: 10px;
width: 7rem;
}
.tab i {
font-size: 9px;
}
}
@media only screen and (max-width: 700px) {
.tab {
font-size: 9px;
width: 6rem;
}
.tab i {
font-size: 9px;
}
}
@media only screen and (max-width: 620px) {
.tab {
font-size: 0px;
width:5rem;
}
.tab i {
font-size: 13px;
}
}
</style>
<script>
function updateCartItemCount() {
$.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
@ -175,24 +257,46 @@ if (is_array($vendorOrderss)) {
<div class="ec-shop-rightside col-lg-9 col-md-12">
<div class="ec-vendor-dashboard-card">
<div class="ec-vendor-card-header">
<h5>Refund History</h5>
<h5 id="tableTitle">All Refund History</h5>
<div class="ec-header-btn">
<a class="btn btn-lg btn-primary" href="shop-list-left-sidebar2.php">Shop Now</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" data-tab-name="allRefunds" onclick="showTab('allRefunds'), document.getElementById('tableTitle').innerHTML = 'All Refund History'">All Refunds
<i class="fa-solid fa-money-bills"></i></div>
<div class="tab" data-tab-name="toApprove" onclick="showTab('toApprove'), document.getElementById('tableTitle').innerHTML = 'All To Approve Refunds'">To Approve
<i class="fa-solid fa-rectangle-list"></i></div>
<div class="tab" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Refunds'">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 Refunds'">To Receive
<i class="fa-solid fa-box-archive"></i></div>
<div class="tab" data-tab-name="toRefund" onclick="showTab('toRefund'), document.getElementById('tableTitle').innerHTML = 'All To Refund Products'">To Refund
<i class="fa-solid fa-money-bill-1-wave"></i></div>
<div class="tab" data-tab-name="returnComplete" onclick="showTab('returnComplete'), document.getElementById('tableTitle').innerHTML = 'All Completed Refund'">Complete
<i class="fa-solid fa-square-check"></i></div>
</div>
</div>
</div>
<div class="ec-vendor-card-body">
<div class="ec-vendor-card-table">
<div class="tab-container">
<!-- <div class="tab-container">
<div class="tab" data-tab-name="toApprove" onclick="showTab('toApprove')">To Approve</div>
<div class="tab" data-tab-name="toShip" onclick="showTab('toShip')">To Ship</div>
<div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive')">To Receive</div>
<div class="tab" data-tab-name="toRefund" onclick="showTab('toRefund')">To Refund</div>
<div class="tab" data-tab-name="returnComplete" onclick="showTab('returnComplete')">Return Complete</div>
</div> -->
</div>
<div id="toApprove" class="tab-content active">
<!-- Content for "To Pay" tab -->
<!-- 03-26-2024 Stacy added tab for all orders -->
<div id="allRefunds" class="tab-content">
<!-- Content for "All Refunds" tab -->
<table class="table ec-table">
<thead>
<tr>
@ -202,8 +306,63 @@ if (is_array($vendorOrderss)) {
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Refund Status</th>
<th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
</tr>
</thead>
<tbody>
<?php
$order = $vendorOrders;
$orderArray = json_encode($order, true);
$orderItems = json_decode($orderArray, true);
foreach ($orderItems as $order) {
// Ensure that the required data is available before accessing it
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO APPROVE') || (strtoupper($order['return_order']['status']) === 'TO SHIP')
|| (strtoupper($order['return_order']['status']) === 'TO RECEIVE') || (strtoupper($order['return_order']['status']) === 'TO REFUND')
|| (strtoupper($order['return_order']['status']) === 'RETURN COMPLETE') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></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>
</table>
</div>
<div id="toApprove" class="tab-content active">
<!-- Content for "To Approve" tab -->
<table class="table ec-table">
<thead>
<tr>
<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">Refund Status</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<th scope="col">Action</th>
<!-- <th scope="col">Actions</th> -->
@ -219,15 +378,18 @@ if (is_array($vendorOrderss)) {
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO APPROVE') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<tr>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<td><span><?php echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
<td>
<span class="tbl-btn">
@ -244,8 +406,8 @@ if (is_array($vendorOrderss)) {
</tbody>
</table>
</div>
<div id="toShip" class="tab-content">
<div id="toShip" class="tab-content">
<!-- Content for "To Ship" tab -->
<table class="table ec-table">
<thead>
@ -256,8 +418,8 @@ if (is_array($vendorOrderss)) {
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Refund Status</th>
<th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
@ -273,15 +435,18 @@ if (is_array($vendorOrderss)) {
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO SHIP') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<tr>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<td><span><?php echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></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> -->
@ -296,6 +461,7 @@ if (is_array($vendorOrderss)) {
</div>
<div id="toReceive" class="tab-content">
<!-- Content for "To Receive" tab -->
<table class="table ec-table">
<thead>
<tr>
@ -305,8 +471,8 @@ if (is_array($vendorOrderss)) {
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Refund Status</th>
<th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<th scope="col">Actions</th>
</tr>
@ -321,15 +487,18 @@ if (is_array($vendorOrderss)) {
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO RECEIVE') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<tr>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<td><span><?php echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
<td>
<span class="tbl-btn">
@ -346,6 +515,7 @@ if (is_array($vendorOrderss)) {
</div>
<div id="toRefund" class="tab-content">
<!-- Content for "To Refund" tab -->
<table class="table ec-table">
<thead>
<tr>
@ -355,8 +525,8 @@ if (is_array($vendorOrderss)) {
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Refund Status</th>
<th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
</tr>
@ -371,19 +541,22 @@ if (is_array($vendorOrderss)) {
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'TO REFUND') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<tr>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<td><span><?php echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></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" onclick="updateCompletedStatus('<?php echo $order['_id']; ?>')">Received</a>
<a class="btn btn-lg btn-primary" onclick="updateCompletedStatus('<?php # echo $order['_id']; ?>')">Received</a>
</span>
</td> -->
</tr>
@ -397,6 +570,7 @@ if (is_array($vendorOrderss)) {
</div>
<div id="returnComplete" class="tab-content">
<!-- Content for "Return Complete" tab -->
<table class="table ec-table">
<thead>
<tr>
@ -406,8 +580,8 @@ if (is_array($vendorOrderss)) {
<th scope="col">Unit Price</th>
<th scope="col">Price</th>
<th scope="col">Refund Status</th>
<th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th>
<!-- <th scope="col">Refund Reason</th>
<th scope="col">Refund Proof</th> -->
<th scope="col">Date</th>
<!-- <th scope="col">Actions</th> -->
</tr>
@ -422,15 +596,18 @@ if (is_array($vendorOrderss)) {
if (isset($order['return_order']['status']) && (strtoupper($order['return_order']['status']) === 'RETURN COMPLETE') && isset($order['items'][0]['product'])) {
$totalAmount += $order['total_amount'];
?>
<tr>
<?php
$jsonorder = json_encode($order);
?>
<tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
<td><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
<td><span><?php echo $order['items'][0]['product']['name']; ?></span></td>
<td><span><?php echo $order['items'][0]['quantity']; ?></span></td>
<td><span><?php echo $order['items'][0]['price']; ?></span></td>
<td><span><?php echo $order['total_amount'] ?></span></td>
<td><span><?php echo $order['return_order']['status']; ?></span></td>
<td><span><?php echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php echo $order['return_order']['image']; ?>" alt="product"></td>
<!-- <td><span><?php # echo $order['return_order']['reason']; ?></span></td>
<td><img class="prod-img" src="<?php # echo $order['return_order']['image']; ?>" alt="product"></td> -->
<td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
<!-- <td>
<span class="tbl-btn">
@ -760,9 +937,172 @@ if (is_array($vendorOrderss)) {
<!-- Footer Start -->
<?php include "footer.php" ?>
<!-- Footer Area End -->
<!-- Modal Start -->
<!-- 03-26-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-26-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.return_order.status === 'To Approve') {
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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</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>Refund Status:</b> ${jsonObject.return_order.status}</li>
<li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
<li class="fs-6"><b>Refund Proof:</b></li>
<li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.return_order.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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</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>Refund Status:</b> ${jsonObject.return_order.status}</li>
<li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
<li class="fs-6"><b>Refund Proof:</b></li>
<li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.return_order.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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</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>Refund Status:</b> ${jsonObject.return_order.status}</li>
<li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
<li class="fs-6"><b>Refund Proof:</b></li>
<li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.return_order.status === 'To Refund') {
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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</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>Refund Status:</b> ${jsonObject.return_order.status}</li>
<li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
<li class="fs-6"><b>Refund Proof:</b></li>
<li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></li>
<li class="fs-6"><b>Date:</b> ${formattedDate}</li>
</ul>
</div>
</div>`;
}
if (jsonObject.return_order.status === 'Return Complete') {
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" style="display:flex; justify-content:center; margin-left:20px;">
<div class="col-md-6">
<img class="image-thumb-preview pt-3 pb-3" style="width:100%; height:100%; padding-left:20px;" src="${jsonObject.items[0].product.product_image}" alt="product" />
</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>Refund Status:</b> ${jsonObject.return_order.status}</li>
<li class="fs-6"><b>Refund Reason:</b> ${jsonObject.return_order.reason}</li>
<li class="fs-6"><b>Refund Proof:</b></li>
<li class="fs-6 pl-3"><img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product"></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>
<!-- Footer navigation panel for responsive display -->
<div class="ec-nav-toolbar">
<div class="container">