From 2b8d9ddf2a13a45ea34bb91124e501162637835d Mon Sep 17 00:00:00 2001
From: Staycie <stacymapano0@gmail.com>
Date: Mon, 8 Apr 2024 18:13:47 +0800
Subject: [PATCH 1/4] vendor name on header & endpoint issue

---
 admin/vendor-profile.php |  4 ++--
 header.php               | 26 +++++++++++++++++++-------
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/admin/vendor-profile.php b/admin/vendor-profile.php
index 2c2df12..5e07d7e 100644
--- a/admin/vendor-profile.php
+++ b/admin/vendor-profile.php
@@ -397,7 +397,7 @@ if (time() >= $renewal_time) {
             created_by: "Sample User",
         };
 
-        fetch('https://api.obanana.shop/api/v1/payouts/', {
+        fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/payouts/', {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
@@ -416,7 +416,7 @@ if (time() >= $renewal_time) {
             console.log('Payout created successfully');
             selectedOrders.forEach(order => {
                 var orderId = order.orderId;
-                fetch(`https://api.obanana.shop/api/v1/orders/${orderId}`, {
+                fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`, {
                     method: 'PATCH',
                     headers: {
                         'Content-Type': 'application/json',
diff --git a/header.php b/header.php
index a65f8cc..f561536 100644
--- a/header.php
+++ b/header.php
@@ -1,13 +1,23 @@
 <?php 
 $_SESSION["url"] = $_SERVER['REQUEST_URI'];
+
 if ($_SESSION["userId"] <> "") {
     $_SESSION["isLoggedIn"] = true;
-    $customer_data = getCustomerbyLoginId($_SESSION["userId"]);
-    // $customerData = json_decode($customer_data, true);
-
+    // $customer_data = getCustomerbyLoginId($_SESSION["userId"]);
+    $vendorLoginId = searchVendorbyLoginId($_SESSION["userId"]);
+    $vendorLoginIdjson = json_decode($vendorLoginId, true);
+    // var_dump( $vendorLoginIdjson);
+    if (isset($vendorLoginIdjson['results'][0])) {
+        $vendorData = $vendorLoginIdjson['results'][0];
+        $vendorId = $vendorData['_id'];
+        $_SESSION["LoggedInVendorId"] = $vendorId;
+    }
+    if (empty($vendorLoginId)) {
+        $customer_data = getCustomerbyLoginId($_SESSION["userId"]);
+    }
 } else {
-    $_SESSION["isLoggedIn"] = false;
-}
+        $_SESSION["isLoggedIn"] = false;
+    }
 ?>
 
 <?php ?>
@@ -163,9 +173,11 @@ if ($_SESSION["userId"] <> "") {
                             <!-- <button class="text-upper" onclick="displayPopup()">Download App <i aria-hidden="true"></i></button> -->
                             <?php if(isset($customer_data)) { ?>
                                 <button style="cursor:default;">Hi <span class="text-upper"><?php echo $customer_data[0]['first_name'] ?>!</span></button>
-                            <?php } else { ?>
+                            <?php } else if (isset($vendorData)) {?>
+                                <button style="cursor:default;">Hi <span class="text-upper"><?php echo ($vendorData['user_login']) ?>!</span></button>
+                            <?php } else {?>
                                 <button class="text-upper"><a href="login.php">Login</a></button>
-                            <?php } ?>   
+                            <?php } ?> 
                             
                         </div>
                         <script>
-- 
2.40.1


From 395919bb2481ae66bcf076da0bec9496a6a36a15 Mon Sep 17 00:00:00 2001
From: Staycie <stacymapano0@gmail.com>
Date: Mon, 8 Apr 2024 18:17:58 +0800
Subject: [PATCH 2/4] search filter

---
 shop-list-left-sidebar2.php | 74 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 72 insertions(+), 2 deletions(-)

diff --git a/shop-list-left-sidebar2.php b/shop-list-left-sidebar2.php
index cf63fc1..dd9b201 100644
--- a/shop-list-left-sidebar2.php
+++ b/shop-list-left-sidebar2.php
@@ -370,7 +370,77 @@ if ($_SESSION["userId"] <> "") {
                                     <h3 class="ec-sidebar-title">Category</h3>
                                 </div>
                                 <div class="ec-sb-block-content">
-                                    <ul>
+                                    <form method="POST" action="shop-list-left-sidebar-action.php">
+                                        
+                                        <ul>
+                                            <li>
+                                                <div class="ec-sidebar-block-item">
+                                                    <input type="checkbox" name="category[]" value="Electronics" <?php echo (isset($_POST['category']) && in_array('Electronics', $_POST['category'])) || (isset($_GET['category']) && in_array('Electronics', $_GET['category'])) ? 'checked' : ''; ?> /> <a>Electronics</a><span class="checked"></span>
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div class="ec-sidebar-block-item">
+                                                    <input type="checkbox" name="category[]" value="Solar" <?php echo (isset($_POST['category']) && in_array('Solar', $_POST['category'])) || (isset($_GET['category']) && in_array('Solar', $_GET['category'])) ? 'checked' : ''; ?> /> <a>Solar</a><span class="checked"></span>
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div class="ec-sidebar-block-item">
+                                                    <input type="checkbox" name="category[]" value="E-bike" <?php echo (isset($_POST['category']) && in_array('E-bike', $_POST['category'])) || (isset($_GET['category']) && in_array('E-bike', $_GET['category'])) ? 'checked' : ''; ?> /> <a>E-bike</a><span class="checked"></span>
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div class="ec-sidebar-block-item">
+                                                    <input type="checkbox" name="category[]" value="E-vehicle" <?php echo (isset($_POST['category']) && in_array('E-vehicle', $_POST['category'])) || (isset($_GET['category']) && in_array('E-vehicle', $_GET['category'])) ? 'checked' : ''; ?> /> <a>E-vehicle</a><span class="checked"></span>
+
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div class="ec-sidebar-block-item">
+                                                    <input type="checkbox" name="category[]" value="Appliance" <?php echo (isset($_POST['category']) && in_array('Appliance', $_POST['category'])) || (isset($_GET['category']) && in_array('Appliance', $_GET['category'])) ? 'checked' : ''; ?> /> <a>Appliance</a><span class="checked"></span>
+
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div class="ec-sidebar-block-item">
+                                                    <input type="checkbox" name="category[]" value="Smart Home" <?php echo (isset($_POST['category']) && in_array('Smart Home', $_POST['category'])) || (isset($_GET['category']) && in_array('Smart Home', $_GET['category'])) ? 'checked' : ''; ?> /> <a>Smart Home</a><span class="checked"></span>
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div class="ec-sidebar-block-item">
+                                                    <input type="checkbox" name="category[]" value="Home" <?php echo (isset($_POST['category']) && in_array('Home', $_POST['category'])) || (isset($_GET['category']) && in_array('Home', $_GET['category'])) ? 'checked' : ''; ?> /> <a>Home</a><span class="checked"></span>
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div class="ec-sidebar-block-item">
+                                                    <input type="checkbox" name="category[]" value="Apparel" <?php echo (isset($_POST['category']) && in_array('Apparel', $_POST['category'])) || (isset($_GET['category']) && in_array('Apparel', $_GET['category'])) ? 'checked' : ''; ?> /> <a>Apparel</a><span class="checked"></span>
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div class="ec-sidebar-block-item">
+                                                    <input type="checkbox" name="category[]" value="Heavy Equipment" <?php echo (isset($_POST['category']) && in_array('Heavy Equipment', $_POST['category'])) || (isset($_GET['category']) && in_array('Heavy Equipment', $_GET['category'])) ? 'checked' : ''; ?> /> <a>Heavy Equipment</a><span class="checked"></span>
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div style="padding-top:10px;">
+                                                    <label for="minPrice" style="margin-bottom:-5px;">Min Price:</label>
+                                                    <input style="height:40px" type="number" name="minPrice" id="minPrice" value="<?php echo isset($_POST['minPrice']) ? $_POST['minPrice'] : (isset($_GET['minPrice']) ? $_GET['minPrice'] : ''); ?>" />
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div>
+                                                    <label for="maxPrice" style="margin-bottom:-5px;">Max Price:</label>
+                                                    <input style="height:40px" type="number" name="maxPrice" id="maxPrice" value="<?php echo isset($_POST['maxPrice']) ? $_POST['maxPrice'] : (isset($_GET['maxPrice']) ? $_GET['maxPrice'] : ''); ?>" />
+                                                </div>
+                                            </li>
+                                            <li>
+                                                <div style="padding-top:10px;">
+                                                    <button style="font-size:12px; height:30px; width:60px;" class="btn-primary" type="submit">Apply</button>
+                                                </div>
+                                            </li>
+                                        </ul>
+                                        <!-- <button type="submit">Apply</button> -->
+                                    </form>
+                                                                        <!-- <ul>
                                         <li>
                                             <div class="ec-sidebar-block-item">
                                                 <input type="checkbox" checked /> <a href="#">clothes</a><span class="checked"></span>
@@ -422,7 +492,7 @@ if ($_SESSION["userId"] <> "") {
                                             </div>
                                         </li>
 
-                                    </ul>
+                                    </ul> -->
                                 </div>
                             </div>
                             <!-- Sidebar Price Block -->
-- 
2.40.1


From fd40d3bb34289980deadffdc074998e941c0e297 Mon Sep 17 00:00:00 2001
From: Staycie <stacymapano0@gmail.com>
Date: Mon, 8 Apr 2024 18:21:49 +0800
Subject: [PATCH 3/4] fixed button issues, put product ellipsis & made images
 clickable

---
 user-history.php          | 111 +++++++++++++++-----------
 user-refund-history.php   | 161 ++++++++++++++++++++++++--------------
 vendor-refund-history.php | 154 ++++++++++++++++++++++++------------
 3 files changed, 274 insertions(+), 152 deletions(-)

diff --git a/user-history.php b/user-history.php
index a0601a8..3ceed23 100644
--- a/user-history.php
+++ b/user-history.php
@@ -53,13 +53,13 @@ if ($_SESSION["userId"] <> "") {
         .tab.active {
             background-color: #ffffff;
             /* Set your desired background color for the active tab */
-            color: #ffaa00;
+            color: #3474d4;
             /* Set your desired text color for the active tab */
-            border: 1px solid #ffaa00
+            border: 1px solid #3474d4
             /* Set your desired border color for the active tab */
         }
         .tab {
-            background-color: #ffaa00;
+            background-color: #3474d4;
             color: #ffffff;
             font-family: "Poppins, sans-serif";
             font-weight: 400;
@@ -79,10 +79,27 @@ if ($_SESSION["userId"] <> "") {
             border: none;
             margin-top: -30px;
         }
-        /* .theadTitle {
-            background-color: #dddddd;
-            padding-top: -90px;
-        } */
+        
+        .tableView {
+            td:nth-child(2) {
+            max-width: 250px;
+            }
+            td:nth-child(6) {
+                white-space: nowrap;
+            }
+            td:nth-child(7) {
+                white-space: nowrap;
+            }
+        } 
+
+        .Title {
+            th:nth-child(4) {
+                white-space: nowrap;
+            }
+            th:nth-child(6) {
+                white-space: nowrap;
+            }
+        }
 
         @media only screen and (max-width: 640px) {
             #tableTitle {
@@ -307,7 +324,7 @@ if ($_SESSION["userId"] <> "") {
                                     <!-- Content for "all Orders" tab -->
                                     <table class="table ec-table">
                                         <thead>
-                                            <tr>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -348,7 +365,7 @@ if ($_SESSION["userId"] <> "") {
                                                                 <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>
+                                                                <td><span class="text-truncate"><?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>
@@ -374,8 +391,8 @@ if ($_SESSION["userId"] <> "") {
                                 <div id="toPay" class="tab-content">
                                     <!-- Content for "To Pay" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
-                                            <tr>
+                                        <thead>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -406,7 +423,7 @@ if ($_SESSION["userId"] <> "") {
                                                             ?>
                                                             <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 class="text-truncate"><?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>
@@ -429,8 +446,8 @@ if ($_SESSION["userId"] <> "") {
                                 <div id="toShip" class="tab-content">
                                     <!-- Content for "To Ship" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
-                                            <tr>
+                                        <thead>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -463,7 +480,7 @@ if ($_SESSION["userId"] <> "") {
                                                         ?>
                                                         <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 class="text-truncate"><?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>
@@ -486,8 +503,8 @@ if ($_SESSION["userId"] <> "") {
                                 <div id="toReceive" class="tab-content">
                                     <!-- Content for "To Receive" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
-                                            <tr>
+                                        <thead>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -517,29 +534,25 @@ if ($_SESSION["userId"] <> "") {
                                                         <?php
                                                         $jsonorder = json_encode($order);
                                                         ?>
-                                                        <tr class="tableView" data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                            <td>
-                                                                <!-- <?php if (isset($order['product_image'])) : ?>
-                                                                    <img src="<?php echo $order['items'][0]['product']['product_image']; ?>" class="prod-img">
-                                                                <?php else : ?>
-                                                                    <img src="https://api.obanana.com/images/storage/web_images/1708588564876-viber_image_2024-02-22_15-54-42-498.png" class="prod-img">
-                                                                <?php endif; ?> -->
-                                                            <img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product">
+                                                        <tr class="tableView">
+                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                                <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['status']; ?></span></td>
+                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['price']; ?></span></td>
+                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?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><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></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
                                                     }
                                                 }
@@ -554,8 +567,8 @@ if ($_SESSION["userId"] <> "") {
                                 <div id="completed" class="tab-content">
                                     <!-- Content for "Completed" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
-                                            <tr>
+                                        <thead>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -588,7 +601,7 @@ if ($_SESSION["userId"] <> "") {
                                                             ?>
                                                             <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 class="text-truncate"><?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>
@@ -985,9 +998,11 @@ if ($_SESSION["userId"] <> "") {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -1007,9 +1022,11 @@ if ($_SESSION["userId"] <> "") {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -1031,9 +1048,11 @@ if ($_SESSION["userId"] <> "") {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -1055,9 +1074,11 @@ if ($_SESSION["userId"] <> "") {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -1079,9 +1100,11 @@ if ($_SESSION["userId"] <> "") {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
diff --git a/user-refund-history.php b/user-refund-history.php
index 34b6abe..9cda15c 100644
--- a/user-refund-history.php
+++ b/user-refund-history.php
@@ -54,13 +54,13 @@ if ($_SESSION["userId"] <> "") {
         .tab.active {
             background-color: #ffffff;
             /* Set your desired background color for the active tab */
-            color: #ffaa00;
+            color: #3474d4;
             /* Set your desired text color for the active tab */
-            border: 1px solid #ffaa00
+            border: 1px solid #3474d4
             /* Set your desired border color for the active tab */
         }
         .tab {
-            background-color: #ffaa00;
+            background-color: #3474d4;
             color: #ffffff;
             font-family: "Poppins, sans-serif";
             font-weight: 400;
@@ -80,10 +80,27 @@ if ($_SESSION["userId"] <> "") {
             border: none;
             margin-top: -30px;
         }
-        /* .theadTitle {
-            background-color: #dddddd;
-            padding-top: -90px;
-        } */
+
+        .tableView {
+            td:nth-child(2) {
+            max-width: 250px;
+            }
+            td:nth-child(6) {
+                white-space: nowrap;
+            }
+            td:nth-child(7) {
+                white-space: nowrap;
+            }
+        } 
+
+        .Title {
+            th:nth-child(4) {
+                white-space: nowrap;
+            }
+            th:nth-child(6) {
+                white-space: nowrap;
+            }
+        }
 
         @media only screen and (max-width: 640px) {
             #tableTitle {
@@ -321,8 +338,8 @@ if ($_SESSION["userId"] <> "") {
                                 <div id="allRefunds" class="tab-content active">
                                     <!-- Content for "all Orders" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
-                                            <tr>
+                                        <thead>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -357,7 +374,7 @@ if ($_SESSION["userId"] <> "") {
                                                             ?>
                                                             <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 class="text-truncate"><?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>
@@ -382,8 +399,8 @@ if ($_SESSION["userId"] <> "") {
                                 <div id="toApprove" class="tab-content">
                                     <!-- Content for "To Approve" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
-                                            <tr>
+                                        <thead>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -416,7 +433,7 @@ if ($_SESSION["userId"] <> "") {
                                                             ?>
                                                             <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 class="text-truncate"><?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>
@@ -441,8 +458,8 @@ if ($_SESSION["userId"] <> "") {
                                 <div id="toShip" class="tab-content">
                                     <!-- Content for "To Ship" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
-                                            <tr>
+                                        <thead>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -475,7 +492,7 @@ if ($_SESSION["userId"] <> "") {
                                                             ?>
                                                             <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 class="text-truncate"><?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>
@@ -500,8 +517,8 @@ if ($_SESSION["userId"] <> "") {
                                 <div id="toReceive" class="tab-content">
                                     <!-- Content for "To Receive" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
-                                            <tr>
+                                        <thead>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -534,7 +551,7 @@ if ($_SESSION["userId"] <> "") {
                                                             ?>
                                                             <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 class="text-truncate"><?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>
@@ -562,8 +579,8 @@ if ($_SESSION["userId"] <> "") {
                                 <div id="toRefund" class="tab-content">
                                     <!-- Content for "To Refund" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
-                                            <tr>
+                                        <thead>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -596,7 +613,7 @@ if ($_SESSION["userId"] <> "") {
                                                             ?>
                                                             <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 class="text-truncate"><?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>
@@ -624,8 +641,8 @@ if ($_SESSION["userId"] <> "") {
                                 <div id="returnComplete" class="tab-content">
                                     <!-- Content for "Return Complete" tab -->
                                     <table class="table ec-table">
-                                        <thead class="theadTitle">
-                                            <tr>
+                                        <thead>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -657,7 +674,7 @@ if ($_SESSION["userId"] <> "") {
                                                             ?>
                                                             <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 class="text-truncate"><?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>
@@ -932,27 +949,33 @@ if ($_SESSION["userId"] <> "") {
 
         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 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="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>`;
+                <div class="row pt-3">
+                    <div class="col-md-6">
+                        <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                            <img 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>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">
+                                <a href="${jsonObject.return_order.image}" target="_blank">
+                                    <img class="prod-img" style="width:50%; height:auto;" src="${jsonObject.return_order.image}" alt="product">
+                                </a>
+                            </li>
+                            <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                        </ul>
+                    </div>
+                </div>`;
         }
 
         if (jsonObject.return_order.status === 'To Ship') {
@@ -961,9 +984,11 @@ if ($_SESSION["userId"] <> "") {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -973,7 +998,11 @@ if ($_SESSION["userId"] <> "") {
                         <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 pl-3">
+                            <a href="${jsonObject.return_order.image}" target="_blank">
+                                <img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
+                            </a>
+                        </li>
                         <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
@@ -986,9 +1015,11 @@ if ($_SESSION["userId"] <> "") {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -998,7 +1029,11 @@ if ($_SESSION["userId"] <> "") {
                         <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 pl-3">
+                            <a href="${jsonObject.return_order.image}" target="_blank">
+                                <img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
+                            </a>
+                        </li>
                         <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
@@ -1011,9 +1046,11 @@ if ($_SESSION["userId"] <> "") {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -1023,7 +1060,11 @@ if ($_SESSION["userId"] <> "") {
                         <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 pl-3">
+                            <a href="${jsonObject.return_order.image}" target="_blank">
+                                <img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
+                            </a>
+                        </li>
                         <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
@@ -1036,9 +1077,11 @@ if ($_SESSION["userId"] <> "") {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -1048,7 +1091,11 @@ if ($_SESSION["userId"] <> "") {
                         <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 pl-3">
+                            <a href="${jsonObject.return_order.image}" target="_blank">
+                                <img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
+                            </a>
+                        </li>
                         <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
diff --git a/vendor-refund-history.php b/vendor-refund-history.php
index a8fd9bb..52efb5a 100644
--- a/vendor-refund-history.php
+++ b/vendor-refund-history.php
@@ -71,13 +71,13 @@ if (is_array($vendorOrderss)) {
         .tab.active {
             background-color: #ffffff;
             /* Set your desired background color for the active tab */
-            color: #ffaa00;
+            color: #3474d4;
             /* Set your desired text color for the active tab */
-            border: 1px solid #ffaa00
+            border: 1px solid #3474d4
             /* Set your desired border color for the active tab */
         }
         .tab {
-            background-color: #ffaa00;
+            background-color: #3474d4;
             color: #ffffff;
             font-family: "Poppins, sans-serif";
             font-weight: 400;
@@ -97,10 +97,27 @@ if (is_array($vendorOrderss)) {
             border: none;
             margin-top: -30px;
         }
-        /* .theadTitle {
-            background-color: #dddddd;
-            padding-top: -90px;
-        } */
+
+        .tableView {
+            td:nth-child(2) {
+            max-width: 250px;
+            }
+            td:nth-child(6) {
+                white-space: nowrap;
+            }
+            td:nth-child(7) {
+                white-space: nowrap;
+            }
+        } 
+
+        .Title {
+            th:nth-child(4) {
+                white-space: nowrap;
+            }
+            th:nth-child(6) {
+                white-space: nowrap;
+            }
+        }
 
         @media only screen and (max-width: 640px) {
             #tableTitle {
@@ -295,11 +312,11 @@ if (is_array($vendorOrderss)) {
                                 </div> -->
 
                                 <!-- 03-26-2024 Stacy added tab for all orders -->
-                                <div id="allRefunds" class="tab-content">
+                                <div id="allRefunds" class="tab-content active">
                                     <!-- Content for "All Refunds" tab -->
                                     <table class="table ec-table">
                                         <thead>
-                                            <tr>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -330,7 +347,7 @@ if (is_array($vendorOrderss)) {
                                                     ?>
                                                     <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 class="text-truncate"><?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>
@@ -354,7 +371,7 @@ if (is_array($vendorOrderss)) {
                                     <!-- Content for "To Approve" tab -->
                                     <table class="table ec-table">
                                         <thead>
-                                            <tr>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -381,19 +398,19 @@ if (is_array($vendorOrderss)) {
                                                     <?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>
+                                                    <tr class="tableView">
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['price']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?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['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 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="updateRefundShipStatus('<?php echo $order['_id']; ?>', '<?php echo $order['return_order']['image']; ?>', '<?php echo $order['return_order']['reason']; ?>')">Approve Refund</a>
+                                                                <a class="btn btn-lg btn-primary" style="white-space: nowrap;" onclick="updateRefundShipStatus('<?php echo $order['_id']; ?>', '<?php echo $order['return_order']['image']; ?>', `<?php echo htmlspecialchars($order['return_order']['reason'], ENT_QUOTES); ?>`)">Approve Refund</a>
                                                             </span>
                                                         </td>
                                                         <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
@@ -411,7 +428,7 @@ if (is_array($vendorOrderss)) {
                                     <!-- Content for "To Ship" tab -->
                                     <table class="table ec-table">
                                         <thead>
-                                            <tr>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -440,7 +457,7 @@ if (is_array($vendorOrderss)) {
                                                     ?>
                                                     <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 class="text-truncate"><?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>
@@ -464,7 +481,7 @@ if (is_array($vendorOrderss)) {
                                     <!-- Content for "To Receive" tab -->
                                     <table class="table ec-table">
                                         <thead>
-                                            <tr>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -490,16 +507,16 @@ if (is_array($vendorOrderss)) {
                                                     <?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>
+                                                    <tr class="tableView">
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><img class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product"></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span class="text-truncate"><?php echo $order['items'][0]['product']['name']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['quantity']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['items'][0]['price']; ?></span></td>
+                                                        <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?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['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 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="updateRefundReceiveStatus('<?php echo $order['_id']; ?>', '<?php echo $order['return_order']['image']; ?>', '<?php echo $order['return_order']['reason']; ?>')">Received</a>
@@ -518,7 +535,7 @@ if (is_array($vendorOrderss)) {
                                     <!-- Content for "To Refund" tab -->
                                     <table class="table ec-table">
                                         <thead>
-                                            <tr>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -546,7 +563,7 @@ if (is_array($vendorOrderss)) {
                                                     ?>
                                                     <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 class="text-truncate"><?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>
@@ -573,7 +590,7 @@ if (is_array($vendorOrderss)) {
                                     <!-- Content for "Return Complete" tab -->
                                     <table class="table ec-table">
                                         <thead>
-                                            <tr>
+                                            <tr class="Title">
                                                 <th scope="col">Image</th>
                                                 <th scope="col">Name</th>
                                                 <th scope="col">Quantity</th>
@@ -601,7 +618,7 @@ if (is_array($vendorOrderss)) {
                                                     ?>
                                                     <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 class="text-truncate"><?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>
@@ -867,7 +884,7 @@ if (is_array($vendorOrderss)) {
                                                     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();
+                                                        location.reload();
 
                                                     } else {
                                                         alert('Failed to update order status');
@@ -973,9 +990,12 @@ if (is_array($vendorOrderss)) {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -985,7 +1005,11 @@ if (is_array($vendorOrderss)) {
                         <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 pl-3">
+                            <a href="${jsonObject.return_order.image}" target="_blank">
+                                <img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
+                            </a>
+                        </li>
                         <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
@@ -998,9 +1022,12 @@ if (is_array($vendorOrderss)) {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -1010,7 +1037,11 @@ if (is_array($vendorOrderss)) {
                         <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 pl-3">
+                            <a href="${jsonObject.return_order.image}" target="_blank">
+                                <img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
+                            </a>
+                        </li>
                         <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
@@ -1023,9 +1054,12 @@ if (is_array($vendorOrderss)) {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -1035,7 +1069,11 @@ if (is_array($vendorOrderss)) {
                         <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 pl-3">
+                            <a href="${jsonObject.return_order.image}" target="_blank">
+                                <img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
+                            </a>
+                        </li>
                         <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
@@ -1048,9 +1086,12 @@ if (is_array($vendorOrderss)) {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -1060,7 +1101,11 @@ if (is_array($vendorOrderss)) {
                         <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 pl-3">
+                            <a href="${jsonObject.return_order.image}" target="_blank">
+                                <img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
+                            </a>
+                        </li>
                         <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
@@ -1073,9 +1118,12 @@ if (is_array($vendorOrderss)) {
                 <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="row pt-3">
                 <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" />
+                    <a href="${jsonObject.items[0].product.product_image}" target="_blank">
+                        <img 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>
@@ -1085,7 +1133,11 @@ if (is_array($vendorOrderss)) {
                         <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 pl-3">
+                            <a href="${jsonObject.return_order.image}" target="_blank">
+                                <img class="prod-img" style="width:50%; height:50%;" src="${jsonObject.return_order.image}" alt="product">
+                            </a>
+                        </li>
                         <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
                     </ul>
                 </div>
-- 
2.40.1


From 6cf3efad4b0cffeea740ef21ae54cd3adb504995 Mon Sep 17 00:00:00 2001
From: Staycie <stacymapano0@gmail.com>
Date: Mon, 8 Apr 2024 18:24:45 +0800
Subject: [PATCH 4/4] edit/delete vendor address

---
 vendor-settings.php | 744 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 582 insertions(+), 162 deletions(-)

diff --git a/vendor-settings.php b/vendor-settings.php
index 0907767..55a579d 100644
--- a/vendor-settings.php
+++ b/vendor-settings.php
@@ -56,11 +56,36 @@ if ($_SESSION["userId"] <> "") {
     <link rel="stylesheet" href="assets/css/style2.css" />
     <link rel="stylesheet" href="assets/css/responsive.css" />
 
+    <!-- FONTAWESOME -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
     <!-- Background css -->
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/select2@latest/dist/css/select2.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+    <style>
+        #edit_modal .cover-upload:after{
+            background-color: orange;
+        }
+        .ec-user-account .ec-vendor-block-bg {
+            width: 100%;
+            height: 200px;
+            background-image: none;
+            background-size: cover;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-blend-mode: overlay;
+            background-color: rgba(0, 0, 0, 0.6);
+            border-radius: 5px;
+        }
+
+        #editDelete:hover i{
+            color: #ffaa00;
+            cursor: pointer;
+        }
+    </style>
 </head>
 
 <body class="shop_page">
@@ -280,7 +305,8 @@ if ($_SESSION["userId"] <> "") {
                         <!-- <?php var_dump($vendorData) ?> -->
                             <?php foreach ($vendorLoginIdjson['results'] as $vendor_index => $vendor) { ?>
                                 <?php foreach ($vendor['address'] as $address_index => $address) { ?>
-                                    <div class="card mb-3">
+                                    <!-- added id -->
+                                    <div class="card mb-3" id="form-check-<?php echo $address_index ?>">
                                         <div class="card-body">
                                             <div class="selectCon">
                                                 <div class="selectWrap" style="display: flex; justify-content: center; align-items: center; width: 50%;">
@@ -290,7 +316,7 @@ if ($_SESSION["userId"] <> "") {
                                                     </label>
                                                 </div>
 
-                                                <div class="selectWrap" style="display: flex; justify-content: center; align-items: center; width: 50%;">
+                                                <div class="selectWrap" style="display: flex; justify-content: center; align-items: center; width: 50%; margin-left:-20px;">
                                                     <input type="radio" style="padding-left: 0px !important; margin: 0px 0px !important;" name="selectedShippingAddress[<?php echo $vendor_index; ?>]" id="shipping_address_<?php echo $vendor_index; ?>_<?php echo $address_index; ?>" value="<?php echo $vendor_index; ?>_<?php echo $address_index; ?>" class="form-check-input" onchange="updateAddressShipping('<?php echo $vendor['_id']; ?>', <?php echo $address_index; ?>, true)" <?php echo $address["shipping"] ? 'checked' : ''; ?>>
                                                     <label class="form-check-label" style="margin: 0px 10px !important;" for="shipping_address_<?php echo $vendor_index; ?>_<?php echo $address_index; ?>">
                                                         Shipping Address
@@ -299,9 +325,25 @@ if ($_SESSION["userId"] <> "") {
                                             </div>
 
 
+                                            <!-- Stacy modified this block of code -->
                                             <div class="container">
                                                 <div class="row">
                                                     <div class="col-md-12 mx-auto"> <!-- Adjust the column size as needed -->
+
+                                                        <div id="editDelete" style="display:flex; float:right; width:20px; margin-right:-10px;" > 
+                                                        <?php
+                                                        $address['id'] =$address_index;
+                                                        $jsonAddress = json_encode($address)?>
+                                                            <a href="javascript:0" data-bs-toggle="modal" data-value=' <?php echo $jsonAddress; ?>' data-bs-target="#thirdModal">
+                                                            <i class="fa-regular fa-pen-to-square" style="font-size:15px; float:right;"></i></a>
+                                                            <!-- <i class="fa-regular fa-trash-can" style="font-size:15px; float:right;"></i> -->
+                                                        </div>
+                                                        <div id="editDelete" style="display:flex; float:right; width:20px; margin-top:20px; margin-right:-20px; margin-top:30px;"> 
+                                                            <!-- <i class="fa-solid fa-pen" style="font-size:15px; float:right;"></i></a> -->
+                                                            <i onclick="deleteAddress('<?php echo $vendor['_id']; ?>', <?php echo $address_index; ?>, true)"
+                                                                class="fa-regular fa-trash-can" style="font-size:15px; float:right;"></i>
+                                                        </div>
+
                                                         <label class="form-check-label" for="address_<?php echo $vendor_index; ?>_<?php echo $address_index; ?>">
                                                             <?php echo $address['first_name']; ?> <?php echo $address['last_name']; ?><br>
                                                             <?php echo $address['address_1']; ?> <?php echo $address['address_2']; ?>
@@ -309,6 +351,7 @@ if ($_SESSION["userId"] <> "") {
                                                             <?php echo $address['province']; ?> <?php echo $address['country']; ?><br>
                                                             Phone: <?php echo $address['phone']; ?>
                                                         </label>
+
                                                     </div>
                                                 </div>
                                             </div>
@@ -323,6 +366,7 @@ if ($_SESSION["userId"] <> "") {
             </div>
         </div>
 
+        <!-- secondModal -->
         <div class="modal fade" id="secondModal" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
                 <div class="modal-content">
@@ -379,13 +423,99 @@ if ($_SESSION["userId"] <> "") {
             </div>
         </div>
 
+        <!-- Stacy added thirdModal -->
+        <div class="modal fade" id="thirdModal" tabindex="-1" role="dialog" aria-hidden="true">
+            <div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
+                <div class="modal-content">
+                    <div class="modal-body" style="overflow-y: auto; max-height: 90vh;">
+                        <form>
+                            <div class="form-group">
+
+                                <label for="addressFirstName" class="text-dark font-weight-medium pt-3 mb-2">First Name</label>
+                                <input type="text" class="form-control" 
+                                id="addressFirstName2" 
+                                value="<?php echo $address['first_name']; ?>">
+
+                                <!-- <label for="addressFirstName" class="text-dark font-weight-medium pt-3 mb-2">First Name</label>-->
+                                <input type="hidden" class="form-control" id="addressId" >
+                            </div>
+                            <div class="form-group">
+
+                                <label for="addressLastName" class="text-dark font-weight-medium pt-3 mb-2">Last Name</label>
+                                <input type="text" class="form-control" id="addressLastName2" value="<?php echo $address['last_name']; ?>">
+                                <!-- <label for="addressLastName" class="text-dark font-weight-medium pt-3 mb-2">Last Name</label>
+                                <input type="text" class="form-control" id="addressLastName"> -->
+                            </div>
+                            <div class="form-group">
+
+                                <label for="addressContact" class="text-dark font-weight-medium pt-3 mb-2">Contact Number</label>
+                                <input type="text" class="form-control" id="addressContact2" value="<?php echo $address['phone']; ?>">
+
+                                
+                                <!-- <label for="addressContact" class="text-dark font-weight-medium pt-3 mb-2">Contact Number</label>
+                                <input type="number" class="form-control" id="addressContact"> -->
+                            </div>
+                            <div class="form-group">
+
+                                <label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2">Building,Number</label>
+                                <input type="text" class="form-control" id="addressBuilding2" value="<?php echo $address['address_1']; ?>">
+
+                                <!-- <label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2"> Building,Number </label>
+                                <input type="text" class="form-control" id="addressBuilding"> -->
+                            </div>
+                            <div class="form-group">
+
+                                <label for="addressStreet" class="text-dark font-weight-medium pt-3 mb-2">Street </label>
+                                <input type="text" class="form-control" id="addressStreet2" value="<?php echo $address['address_2']; ?>">
+
+                                <!-- <label for="addressStreet" class="text-dark font-weight-medium pt-3 mb-2"> Street </label>
+                                <input type="text" class="form-control" id="addressStreet"> -->
+                            </div>
+                            <div class="form-group">
+
+                                <label for="provinceSelect2">Province</label>
+                                <select class="form-select" id="provinceSelect2">
+                                    <option id="provinceSelect2Opt"  value="<?php echo $address['province']; ?>" >Select Province</option>
+                                </select>
+
+                                <!-- <label for="provinceSelect">Province</label>
+                                <select class="form-select" id="provinceSelect">
+                                    <option value="" disabled selected hidden>Select Province</option>
+                                </select> -->
+                            </div>
+                            <div class="form-group">
+                                <label for="citySelect2">Municipality/City</label>
+                                <select class="form-select" id="citySelect2" required>
+                                    <option value="" id="citySelect2Opt"  selected hidden>Select Municipality/City</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="barangaySelect2">Barangay</label>
+                                <select class="form-select" id="barangaySelect2" required>
+                                    <option value="" id="barangaySelect2Opt"  selected hidden>Select Barangay</option>
+                                </select>
+                            </div>
+                            <div class="form-group">
+                                <label for="addressCountry2" class="text-dark font-weight-medium pt-3 mb-2">Country</label>
+                                <input type="text" class="form-control" id="addressCountry2">
+                            </div>
+                            <button type="button" class="btn btn-primary" id="submitBtn2">Submit</button>
+                            
+                        </form>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+        <!-- Bank -->
         <div class="modal fade" id="vendorBankModal" tabindex="-1" role="dialog" aria-hidden="true">
             <div class="modal-dialog modal-dialog-centered modal-sm" role="document" style="max-width: 800px;">
                 <div class="modal-content">
                     <div class="modal-body" style="overflow-y: auto; max-height: 90vh;">
                         <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#secondBankModal">Add New Bank</button>
 
-                        <!-- Display a list of addresses and let the user choose -->
+                        <!-- Display a list of banks and let the user choose -->
                         <form id="BankForm">
                         <!-- <?php var_dump($vendorData) ?> -->
                             <?php foreach ($vendorLoginIdjson['results'] as $vendor_index => $vendor) { ?>
@@ -495,6 +625,208 @@ if ($_SESSION["userId"] <> "") {
                 });
             }
         </script>
+
+
+        <script>
+            // function for deleting address
+            const vendorid = `<?php echo $_SESSION["LoggedInVendorId"]; ?>`;
+            function deleteAddress(vendorid, addressIndex) {
+                fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid)
+                .then(response => response.json())
+                .then(data => {
+                    let existingAddresses = data.address || [];
+                    if (addressIndex >= 0 && addressIndex < existingAddresses.length) {
+                        existingAddresses.splice(addressIndex, 1);
+                        fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                address: existingAddresses
+                            }),
+                        })
+                        .then(response => {
+                            if (response.ok) {
+                                location.reload();
+                                // filter the delete action
+                                document.getElementById('form-check-' + addressIndex).remove();
+                            } else {
+                                console.error('Failed to submit data');
+                                alert('Failed to submit data');
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                            alert('Error submitting data');
+                        });
+                    } else {
+                        console.log("Invalid address index.");
+                    }
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    alert('Error fetching vendor data');
+                });
+            }
+        </script>
+
+        <script>
+            // added for thirdModal
+
+            $('#thirdModal').on('shown.bs.modal', function (event) {
+ 
+            var jsonString = $(event.relatedTarget).data('value');
+            
+            var jsonObject = JSON.parse(jsonString);
+            console.log(jsonObject)
+
+            // document.getElementById("addressFirstName2").value('mmmm');
+            //  $('#addressFirstName2').setAttribute('value','My default value');
+            
+            // shows inputed data by the vendor
+            document.querySelector('input[id="addressFirstName2"]').value = jsonObject.first_name;
+            document.querySelector('input[id="addressLastName2"]').value = jsonObject.last_name;
+            document.querySelector('input[id="addressContact2"]').value = jsonObject.phone;
+            document.querySelector('input[id="addressBuilding2"]').value = jsonObject.address_1;
+            document.querySelector('input[id="addressStreet2"]').value = jsonObject.address_2;
+            document.querySelector('option[id="provinceSelect2Opt"]').text = jsonObject.province;
+            document.querySelector('option[id="provinceSelect2Opt"]').value = jsonObject.province;
+
+            document.querySelector('option[id="citySelect2Opt"]').text = jsonObject.city;
+            document.querySelector('option[id="citySelect2Opt"]').value = jsonObject.city;
+
+            document.querySelector('option[id="barangaySelect2Opt"]').text = jsonObject.barangay;
+            document.querySelector('option[id="barangaySelect2Opt"]').value = jsonObject.barangay;
+
+            document.querySelector('input[id="addressCountry2"]').value = jsonObject.country;
+            document.querySelector('input[id="addressId"]').value = jsonObject.id;
+
+
+
+            console.log('id ' + jsonObject.id)
+            const provinceSelect = $('#provinceSelect2'); // Use jQuery to select the element
+            const citySelect = $('#citySelect2'); // Use jQuery to select the element
+            const barangaySelect = $('#barangaySelect2'); // Use jQuery to select the element
+
+            // Initialize Select2 on the provinceSelect, citySelect, and barangaySelect elements
+            provinceSelect.select2({
+                dropdownParent: $('#thirdModal'),
+                containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
+            });
+
+            citySelect.select2({
+                dropdownParent: $('#thirdModal'),
+                containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
+            });
+            barangaySelect.select2({
+                dropdownParent: $('#thirdModal'),
+                containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
+            });
+
+            // Fetch provinces data
+            fetch('https://psgc.gitlab.io/api/provinces')
+                .then(response => {
+                    if (response.ok) {
+                        return response.json();
+                    } else {
+                        console.error('Failed to fetch provinces');
+                        throw new Error('Failed to fetch provinces');
+                    }
+                })
+                .then(provincesData => {
+                    // Iterate through the provinces data and add options
+                    provincesData.forEach(province => {
+                        const option = new Option(province.name, province.code);
+                        provinceSelect.append(option);
+                    });
+
+                    // Add an extra option manually
+                    const extraOption = new Option('Metro Manila', '130000000');
+                    provinceSelect.append(extraOption);
+
+                    // Add event listener to provinceSelect
+                    provinceSelect.on('change', function() {
+                        // Clear existing options in citySelect and barangaySelect
+                        citySelect.html('<option value="" disabled selected hidden>Select City</option>');
+                        barangaySelect.html('<option value="" disabled selected hidden>Select Barangay</option>');
+
+                        // Fetch and update cities/municipalities based on the selected province
+                        updateCities();
+                    });
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                });
+
+            // Function to update city/municipality options based on the selected province
+            function updateCities() {
+                const selectedProvinceCode = provinceSelect.val(); // Use val() to get the selected value with Select2
+                if (selectedProvinceCode) {
+                    let citiesEndpoint;
+                    if (selectedProvinceCode === '130000000') {
+                        // Check if Metro Manila is selected
+                        citiesEndpoint = 'https://psgc.gitlab.io/api/regions/130000000/cities-municipalities/';
+                    } else {
+                        citiesEndpoint = `https://psgc.gitlab.io/api/provinces/${selectedProvinceCode}/cities-municipalities/`;
+                    }
+
+                    fetch(citiesEndpoint)
+                        .then(response => {
+                            if (response.ok) {
+                                return response.json();
+                            } else {
+                                console.error('Failed to fetch cities/municipalities');
+                                throw new Error('Failed to fetch cities/municipalities');
+                            }
+                        })
+                        .then(citiesData => {
+                            // Iterate through the cities data and add options
+                            citiesData.forEach(city => {
+                                const option = new Option(city.name, city.code);
+                                citySelect.append(option);
+                            });
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                        });
+                }
+            }
+
+            // Add event listener to citySelect
+            citySelect.on('change', function() {
+                // Clear existing options in barangaySelect
+                barangaySelect.html('<option value="" disabled selected hidden>Select Barangay</option>');
+
+                // Fetch and update barangays based on the selected city/municipality
+                const selectedCityCode = citySelect.val();
+                if (selectedCityCode) {
+                    fetch(`https://psgc.gitlab.io/api/cities-municipalities/${selectedCityCode}/barangays/`)
+                        .then(response => {
+                            if (response.ok) {
+                                return response.json();
+                            } else {
+                                console.error('Failed to fetch barangays');
+                                throw new Error('Failed to fetch barangays');
+                            }
+                        })
+                        .then(barangaysData => {
+                            // Iterate through the barangays data and add options
+                            barangaysData.forEach(barangay => {
+                                const option = new Option(barangay.name, barangay.code);
+                                barangaySelect.append(option);
+                            });
+                        })
+                        .catch(error => {
+                            console.error('Error:', error);
+                        });
+                }
+            });
+
+            // document.querySelector('input[id="addressFirstName2"]').value = jsonObject.last_name;
+            });
+        </script>
+
         <script>
             const vendorid = `<?php echo $_SESSION["LoggedInVendorId"]; ?>`;
             document.addEventListener('DOMContentLoaded', function() {
@@ -606,6 +938,7 @@ if ($_SESSION["userId"] <> "") {
 
 
                 $('#submitBtn').on('click', function() {
+                    console.log('clickkkkkkkk')
                     fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid)
                         .then(response => response.json())
                         .then(data => {
@@ -663,6 +996,93 @@ if ($_SESSION["userId"] <> "") {
 
             });
 
+
+            // Added function for editing the address
+            
+            $('#submitBtn2').on('click', function() {
+            // function updateAddress(){
+            // Retrieve existing addresses from the API
+            // fetch('https://api.obanana.shop/api/v1/customers/65482e8d209ff8d348bd30fd')
+            fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid)
+                .then(response => response.json())
+                .then(data => {
+                    // Get the existing addresses array
+                    const existingAddresses = data.address || [];
+
+                    // Get the new address details
+                    const firstName = $('#addressFirstName2').val();
+                    const lastName = $('#addressLastName2').val();
+                    const contact = $('#addressContact2').val();
+                    const buildingNumber = $('#addressBuilding2').val();
+                    const street = $('#addressStreet2').val();
+                    const province = $('#provinceSelect2 :selected').text();
+                    const city = $('#citySelect2 :selected').text();
+                    const barangay = $('#barangaySelect2 :selected').text();
+                    const country = $('#addressCountry2').val();
+                    const id = $('#addressId').val();
+                    console.log('clickkkkkkkk'+ id)
+
+
+                    // Create a new address object
+                    const newAddress = {
+                        first_name: firstName,
+                        last_name: lastName,
+                        phone: contact,
+                        address_1: buildingNumber,
+                        address_2: street,
+                        city: city,
+                        province: province,
+                        barangay: barangay,
+                        country: country,
+                    };
+
+                    // Add the new address to the existing addresses
+                    // existingAddresses.push(newAddress);
+                    
+                //    var newAddresses= existingAddresses.filter((e,i)=>i!==id)
+                    let existingAddress = existingAddresses
+
+                    existingAddress[id]={
+                        first_name: firstName,
+                        last_name: lastName,
+                        phone: contact,
+                        address_1: buildingNumber,
+                        address_2: street,
+                        city: city,
+                        province: province,
+                        barangay: barangay,
+                        country: country,
+                    };
+                    console.log( existingAddress[id])
+                    // Make a PATCH request to update the addresses array
+                    return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
+                        method: 'PATCH',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            address: existingAddress
+                        }),
+                    });
+                })
+                .then(response => {
+                    if (response.ok) {
+                        // Handle success (e.g., show a success message)
+                        location.reload();
+                    } else {
+                        // Handle error
+                        console.error('Failed to submit data');
+                        alert('Failed to submit data');
+                    }
+                })
+                .catch(error => {
+                    // Handle network or other errors
+                    console.error('Error:', error);
+                    alert('Error submitting data');
+                });
+            });
+
+
             $('#submitBankBtn').on('click', function() {
 
                     fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid)
@@ -754,7 +1174,7 @@ if ($_SESSION["userId"] <> "") {
                     if (!updateResponse.ok) {
                         throw new Error(`Failed to update address: ${updateResponse.status}`);
                     }
-                    console.log(`Address updated successfully for customer ${vendorid}`);
+                    console.log(`Address updated successfully for vendor ${vendorid}`);
                 } catch (error) {
                     console.error('Error updating address:', error.message);
                 }
@@ -771,7 +1191,7 @@ if ($_SESSION["userId"] <> "") {
                     });
 
                     if (!response.ok) {
-                        throw new Error(`Failed to fetch customer data: ${response.status}`);
+                        throw new Error(`Failed to fetch vendor data: ${response.status}`);
                     }
                     // console.log(customerId + " ." + addressIndex + "." +isBilling + "." + isShipping)
                     const vendorsData = await response.json();
@@ -828,7 +1248,7 @@ if ($_SESSION["userId"] <> "") {
                         sProvinceElement.textContent = vendorsData.address[addressIndex].province;
                         sCountryElement.textContent = vendorsData.address[addressIndex].country;
                     }
-                    console.log(`Address updated successfully for customer ${vendorid}`);
+                    console.log(`Address updated successfully for vendor ${vendorid}`);
                 } catch (error) {
                     console.error('Error updating address:', error.message);
                 }
@@ -937,188 +1357,188 @@ if ($_SESSION["userId"] <> "") {
                             </div>
                             <script>
                                function uploadVendorProfileImage() {
-    var vendorid = '<?php echo $_SESSION["LoggedInVendorId"] ?>';
-    var file = document.getElementById('imageUpload').files[0];
-    if (file) {
-        const reader = new FileReader();
+                                    var vendorid = '<?php echo $_SESSION["LoggedInVendorId"] ?>';
+                                    var file = document.getElementById('imageUpload').files[0];
+                                    if (file) {
+                                        const reader = new FileReader();
 
-        reader.onload = function(event) {
-            const img = new Image();
-            img.onload = function() {
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                const maxWidth = 1200;
-                const maxHeight = 1000;
-                const aspectRatio = img.width / img.height;
-                let newWidth = img.width;
-                let newHeight = img.height;
+                                        reader.onload = function(event) {
+                                            const img = new Image();
+                                            img.onload = function() {
+                                                const canvas = document.createElement('canvas');
+                                                const ctx = canvas.getContext('2d');
+                                                const maxWidth = 1200;
+                                                const maxHeight = 1000;
+                                                const aspectRatio = img.width / img.height;
+                                                let newWidth = img.width;
+                                                let newHeight = img.height;
 
-                if (img.width > maxWidth) {
-                    newWidth = maxWidth;
-                    newHeight = newWidth / aspectRatio;
-                }
+                                                if (img.width > maxWidth) {
+                                                    newWidth = maxWidth;
+                                                    newHeight = newWidth / aspectRatio;
+                                                }
 
-                if (newHeight > maxHeight) {
-                    newHeight = maxHeight;
-                    newWidth = newHeight * aspectRatio;
-                }
+                                                if (newHeight > maxHeight) {
+                                                    newHeight = maxHeight;
+                                                    newWidth = newHeight * aspectRatio;
+                                                }
 
-                canvas.width = newWidth;
-                canvas.height = newHeight;
-                ctx.drawImage(img, 0, 0, newWidth, newHeight);
+                                                canvas.width = newWidth;
+                                                canvas.height = newHeight;
+                                                ctx.drawImage(img, 0, 0, newWidth, newHeight);
 
-                canvas.toBlob((blob) => {
-                    const resizedFile = new File([blob], file.name, {
-                        type: 'image/jpeg'
-                    });
+                                                canvas.toBlob((blob) => {
+                                                    const resizedFile = new File([blob], file.name, {
+                                                        type: 'image/jpeg'
+                                                    });
 
-                    var formData = new FormData();
-                    formData.append('image_id', vendorid);
-                    formData.append('category', 'vendor');
-                    formData.append('image', resizedFile);
+                                                    var formData = new FormData();
+                                                    formData.append('image_id', vendorid);
+                                                    formData.append('category', 'vendor');
+                                                    formData.append('image', resizedFile);
 
-                    fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
-                            method: 'POST',
-                            body: formData
-                        })
-                        .then(response => {
-                            if (response.ok) {
-                                return response.json();
-                            } else {
-                                console.error('File upload failed');
-                                throw new Error('File upload failed');
-                            }
-                        })
-                        .then(result => {
-                            const filename = encodeURI(result.filename);
+                                                    fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
+                                                            method: 'POST',
+                                                            body: formData
+                                                        })
+                                                        .then(response => {
+                                                            if (response.ok) {
+                                                                return response.json();
+                                                            } else {
+                                                                console.error('File upload failed');
+                                                                throw new Error('File upload failed');
+                                                            }
+                                                        })
+                                                        .then(result => {
+                                                            const filename = encodeURI(result.filename);
 
-                            const payload = {
-                                vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
-                            };
+                                                            const payload = {
+                                                                vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
+                                                            };
 
-                            console.log('Payload:', payload);
+                                                            console.log('Payload:', payload);
 
-                            return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
-                                method: 'PATCH',
-                                headers: {
-                                    'Content-Type': 'application/json'
-                                },
-                                body: JSON.stringify(payload)
-                            });
-                        })
-                        .then(secondResponse => {
-                            if (secondResponse.ok) {
-                                console.log('Second request successful');
-                                location.reload();
-                            } else {
-                                console.error('Second request failed');
-                            }
-                        })
-                        .catch(error => {
-                            console.error('Error during fetch:', error);
-                        });
-                }, 'image/jpeg');
-            };
+                                                            return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
+                                                                method: 'PATCH',
+                                                                headers: {
+                                                                    'Content-Type': 'application/json'
+                                                                },
+                                                                body: JSON.stringify(payload)
+                                                            });
+                                                        })
+                                                        .then(secondResponse => {
+                                                            if (secondResponse.ok) {
+                                                                console.log('Second request successful');
+                                                                location.reload();
+                                                            } else {
+                                                                console.error('Second request failed');
+                                                            }
+                                                        })
+                                                        .catch(error => {
+                                                            console.error('Error during fetch:', error);
+                                                        });
+                                                }, 'image/jpeg');
+                                            };
 
-            img.src = event.target.result;
-        };
+                                            img.src = event.target.result;
+                                        };
 
-        reader.readAsDataURL(file);
-    }
-}
+                                        reader.readAsDataURL(file);
+                                    }
+                                }
 
-function uploadProfileBanner() {
-    var vendorid = '<?php echo $_SESSION["LoggedInVendorId"] ?>';
-    var file = document.getElementById('thumbUpload01').files[0];
-    if (file) {
-        const reader = new FileReader();
+                                function uploadProfileBanner() {
+                                    var vendorid = '<?php echo $_SESSION["LoggedInVendorId"] ?>';
+                                    var file = document.getElementById('thumbUpload01').files[0];
+                                    if (file) {
+                                        const reader = new FileReader();
 
-        reader.onload = function(event) {
-            const img = new Image();
-            img.onload = function() {
-                const canvas = document.createElement('canvas');
-                const ctx = canvas.getContext('2d');
-                const maxWidth = 1200;
-                const maxHeight = 1000;
-                const aspectRatio = img.width / img.height;
-                let newWidth = img.width;
-                let newHeight = img.height;
+                                        reader.onload = function(event) {
+                                            const img = new Image();
+                                            img.onload = function() {
+                                                const canvas = document.createElement('canvas');
+                                                const ctx = canvas.getContext('2d');
+                                                const maxWidth = 1200;
+                                                const maxHeight = 1000;
+                                                const aspectRatio = img.width / img.height;
+                                                let newWidth = img.width;
+                                                let newHeight = img.height;
 
-                if (img.width > maxWidth) {
-                    newWidth = maxWidth;
-                    newHeight = newWidth / aspectRatio;
-                }
+                                                if (img.width > maxWidth) {
+                                                    newWidth = maxWidth;
+                                                    newHeight = newWidth / aspectRatio;
+                                                }
 
-                if (newHeight > maxHeight) {
-                    newHeight = maxHeight;
-                    newWidth = newHeight * aspectRatio;
-                }
+                                                if (newHeight > maxHeight) {
+                                                    newHeight = maxHeight;
+                                                    newWidth = newHeight * aspectRatio;
+                                                }
 
-                canvas.width = newWidth;
-                canvas.height = newHeight;
-                ctx.drawImage(img, 0, 0, newWidth, newHeight);
+                                                canvas.width = newWidth;
+                                                canvas.height = newHeight;
+                                                ctx.drawImage(img, 0, 0, newWidth, newHeight);
 
-                canvas.toBlob((blob) => {
-                    const resizedFile = new File([blob], file.name, {
-                        type: 'image/jpeg'
-                    });
+                                                canvas.toBlob((blob) => {
+                                                    const resizedFile = new File([blob], file.name, {
+                                                        type: 'image/jpeg'
+                                                    });
 
-                    var formData = new FormData();
-                    formData.append('image_id', vendorid + '_banner');
-                    formData.append('category', 'vendor');
-                    formData.append('image', resizedFile);
+                                                    var formData = new FormData();
+                                                    formData.append('image_id', vendorid + '_banner');
+                                                    formData.append('category', 'vendor');
+                                                    formData.append('image', resizedFile);
 
-                    fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
-                            method: 'POST',
-                            body: formData
-                        })
-                        .then(response => {
-                            if (response.ok) {
-                                return response.json();
-                            } else {
-                                console.error('File upload failed');
-                                throw new Error('File upload failed');
-                            }
-                        })
-                        .then(result => {
-                            const filename = encodeURI(result.filename);
-                            // const filename = result.filename;
+                                                    fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
+                                                            method: 'POST',
+                                                            body: formData
+                                                        })
+                                                        .then(response => {
+                                                            if (response.ok) {
+                                                                return response.json();
+                                                            } else {
+                                                                console.error('File upload failed');
+                                                                throw new Error('File upload failed');
+                                                            }
+                                                        })
+                                                        .then(result => {
+                                                            const filename = encodeURI(result.filename);
+                                                            // const filename = result.filename;
 
-                            const payload = {
-                                vendor_banner: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
+                                                            const payload = {
+                                                                vendor_banner: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
 
-                            };
+                                                            };
 
-                            console.log('Payload:', payload);
+                                                            console.log('Payload:', payload);
 
-                            return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
-                                method: 'PATCH',
-                                headers: {
-                                    'Content-Type': 'application/json'
-                                },
-                                body: JSON.stringify(payload)
-                            });
-                        })
-                        .then(secondResponse => {
-                            if (secondResponse.ok) {
-                                console.log('Second request successful');
-                                location.reload();
-                            } else {
-                                console.error('Second request failed');
-                            }
-                        })
-                        .catch(error => {
-                            console.error('Error during fetch:', error);
-                        });
-                }, 'image/jpeg');
-            };
+                                                            return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
+                                                                method: 'PATCH',
+                                                                headers: {
+                                                                    'Content-Type': 'application/json'
+                                                                },
+                                                                body: JSON.stringify(payload)
+                                                            });
+                                                        })
+                                                        .then(secondResponse => {
+                                                            if (secondResponse.ok) {
+                                                                console.log('Second request successful');
+                                                                location.reload();
+                                                            } else {
+                                                                console.error('Second request failed');
+                                                            }
+                                                        })
+                                                        .catch(error => {
+                                                            console.error('Error during fetch:', error);
+                                                        });
+                                                }, 'image/jpeg');
+                                            };
 
-            img.src = event.target.result;
-        };
+                                            img.src = event.target.result;
+                                        };
 
-        reader.readAsDataURL(file);
-    }
-}
+                                        reader.readAsDataURL(file);
+                                    }
+                                }
 
                             </script>
                             <div class="ec-vendor-upload-detail">
-- 
2.40.1