diff --git a/header.php b/header.php
index 4df2f85..05c060e 100644
--- a/header.php
+++ b/header.php
@@ -689,11 +689,11 @@ if ($_SESSION["userId"] <> "") {
             </div>
         </div>
         <script>
+        let userDataGlobal = null;
+        let globalQuantity = null;
+        let globalProductId = null;
+        let globalProduct = null;
         document.addEventListener("DOMContentLoaded", function() {
-            let userDataGlobal = null;
-            let globalQuantity = null;
-            let globalProductId = null;
-            let globalProduct = null;
 
 
             let globalVariation = null;
@@ -945,7 +945,7 @@ if ($_SESSION["userId"] <> "") {
 
 
                                 const firstImageUrl = getFirstImageUrl(productData?.images);
-                                console.log(productData)
+                                // console.log(productData)
                                 const productCon = document.createElement('div');
                                 productCon.className = 'product-con-wrap';
                                 productCon.innerHTML =
diff --git a/product-left-sidebar.php b/product-left-sidebar.php
index 77b3048..32dd56a 100644
--- a/product-left-sidebar.php
+++ b/product-left-sidebar.php
@@ -66,7 +66,7 @@ if (isset($_GET['id'])) {
     <meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
 
     <!-- css Icon Font -->
-     <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
+    <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -530,6 +530,7 @@ if (isset($_GET['id'])) {
 
                                         function selectVariation(variation) {
                                             globalVariation = variation;
+                                            displayReviews();
                                             console.log("Variation selected: ", variation);
 
                                             document.getElementById("productDescription").innerHTML = variation
@@ -1623,10 +1624,13 @@ if (isset($_GET['id'])) {
                             .comments_wrap {
                                 height: 100%;
                                 width: 100%;
+                                max-height: 800px;
+                                overflow-y: scroll;
                                 border-radius: 5px;
                                 display: flex;
                                 justify-content: center;
                                 align-items: center;
+                                flex-direction: column;
                                 margin: 10px;
 
                             }
@@ -1651,7 +1655,7 @@ if (isset($_GET['id'])) {
 
                             .comment_card {
                                 height: auto;
-                                width: 100%;
+                                width: 90%;
                                 border-radius: 15px;
                                 display: flex;
                                 align-items: center;
@@ -1660,7 +1664,7 @@ if (isset($_GET['id'])) {
                                 border-radius: 10px;
                                 border: 1px solid #eee;
                                 flex-direction: column;
-
+                                margin-top: 5px;
                             }
 
                             .user_info {
@@ -1669,16 +1673,19 @@ if (isset($_GET['id'])) {
 
                                 justify-content: space-between;
                                 align-items: center;
-                                flex-direction: row;
+                                flex-wrap: wrap;
                                 padding: 10px;
                             }
 
+
                             .user_info .left {
                                 display: flex;
                                 width: 70%;
                                 justify-content: flex-start;
                                 align-items: center;
                                 flex-direction: row;
+                                min-width: 300px;
+
                             }
 
                             .user_info .right {
@@ -1686,9 +1693,22 @@ if (isset($_GET['id'])) {
 
                                 justify-content: flex-end;
                                 align-items: center;
-                                flex-direction: row;
+
                             }
 
+                            @media (min-width:768px) {
+                                .user_info {
+                                    flex-direction: row;
+
+                                }
+
+                                .user_name {
+                                    font-size: 16px;
+
+                                }
+                            }
+
+
                             .user_img {
                                 height: 30px;
                                 width: 30px;
@@ -1697,7 +1717,7 @@ if (isset($_GET['id'])) {
                             }
 
                             .user_name {
-                                font-size: 16px;
+                                font-size: 13px;
                                 color: #000;
                                 font-weight: bold;
                                 padding: 10px;
@@ -1714,11 +1734,41 @@ if (isset($_GET['id'])) {
                                 padding: 10px;
                             }
 
-                            .comment_details {}
+                            .comment_details {
+                                width: 100%;
+                            }
 
-                            .comment_text {}
+                            .comment_text {
+                                text-align: left;
+                                width: 100%;
+                                padding: 0px 10px;
+                            }
 
-                            .comment_media {}
+                            .comment_media {
+                                display: flex;
+                                width: 100%;
+                                justify-content: flex-start;
+                                align-items: center;
+                                /* flex-direction: row;*/
+                                flex-wrap: wrap;
+                            }
+
+                            .comment_media img {
+                                height: 150px;
+                                width: 150px;
+                                object-fit: cover;
+                                margin: 1px 2px;
+                                max-width: 200px;
+                            }
+
+                            .comment_media video {
+                                height: 150px;
+                                width: 150px;
+                                object-fit: cover;
+                                margin: 1px 2px;
+                                max-width: 200px;
+
+                            }
 
                             .comment_footer {
                                 width: 100%;
@@ -1729,11 +1779,12 @@ if (isset($_GET['id'])) {
 
                             <div class="rating_con">
                                 <div class="comments_con">
-                                    <p class="comment_header">
+                                    <p class="comment_header" id="comment_header">
                                         Total Reviews: 20
                                     </p>
-                                    <ul class="comments_wrap">
-                                        <li class="comment_card_wrap">
+                                    <ul class="comments_wrap" id="comments_wrap">
+
+                                        <!-- <li class="comment_card_wrap">
                                             <div class="comment_card">
                                                 <div class="user_info">
                                                     <div class="left">
@@ -1776,7 +1827,7 @@ if (isset($_GET['id'])) {
 
                                                 </div>
                                             </div>
-                                        </li>
+                                        </li> -->
                                     </ul>
                                 </div>
                                 <!-- <div class="comment_footer">
@@ -1800,6 +1851,112 @@ if (isset($_GET['id'])) {
 
 
                     <script>
+                    document.addEventListener("DOMContentLoaded", function() {
+                        displayReviews();
+                        async function fetchProductData() {
+
+                            let response = null
+                            try {
+
+                                response = await fetch(
+                                    'https://api.obanana.shop/api/v1/products/' + globalProductId
+
+                                );
+
+
+
+                                const prodData = await response.json();
+                                return prodData;
+                            } catch (error) {
+                                console.error('Error fetching user data:', error);
+                                return null;
+                            }
+                        }
+                        async function displayReviews() {
+                            const prodData = await fetchProductData();
+                            const reviewList = document.getElementById('comments_wrap');
+                            const header = document.getElementById('comment_header');
+                            header.innerText = `Total Reviews: ${prodData?.ratings?.length??0}`
+
+                            if (prodData?.ratings?.length > 0) {
+                                for (const rate of prodData?.ratings) {
+                                    const li = document.createElement('li');
+                                    li.classList.add('comment_card_wrap');
+
+                                    // Format the createdAt date
+                                    const formattedDate = new Date(rate?.createdAt).toLocaleDateString(
+                                        'en-US', {
+                                            month: 'short',
+                                            day: 'numeric',
+                                            year: 'numeric',
+                                        });
+
+                                    // Use customer image or fallback to vendor image
+                                    const userImage = rate?.customer_id?.customer_image || rate?.vendor_id
+                                        ?.vendor_image || 'default-image-url.png';
+                                    const userName = rate?.customer_id ?
+                                        `${rate?.customer_id?.first_name} ${rate?.customer_id?.last_name}` :
+                                        `${rate?.vendor_id?.first_name} ${rate?.vendor_id?.last_name}`;
+
+                                    // Generate media content
+                                    let mediaContent = '';
+                                    if (rate?.images?.length > 0) {
+                                        for (const img of rate.images) {
+                                            mediaContent +=
+                                                `<img src="https://api.obanana.shop/images/storage/upload_ratings/${img}" alt=""/>`;
+                                        }
+                                    }
+                                    if (rate?.videos?.length > 0) {
+                                        for (const vid of rate.videos) {
+                                            mediaContent +=
+                                                `<video class="vid-prev" controls><source src="https://api.obanana.shop/images/storage/upload_ratings/${vid}" type="video/mp4"></video>`;
+                                        }
+                                    }
+
+                                    li.innerHTML = `
+                                        <div class="comment_card">
+                                            <div class="user_info">
+                                                <div class="left">
+                                                    <img loading="lazy" class="user_img" src="${userImage}" alt="" />
+                                                    <p class="user_name">${userName}</p>
+                                                    <div class="rate_star">
+                                                        <i class="ecicon eci-star ${parseInt(rate?.rating) >= 1 ? 'fill' : ''}"></i>
+                                                        <i class="ecicon eci-star ${parseInt(rate?.rating) >= 2 ? 'fill' : ''}"></i>
+                                                        <i class="ecicon eci-star ${parseInt(rate?.rating) >= 3 ? 'fill' : ''}"></i>
+                                                        <i class="ecicon eci-star ${parseInt(rate?.rating) >= 4 ? 'fill' : ''}"></i>
+                                                        <i class="ecicon eci-star ${parseInt(rate?.rating) >= 5 ? 'fill' : ''}"></i>
+                                                    </div>
+                                                </div>
+                                                <div class="right">
+                                                    <p class="date_feedback">${formattedDate}</p>
+                                                </div>
+                                            </div>
+                                            <div class="comment_details">
+                                                <p class="comment_text">${rate?.comments ??''}</p>
+                                                <div class="comment_media">
+                                                    ${mediaContent}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    `;
+                                    reviewList.appendChild(li);
+                                }
+                            } else {
+                                const li = document.createElement('li');
+                                li.classList.add('comment_card_wrap');
+
+
+                                li.innerHTML = `<p class="comment_text2">No reviews yet</p>`;
+                                reviewList.appendChild(li);
+
+                            }
+                        }
+
+                    })
+
+
+
+
                     function openTab(tabName) {
                         var i, tabContent, tabButtons;
                         tabContent = document.getElementsByClassName("tab-content");
diff --git a/shop-list-left-sidebar.php b/shop-list-left-sidebar.php
index 8160167..8252779 100644
--- a/shop-list-left-sidebar.php
+++ b/shop-list-left-sidebar.php
@@ -94,7 +94,8 @@ $filteredProducts = [];
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
     <title>oBanana B2B - Elevate Your Business</title>
-    <meta name="keywords" content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
+    <meta name="keywords"
+        content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
     <meta name="description" content="Best ecommerce html template for single and multi vendor store.">
     <meta name="author" content="ashishmaraviya">
 
@@ -104,7 +105,7 @@ $filteredProducts = [];
     <meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
 
     <!-- css Icon Font -->
-     <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
+    <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -125,56 +126,55 @@ $filteredProducts = [];
     <!-- Background css -->
     <link rel="stylesheet" id="bg-switcher-css" href="assets/css/backgrounds/bg-4.css">
     <style>
-        .ec-product-inner .ec-pro-image .ec-pro-actions .add-to-cart {
-            width: 35px;
-            position: absolute;
-            right: 15px;
-            bottom: 36px;
-            margin: 0;
-            padding: 0;
-            font-size: 0;
-            border-radius: 10px 10px 0 0;
-        }
+    .ec-product-inner .ec-pro-image .ec-pro-actions .add-to-cart {
+        width: 35px;
+        position: absolute;
+        right: 15px;
+        bottom: 36px;
+        margin: 0;
+        padding: 0;
+        font-size: 0;
+        border-radius: 10px 10px 0 0;
+    }
 
-        .ec-product-inner .ec-pro-image .ec-pro-actions .wishlist {
-            position: absolute;
-            right: 15px;
-            bottom: 0;
-            border-radius: 0 0 10px 10px;
-        }
+    .ec-product-inner .ec-pro-image .ec-pro-actions .wishlist {
+        position: absolute;
+        right: 15px;
+        bottom: 0;
+        border-radius: 0 0 10px 10px;
+    }
     </style>
     <script>
-       function updateCartItemCount() {
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", "cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", true);
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4 && xhr.status == 200) {
-            var data = xhr.responseText;
-            if (data !== "") {
-                console.log("Data: " + data);
-                document.getElementById("cartItemCount").innerHTML = data;
-                document.getElementById("cartNewItemCount").innerHTML = data;
+    function updateCartItemCount() {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", "cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", true);
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                var data = xhr.responseText;
+                if (data !== "") {
+                    console.log("Data: " + data);
+                    document.getElementById("cartItemCount").innerHTML = data;
+                    document.getElementById("cartNewItemCount").innerHTML = data;
+                }
             }
-        }
-    };
-    xhr.send();
-}
+        };
+        xhr.send();
+    }
 
-function updateWishItemCount() {
-    var xhr = new XMLHttpRequest();
-    xhr.open("GET", "wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", true);
-    xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4 && xhr.status == 200) {
-            var data = xhr.responseText;
-            if (data !== "") {
-                document.getElementById("wishItemCount").innerHTML = data;
-                document.getElementById("wishNewItemCount").innerHTML = data;
+    function updateWishItemCount() {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", "wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", true);
+        xhr.onreadystatechange = function() {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                var data = xhr.responseText;
+                if (data !== "") {
+                    document.getElementById("wishItemCount").innerHTML = data;
+                    document.getElementById("wishNewItemCount").innerHTML = data;
+                }
             }
-        }
-    };
-    xhr.send();
-}
-
+        };
+        xhr.send();
+    }
     </script>
 </head>
 
@@ -253,40 +253,41 @@ function updateWishItemCount() {
                         </div>
                     </div>
                     <!-- Shop Top End -->
-                      <!-- <?php
+                    <!-- <?php
                     //  if (!empty($vendorSearchResult['results'])) : 
                         ?> -->
-                        <div class="shop-pro-content" style="margin-bottom:40px;">
-                            <div class="ec-product-inner">
-                                <h5 class="ec-pro-title">Vendor Search Results</h5>
-                                <!-- "More Vendors" text placed on the top right corner -->
-                                <div style="text-align: right; margin-bottom: 10px;">
-                                    <a href="more-vendors.php" style="text-decoration: none; color: orange; font-weight: bold;">More Vendors></a>
-                                </div>
-                                <div class="row mt-4 vendor-list">
-                          
-                                </div>
+                    <div class="shop-pro-content" style="margin-bottom:40px;">
+                        <div class="ec-product-inner">
+                            <h5 class="ec-pro-title">Vendor Search Results</h5>
+                            <!-- "More Vendors" text placed on the top right corner -->
+                            <div style="text-align: right; margin-bottom: 10px;">
+                                <a href="more-vendors.php"
+                                    style="text-decoration: none; color: orange; font-weight: bold;">More Vendors></a>
+                            </div>
+                            <div class="row mt-4 vendor-list">
+
                             </div>
                         </div>
+                    </div>
                     <!-- <?php 
                     // endif;
                      ?> -->
                     <!-- 02-22-2024 Jun Jihad Vendor Search -->
-                    
+
                     <!-- Shop content Start -->
                     <div class="shop-pro-content">
                         <div class="shop-pro-inner list-view">
-                        <div class="row" id="product-container">
+                            <div class="row" id="product-container">
+
 
-                              
                             </div>
                         </div>
                         <!-- Ec Pagination Start -->
                         <div class="ec-pro-pagination">
-                        <span class="page-indicator"></span>
+                            <span class="page-indicator"></span>
                             <ul class="ec-pro-pagination-inner " id='prod-search-pagination'>
 
-                     
+
                             </ul>
                         </div>
 
@@ -295,131 +296,144 @@ function updateWishItemCount() {
                     <!--Shop content End -->
                 </div>
                 <script>
-    // JavaScript
-    document.addEventListener("DOMContentLoaded", function() {
-        const productsPerPage = 30;
-        let currentPage = 1;
-        let page = currentPage;
-        loadVendors(page); // Initial load of vendor products
-        loadProducts(page); // Initial load of products
-    // JavaScript
-    function filterFunction(checkedCategories, minPrice, maxPrice,products) {
-    var filteredProducts = [];
-    // Filter by category
-    if (checkedCategories.length > 0) {
-     let   filteredProduct= products?.filter((product) => {
-    let categoryF = product?.product?.product_category?.toLowerCase();
-    // console.log('Category (lowercase):', categoryF);
-    let  result =checkedCategories.includes(categoryF)
-    // console.log('Checked Categories:', result);
-    return result; // Return a boolean value indicating whether the category is included
-});
- filteredProducts=filteredProduct
-console.log(filteredProducts);
+                // JavaScript
+                document.addEventListener("DOMContentLoaded", function() {
+                    const productsPerPage = 30;
+                    let currentPage = 1;
+                    let page = currentPage;
+                    loadVendors(page); // Initial load of vendor products
+                    loadProducts(page); // Initial load of products
+                    // JavaScript
+                    function filterFunction(checkedCategories, minPrice, maxPrice, products) {
+                        var filteredProducts = [];
+                        // Filter by category
+                        if (checkedCategories.length > 0) {
+                            let filteredProduct = products?.filter((product) => {
+                                let categoryF = product?.product?.product_category?.toLowerCase();
+                                // console.log('Category (lowercase):', categoryF);
+                                let result = checkedCategories.includes(categoryF)
+                                // console.log('Checked Categories:', result);
+                                return result; // Return a boolean value indicating whether the category is included
+                            });
+                            filteredProducts = filteredProduct
+                            console.log(filteredProducts);
 
-    } else {
-        // If no categories are selected, keep all products
-        filteredProducts = products;
-    }
+                        } else {
+                            // If no categories are selected, keep all products
+                            filteredProducts = products;
+                        }
 
-    // If minPrice or maxPrice is not provided, set them to default values
-    minPriceFinal = minPrice !== '' ?  parseInt(minPrice) : 0;
-    maxPriceFinal = maxPrice !== '' ? parseInt(maxPrice) : Number.MAX_VALUE;
-    console.log(checkedCategories, minPrice,products)
+                        // If minPrice or maxPrice is not provided, set them to default values
+                        minPriceFinal = minPrice !== '' ? parseInt(minPrice) : 0;
+                        maxPriceFinal = maxPrice !== '' ? parseInt(maxPrice) : Number.MAX_VALUE;
+                        console.log(checkedCategories, minPrice, products)
 
-    // Filter by price range
-  // Filter by price range
-if( minPrice !== ''|| maxPrice !== ''){
+                        // Filter by price range
+                        // Filter by price range
+                        if (minPrice !== '' || maxPrice !== '') {
 
-  filteredProducts = filteredProducts.filter(function(product) {
-    // Check if product has a sale price
-    var salePrice = parseInt(product.product.sale_price);
-    var regularPrice = parseInt(product.product.regular_price);
+                            filteredProducts = filteredProducts.filter(function(product) {
+                                // Check if product has a sale price
+                                var salePrice = parseInt(product.product.sale_price);
+                                var regularPrice = parseInt(product.product.regular_price);
 
-    // Check if salePrice and regularPrice are valid numbers
-    
-    // if (isNaN(salePrice) || isNaN(regularPrice)) {
-    //     // One of the prices is not a valid number, use 0 instead
-    //     salePrice = salePrice || 0;
-    //     regularPrice = regularPrice || 0;
-    // }
-    var priceToCheck = salePrice > 0 ? salePrice : regularPrice;
-    // console.log(priceToCheck);
-    return priceToCheck >= minPriceFinal && priceToCheck <= maxPriceFinal;
-});
-}
-console.log({results:filteredProducts});
+                                // Check if salePrice and regularPrice are valid numbers
 
-    // Final filtered products
-    // console.log({results:filteredProducts});
-    let final = filteredProducts
-    return final;
-}
-function loadVendors(page,isFilter) {
-    document.querySelector(".vendor-list").innerHTML ="";
+                                // if (isNaN(salePrice) || isNaN(regularPrice)) {
+                                //     // One of the prices is not a valid number, use 0 instead
+                                //     salePrice = salePrice || 0;
+                                //     regularPrice = regularPrice || 0;
+                                // }
+                                var priceToCheck = salePrice > 0 ? salePrice : regularPrice;
+                                // console.log(priceToCheck);
+                                return priceToCheck >= minPriceFinal && priceToCheck <= maxPriceFinal;
+                            });
+                        }
+                        console.log({
+                            results: filteredProducts
+                        });
 
-  // Create a new XMLHttpRequest object for fetching vendors
-let xhrVendors = new XMLHttpRequest();
-
-// Define the endpoint URL for fetching vendors
-let vendorsEndpointURL = `https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/vendors/search?q=<?php echo $_GET['search'] ?>`;
-
-// Open a GET request to fetch vendors
-xhrVendors.open("GET", vendorsEndpointURL, true);
-
-// Set up a callback function to handle the vendors response
-xhrVendors.onreadystatechange = function() {
-    if (xhrVendors.readyState === 4 && xhrVendors.status === 200) {
-        // Parse the response JSON for vendors
-        let vendorsResponse = JSON.parse(xhrVendors.responseText);
-
-        // Create an array to store vendor IDs
-        let vendorIds = vendorsResponse.results.map(vendor => vendor._id);
-
-        // Create a new XMLHttpRequest object for fetching products
-        let xhrProducts = new XMLHttpRequest();
-
-        // Define the endpoint URL for fetching products
-        let productsEndpointURL = `https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/products`;
-
-        // Open a GET request to fetch products
-        xhrProducts.open("GET", productsEndpointURL, true);
-
-        // Set up a callback function to handle the products response
-        xhrProducts.onreadystatechange = function() {
-            if (xhrProducts.readyState === 4 && xhrProducts.status === 200) {
-                // Parse the response JSON for products
-                let productsResponse = JSON.parse(xhrProducts.responseText);
-                console.log(productsResponse)
-                // Create an object to store vendor-wise product counts
-                let vendorProductCounts = {};
-
-                // Iterate through each product and count the products associated with each vendor
-                productsResponse.forEach(function(product) {
-                    // Increment product count for the vendor
-                    if (!vendorProductCounts[product.vendor_api_id]) {
-                        vendorProductCounts[product.vendor_api_id] = 1;
-                    } else {
-                        vendorProductCounts[product.vendor_api_id]++;
+                        // Final filtered products
+                        // console.log({results:filteredProducts});
+                        let final = filteredProducts
+                        return final;
                     }
-                });
 
-                // Now, we have vendor-wise product counts, we can use it to display the counts for each vendor
-                if(vendorsResponse.results.length>0){
+                    function loadVendors(page, isFilter) {
+                        document.querySelector(".vendor-list").innerHTML = "";
 
-                vendorsResponse.results.slice(0,6).forEach(function(vendor) {
-                    let vendorId = vendor._id;
-                    let productCount = vendorProductCounts[vendorId] || 0;
-                    let vendorDateRegistered = new Date(vendor.date_registered); 
+                        // Create a new XMLHttpRequest object for fetching vendors
+                        let xhrVendors = new XMLHttpRequest();
 
-                // Format the date as "Month DD, YYYY"
-                let options = { month: 'long', day: '2-digit', year: 'numeric' };
-                let formattedDate = vendorDateRegistered.toLocaleDateString('en-US', options); 
+                        // Define the endpoint URL for fetching vendors
+                        let vendorsEndpointURL =
+                            `https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/vendors/search?q=<?php echo $_GET['search'] ?>`;
 
-                    // Create a product card element
-                    let card = document.createElement("div");
-                    card.classList.add("col-md-12");
-                    card.innerHTML = `
+                        // Open a GET request to fetch vendors
+                        xhrVendors.open("GET", vendorsEndpointURL, true);
+
+                        // Set up a callback function to handle the vendors response
+                        xhrVendors.onreadystatechange = function() {
+                            if (xhrVendors.readyState === 4 && xhrVendors.status === 200) {
+                                // Parse the response JSON for vendors
+                                let vendorsResponse = JSON.parse(xhrVendors.responseText);
+
+                                // Create an array to store vendor IDs
+                                let vendorIds = vendorsResponse.results.map(vendor => vendor._id);
+
+                                // Create a new XMLHttpRequest object for fetching products
+                                let xhrProducts = new XMLHttpRequest();
+
+                                // Define the endpoint URL for fetching products
+                                let productsEndpointURL =
+                                    `https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/products`;
+
+                                // Open a GET request to fetch products
+                                xhrProducts.open("GET", productsEndpointURL, true);
+
+                                // Set up a callback function to handle the products response
+                                xhrProducts.onreadystatechange = function() {
+                                    if (xhrProducts.readyState === 4 && xhrProducts.status === 200) {
+                                        // Parse the response JSON for products
+                                        let productsResponse = JSON.parse(xhrProducts.responseText);
+                                        console.log(productsResponse)
+                                        // Create an object to store vendor-wise product counts
+                                        let vendorProductCounts = {};
+
+                                        // Iterate through each product and count the products associated with each vendor
+                                        productsResponse.forEach(function(product) {
+                                            // Increment product count for the vendor
+                                            if (!vendorProductCounts[product.vendor_api_id]) {
+                                                vendorProductCounts[product.vendor_api_id] = 1;
+                                            } else {
+                                                vendorProductCounts[product.vendor_api_id]++;
+                                            }
+                                        });
+
+                                        // Now, we have vendor-wise product counts, we can use it to display the counts for each vendor
+                                        if (vendorsResponse.results.length > 0) {
+
+                                            vendorsResponse.results.slice(0, 6).forEach(function(
+                                            vendor) {
+                                                let vendorId = vendor._id;
+                                                let productCount = vendorProductCounts[
+                                                    vendorId] || 0;
+                                                let vendorDateRegistered = new Date(vendor
+                                                    .date_registered);
+
+                                                // Format the date as "Month DD, YYYY"
+                                                let options = {
+                                                    month: 'long',
+                                                    day: '2-digit',
+                                                    year: 'numeric'
+                                                };
+                                                let formattedDate = vendorDateRegistered
+                                                    .toLocaleDateString('en-US', options);
+
+                                                // Create a product card element
+                                                let card = document.createElement("div");
+                                                card.classList.add("col-md-12");
+                                                card.innerHTML = `
                         <div class="card" style="margin:5px">
                             <div class="card-body">
                                 <div class="vendor-info" style="display: flex; align-items: center; flex-wrap:wrap; justify-content:center">
@@ -452,97 +466,111 @@ xhrVendors.onreadystatechange = function() {
                                 </div>
                             </div>
                         </div>`;
-                    // Append the product card to the container
-                    document.querySelector(".vendor-list").appendChild(card);
-                });
-            }else{
-                document.querySelector(".vendor-list").innerHTML=`
+                                                // Append the product card to the container
+                                                document.querySelector(".vendor-list")
+                                                    .appendChild(card);
+                                            });
+                                        } else {
+                                            document.querySelector(".vendor-list").innerHTML = `
                 <h6>No vendors available</h6>
                 
                 `;
 
-            }
-            }
-        };
+                                        }
+                                    }
+                                };
 
-        // Send the request to fetch products
-        xhrProducts.send();
-    }
-};
+                                // Send the request to fetch products
+                                xhrProducts.send();
+                            }
+                        };
 
-// Send the request to fetch vendors
-xhrVendors.send();
+                        // Send the request to fetch vendors
+                        xhrVendors.send();
 
-}
-function loadProducts(page,isFilter) {
-    // Make AJAX request to fetch products for given page
-    let xhr = new XMLHttpRequest();
-    xhr.open("GET", "https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/products/search?q=<?php echo $_GET['search'] ?>", true);
+                    }
 
-    xhr.onreadystatechange = function() {
-    if (xhr.readyState == 4 && xhr.status == 200) {
-        // Parse JSON response
-        let products1 = JSON.parse(xhr.responseText);
-        let products = products1.results.filter(product => product.product.product_type !== 'variation');
-        console.log(products);
-        // if(isFilter===true){
-            var checkedCategories = getCheckedCheckboxes();
-        var prices = getMinMaxPrices();
-        // Pass the values to your filter function
-       products= filterFunction(checkedCategories, prices.minPrice, prices.maxPrice,products);
-        // }
-        // Construct HTML for product cards
-        let productContainer = document.getElementById("product-container");
-        productContainer.innerHTML = ""; // Clear previous content
-        console.log(products)
-        let startIndex = (page - 1) * productsPerPage;
-                let endIndex = startIndex + productsPerPage - 1;
-                // Filter products for current page
-            if(products.length>0){
-                let productsForPage = products.slice(startIndex, endIndex + 1);
+                    function loadProducts(page, isFilter) {
+                        // Make AJAX request to fetch products for given page
+                        let xhr = new XMLHttpRequest();
+                        xhr.open("GET",
+                            "https://<?php echo htmlspecialchars($_SESSION["data_endpoint"]); ?>/api/v1/products/search?q=<?php echo $_GET['search'] ?>",
+                            true);
+
+                        xhr.onreadystatechange = function() {
+                            if (xhr.readyState == 4 && xhr.status == 200) {
+                                // Parse JSON response
+                                let products1 = JSON.parse(xhr.responseText);
+                                let products = products1.results.filter(product => product.product
+                                    .product_type !== 'variation');
+                                console.log(products);
+                                // if(isFilter===true){
+                                var checkedCategories = getCheckedCheckboxes();
+                                var prices = getMinMaxPrices();
+                                // Pass the values to your filter function
+                                products = filterFunction(checkedCategories, prices.minPrice, prices
+                                    .maxPrice, products);
+                                // }
+                                // Construct HTML for product cards
+                                let productContainer = document.getElementById("product-container");
+                                productContainer.innerHTML = ""; // Clear previous content
+                                console.log(products)
+                                let startIndex = (page - 1) * productsPerPage;
+                                let endIndex = startIndex + productsPerPage - 1;
+                                // Filter products for current page
+                                if (products.length > 0) {
+                                    let productsForPage = products.slice(startIndex, endIndex + 1);
 
 
-                productsForPage.forEach(function(prod) {
-            let product = prod.product;
-            let vendor = prod.vendor;
+                                    productsForPage.forEach(function(prod) {
+                                        let product = prod.product;
+                                        let vendor = prod.vendor;
 
-            let vendorOfProduct = prod.vendor;
-            // let card = document.createElement("div");
-                let token ="<?php echo $_SESSION['token'] ?>";
-                let email ="<?php echo $_SESSION['email'] ?>";
-                let password ="<?php echo $_SESSION['password'] ?>";
-                let customer_data ='<?php echo json_encode($customer_data) ?>';
+                                        let vendorOfProduct = prod.vendor;
+                                        // let card = document.createElement("div");
+                                        let token = "<?php echo $_SESSION['token'] ?>";
+                                        let email = "<?php echo $_SESSION['email'] ?>";
+                                        let password = "<?php echo $_SESSION['password'] ?>";
+                                        let customer_data =
+                                            '<?php echo json_encode($customer_data) ?>';
 
-            // Load product images dynamically
-            let imageContainer = document.createElement("div");
-            if (product.images && product.images.length > 0) {
-                let imageUrls = product.images.split(',');
-                let firstImageUrl = imageUrls[0].trim();
-                let img = document.createElement("img");
-                img.setAttribute("style", "border: 1px solid #eeeeee; height: 330px; object-fit: cover;");
-                img.setAttribute("class", "main-image");
-                img.setAttribute("src", firstImageUrl);
-            img.setAttribute("loading", "lazy");
+                                        // Load product images dynamically
+                                        let imageContainer = document.createElement("div");
+                                        if (product.images && product.images.length > 0) {
+                                            let imageUrls = product.images.split(',');
+                                            let firstImageUrl = imageUrls[0].trim();
+                                            let img = document.createElement("img");
+                                            img.setAttribute("style",
+                                                "border: 1px solid #eeeeee; height: 330px; object-fit: cover;"
+                                                );
+                                            img.setAttribute("class", "main-image");
+                                            img.setAttribute("src", firstImageUrl);
+                                            img.setAttribute("loading", "lazy");
 
-                img.setAttribute("alt", "Product");
-                img.className = "main-image";
-                imageContainer.appendChild(img);
-            } else {
-                let img = document.createElement("img");
-                img.className = "main-image";
-                img.setAttribute("style", "width: 290px; height: 200px; object-fit: cover;");
-                img.setAttribute("loading", "lazy");
+                                            img.setAttribute("alt", "Product");
+                                            img.className = "main-image";
+                                            imageContainer.appendChild(img);
+                                        } else {
+                                            let img = document.createElement("img");
+                                            img.className = "main-image";
+                                            img.setAttribute("style",
+                                                "width: 290px; height: 200px; object-fit: cover;"
+                                                );
+                                            img.setAttribute("loading", "lazy");
 
-                img.setAttribute("class", "main-image");
-                img.setAttribute("src", "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png");
-                img.setAttribute("alt", "Product");
-                imageContainer.appendChild(img);
-            }
-            
-            // Create product card
-            let card = document.createElement("div");
-            card.classList.add("col-lg-4", "col-md-6", "col-sm-6", "col-xs-6", "mb-6", "pro-gl-content", "width-100");
-            card.innerHTML = `
+                                            img.setAttribute("class", "main-image");
+                                            img.setAttribute("src",
+                                                "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"
+                                                );
+                                            img.setAttribute("alt", "Product");
+                                            imageContainer.appendChild(img);
+                                        }
+
+                                        // Create product card
+                                        let card = document.createElement("div");
+                                        card.classList.add("col-lg-4", "col-md-6", "col-sm-6",
+                                            "col-xs-6", "mb-6", "pro-gl-content", "width-100");
+                                        card.innerHTML = `
                 <div class="ec-product-inner">
                     <div class="ec-pro-image-outer" style="max-width: 290px; height: 350px;">
                         <div class="ec-pro-image">
@@ -577,195 +605,199 @@ function loadProducts(page,isFilter) {
 
                     </div>
                 </div>`;
-            productContainer.appendChild(card);
-            updatePaginationUI(page, products.length);
-        });
-        gridList()
-        }else{
-                document.getElementById("product-container").innerHTML=`
+                                        productContainer.appendChild(card);
+                                        updatePaginationUI(page, products.length);
+                                    });
+                                    gridList()
+                                } else {
+                                    document.getElementById("product-container").innerHTML = `
                 <h6>No products available</h6>
                 
                 `;
 
-            }
+                                }
 
-    }
-    else{
-                document.getElementById("product-container").innerHTML=`
+                            } else {
+                                document.getElementById("product-container").innerHTML = `
                 <h6>No products available</h6>
                 
                 `;
 
-            }
-};
+                            }
+                        };
 
-    xhr.send();
-}
-function updatePaginationUI(page, totalProducts) {
-    let totalPages = Math.ceil(totalProducts / productsPerPage);
-    let paginationInner = document.getElementById("prod-search-pagination");
-    let paginationIndicator = document.querySelector(".page-indicator");
+                        xhr.send();
+                    }
 
-    paginationInner.innerHTML = ""; // Clear previous pagination
-    let startPage = 1;
-    let endPage = totalPages;
+                    function updatePaginationUI(page, totalProducts) {
+                        let totalPages = Math.ceil(totalProducts / productsPerPage);
+                        let paginationInner = document.getElementById("prod-search-pagination");
+                        let paginationIndicator = document.querySelector(".page-indicator");
 
-    const visiblePages = 5; // Number of visible page links excluding ellipses
+                        paginationInner.innerHTML = ""; // Clear previous pagination
+                        let startPage = 1;
+                        let endPage = totalPages;
 
-    if (totalPages > visiblePages) {
-        if (page <= Math.ceil(visiblePages / 2)) {
-            endPage = visiblePages;
-        } else if (page >= totalPages - Math.floor(visiblePages / 2)) {
-            startPage = totalPages - visiblePages + 1;
-        } else {
-            startPage = page - Math.floor(visiblePages / 2);
-            endPage = page + Math.ceil(visiblePages / 2) - 1;
-        }
-    }
+                        const visiblePages = 5; // Number of visible page links excluding ellipses
 
-    // Display ellipsis at the beginning if necessary
-    if (startPage > 1) {
-        let firstPageLi = document.createElement("li");
-        let firstPageLink = document.createElement("a");
-        firstPageLink.setAttribute("href", "#");
-        firstPageLink.setAttribute("data-page", 1);
-        firstPageLink.textContent = 1;
-        firstPageLi.appendChild(firstPageLink);
-        paginationInner.appendChild(firstPageLi);
+                        if (totalPages > visiblePages) {
+                            if (page <= Math.ceil(visiblePages / 2)) {
+                                endPage = visiblePages;
+                            } else if (page >= totalPages - Math.floor(visiblePages / 2)) {
+                                startPage = totalPages - visiblePages + 1;
+                            } else {
+                                startPage = page - Math.floor(visiblePages / 2);
+                                endPage = page + Math.ceil(visiblePages / 2) - 1;
+                            }
+                        }
 
-        // Display ellipsis after the first page link if necessary
-        if (startPage > 2) {
-            let ellipsisLi = document.createElement("li");
-            ellipsisLi.textContent = "...";
-            paginationInner.appendChild(ellipsisLi);
-        }
-    }
+                        // Display ellipsis at the beginning if necessary
+                        if (startPage > 1) {
+                            let firstPageLi = document.createElement("li");
+                            let firstPageLink = document.createElement("a");
+                            firstPageLink.setAttribute("href", "#");
+                            firstPageLink.setAttribute("data-page", 1);
+                            firstPageLink.textContent = 1;
+                            firstPageLi.appendChild(firstPageLink);
+                            paginationInner.appendChild(firstPageLi);
 
-    for (let i = startPage; i <= endPage; i++) {
-        let li = document.createElement("li");
-        let a = document.createElement("a");
-        a.setAttribute("href", "#");
-        a.setAttribute("data-page", i);
-        a.textContent = i;
-        if (i === page) {
-            a.classList.add("active");
-        }
-        li.appendChild(a);
-        paginationInner.appendChild(li);
-    }
+                            // Display ellipsis after the first page link if necessary
+                            if (startPage > 2) {
+                                let ellipsisLi = document.createElement("li");
+                                ellipsisLi.textContent = "...";
+                                paginationInner.appendChild(ellipsisLi);
+                            }
+                        }
+
+                        for (let i = startPage; i <= endPage; i++) {
+                            let li = document.createElement("li");
+                            let a = document.createElement("a");
+                            a.setAttribute("href", "#");
+                            a.setAttribute("data-page", i);
+                            a.textContent = i;
+                            if (i === page) {
+                                a.classList.add("active");
+                            }
+                            li.appendChild(a);
+                            paginationInner.appendChild(li);
+                        }
 
 
-    // Display ellipsis at the end if necessary
-    if (endPage < totalPages) {
-        let li = document.createElement("li");
-        li.textContent = "...";
-        paginationInner.appendChild(li);
+                        // Display ellipsis at the end if necessary
+                        if (endPage < totalPages) {
+                            let li = document.createElement("li");
+                            li.textContent = "...";
+                            paginationInner.appendChild(li);
 
-        let lastPageLi = document.createElement("li");
-        let lastPageLink = document.createElement("a");
-        lastPageLink.setAttribute("href", "#");
-        lastPageLink.setAttribute("data-page", totalPages);
-        lastPageLink.textContent = totalPages;
-        lastPageLi.appendChild(lastPageLink);
-        paginationInner.appendChild(lastPageLi);
-    }
+                            let lastPageLi = document.createElement("li");
+                            let lastPageLink = document.createElement("a");
+                            lastPageLink.setAttribute("href", "#");
+                            lastPageLink.setAttribute("data-page", totalPages);
+                            lastPageLink.textContent = totalPages;
+                            lastPageLi.appendChild(lastPageLink);
+                            paginationInner.appendChild(lastPageLi);
+                        }
 
-    // Update pagination indicator
-    let startIndex = (page - 1) * productsPerPage + 1;
-    let endIndex = Math.min(startIndex + productsPerPage - 1, totalProducts);
-    paginationIndicator.textContent = "Showing " + startIndex + " to " + endIndex + " of " + totalProducts + " item(s)";
-}
-function getCheckedCheckboxes() {
-        var checkboxes = document.querySelectorAll('input[name="category[]"]:checked');
-        var values = [];
-        checkboxes.forEach(function(checkbox) {
-            values.push(checkbox.value.toLowerCase().trim());
-        });
-        return values;
-    }
+                        // Update pagination indicator
+                        let startIndex = (page - 1) * productsPerPage + 1;
+                        let endIndex = Math.min(startIndex + productsPerPage - 1, totalProducts);
+                        paginationIndicator.textContent = "Showing " + startIndex + " to " + endIndex + " of " +
+                            totalProducts + " item(s)";
+                    }
 
-    // Function to get min and max prices
-    function getMinMaxPrices() {
-        var minPrice = document.getElementById('minPrice').value;
-        var maxPrice = document.getElementById('maxPrice').value;
-        return {
-            minPrice: minPrice,
-            maxPrice: maxPrice
-        };
-    }
+                    function getCheckedCheckboxes() {
+                        var checkboxes = document.querySelectorAll('input[name="category[]"]:checked');
+                        var values = [];
+                        checkboxes.forEach(function(checkbox) {
+                            values.push(checkbox.value.toLowerCase().trim());
+                        });
+                        return values;
+                    }
 
-    // Function to handle form submission
-    function applyFilters() {
-        var checkedCategories = getCheckedCheckboxes();
-        var prices = getMinMaxPrices();
-        // Pass the values to your filter function
-        filterFunction(checkedCategories, prices.minPrice, prices.maxPrice);
-    }
+                    // Function to get min and max prices
+                    function getMinMaxPrices() {
+                        var minPrice = document.getElementById('minPrice').value;
+                        var maxPrice = document.getElementById('maxPrice').value;
+                        return {
+                            minPrice: minPrice,
+                            maxPrice: maxPrice
+                        };
+                    }
 
- 
-    var checkboxes = document.querySelectorAll('input[name="category[]"]');
-checkboxes.forEach(function(checkbox) {
-    checkbox.addEventListener('change', function() {
-        loadProducts(1, true);
-    });
-});
-function gridList(e) {
-        console.log("hereeeee")
-        var $gridCont = $('.shop-pro-inner');
-        var $gridView = $('.pro-gl-content');
-        // e.preventDefault();
-        $gridCont.removeClass('list-view');
-        $gridView.removeClass('width-100');
-    }
-// Listen for changes in min and max price inputs
-var minPriceInput = document.getElementById('minPrice');
-minPriceInput.addEventListener('input', function() {
-    loadProducts(1, true);
-});
+                    // Function to handle form submission
+                    function applyFilters() {
+                        var checkedCategories = getCheckedCheckboxes();
+                        var prices = getMinMaxPrices();
+                        // Pass the values to your filter function
+                        filterFunction(checkedCategories, prices.minPrice, prices.maxPrice);
+                    }
 
-var maxPriceInput = document.getElementById('maxPrice');
-maxPriceInput.addEventListener('input', function() {
-    loadProducts(1, true);
-});
+
+                    var checkboxes = document.querySelectorAll('input[name="category[]"]');
+                    checkboxes.forEach(function(checkbox) {
+                        checkbox.addEventListener('change', function() {
+                            loadProducts(1, true);
+                        });
+                    });
+
+                    function gridList(e) {
+                        console.log("hereeeee")
+                        var $gridCont = $('.shop-pro-inner');
+                        var $gridView = $('.pro-gl-content');
+                        // e.preventDefault();
+                        $gridCont.removeClass('list-view');
+                        $gridView.removeClass('width-100');
+                    }
+                    // Listen for changes in min and max price inputs
+                    var minPriceInput = document.getElementById('minPrice');
+                    minPriceInput.addEventListener('input', function() {
+                        loadProducts(1, true);
+                    });
+
+                    var maxPriceInput = document.getElementById('maxPrice');
+                    maxPriceInput.addEventListener('input', function() {
+                        loadProducts(1, true);
+                    });
 
 
 
 
-       document.getElementById("prod-search-pagination").addEventListener("click", function(event) {
-        if (event.target.tagName.toLowerCase() === "a") {
-            event.preventDefault(); // Prevent default link behavior
-            let page = parseInt(event.target.getAttribute("data-page"));
-            currentPage = page;
-            loadProducts(page,false);
-               // Scroll to top
-        window.scrollTo({
-            top: 0,
-            behavior: "smooth" // Optional smooth scrolling behavior
-        });
-        }
-    });
+                    document.getElementById("prod-search-pagination").addEventListener("click", function(
+                    event) {
+                        if (event.target.tagName.toLowerCase() === "a") {
+                            event.preventDefault(); // Prevent default link behavior
+                            let page = parseInt(event.target.getAttribute("data-page"));
+                            currentPage = page;
+                            loadProducts(page, false);
+                            // Scroll to top
+                            window.scrollTo({
+                                top: 0,
+                                behavior: "smooth" // Optional smooth scrolling behavior
+                            });
+                        }
+                    });
 
-    // Load initial products on page load
-    loadProducts(currentPage);
-        // Attach click event listeners to pagination links
-        // document.getElementById("pagination-container").addEventListener("click", function(event) {
-        //     if (event.target.tagName.toLowerCase() === "a") {
-        //         event.preventDefault(); // Prevent default link behavior
-        //         let page = event.target.getAttribute("data-page");
-        //         loadProducts(page); // Load products for the clicked page
-        //     }
-        // });
+                    // Load initial products on page load
+                    loadProducts(currentPage);
+                    // Attach click event listeners to pagination links
+                    // document.getElementById("pagination-container").addEventListener("click", function(event) {
+                    //     if (event.target.tagName.toLowerCase() === "a") {
+                    //         event.preventDefault(); // Prevent default link behavior
+                    //         let page = event.target.getAttribute("data-page");
+                    //         loadProducts(page); // Load products for the clicked page
+                    //     }
+                    // });
 
-        // // Attach event listener to search form or button
-        // document.getElementById("search-form").addEventListener("submit", function(event) {
-        //     event.preventDefault(); // Prevent default form submission
-        //     let searchQuery = document.getElementById("search-input").value;
-        //     console.log(searchQuery + " search clicked");
-        //     // Make AJAX request to fetch products based on search query
-        //     // You need to implement this part in a similar way to loading products
-        // });
-    });
-</script>
+                    // // Attach event listener to search form or button
+                    // document.getElementById("search-form").addEventListener("submit", function(event) {
+                    //     event.preventDefault(); // Prevent default form submission
+                    //     let searchQuery = document.getElementById("search-input").value;
+                    //     console.log(searchQuery + " search clicked");
+                    //     // Make AJAX request to fetch products based on search query
+                    //     // You need to implement this part in a similar way to loading products
+                    // });
+                });
+                </script>
                 <!-- Sidebar Area Start -->
                 <div class="ec-shop-leftside col-lg-3 order-lg-first col-md-12 order-md-last">
                     <div class="ec-sidebar-wrap ec-border-box">
@@ -786,77 +818,117 @@ maxPriceInput.addEventListener('input', function() {
                                             <ul>
                                                 <li>
                                                     <div class="ec-sidebar-block-item">
-                                                        <input type="checkbox" name="category[]" id="electronics_category" value="Electronics" <?php echo (isset($_POST['category']) && in_array('Electronics', $_POST['category'])) || (isset($_GET['category']) && in_array('Electronics', $_GET['category'])) ? 'checked' : ''; ?> /> 
-                                                        <a><label for="electronics_category" style="cursor: pointer; margin: 0px;">Electronics</label></a><span class="checked"></span>
+                                                        <input type="checkbox" name="category[]"
+                                                            id="electronics_category" value="Electronics"
+                                                            <?php echo (isset($_POST['category']) && in_array('Electronics', $_POST['category'])) || (isset($_GET['category']) && in_array('Electronics', $_GET['category'])) ? 'checked' : ''; ?> />
+                                                        <a><label for="electronics_category"
+                                                                style="cursor: pointer; margin: 0px;">Electronics</label></a><span
+                                                            class="checked"></span>
                                                     </div>
                                                 </li>
                                                 <li>
                                                     <div class="ec-sidebar-block-item">
-                                                        <input type="checkbox" name="category[]" id="solar_category" value="Solar" <?php echo (isset($_POST['category']) && in_array('Solar', $_POST['category'])) || (isset($_GET['category']) && in_array('Solar', $_GET['category'])) ? 'checked' : ''; ?> /> 
-                                                        <a><label for="solar_category" style="cursor: pointer; margin: 0px;">Solar</a></label><span class="checked"></span>
+                                                        <input type="checkbox" name="category[]" id="solar_category"
+                                                            value="Solar"
+                                                            <?php echo (isset($_POST['category']) && in_array('Solar', $_POST['category'])) || (isset($_GET['category']) && in_array('Solar', $_GET['category'])) ? 'checked' : ''; ?> />
+                                                        <a><label for="solar_category"
+                                                                style="cursor: pointer; margin: 0px;">Solar</a></label><span
+                                                            class="checked"></span>
                                                     </div>
                                                 </li>
                                                 <li>
                                                     <div class="ec-sidebar-block-item">
-                                                        <input type="checkbox" name="category[]" id="e-bike_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><label for="e-bike_category" style="cursor: pointer; margin: 0px;">E-bike</a></label><span class="checked"></span>
+                                                        <input type="checkbox" name="category[]" id="e-bike_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><label for="e-bike_category"
+                                                                style="cursor: pointer; margin: 0px;">E-bike</a></label><span
+                                                            class="checked"></span>
                                                     </div>
                                                 </li>
                                                 <li>
                                                     <div class="ec-sidebar-block-item">
-                                                        <input type="checkbox" name="category[]" id="e-vehicle_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><label for="e-vehicle_category" style="cursor: pointer; margin: 0px;">E-vehicle</a></label><span class="checked"></span>
+                                                        <input type="checkbox" name="category[]" id="e-vehicle_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><label for="e-vehicle_category"
+                                                                style="cursor: pointer; margin: 0px;">E-vehicle</a></label><span
+                                                            class="checked"></span>
 
                                                     </div>
                                                 </li>
                                                 <li>
                                                     <div class="ec-sidebar-block-item">
-                                                        <input type="checkbox" name="category[]" id="appliance_category" value="Appliance" <?php echo (isset($_POST['category']) && in_array('Appliance', $_POST['category'])) || (isset($_GET['category']) && in_array('Appliance', $_GET['category'])) ? 'checked' : ''; ?> /> 
-                                                        <a><label for="appliance_category" style="cursor: pointer; margin: 0px;">Appliance</a></label><span class="checked"></span>
+                                                        <input type="checkbox" name="category[]" id="appliance_category"
+                                                            value="Appliance"
+                                                            <?php echo (isset($_POST['category']) && in_array('Appliance', $_POST['category'])) || (isset($_GET['category']) && in_array('Appliance', $_GET['category'])) ? 'checked' : ''; ?> />
+                                                        <a><label for="appliance_category"
+                                                                style="cursor: pointer; margin: 0px;">Appliance</a></label><span
+                                                            class="checked"></span>
 
                                                     </div>
                                                 </li>
                                                 <li>
                                                     <div class="ec-sidebar-block-item">
-                                                        <input type="checkbox" name="category[]" id="smart-home_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><label for="smart-home_category" style="cursor: pointer; margin: 0px;">Smart Home</a></label><span class="checked"></span>
+                                                        <input type="checkbox" name="category[]"
+                                                            id="smart-home_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><label for="smart-home_category"
+                                                                style="cursor: pointer; margin: 0px;">Smart
+                                                                Home</a></label><span class="checked"></span>
                                                     </div>
                                                 </li>
                                                 <li>
                                                     <div class="ec-sidebar-block-item">
-                                                        <input type="checkbox" name="category[]" id="home_category" value="Home" <?php echo (isset($_POST['category']) && in_array('Home', $_POST['category'])) || (isset($_GET['category']) && in_array('Home', $_GET['category'])) ? 'checked' : ''; ?> /> 
-                                                        <a><label for="home_category" style="cursor: pointer; margin: 0px;">Home</a></label><span class="checked"></span>
+                                                        <input type="checkbox" name="category[]" id="home_category"
+                                                            value="Home"
+                                                            <?php echo (isset($_POST['category']) && in_array('Home', $_POST['category'])) || (isset($_GET['category']) && in_array('Home', $_GET['category'])) ? 'checked' : ''; ?> />
+                                                        <a><label for="home_category"
+                                                                style="cursor: pointer; margin: 0px;">Home</a></label><span
+                                                            class="checked"></span>
                                                     </div>
                                                 </li>
                                                 <li>
                                                     <div class="ec-sidebar-block-item">
-                                                        <input type="checkbox" name="category[]" id="apparel_category" value="Apparel" <?php echo (isset($_POST['category']) && in_array('Apparel', $_POST['category'])) || (isset($_GET['category']) && in_array('Apparel', $_GET['category'])) ? 'checked' : ''; ?> /> 
-                                                        <a><label for="apparel_category" style="cursor: pointer; margin: 0px;">Apparel</a></label><span class="checked"></span>
+                                                        <input type="checkbox" name="category[]" id="apparel_category"
+                                                            value="Apparel"
+                                                            <?php echo (isset($_POST['category']) && in_array('Apparel', $_POST['category'])) || (isset($_GET['category']) && in_array('Apparel', $_GET['category'])) ? 'checked' : ''; ?> />
+                                                        <a><label for="apparel_category"
+                                                                style="cursor: pointer; margin: 0px;">Apparel</a></label><span
+                                                            class="checked"></span>
                                                     </div>
                                                 </li>
                                                 <li>
                                                     <div class="ec-sidebar-block-item">
-                                                        <input type="checkbox" name="category[]" id="heavy-equipment_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><label for="heavy-equipment_category" style="cursor: pointer; margin: 0px;">Heavy Equipment</a></label><span class="checked"></span>
+                                                        <input type="checkbox" name="category[]"
+                                                            id="heavy-equipment_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><label for="heavy-equipment_category"
+                                                                style="cursor: pointer; margin: 0px;">Heavy
+                                                                Equipment</a></label><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"  />
+                                                    <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" />
 
-                                                    <!-- <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"  />
+                                                        <!-- <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" />
 
-                                                    <!-- <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>
+                                                        <!-- <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>
@@ -1027,42 +1099,53 @@ maxPriceInput.addEventListener('input', function() {
                             <!-- Swiper -->
                             <div class="qty-product-cover">
                                 <div class="qty-slide">
-                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_1.jpg" alt="">
+                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_1.jpg"
+                                        alt="">
                                 </div>
                                 <div class="qty-slide">
-                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_2.jpg" alt="">
+                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_2.jpg"
+                                        alt="">
                                 </div>
                                 <div class="qty-slide">
-                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_3.jpg" alt="">
+                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_3.jpg"
+                                        alt="">
                                 </div>
                                 <div class="qty-slide">
-                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_4.jpg" alt="">
+                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_4.jpg"
+                                        alt="">
                                 </div>
                                 <div class="qty-slide">
-                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_5.jpg" alt="">
+                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_5.jpg"
+                                        alt="">
                                 </div>
                             </div>
                             <div class="qty-nav-thumb">
                                 <div class="qty-slide">
-                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_1.jpg" alt="">
+                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_1.jpg"
+                                        alt="">
                                 </div>
                                 <div class="qty-slide">
-                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_2.jpg" alt="">
+                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_2.jpg"
+                                        alt="">
                                 </div>
                                 <div class="qty-slide">
-                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_3.jpg" alt="">
+                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_3.jpg"
+                                        alt="">
                                 </div>
                                 <div class="qty-slide">
-                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_4.jpg" alt="">
+                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_4.jpg"
+                                        alt="">
                                 </div>
                                 <div class="qty-slide">
-                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_5.jpg" alt="">
+                                    <img loading="lazy" class="img-responsive" src="assets/images/product-image/3_5.jpg"
+                                        alt="">
                                 </div>
                             </div>
                         </div>
                         <div class="col-md-7 col-sm-12 col-xs-12">
                             <div class="quickview-pro-content">
-                                <h5 class="ec-quick-title"><a href="shop-left-sidebar-col-4.php">Handbag leather purse for women</a>
+                                <h5 class="ec-quick-title"><a href="shop-left-sidebar-col-4.php">Handbag leather purse
+                                        for women</a>
                                 </h5>
                                 <div class="ec-quickview-rating">
                                     <i class="ecicon eci-star fill"></i>
@@ -1096,7 +1179,8 @@ maxPriceInput.addEventListener('input', function() {
                                         <span>Size</span>
                                         <div class="ec-pro-variation-content">
                                             <ul class="ec-opt-size">
-                                                <li class="active"><a href="#" class="ec-opt-sz" data-tooltip="Small">S</a></li>
+                                                <li class="active"><a href="#" class="ec-opt-sz"
+                                                        data-tooltip="Small">S</a></li>
                                                 <li><a href="#" class="ec-opt-sz" data-tooltip="Medium">M</a></li>
                                                 <li><a href="#" class="ec-opt-sz" data-tooltip="Large">X</a></li>
                                                 <li><a href="#" class="ec-opt-sz" data-tooltip="Extra Large">XL</a></li>
@@ -1109,7 +1193,8 @@ maxPriceInput.addEventListener('input', function() {
                                         <input class="qty-input" type="text" name="ec_qtybtn" value="1" />
                                     </div>
                                     <div class="ec-quickview-cart ">
-                                        <button class="btn btn-primary"><i class="fi-rr-shopping-basket"></i> Add To Cart</button>
+                                        <button class="btn btn-primary"><i class="fi-rr-shopping-basket"></i> Add To
+                                            Cart</button>
                                     </div>
                                 </div>
                             </div>
@@ -1121,7 +1206,7 @@ maxPriceInput.addEventListener('input', function() {
     </div>
     <!-- Modal end -->
 
-    
+
     <!-- Footer navigation panel for responsive display -->
     <!-- <div class="ec-nav-toolbar">
         <div class="container">
@@ -1171,7 +1256,7 @@ maxPriceInput.addEventListener('input', function() {
     </div>
     <!-- Cart Floating Button end -->
 
-    
+
 
     <!-- Feature tools -->
     <div class="ec-tools-sidebar-overlay"></div>
diff --git a/user-history.php b/user-history.php
index f602828..d204e41 100644
--- a/user-history.php
+++ b/user-history.php
@@ -23,7 +23,8 @@ if ($_SESSION["isVendor"] == true) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
     <title>oBanana B2B - Elevate Your Business</title>
-    <meta name="keywords" content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
+    <meta name="keywords"
+        content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
     <meta name="description" content="Best ecommerce html template for single and multi vendor store.">
     <meta name="author" content="ashishmaraviya">
 
@@ -33,7 +34,7 @@ if ($_SESSION["isVendor"] == true) {
     <meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
 
     <!-- css Icon Font -->
-     <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
+    <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -45,7 +46,7 @@ if ($_SESSION["isVendor"] == true) {
     <link rel="stylesheet" href="assets/css/plugins/countdownTimer.css" />
     <link rel="stylesheet" href="assets/css/plugins/slick.min.css" />
     <link rel="stylesheet" href="assets/css/plugins/bootstrap.css" />
-    
+
     <!-- FLATICON -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
 
@@ -57,123 +58,144 @@ if ($_SESSION["isVendor"] == true) {
 
     <!-- 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" />
+    <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>
+    <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous"
+        referrerpolicy="no-referrer"></script>
 
     <style>
-        .tab.active {
-            background-color: #ffffff;
-            /* Set your desired background color for the active tab */
-            color: #3474d4;
-            /* Set your desired text color for the active tab */
-            border: 1px solid #3474d4
+    .tab.active {
+        background-color: #ffffff;
+        /* Set your desired background color for the active tab */
+        color: #3474d4;
+        /* Set your desired text color for the active tab */
+        border: 1px solid #3474d4
             /* Set your desired border color for the active tab */
-        }
-        .tab {
-            background-color: #3474d4;
-            color: #ffffff;
-            font-family: "Poppins, sans-serif";
-            font-weight: 400;
-            /* margin: 2px; */
-            text-align: center;
-            /* margin-right: -25px; */
-        }
-        .tab i {
-            font-size: 15px;
-            /* padding-left: 3px; */
-        }
-        .tableView:hover {
-            /* background-color: #f5f5f5; */
-            background-color: #e5e5e5;
-        }
-        .tab-content {
-            border: none;
-            margin-top: -30px;
-        }
-        
-        .tableView {
-            td:nth-child(2) {
+    }
+
+    .tab {
+        background-color: #3474d4;
+        color: #ffffff;
+        font-family: "Poppins, sans-serif";
+        font-weight: 400;
+        /* margin: 2px; */
+        text-align: center;
+        /* margin-right: -25px; */
+    }
+
+    .tab i {
+        font-size: 15px;
+        /* padding-left: 3px; */
+    }
+
+    .tableView:hover {
+        /* background-color: #f5f5f5; */
+        background-color: #e5e5e5;
+    }
+
+    .tab-content {
+        border: none;
+        margin-top: -30px;
+    }
+
+    .tableView {
+        td:nth-child(2) {
             max-width: 250px;
-            }
-            td:nth-child(6) {
-                white-space: nowrap;
-            }
-            td:nth-child(7) {
-                white-space: nowrap;
-            }
-        } 
-
-        .Title {
-            th:nth-child(4) {
-                white-space: nowrap;
-            }
-            th:nth-child(6) {
-                white-space: nowrap;
-            }
         }
 
-        @media only screen and (max-width: 640px) {
-            #tableTitle {
-                font-size: 14px;
-            }
-            #shopNow {
-                font-size: 12px;
-            }
-        }
-        @media only screen and (max-width: 460px) {
-            #tableTitle {
-                font-size: 12px;
-            }
-            #shopNow {
-                font-size: 10px;
-            }
+        td:nth-child(6) {
+            white-space: nowrap;
         }
 
-        /* for status buttons */
-        @media only screen and (max-width: 10000px) {
-            .tab {
-                font-size: 15px;
-                width: 11rem;
-            }
+        td:nth-child(7) {
+            white-space: nowrap;
         }
-        @media only screen and (max-width: 685px) {
-            .tab {
-                font-size: 11px;
-                width: 7rem;
-            }
-            .tab i {
-                font-size: 10px;
-            }
+    }
+
+    .Title {
+        th:nth-child(4) {
+            white-space: nowrap;
         }
-        @media only screen and (max-width: 566px) {
-            .tab {
-                font-size: 0px;
-                width: 5rem;
-            }
-            .tab i {
-                font-size: 14px;
-            }
+
+        th:nth-child(6) {
+            white-space: nowrap;
         }
+    }
+
+    @media only screen and (max-width: 640px) {
+        #tableTitle {
+            font-size: 14px;
+        }
+
+        #shopNow {
+            font-size: 12px;
+        }
+    }
+
+    @media only screen and (max-width: 460px) {
+        #tableTitle {
+            font-size: 12px;
+        }
+
+        #shopNow {
+            font-size: 10px;
+        }
+    }
+
+    /* for status buttons */
+    @media only screen and (max-width: 10000px) {
+        .tab {
+            font-size: 15px;
+            width: 11rem;
+        }
+    }
+
+    @media only screen and (max-width: 685px) {
+        .tab {
+            font-size: 11px;
+            width: 7rem;
+        }
+
+        .tab i {
+            font-size: 10px;
+        }
+    }
+
+    @media only screen and (max-width: 566px) {
+        .tab {
+            font-size: 0px;
+            width: 5rem;
+        }
+
+        .tab i {
+            font-size: 14px;
+        }
+    }
     </style>
-        
-    <script>
-        function updateCartItemCount() {
-            $.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
-                if (data != "") {
-                    console.log("Data: " + data + "\nStatus: " + status);
-                    document.getElementById("cartItemCount").innerHTML = data;
-                }
-            });
-        }
 
-        function updateWishItemCount() {
-            $.get("wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data) {
-                if (data != "") {
-                    document.getElementById("wishItemCount").innerHTML = data;
-                }
-            });
-        }
+    <script>
+    function updateCartItemCount() {
+        $.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
+            if (data != "") {
+                console.log("Data: " + data + "\nStatus: " + status);
+                document.getElementById("cartItemCount").innerHTML = data;
+            }
+        });
+    }
+
+    function updateWishItemCount() {
+        $.get("wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data) {
+            if (data != "") {
+                document.getElementById("wishItemCount").innerHTML = data;
+            }
+        });
+    }
+    let messageInput1 = {};
+    let fileInput1 = {};
+    let messagePreview1 = {};
+    let removePreview1 = {};
+    let sendButton1 = {};
     </script>
 </head>
 
@@ -186,6 +208,152 @@ if ($_SESSION["isVendor"] == true) {
             <div></div>
         </div>
     </div>
+    <style>
+    #product-container1 {
+        /* position: absolute; */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 100%;
+        flex-direction: column;
+
+    }
+
+    .prodDetails-feed {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: column;
+        width: 80%;
+    }
+
+    /* .product-con-feed {
+                                                                display: flex;
+                                                                justify-content: center;
+                                                                align-items: center;
+                                                                flex-direction: column;
+                                                                width: 80%;
+                                                            } */
+
+    .rate-con {
+        font-size: 26px;
+        margin: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+    }
+
+    .ecicon {
+        color: #eeee !important;
+        cursor: pointer;
+    }
+
+    .ecicon.fill {
+        color: #ffaa00 !important;
+        cursor: pointer;
+
+
+    }
+
+    .rate-text {
+        font-size: 16px;
+        font-weight: 600;
+        text-align: left;
+        color: #000;
+        margin: 0 10px;
+    }
+
+    .message-preview-feed {
+        height: 100px;
+        width: 80%;
+        border-radius: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: row;
+
+    }
+
+    .message-preview-feed.hide {
+        height: 0px;
+        width: 0px;
+        border-radius: 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .message-input-feed {
+        border: 1px solid #eee;
+        border-radius: 15px;
+        width: 80%;
+        margin-right: 10px;
+        margin-top: 20px;
+
+    }
+
+    .send-btn-feed {
+        border-radius: 15px;
+        width: 20%;
+        height: 50px;
+        background-color: #ffaa00;
+        color: #fff;
+        margin-top: 20px;
+        cursor: pointer;
+
+    }
+
+    .send-btn-feed:hover {
+        background-color: #eb9c00;
+
+    }
+
+    .img-prev-feed {
+        height: 80px;
+        width: 80px;
+        border-radius: 5px;
+        object-fit: cover;
+        margin: 10px;
+
+    }
+
+    .vid-prev-feed {
+        height: 80px;
+        width: 80px;
+        border-radius: 5px;
+        object-fit: cover;
+        margin: 10px;
+    }
+
+    .remove-prev-feed {
+        cursor: pointer;
+        height: 20px;
+        width: 20px;
+        border-radius: 35px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: 400;
+        font-size: 10px;
+        /* position:absolute; */
+        z-index: 30;
+        background-color: #eee;
+        border: 1px solid #ccc;
+        /* top:-20px; */
+        font-size: 18px;
+        font-weight: 500;
+        padding: 10px;
+        margin-top: 20px;
+        margin-left: 30px;
+    }
+
+    .remove-prev-feed.hide {
+        display: none;
+        height: 0px;
+        width: 0px;
+    }
+    </style>
 
     <!-- Header start  -->
     <?php include "header.php" ?>
@@ -231,7 +399,7 @@ if ($_SESSION["isVendor"] == true) {
                     <div class="ec-sidebar-wrap ec-border-box">
                         <!-- Sidebar Category Block -->
                         <div class="ec-sidebar-block">
-                        <div class="ec-vendor-block">
+                            <div class="ec-vendor-block">
                                 <!-- <div class="ec-vendor-block-bg"></div>
                                 <div class="ec-vendor-block-detail">
                                     <img loading="lazy" class="v-img" src="assets/images/user/1.jpg" alt="vendor image">
@@ -239,13 +407,15 @@ if ($_SESSION["isVendor"] == true) {
                                 </div> -->
 
                                 <!-- 03-14-2024 Stacy added customer image -->
-                                <div class="ec-vendor-block-bg" style="background-color: orange; background-image: url(<?php echo $customer_data['customer_banner'] ?>) !important;">
+                                <div class="ec-vendor-block-bg"
+                                    style="background-color: orange; background-image: url(<?php echo $customer_data['customer_banner'] ?>) !important;">
                                 </div>
                                 <div class="ec-vendor-block-detail">
                                     <?php
                                     $customer_image = isset($customer_data[0]['customer_image']) ? $customer_data[0]['customer_image'] : 'https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg';
                                     ?>
-                                    <img loading="lazy" class="v-img" src=<?php echo $customer_image ?> alt="vendor image">
+                                    <img loading="lazy" class="v-img" src=<?php echo $customer_image ?>
+                                        alt="vendor image">
                                 </div>
                                 <?php include 'user-profile-tabs.php' ?>
                             </div>
@@ -290,7 +460,8 @@ if ($_SESSION["isVendor"] == true) {
                             </div> -->
                             <div class="ec-header-btn" id="tableTitle">
                                 <!-- <a class="btn btn-lg btn-primary" style="background:none; color:#3474d4;" href="#">View All</a> -->
-                                <a class="btn btn-lg btn-primary" id="shopNow" style="background:none; color:#3474d4;" href="index.php">Shop Now</a>
+                                <a class="btn btn-lg btn-primary" id="shopNow" style="background:none; color:#3474d4;"
+                                    href="index.php">Shop Now</a>
                             </div>
                         </div>
 
@@ -298,16 +469,31 @@ if ($_SESSION["isVendor"] == true) {
                             <div class="card-body" style="margin-bottom:-20px;">
                                 <div class="tab-container d-flex justify-content-around">
                                     <!-- 03-25-2024 Stacy modified cards -->
-                                    <div class="tab active" data-tab-name="allOrders" onclick="showTab('allOrders'), document.getElementById('tableTitle').innerHTML = 'All Order History'">All Orders
-                                        <i class="fa-solid fa-cubes"></i></div>
-                                    <div class="tab" data-tab-name="toPay" onclick="showTab('toPay'), document.getElementById('tableTitle').innerHTML = 'All To Pay Products'">To Pay
-                                        <i class="fa-solid fa-money-bill-1-wave"></i></div>
-                                    <div class="tab" data-tab-name="toShip" onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Products'">To Ship
-                                        <i class="fa-solid fa-truck"></i></div>
-                                    <div class="tab" data-tab-name="toReceive" onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Products'">To Receive
-                                        <i class="fa-solid fa-box-archive"></i></div>
-                                    <div class="tab" data-tab-name="completed" onclick="showTab('completed'), document.getElementById('tableTitle').innerHTML = 'All Completed Purchase'">Complete
-                                        <i class="fa-solid fa-square-check"></i></div>
+                                    <div class="tab active" data-tab-name="allOrders"
+                                        onclick="showTab('allOrders'), document.getElementById('tableTitle').innerHTML = 'All Order History'">
+                                        All Orders
+                                        <i class="fa-solid fa-cubes"></i>
+                                    </div>
+                                    <div class="tab" data-tab-name="toPay"
+                                        onclick="showTab('toPay'), document.getElementById('tableTitle').innerHTML = 'All To Pay Products'">
+                                        To Pay
+                                        <i class="fa-solid fa-money-bill-1-wave"></i>
+                                    </div>
+                                    <div class="tab" data-tab-name="toShip"
+                                        onclick="showTab('toShip'), document.getElementById('tableTitle').innerHTML = 'All To Ship Products'">
+                                        To Ship
+                                        <i class="fa-solid fa-truck"></i>
+                                    </div>
+                                    <div class="tab" data-tab-name="toReceive"
+                                        onclick="showTab('toReceive'), document.getElementById('tableTitle').innerHTML = 'All To Receive Products'">
+                                        To Receive
+                                        <i class="fa-solid fa-box-archive"></i>
+                                    </div>
+                                    <div class="tab" data-tab-name="completed"
+                                        onclick="showTab('completed'), document.getElementById('tableTitle').innerHTML = 'All Completed Purchase'">
+                                        Complete
+                                        <i class="fa-solid fa-square-check"></i>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -315,7 +501,7 @@ if ($_SESSION["isVendor"] == true) {
                         <!-- <div class="ec-vendor-card-header" style="border: none;">
                             <div class="tab-container d-flex justify-content-around">
                                 <!-- 03-25-2024 Stacy modified cards -->
-                                <!-- <div class="tab" data-tab-name="allOrders" onclick="showTab('allOrders'), document.getElementById('tableTitle').innerHTML = 'All Order History'">All orders
+                        <!-- <div class="tab" data-tab-name="allOrders" onclick="showTab('allOrders'), document.getElementById('tableTitle').innerHTML = 'All Order History'">All orders
                                     <i class="fa-solid fa-cubes"></i></div>
                                 <div class="tab" data-tab-name="toPay" onclick="showTab('toPay'), document.getElementById('tableTitle').innerHTML = 'All To Pay Products'">To Pay
                                     <i class="fa-solid fa-money-bill-1-wave"></i></div>
@@ -364,36 +550,51 @@ if ($_SESSION["isVendor"] == true) {
                                                             $orderExist = true;
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <?php
+                                            <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'" 
-                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                                <td>
-                                                                <?php 
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                data-bs-target="#productDetails">
+                                                <td>
+                                                    <?php 
                                                                 if(!empty($order['items'][0]['product']['product_image']))
                                                                 {
                                                                     ?>
-                                                                        <img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product">
-                                                                    <?php
+                                                    <img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product">
+                                                    <?php
                                                                 }
                                                             else {
 
                                                                 ?>
-                                                                    <img loading="lazy" class="prod-img" src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>" alt="product">
-                                                                     <?php
+                                                    <img loading="lazy" class="prod-img"
+                                                        src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
+                                                        alt="product">
+                                                    <?php
                                                             }
-                                                                ?> 
-                                                            </td>
-                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                                <td><span><?php echo $order['status']; ?></span></td>
-                                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
+                                                                ?>
+                                                </td>
+                                                <td><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td><span><?php echo $order['status']; ?></span></td>
+                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span>
+                                                </td>
 
-                                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
-                                                            </tr>
+                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
+                                            </tr>
                                             <?php
                                                         }
                                                     }
@@ -411,10 +612,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No Order/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                allOrdersTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        allOrdersTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -422,7 +623,7 @@ if ($_SESSION["isVendor"] == true) {
                                     </table>
                                 </div>
 
-                                
+
                                 <div id="toPay" class="tab-content mt-1">
                                     <!-- Content for "To Pay" tab -->
                                     <table id="toPayTbl" class="table ec-table">
@@ -440,7 +641,7 @@ if ($_SESSION["isVendor"] == true) {
                                             </tr>
                                         </thead>
                                         <tbody>
-                                        <?php
+                                            <?php
                                             if ($_SESSION["isLoggedIn"] && $customer_data) {
                                                 $customer = $customer_data[0];
                                                 $orders = getOrderbyCustomerId($customer['_id']);
@@ -455,36 +656,51 @@ if ($_SESSION["isVendor"] == true) {
                                                             $orderExist = true;
                                                             $totalAmount += $order['total_amount'];
                                             ?>
-                                                            <?php
+                                            <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
-                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                                <td>
-                                                                <?php 
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                data-bs-target="#productDetails">
+                                                <td>
+                                                    <?php 
                                                                 if(!empty($order['items'][0]['product']['product_image']))
                                                                 {
                                                                     ?>
-                                                                        <img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product">
-                                                                    <?php
+                                                    <img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product">
+                                                    <?php
                                                                 }
                                                             else {
 
                                                                 ?>
-                                                                    <img loading="lazy" class="prod-img" src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>" alt="product">
-                                                                     <?php
+                                                    <img loading="lazy" class="prod-img"
+                                                        src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
+                                                        alt="product">
+                                                    <?php
                                                             }
-                                                                ?> 
-                                                                </td>
-                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                                <td><span><?php echo $order['status']; ?></span></td>
-                                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
+                                                                ?>
+                                                </td>
+                                                <td><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td><span><?php echo $order['status']; ?></span></td>
+                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span>
+                                                </td>
 
-                                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
-                                                            </tr>
+                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
+                                            </tr>
                                             <?php
                                                         }
                                                     }
@@ -496,10 +712,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No To Pay Order/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                toPayTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        toPayTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -507,7 +723,7 @@ if ($_SESSION["isVendor"] == true) {
                                     </table>
                                 </div>
 
-                                
+
                                 <div id="toShip" class="tab-content mt-1">
                                     <!-- Content for "To Ship" tab -->
                                     <table id="toShipTbl" class="table ec-table">
@@ -527,7 +743,7 @@ if ($_SESSION["isVendor"] == true) {
                                             </tr>
                                         </thead>
                                         <tbody>
-                                        <?php
+                                            <?php
                                         if ($_SESSION["isLoggedIn"] && $customer_data) {
                                             $customer = $customer_data[0];
                                             $orders = getOrderbyCustomerId($customer['_id']);
@@ -542,37 +758,52 @@ if ($_SESSION["isVendor"] == true) {
                                                         $orderExist = true;
                                                         $totalAmount += $order['total_amount'];
                                         ?>
-                                                        <?php
+                                            <?php
                                                         $jsonorder = json_encode($order);
                                                         ?>
-                                                        <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
-                                                            data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                            <td>
-                                                            <?php 
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                data-bs-target="#productDetails">
+                                                <td>
+                                                    <?php 
                                                                 if(!empty($order['items'][0]['product']['product_image']))
                                                                 {
                                                                     ?>
-                                                                        <img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product">
-                                                                    <?php
+                                                    <img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product">
+                                                    <?php
                                                                 }
                                                             else {
 
                                                                 ?>
-                                                                    <img loading="lazy" class="prod-img" src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>" alt="product">
-                                                                     <?php
+                                                    <img loading="lazy" class="prod-img"
+                                                        src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
+                                                        alt="product">
+                                                    <?php
                                                             }
-                                                                ?> 
-                                                        </td>
-                                                            <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                            <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                            <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                            <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                            <td><span><?php echo $order['status']; ?></span></td>
-                                                            <!-- <td><span><?php echo $order['tracking_number']; ?></span></td>
+                                                                ?>
+                                                </td>
+                                                <td><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td><span><?php echo $order['status']; ?></span></td>
+                                                <!-- <td><span><?php echo $order['tracking_number']; ?></span></td>
                                                             <td><span><?php echo $order['courier_name']; ?></span></td> -->
-                                                            <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
-                                                        </tr>
-                                        <?php
+                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span>
+                                                </td>
+                                            </tr>
+                                            <?php
                                                     }
                                                 }
                                             }
@@ -583,10 +814,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No To Ship Order/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                toShipTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        toShipTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -594,7 +825,7 @@ if ($_SESSION["isVendor"] == true) {
                                     </table>
                                 </div>
 
-                                
+
                                 <div id="toReceive" class="tab-content mt-1">
                                     <!-- Content for "To Receive" tab -->
                                     <table id="toReceiveTbl" class="table ec-table">
@@ -613,7 +844,7 @@ if ($_SESSION["isVendor"] == true) {
                                             </tr>
                                         </thead>
                                         <tbody>
-                                        <?php
+                                            <?php
                                         if ($_SESSION["isLoggedIn"] && $customer_data) {
                                             $customer = $customer_data[0];
                                             $orders = getOrderbyCustomerId($customer['_id']);
@@ -628,42 +859,69 @@ if ($_SESSION["isVendor"] == true) {
                                                         $orderExist = true;
                                                         $totalAmount += $order['total_amount'];
                                         ?>
-                                                        <?php
+                                            <?php
                                                         $jsonorder = json_encode($order);
                                                         ?>
-                                                        <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'" id="to-receive-<?php echo $order['_id']?>" data-value=' <?php echo $jsonorder; ?>'>
-                                                    <td  data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                            <?php 
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                id="to-receive-<?php echo $order['_id']?>"
+                                                data-value=' <?php echo $jsonorder; ?>'>
+                                                <td data-bs-toggle="modal" data-bs-target="#productDetails">
+                                                    <?php 
                                                                 if(!empty($order['items'][0]['product']['product_image']))
                                                                 {
                                                                     ?>
-                                                                        <img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product">
-                                                                    <?php
+                                                    <img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product">
+                                                    <?php
                                                                 }
                                                             else {
 
                                                                 ?>
-                                                                    <img loading="lazy" class="prod-img" src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>" alt="product">
-                                                                     <?php
+                                                    <img loading="lazy" class="prod-img"
+                                                        src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
+                                                        alt="product">
+                                                    <?php
                                                             }
-                                                                ?> 
-                                                            </td>
-                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span></td>
-                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo $order['status']; ?></span></td>
-                                                            <!-- <td><span><?php # echo $order['tracking_number']; ?></span></td>
+                                                                ?>
+                                                </td>
+                                                <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                    data-bs-target="#productDetails"><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?></span>
+                                                </td>
+                                                <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                    data-bs-target="#productDetails"><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                    data-bs-target="#productDetails"><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                    data-bs-target="#productDetails"><span
+                                                        style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                    data-bs-target="#productDetails">
+                                                    <span><?php echo $order['status']; ?></span>
+                                                </td>
+                                                <!-- <td><span><?php # echo $order['tracking_number']; ?></span></td>
                                                             <td><span><?php # echo $order['courier_name']; ?></span></td> -->
-                                                            <td data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails"><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
-                                                            <td>
-                                                                <span class="tbl-btn">
-                                                                    <a class="btn btn-lg btn-primary" onclick="updateCompletedStatus('<?php echo $order['_id']; ?>')">Received</a>
-                                                                </span>
-                                                            </td>
-                                                        </tr>
+                                                <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
+                                            <?php
                                                     }
                                                 }
                                             }
@@ -674,10 +932,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No To Receive Order/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                toReceiveTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        toReceiveTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -720,250 +978,1141 @@ if ($_SESSION["isVendor"] == true) {
                                                             $totalAmount += $order['total_amount'];
                                                             
                                             ?>
-                                                            <?php
+                                            <?php
                                                             $jsonorder = json_encode($order);
                                                             ?>
-                                                            <tr class="tableView" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#e5e5e5'" onmouseout="this.style.backgroundColor='#ffffff'"
-                                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal" data-bs-target="#productDetails">
-                                                                <td>
-                                                                <?php 
+                                            <tr class="tableView" style="cursor:pointer;"
+                                                onmouseover="this.style.backgroundColor='#e5e5e5'"
+                                                onmouseout="this.style.backgroundColor='#ffffff'"
+                                                data-value=' <?php echo $jsonorder; ?>' data-bs-toggle="modal"
+                                                data-bs-target="#productDetails">
+                                                <td>
+                                                    <?php 
                                                                 if(!empty($order['items'][0]['product']['product_image']))
                                                                 {
                                                                     ?>
-                                                                        <img loading="lazy" class="prod-img" src="<?php echo $order['items'][0]['product']['product_image']; ?>" alt="product">
-                                                                    <?php
+                                                    <img loading="lazy" class="prod-img"
+                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                        alt="product">
+                                                    <?php
                                                                 }
                                                             else {
 
                                                                 ?>
-                                                                    <img loading="lazy" class="prod-img" src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>" alt="product">
-                                                                     <?php
+                                                    <img loading="lazy" class="prod-img"
+                                                        src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
+                                                        alt="product">
+                                                    <?php
                                                             }
-                                                                ?>    
+                                                                ?>
 
-                                                            </td>
-                                                                <td><span class="text-truncate" style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?>    </span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span></td>
-                                                                <td><span style="width:4em;"><?php echo $order['items'][0]['price']; ?></span></td>
-                                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span></td>
-                                                                <td><span><?php echo $order['status']; ?></span></td>
-                                                                <!-- <td><span><?php echo $order['tracking_number']; ?></span></td>
+                                                </td>
+                                                <td><span class="text-truncate"
+                                                        style="width:20em;"><?php echo $order['items'][0]['product']['name']; ?>
+                                                    </span></td>
+                                                <td><span
+                                                        style="width:3em;"><?php echo $order['items'][0]['quantity']; ?></span>
+                                                </td>
+                                                <td><span
+                                                        style="width:4em;"><?php echo $order['items'][0]['price']; ?></span>
+                                                </td>
+                                                <td><span style="width:3em;"><?php echo $order['total_amount'] ?></span>
+                                                </td>
+                                                <td><span><?php echo $order['status']; ?></span></td>
+                                                <!-- <td><span><?php echo $order['tracking_number']; ?></span></td>
                                                                 <td><span><?php echo $order['courier_name']; ?></span></td> -->
-                                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span></td>
-                                                                <td>
-                                                                <?php
+                                                <td><span><?php echo date("F j, Y", strtotime($order['updatedAt'])); ?></span>
+                                                </td>
+                                                <td style="display:flex; flex-direction:row; width:auto;">
+                                                    <?php
                                                                     $currentDate = time(); // Current Unix timestamp
 
                                                                     if ($order['return_order']['status'] === 'To Approve') {
-                                                                        echo '<span class="tbl-btn">Refund Requested</span>';
+                                                                        echo '<a class="btn btn-lg btn-primary" style="margin:10px; white-space:nowrap" disabled>Refund Requested</a>';
                                                                     } elseif ($order['return_order']['status'] === 'To Ship') {
-                                                                        echo '<span class="tbl-btn">For Refund</span>';
+                                                                        echo '<a class="btn btn-lg btn-primary" style="margin:10px;" disabled>For Refund</a>';
                                                                     } else {
                                                                         $orderDate = strtotime($order['updatedAt']);
                                                                         $sevenDaysAfterOrder = strtotime('+7 days', $orderDate); // Seven days after the order date
 
-                                                                        if ($currentDate >= $sevenDaysAfterOrder) {
+                                                                        if ($currentDate >= $sevenDaysAfterOrder ||  $order['isRate']=== true ) {
                                                                             echo '<span class="tbl-btn" disabled></span>';
-                                                                        } else {
-                                                                            echo '<a class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#modal-refund-' . $order['_id'] . '">Return/Refund</a>';
-                                                                        }
-                                                                    }
-                                                                    ?>
-                                                                </td>
-                                                                <!-- <td>
+                                                    } else {
+                                                    echo '<a class="btn btn-lg btn-primary" style="margin:10px;"
+                                                        data-bs-toggle="modal"
+                                                        data-bs-target="#modal-refund-' . $order['_id'] . '">Return/Refund</a>';
+                                                    }
+                                                    }
+                                                    ?>
+                                                    <?php 
+                                                                        if (  $order['isRate']!== true ) {
+                                                    
+                                                    ?>
+                                                    <button data-bs-toggle="modal"
+                                                        style="margin:10px; width:100px !important; background-color:#ffaa00;white-space:nowrap"
+                                                        data-bs-target="#feedbackModal-<?php echo $order['_id'];?>"
+                                                        class="btn btn-lg btn-primary feedback_card_btn">
+                                                        <i class="fa-regular fa-star"></i> Rate it
+                                                    </button>
+                                                    <?php }else{ ?>
+                                                    <button data-bs-toggle="modal"
+                                                        style="margin:10px; width:100px !important; background-color:#ffaa00; white-space:nowrap"
+                                                        class="btn btn-lg btn-primary feedback_card_btn" disabled>
+                                                        <i class="fa-regular fa-star"></i> Rated
+                                                    </button>
+                                                    <?php } ?>
+
+
+                                                </td>
+                                                <!-- <td>
                                                                     <span class="tbl-btn">
                                                                         <a class="btn btn-lg btn-primary" data-bs-toggle="modal" data-bs-target="#modal-refund-<?php echo $order['_id']; ?>">Return/Refund</a>
-                                                                    </span>
-                                                                </td> -->
-                                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
-                                                            </tr>
-                                                            <div class="modal fade" id="modal-refund-<?php echo $order['_id']; ?>" tabindex="-1" role="dialog" aria-hidden="true">
-                                                                <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
-                                                                    <div class="modal-content">
-                                                                        <div class="modal-header justify-content-end border-bottom-0">
-                                                                            <button type="button" class="btn-close-icon" data-bs-dismiss="modal" aria-label="Close">
-                                                                                <i class="mdi mdi-close"></i>
-                                                                            </button>
-                                                                        </div>
-                                                                        <div class="modal-body pt-0">
-                                                                            <form enctype="multipart/form-data" method="POST">
-                                                                                <div class="form-group">
-                                                                                    <label for="reason-<?php echo $order['_id']; ?>">Reason:</label>
-                                                                                    <input type="text" class="form-control" id="reason-<?php echo $order['_id']; ?>" name="reason" value="<?php echo $order['return_order']['reason']; ?>" placeholder="Enter your Reason">
-                                                                                </div>
-                                                                                <div class="form-group">
-                                                                                    <label for="image-<?php echo $order['_id']; ?>">Upload Image:</label>
-                                                                                    <div class="input-group">
-                                                                                        <label for="image-<?php echo $order['_id']; ?>" class="custom-file-label">
-                                                                                            <span class="mdi mdi-cloud-upload" style="font-size: 50px; margin-right:10px;"></span>
-                                                                                        </label>
-                                                                                        <input type="file" class="ec-image-upload" id="image-<?php echo $order['_id']; ?>" name="uploadedImage" accept="image/*" onchange="displaySelectedImage(this, '<?php echo $order['_id']; ?>')" style="display: none;">
-                                                                                        <div id="image-preview-container-<?php echo $order['_id']; ?>"></div>
-                                                                                    </div>
-                                                                                </div>
+                                                    </span>
+                                                </td> -->
+                                                <!-- <td><span class="tbl-btn"><a class="btn btn-lg btn-primary" href="#">View</a></span></td> -->
+                                            </tr>
+                                            <div class="modal fade" id="feedbackModal-<?php echo $order['_id']; ?>"
+                                                tabindex="-1" role="dialog" aria-hidden="true">
+                                                <div class="modal-dialog modal-dialog-centered" role="document">
+                                                    <div class="modal-content">
+                                                        <div class=" modalHeader">
 
-                                                                                <button type="submit" class="btn btn-primary" id="submit-button-<?php echo $order['_id']; ?>">Submit</button>
+                                                            <button type="button" class="close" data-bs-dismiss="modal"
+                                                                aria-label="Close" data-message="no-product">
+                                                                <span style="font-weight:400; font-size:26px"
+                                                                    aria-hidden="true">&times;</span>
+                                                            </button>
+                                                        </div>
+                                                        <div class="modal-body">
 
-                                                                            </form>
-                                                                            <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css">
-                                                                            <script>
-                                                                                var sessionToken = `<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>`;
-                                                                                var email = `<?php echo isset($_SESSION["email"]) ? $_SESSION["email"] : ""; ?>`;
-                                                                                var password = `<?php echo isset($_SESSION["password"]) ? $_SESSION["password"] : ""; ?>`;
 
-                                                                                function login(username, password, callback) {
-                                                                                    fetch("https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/login", {
-                                                                                            method: "POST",
-                                                                                            headers: {
-                                                                                                "Content-Type": "application/json",
-                                                                                                "X-Api-Key": "{{apiKey}}"
-                                                                                            },
-                                                                                            body: JSON.stringify({
-                                                                                                username: username,
-                                                                                                password: password
-                                                                                            })
-                                                                                        })
-                                                                                        .then(response => {
-                                                                                            if (response.ok) {
-                                                                                                return response.json();
-                                                                                            } else {
-                                                                                                throw new Error("Unable to login");
-                                                                                            }
-                                                                                        })
-                                                                                        .then(data => {
-                                                                                            fetch("update-token-session.php", {
-                                                                                                    method: "POST",
-                                                                                                    headers: {
-                                                                                                        "Content-Type": "application/json"
-                                                                                                    },
-                                                                                                    body: JSON.stringify({
-                                                                                                        token: data.token
-                                                                                                    })
-                                                                                                })
-                                                                                                .then(response => response.json())
-                                                                                                .then(result => {
-                                                                                                    if (result.status === 'success') {
-                                                                                                        sessionToken = data.token;
-                                                                                                        console.log("New Token:", sessionToken);
-                                                                                                        callback(sessionToken);
-                                                                                                    } else {
-                                                                                                        throw new Error("Unable to update session token");
-                                                                                                    }
-                                                                                                });
-                                                                                        })
-                                                                                        .catch(error => {
-                                                                                            console.error("Error:", error.message);
-                                                                                        });
+                                                            <div id="product-container1">
+                                                                <div class="product-con display"
+                                                                    style="height:200px; width:80%">
+
+                                                                    <?php 
+                                                                    if(!empty($order['items'][0]['product']['product_image']))
+                                                                    {
+                                                                        ?>
+                                                                    <img loading="lazy" class="productImg"
+                                                                        src="<?php echo $order['items'][0]['product']['product_image']; ?>"
+                                                                        alt="product">
+                                                                    <?php
+                                                                    }
+                                                                    else {
+
+                                                                        ?>
+                                                                    <img loading="lazy" class="productImg"
+                                                                        src="<?php echo "https://api.obanana.com/images/storage/web_images/1709002636671-viber_image_2024-02-22_15-54-42-498.png"; ?>"
+                                                                        alt="product">
+                                                                    <?php
+                                                                    }
+                                                                    ?>
+                                                                    <div class="prodDetails-feed">
+                                                                        <p class="prodTxtName">
+                                                                            <?php echo $order['items'][0]['product']['name']; ?>
+                                                                        </p>
+                                                                        <p class="prodTxtPrice">
+                                                                            <?php echo $order['items'][0]['price']; ?>
+                                                                        </p>
+
+
+
+
+                                                                    </div>
+
+                                                                </div>
+                                                                <div class="rate-con "
+                                                                    id="star-rate-<?php echo $order['_id']; ?>">
+                                                                    <p class=" rate-text">Rating: </p>
+                                                                    <i class="ecicon eci-star" data-value="1"></i>
+                                                                    <i class="ecicon eci-star" data-value="2"></i>
+                                                                    <i class="ecicon eci-star" data-value="3"></i>
+                                                                    <i class="ecicon eci-star" data-value="4"></i>
+                                                                    <i class="ecicon eci-star" data-value="5"></i>
+                                                                </div>
+                                                            </div>
+                                                            <div class="product-prev" id='prod-prev'>
+
+                                                            </div>
+                                                            <span class="remove-prev-feed hide"
+                                                                id="remove-preview-feed-<?php echo $order['_id']; ?>"
+                                                                style="" aria-hidden="true">&times;</span>
+                                                            <div class="message-preview-feed hide"
+                                                                id="message-preview-feed-<?php echo $order['_id']; ?>">
+
+
+                                                            </div>
+                                                            <div class="footer-chat" id="footer-chat">
+
+                                                                <div class="gallery-icon">
+
+                                                                    <label
+                                                                        for="file-input-feed-<?php echo $order['_id']; ?>"
+                                                                        class=""><i
+                                                                            class="fa-regular fa-images"></i></label>
+                                                                    <input type="file" class="file-input-feed hide"
+                                                                        multiple
+                                                                        id="file-input-feed-<?php echo $order['_id']; ?>"
+                                                                        accept="image/*,video/*">
+                                                                </div>
+
+                                                                <textarea type="text" class="message-input-feed"
+                                                                    placeholder="Type a feedback..."
+                                                                    id="message-input-feed-<?php echo $order['_id']; ?>"></textarea>
+                                                                <button class="send-btn-feed"
+                                                                    id="send-btn-feed-<?php echo $order['_id']; ?>">SUBMIT</button>
+                                                            </div>
+
+                                                        </div>
+                                                        <!-- <div class="modal-footer">
+                                                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Send</button>
+                                                        </div> -->
+                                                        <script>
+                                                        document.getElementById(
+                                                                'feedbackModal-<?php echo $order['_id']; ?>')
+                                                            .addEventListener('shown.bs.modal', async function() {
+
+                                                                messageInput1['<?php echo $order['_id']; ?>'] =
+                                                                    document
+                                                                    .getElementById(
+                                                                        "message-input-feed-<?php echo $order['_id']; ?>"
+                                                                    );
+                                                                fileInput1['<?php echo $order['_id']; ?>'] =
+                                                                    document
+                                                                    .getElementById(
+                                                                        "file-input-feed-<?php echo $order['_id']; ?>"
+                                                                    );
+                                                                messagePreview1[
+                                                                        '<?php echo $order['_id']; ?>'] =
+                                                                    document
+                                                                    .getElementById(
+                                                                        'message-preview-feed-<?php echo $order['_id']; ?>'
+                                                                    );
+                                                                removePreview1['<?php echo $order['_id']; ?>'] =
+                                                                    document
+                                                                    .getElementById(
+                                                                        "remove-preview-feed-<?php echo $order['_id']; ?>"
+                                                                    );
+
+                                                                sendButton1['<?php echo $order['_id']; ?>'] =
+                                                                    document
+                                                                    .getElementById(
+                                                                        "send-btn-feed-<?php echo $order['_id']; ?>"
+                                                                    );
+
+
+                                                                sendButton1['<?php echo $order['_id']; ?>']
+                                                                    .addEventListener('click', () => {
+                                                                        sendReview();
+                                                                    });
+                                                                async function sendFeedback(variation, rating,
+                                                                    comments, images, videos, customer_id,
+                                                                    order_id,
+                                                                    vendor_id, files
+                                                                ) {
+                                                                    var sessionToken =
+                                                                        `<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>`;
+                                                                    const formData = new FormData();
+                                                                    const currentDate = new Date();
+                                                                    const formattedDate = currentDate
+                                                                        .toISOString().replace(/[-T:]/g, "")
+                                                                        .slice(0, -5);
+
+
+                                                                    formData.append('variation', variation);
+                                                                    formData.append('rating', rating);
+                                                                    formData.append('comments', comments);
+
+                                                                    formData.append('customer_id',
+                                                                        customer_id);
+                                                                    formData.append('order_id', order_id);
+                                                                    formData.append('vendor_id', vendor_id);
+                                                                    images?.forEach((image, index) => {
+                                                                        formData.append(
+                                                                            `images`,
+                                                                            image);
+                                                                    });
+
+                                                                    // Append videos to FormData
+                                                                    videos?.forEach((video, index) => {
+                                                                        formData.append(
+                                                                            `videos`,
+                                                                            video);
+                                                                    });
+                                                                    // console.log("file")
+                                                                    // const formData = new FormData();
+                                                                    // formData.append('data', JSON.stringify({
+                                                                    //     variation: variation,
+                                                                    //     rating: String(rating),
+                                                                    //     comments: comments,
+                                                                    //     customer_id: customer_id,
+                                                                    //     order_id: order_id,
+                                                                    //     vendor_id: vendor_id,
+                                                                    // }));
+
+                                                                    // // Assuming images and videos are arrays of File objects
+                                                                    // images?.forEach((image, index) => {
+                                                                    //     formData.append(
+                                                                    //         `images[${index}]`,
+                                                                    //         image);
+                                                                    // });
+                                                                    // videos?.forEach((video, index) => {
+                                                                    //     formData.append(
+                                                                    //         `videos[${index}]`,
+                                                                    //         video);
+                                                                    // });
+                                                                    console.log(files)
+                                                                    const response = await fetch(
+                                                                        `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/products/<?php echo $order['items'][0]['product']['product_id'];?>/ratings`, {
+                                                                            method: 'POST',
+                                                                            headers: {
+                                                                                'Authorization': 'Bearer ' +
+                                                                                    sessionToken,
+                                                                            },
+                                                                            body: formData
+
+                                                                        });
+                                                                    // JSON.stringify({
+
+                                                                    //     variation: variation,
+                                                                    //     rating: String(
+                                                                    //         rating
+                                                                    //     ),
+                                                                    //     comments: comments,
+                                                                    //     images: images,
+                                                                    //     videos: videos,
+                                                                    //     customer_id: customer_id,
+                                                                    //     order_id: order_id,
+                                                                    //     vendor_id: vendor_id,
+
+                                                                    // })
+                                                                    if (!response.ok) {
+                                                                        throw new Error(
+                                                                            'Failed to send text message'
+                                                                        );
+                                                                    } else {
+                                                                        // fileInput.value = '';
+                                                                        // messageInput.value = '';
+                                                                        // send_btn.textContent = "Send";
+                                                                        // send_btn.disabled = false
+                                                                        // JSON.stringify({
+                                                                        //     ratings: [{
+                                                                        //         variation: variation,
+                                                                        //         rating: String(
+                                                                        //             rating
+                                                                        //         ),
+                                                                        //         comments: comments,
+                                                                        //         images: images,
+                                                                        //         videos: videos,
+                                                                        //         customer_id: customer_id,
+                                                                        //         order_id: order_id,
+                                                                        //         vendor_id: vendor_id,
+
+                                                                        //     }]
+                                                                        // })
+                                                                        const response1 = await fetch(
+                                                                            `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/<?php echo $order['_id'];?>`, {
+                                                                                method: 'PATCH',
+                                                                                headers: {
+                                                                                    'Content-Type': 'application/json',
+                                                                                    'Authorization': 'Bearer ' +
+                                                                                        sessionToken,
+                                                                                },
+                                                                                body: JSON.stringify({
+                                                                                    "isRate": true
+                                                                                })
+                                                                            });
+                                                                        if (!response1.ok) {
+                                                                            throw new Error(
+                                                                                `
+                                                                                update order failed `
+                                                                            );
+                                                                        } else {
+                                                                            sendButton1[
+                                                                                    '<?php echo $order['_id']; ?>'
+                                                                                ].textContent =
+                                                                                "Submitted";
+                                                                            sendButton1[
+                                                                                '<?php echo $order['_id']; ?>'
+                                                                            ].disabled = true
+                                                                        }
+
+                                                                    }
+                                                                    const messageData = await response
+                                                                        .json();
+                                                                }
+                                                                async function uploadMediaFeed(file,
+                                                                    mediaType, ) {
+                                                                    const formData = new FormData();
+                                                                    console.log(file)
+                                                                    const currentDate = new Date();
+                                                                    const formattedDate =
+                                                                        currentDate
+                                                                        .toISOString().replace(
+                                                                            /[-T:]/g, "")
+                                                                        .slice(0, -5);
+                                                                    const fileName =
+                                                                        `
+                                                                                $ {
+                                                                                    formattedDate
+                                                                                } - $ {
+                                                                                    file.name
                                                                                 }
+                                                                                `;
+                                                                    formData.append('image_id',
+                                                                        '<?php echo $order['items'][0]['product']['product_id'] ?>'
+                                                                    );
+                                                                    formData.append('category',
+                                                                        'product');
+                                                                    formData.append('image', file);
 
-                                                                                function displaySelectedImage(input, orderId) {
-                                                                                    var previewContainer = document.getElementById('image-preview-container-' + orderId);
-                                                                                    var file = input.files[0];
 
-                                                                                    previewContainer.innerHTML = ''; // Clear the previous image
-
-                                                                                    var reader = new FileReader();
-                                                                                    reader.onload = function(e) {
-                                                                                        var img = document.createElement('img');
-                                                                                        img.src = e.target.result;
-                                                                                        img.style.width = '80px';
-                                                                                        img.style.height = '80px';
-                                                                                        img.style.objectFit = 'cover';
-                                                                                        previewContainer.appendChild(img);
-                                                                                    };
-
-                                                                                    reader.readAsDataURL(file);
+                                                                    const response = await fetch(
+                                                                        '<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
+                                                                            method: 'POST',
+                                                                            body: formData
+                                                                        });
+                                                                    if (!response.ok) {
+                                                                        throw new Error(
+                                                                            `
+                                                                                Failed to upload $ {
+                                                                                    mediaType
                                                                                 }
+                                                                                `
+                                                                        );
+                                                                    } else {
+                                                                        const responseData =
+                                                                            await response
+                                                                            .json();
 
-                                                                                document.addEventListener('DOMContentLoaded', function() {
-                                                                                    document.getElementById('submit-button-<?php echo $order['_id']; ?>').addEventListener('click', function(event) {
-                                                                                        event.preventDefault();
-                                                                                        var orderId = '<?php echo $order['_id']; ?>';
-                                                                                            var reason = document.getElementById('reason-' + orderId).value;
 
-                                                                                            console.log('Order ID:', orderId);
-                                                                                            console.log('Reason:', reason);
+                                                                        return responseData
+                                                                            .filename;
+                                                                    }
+                                                                    // const responseData = await response.json();
+                                                                }
+                                                                async function sendReview() {
 
-                                                                                        login(email, password, function(sessionToken) {
-                                                                                            
 
-                                                                                            // Get the order ID and reason
-                                                                                           
 
-                                                                                            // Upload image
+                                                                    console.log(messageInput1)
+                                                                    console.log(fileInput1)
 
-                                                                                            var fileInput = document.getElementById('image-' + orderId);
-                                                                                            // console.log(fileInput);
-                                                                                            var file = fileInput.files[0];
-                                                                                            console.log(file);
+                                                                    const comments = messageInput1[
+                                                                            '<?php echo $order['_id']; ?>'
+                                                                        ]
+                                                                        .value
+                                                                        .trim();
+                                                                    const images = [];
+                                                                    const videos = [];
+                                                                    const variation =
+                                                                        '<?php echo $order['items'][0]['product']['name']; ?>'
+                                                                    const rating = globalRate;
+                                                                    const order_id =
+                                                                        '<?php echo $order['_id']; ?>'
+                                                                    const vendor_id =
+                                                                        '<?php echo $order['items'][0]['vendor_id']; ?>'
+                                                                    const customer_id =
+                                                                        '<?php echo $order['customer'][0]['customer_id']; ?>'
+                                                                    if (comments !== "" && !
+                                                                        fileInput1[
+                                                                            '<?php echo $order['_id']; ?>'
+                                                                        ].files[
+                                                                            0]) {
+                                                                        sendButton1[
+                                                                                '<?php echo $order['_id']; ?>'
+                                                                            ].textContent =
+                                                                            "Sending...";
+                                                                        sendButton1[
+                                                                            '<?php echo $order['_id']; ?>'
+                                                                        ].disabled = true
+                                                                        try {
+                                                                            // Send text message
+                                                                            await sendFeedback(
+                                                                                variation,
+                                                                                rating,
+                                                                                comments,
+                                                                                images,
+                                                                                videos,
+                                                                                customer_id,
+                                                                                order_id,
+                                                                                vendor_id
+                                                                            );
+                                                                        } catch (error) {
+                                                                            console.error(
+                                                                                'Error sending message:',
+                                                                                error.message);
+                                                                        }
+                                                                    } else if (fileInput1[
+                                                                            '<?php echo $order['_id']; ?>'
+                                                                        ].files.length > 0) {
+                                                                        sendButton1[
+                                                                                '<?php echo $order['_id']; ?>'
+                                                                            ].textContent =
+                                                                            "Sending...";
+                                                                        sendButton1[
+                                                                            '<?php echo $order['_id']; ?>'
+                                                                        ].disabled = true
+                                                                        try {
 
-                                                                                            if (file) {
-                                                                                                var formData = new FormData();
-                                                                                                formData.append('image_id', orderId);
-                                                                                                formData.append('category', 'order');
-                                                                                                formData.append('image', file);
+                                                                            const files =
+                                                                                fileInput1[
+                                                                                    '<?php echo $order['_id']; ?>'
+                                                                                ].files;
 
-                                                                                                console.log('FormData:', formData);
 
-                                                                                                fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
-                                                                                                        method: 'POST',
-                                                                                                        body: formData
-                                                                                                    })
-                                                                                                    .then(response => {
-                                                                                                        if (response.ok) {
-                                                                                                            console.log('success')
-                                                                                                            return response.json();
-                                                                                                        } else {
-                                                                                                            console.error('File upload failed');
-                                                                                                            console.log('fail')
+                                                                            const
+                                                                                uploadPromises = [];
+                                                                            let imgCount = 0;
+                                                                            let vidCount = 0;
 
-                                                                                                            throw new Error('File upload failed');
-                                                                                                        }
-                                                                                                    })
-                                                                                                    .then(data => {
-                                                                                                        console.log('Upload response:', data);
-                                                                                                        const filename = data.filename;
-                                                                                                       
-                                                                                                        const payload = {
-                                                                                                            return_order: {
-                                                                                                                reason: reason,
-                                                                                                                image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/order_uploads/${filename}`,
-                                                                                                                status: 'To Approve',
-                                                                                                            }
-                                                                                                        }
-                                                                                                        // const token = '<?php echo $_SESSION["token"] ?>';
-                                                                                                        fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/' + orderId, {
-                                                                                                                method: 'PATCH',
-                                                                                                                headers: {
-                                                                                                                    'Content-Type': 'application/json',
-                                                                                                                    'Authorization': 'Bearer ' + sessionToken,
-                                                                                                                },
-                                                                                                                body: JSON.stringify(payload),
-                                                                                                            })
-                                                                                                            .then(response => response.json())
-                                                                                                            .then(updatedOrder => {
-                                                                                                                // Handle the updated order response as needed
-                                                                                                                console.log('Order updated successfully:', updatedOrder);
-                                                                                                                location.reload();
-                                                                                                            })
-                                                                                                            .catch(error => {
-                                                                                                                console.error('Error updating order:', error);
-                                                                                                            });
-                                                                                                    })
-                                                                                                    .catch(error => {
-                                                                                                        console.error('Error uploading image:', error);
-                                                                                                    });
-                                                                                            }
-                                                                                        })
-                                                                                    });
+                                                                            // Loop through each selected file
+                                                                            for (const file of
+                                                                                    files) {
+                                                                                const fileType =
+                                                                                    file.type
+                                                                                    .split('/')[0];
+
+                                                                                if (fileType ===
+                                                                                    'image') {
+                                                                                    // const uploadPromise =
+                                                                                    //     uploadMediaFeed(file,
+                                                                                    //         'image')
+                                                                                    //     .then(imageUrl => {
+                                                                                    //         images.push(
+                                                                                    //             `
+                                                                                    https: //<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/product_uploads/${imageUrl}`
+
+                                                                                        //         );
+                                                                                        //     })
+                                                                                        //     .catch(error => {
+                                                                                        //         console.error(
+                                                                                        //             'Error uploading image:',
+                                                                                        //             error
+                                                                                        //             .message
+                                                                                        //         );
+                                                                                        //     });
+                                                                                        // uploadPromises.push(
+                                                                                        //     uploadPromise);
+                                                                                        // images[imgCount] = file
+                                                                                        // imgCount = imgCount + 1;
+                                                                                        images.push(
+                                                                                            file);
+
+                                                                                }
+                                                                                else if (
+                                                                                    fileType ===
+                                                                                    'video') {
+                                                                                    // const uploadPromise =
+                                                                                    //     uploadMediaFeed(file,
+                                                                                    //         'video')
+                                                                                    //     .then(videoUrl => {
+                                                                                    //         videos.push(
+                                                                                    //             videoUrl
+                                                                                    //         );
+                                                                                    //     })
+                                                                                    //     .catch(error => {
+                                                                                    //         console.error(
+                                                                                    //             'Error uploading video:',
+                                                                                    //             error
+                                                                                    //             .message
+                                                                                    //         );
+                                                                                    //     });
+                                                                                    // uploadPromises.push(
+                                                                                    //     uploadPromise);
+                                                                                    // videos[vidCount] = file
+                                                                                    // vidCount = vidCount + 1;
+                                                                                    videos.push(
+                                                                                        file)
+                                                                                }
+                                                                            }
+
+                                                                            // Wait for all uploads to complete
+                                                                            // Promise.all(uploadPromises)
+                                                                            // .then(async () => {
+                                                                            // Send image message if there are any image URLs
+
+                                                                            await sendFeedback
+                                                                                (variation,
+                                                                                    rating,
+                                                                                    comments,
+                                                                                    images,
+                                                                                    videos,
+                                                                                    customer_id,
+                                                                                    order_id,
+                                                                                    vendor_id, files
+                                                                                )
+
+                                                                        } catch (error) {
+                                                                            console.error(
+                                                                                'Error sending media message:',
+                                                                                error
+                                                                                .message
+                                                                            );
+                                                                        }
+                                                                        // })
+                                                                        // .finally(() => {
+                                                                        //     sendButton1[
+                                                                        //             '<?php echo $order['_id']; ?>'
+                                                                        //         ].textContent =
+                                                                        //         "Sent";
+                                                                        //     sendButton1[
+                                                                        //             '<?php echo $order['_id']; ?>'
+                                                                        //         ].disabled =
+                                                                        //         true;
+                                                                        // });
+                                                                    }
+
+
+                                                                }
+                                                                document.querySelectorAll(
+                                                                        '#star-rate-<?php echo $order['_id']; ?> i'
+                                                                    )
+                                                                    .forEach(
+                                                                        star => {
+                                                                            star.addEventListener(
+                                                                                'click',
+                                                                                function() {
+                                                                                    const value =
+                                                                                        parseInt(
+                                                                                            this
+                                                                                            .getAttribute(
+                                                                                                'data-value'
+                                                                                            ));
+
+                                                                                    if (globalRate ===
+                                                                                        value) {
+                                                                                        // If the clicked star is already filled and clicked again, reset the rating
+                                                                                        globalRate =
+                                                                                            0;
+                                                                                    } else {
+                                                                                        // Set the rating to the clicked star's value
+                                                                                        globalRate =
+                                                                                            value;
+                                                                                    }
+
+                                                                                    updateStars(
+                                                                                        globalRate
+                                                                                    );
+                                                                                    // console.log(value);
                                                                                 });
-                                                                            </script>
+                                                                        });
+
+                                                                function updateStars(rate) {
+                                                                    document.querySelectorAll(
+                                                                            '#star-rate-<?php echo $order['_id'];?> i'
+                                                                        )
+                                                                        .forEach(star => {
+                                                                            const value = parseInt(
+                                                                                star
+                                                                                .getAttribute(
+                                                                                    'data-value'
+                                                                                ));
+                                                                            if (value <= rate) {
+                                                                                star.classList.add(
+                                                                                    'fill');
+
+                                                                            } else {
+                                                                                star.classList
+                                                                                    .remove(
+                                                                                        'fill');
+                                                                            }
+                                                                        });
+                                                                }
+                                                                // naming = [
+                                                                //     "message<?php echo $order['_id']; ?> ",
+                                                                //     "file<?php echo $order['_id']; ?> ",
+                                                                //     'messageP<?php echo $order['_id']; ?>',
+                                                                //     "remove<?php echo $order['_id']; ?>",
+                                                                //     "send<?php echo $order['_id']; ?>"
+                                                                // ]
+                                                                // const messageInput1 = name[0];
+                                                                // const fileInput1 = name[1];
+                                                                // const messagePreview1 = name[2];
+                                                                // const removePreview1 = name[3];
+                                                                // const sendButton1 = name[4];
+
+                                                                // Add event listener to trigger file input when gallery icon is clicked
 
 
+                                                                // Add event listener to file input
+                                                                fileInput1[
+                                                                        '<?php echo $order['_id']; ?>']
+                                                                    .addEventListener(
+                                                                        'change', () => {
+                                                                            const files = fileInput1[
+                                                                                    '<?php echo $order['_id']; ?>'
+                                                                                ]
+                                                                                .files;
+                                                                            if (files.length > 3) {
+                                                                                alert(
+                                                                                    'You can select up to 3 files only.'
+                                                                                );
+                                                                                fileInput1[
+                                                                                        '<?php echo $order['_id']; ?>'
+                                                                                    ]
+                                                                                    .value =
+                                                                                    ''; // Clear selected files
+                                                                                return;
+                                                                            }
+
+                                                                            for (const file of files) {
+                                                                                if (!file.type
+                                                                                    .startsWith(
+                                                                                        'image/') &&
+                                                                                    file
+                                                                                    .type !==
+                                                                                    'video/mp4') {
+                                                                                    alert(
+                                                                                        'Please select image or video files only.'
+                                                                                    );
+                                                                                    fileInput1[
+                                                                                            '<?php echo $order['_id']; ?>'
+                                                                                        ]
+                                                                                        .value =
+                                                                                        ''; // Clear selected files
+                                                                                    return;
+                                                                                }
+                                                                            }
+
+                                                                            // Hide message input and show preview
+                                                                            // messageInput1.classList.add('hide');
+                                                                            messagePreview1[
+                                                                                    '<?php echo $order['_id']; ?>'
+                                                                                ]
+                                                                                .classList.remove(
+                                                                                    'hide');
+                                                                            removePreview1[
+                                                                                    '<?php echo $order['_id']; ?>'
+                                                                                ]
+                                                                                .classList.remove(
+                                                                                    'hide');
+
+                                                                            // Clear previous previews
+                                                                            messagePreview1[
+                                                                                    '<?php echo $order['_id']; ?>'
+                                                                                ]
+                                                                                .innerHTML = '';
+
+                                                                            // Display image or video preview for each file
+                                                                            for (const file of files) {
+                                                                                const fileType = file
+                                                                                    .type
+                                                                                    .split(
+                                                                                        '/')[
+                                                                                        0
+                                                                                    ]; // Get file type (image or video)
+                                                                                const reader =
+                                                                                    new FileReader();
+                                                                                reader.onload = () => {
+                                                                                    if (fileType ===
+                                                                                        'image') {
+                                                                                        const img =
+                                                                                            document
+                                                                                            .createElement(
+                                                                                                'img'
+                                                                                            );
+                                                                                        img.src =
+                                                                                            reader
+                                                                                            .result;
+                                                                                        img.classList
+                                                                                            .add(
+                                                                                                'img-prev-feed'
+                                                                                            );
+                                                                                        img.alt =
+                                                                                            'Image preview';
+                                                                                        messagePreview1
+                                                                                            [
+                                                                                                '<?php echo $order['_id']; ?>'
+                                                                                            ]
+                                                                                            .appendChild(
+                                                                                                img
+                                                                                            );
+                                                                                    } else if (
+                                                                                        fileType ===
+                                                                                        'video') {
+                                                                                        const
+                                                                                            video =
+                                                                                            document
+                                                                                            .createElement(
+                                                                                                'video'
+                                                                                            );
+                                                                                        video
+                                                                                            .controls =
+                                                                                            true;
+                                                                                        video
+                                                                                            .classList
+                                                                                            .add(
+                                                                                                'vid-prev-feed'
+                                                                                            );
+                                                                                        const
+                                                                                            source =
+                                                                                            document
+                                                                                            .createElement(
+                                                                                                'source'
+                                                                                            );
+                                                                                        source.src =
+                                                                                            reader
+                                                                                            .result;
+                                                                                        source
+                                                                                            .type =
+                                                                                            file
+                                                                                            .type;
+                                                                                        video
+                                                                                            .appendChild(
+                                                                                                source
+                                                                                            );
+                                                                                        messagePreview1
+                                                                                            [
+                                                                                                '<?php echo $order['_id']; ?>'
+                                                                                            ]
+                                                                                            .appendChild(
+                                                                                                video
+                                                                                            );
+                                                                                    }
+                                                                                };
+                                                                                reader.readAsDataURL(
+                                                                                    file);
+                                                                            }
+                                                                        });
+                                                                // sendButton1.addEventListener("click",
+                                                                //     sendMessage);
+                                                                removePreview1[
+                                                                        '<?php echo $order['_id']; ?>']
+                                                                    .addEventListener(
+                                                                        "click",
+                                                                        removePreviewFunc);
+
+                                                                function removePreviewFunc() {
+                                                                    // Remove selected file
+                                                                    fileInput1[
+                                                                            '<?php echo $order['_id']; ?>'
+                                                                        ]
+                                                                        .value =
+                                                                        '';
+
+                                                                    // Hide message preview and show message input
+                                                                    // messageInput1.classList.remove('hide');
+                                                                    messagePreview1[
+                                                                            '<?php echo $order['_id']; ?>'
+                                                                        ]
+                                                                        .classList
+                                                                        .add('hide');
+                                                                    removePreview1[
+                                                                            '<?php echo $order['_id']; ?>'
+                                                                        ]
+                                                                        .classList
+                                                                        .add('hide');
+
+                                                                    // Clear message preview content
+                                                                    messagePreview1[
+                                                                            '<?php echo $order['_id']; ?>'
+                                                                        ]
+                                                                        .innerHTML =
+                                                                        '';
+                                                                }
+                                                            });
+                                                        </script>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                            <div class="modal fade" id="modal-refund-<?php echo $order['_id']; ?>"
+                                                tabindex="-1" role="dialog" aria-hidden="true">
+                                                <div class="modal-dialog modal-dialog-centered modal-lg"
+                                                    role="document">
+                                                    <div class="modal-content">
+                                                        <div class="modal-header justify-content-end border-bottom-0">
+                                                            <button type="button" class="btn-close-icon"
+                                                                data-bs-dismiss="modal" aria-label="Close">
+                                                                <i class="mdi mdi-close"></i>
+                                                            </button>
+                                                        </div>
+                                                        <div class="modal-body pt-0">
+                                                            <form enctype="multipart/form-data" method="POST">
+                                                                <div class="form-group">
+                                                                    <label
+                                                                        for="reason-<?php echo $order['_id']; ?>">Reason:</label>
+                                                                    <input type="text" class="form-control"
+                                                                        id="reason-<?php echo $order['_id']; ?>"
+                                                                        name="reason"
+                                                                        value="<?php echo $order['return_order']['reason']; ?>"
+                                                                        placeholder="Enter your Reason">
+                                                                </div>
+                                                                <div class="form-group">
+                                                                    <label
+                                                                        for="image-<?php echo $order['_id']; ?>">Upload
+                                                                        Image:</label>
+                                                                    <div class="input-group">
+                                                                        <label for="image-<?php echo $order['_id']; ?>"
+                                                                            class="custom-file-label">
+                                                                            <span class="mdi mdi-cloud-upload"
+                                                                                style="font-size: 50px; margin-right:10px;"></span>
+                                                                        </label>
+                                                                        <input type="file" class="ec-image-upload"
+                                                                            id="image-<?php echo $order['_id']; ?>"
+                                                                            name="uploadedImage" accept="image/*"
+                                                                            onchange="displaySelectedImage(this, '<?php echo $order['_id']; ?>')"
+                                                                            style="display: none;">
+                                                                        <div
+                                                                            id="image-preview-container-<?php echo $order['_id']; ?>">
                                                                         </div>
                                                                     </div>
                                                                 </div>
-                                                            </div>
+
+                                                                <button type="submit" class="btn btn-primary"
+                                                                    id="submit-button-<?php echo $order['_id']; ?>">Submit</button>
+
+                                                            </form>
+                                                            <link rel="stylesheet"
+                                                                href="https://cdn.jsdelivr.net/npm/@mdi/font/css/materialdesignicons.min.css">
+                                                            <script>
+                                                            var sessionToken =
+                                                                `<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>`;
+                                                            var email =
+                                                                `<?php echo isset($_SESSION["email"]) ? $_SESSION["email"] : ""; ?>`;
+                                                            var password =
+                                                                `<?php echo isset($_SESSION["password"]) ? $_SESSION["password"] : ""; ?>`;
+
+                                                            function login(username, password, callback) {
+                                                                fetch("https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/login", {
+                                                                        method: "POST",
+                                                                        headers: {
+                                                                            "Content-Type": "application/json",
+                                                                            "X-Api-Key": "{{apiKey}}"
+                                                                        },
+                                                                        body: JSON.stringify({
+                                                                            username: username,
+                                                                            password: password
+                                                                        })
+                                                                    })
+                                                                    .then(response => {
+                                                                        if (response.ok) {
+                                                                            return response.json();
+                                                                        } else {
+                                                                            throw new Error("Unable to login");
+                                                                        }
+                                                                    })
+                                                                    .then(data => {
+                                                                        fetch("update-token-session.php", {
+                                                                                method: "POST",
+                                                                                headers: {
+                                                                                    "Content-Type": "application/json"
+                                                                                },
+                                                                                body: JSON.stringify({
+                                                                                    token: data
+                                                                                        .token
+                                                                                })
+                                                                            })
+                                                                            .then(response => response.json())
+                                                                            .then(result => {
+                                                                                if (result.status ===
+                                                                                    'success') {
+                                                                                    sessionToken = data
+                                                                                        .token;
+                                                                                    console.log(
+                                                                                        "New Token:",
+                                                                                        sessionToken);
+                                                                                    callback(sessionToken);
+                                                                                } else {
+                                                                                    throw new Error(
+                                                                                        "Unable to update session token"
+                                                                                    );
+                                                                                }
+                                                                            });
+                                                                    })
+                                                                    .catch(error => {
+                                                                        console.error("Error:", error.message);
+                                                                    });
+                                                            }
+
+                                                            function displaySelectedImage(input, orderId) {
+                                                                var previewContainer = document.getElementById(
+                                                                    'image-preview-container-' + orderId);
+                                                                var file = input.files[0];
+
+                                                                previewContainer.innerHTML =
+                                                                    ''; // Clear the previous image
+
+                                                                var reader = new FileReader();
+                                                                reader.onload = function(e) {
+                                                                    var img = document.createElement('img');
+                                                                    img.src = e.target.result;
+                                                                    img.style.width = '80px';
+                                                                    img.style.height = '80px';
+                                                                    img.style.objectFit = 'cover';
+                                                                    previewContainer.appendChild(img);
+                                                                };
+
+                                                                reader.readAsDataURL(file);
+                                                            }
+
+                                                            document.addEventListener('DOMContentLoaded',
+                                                                function() {
+                                                                    document.getElementById(
+                                                                        'submit-button-<?php echo $order['_id']; ?>'
+                                                                    ).addEventListener('click', function(
+                                                                        event) {
+                                                                        event.preventDefault();
+                                                                        var orderId =
+                                                                            '<?php echo $order['_id']; ?>';
+                                                                        var reason = document
+                                                                            .getElementById('reason-' +
+                                                                                orderId).value;
+
+                                                                        console.log('Order ID:',
+                                                                            orderId);
+                                                                        console.log('Reason:', reason);
+
+                                                                        login(email, password, function(
+                                                                            sessionToken) {
+
+
+                                                                            // Get the order ID and reason
+
+
+                                                                            // Upload image
+
+                                                                            var fileInput =
+                                                                                document
+                                                                                .getElementById(
+                                                                                    'image-' +
+                                                                                    orderId);
+                                                                            // console.log(fileInput);
+                                                                            var file = fileInput
+                                                                                .files[0];
+                                                                            console.log(file);
+
+                                                                            if (file) {
+                                                                                var formData =
+                                                                                    new FormData();
+                                                                                formData.append(
+                                                                                    'image_id',
+                                                                                    orderId);
+                                                                                formData.append(
+                                                                                    'category',
+                                                                                    'order');
+                                                                                formData.append(
+                                                                                    'image',
+                                                                                    file);
+
+                                                                                console.log(
+                                                                                    'FormData:',
+                                                                                    formData
+                                                                                );
+
+                                                                                fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
+                                                                                        method: 'POST',
+                                                                                        body: formData
+                                                                                    })
+                                                                                    .then(
+                                                                                        response => {
+                                                                                            if (response
+                                                                                                .ok
+                                                                                            ) {
+                                                                                                console
+                                                                                                    .log(
+                                                                                                        'success'
+                                                                                                    )
+                                                                                                return response
+                                                                                                    .json();
+                                                                                            } else {
+                                                                                                console
+                                                                                                    .error(
+                                                                                                        'File upload failed'
+                                                                                                    );
+                                                                                                console
+                                                                                                    .log(
+                                                                                                        'fail'
+                                                                                                    )
+
+                                                                                                throw new Error(
+                                                                                                    'File upload failed'
+                                                                                                );
+                                                                                            }
+                                                                                        })
+                                                                                    .then(
+                                                                                        data => {
+                                                                                            console
+                                                                                                .log(
+                                                                                                    'Upload response:',
+                                                                                                    data
+                                                                                                );
+                                                                                            const
+                                                                                                filename =
+                                                                                                data
+                                                                                                .filename;
+
+                                                                                            const
+                                                                                                payload = {
+                                                                                                    return_order: {
+                                                                                                        reason: reason,
+                                                                                                        image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/order_uploads/${filename}`,
+                                                                                                        status: 'To Approve',
+                                                                                                    }
+                                                                                                }
+                                                                                            // const token = '<?php echo $_SESSION["token"] ?>';
+                                                                                            fetch
+                                                                                                ('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/' +
+                                                                                                    orderId, {
+                                                                                                        method: 'PATCH',
+                                                                                                        headers: {
+                                                                                                            'Content-Type': 'application/json',
+                                                                                                            'Authorization': 'Bearer ' +
+                                                                                                                sessionToken,
+                                                                                                        },
+                                                                                                        body: JSON
+                                                                                                            .stringify(
+                                                                                                                payload
+                                                                                                            ),
+                                                                                                    }
+                                                                                                )
+                                                                                                .then(
+                                                                                                    response =>
+                                                                                                    response
+                                                                                                    .json()
+                                                                                                )
+                                                                                                .then(
+                                                                                                    updatedOrder => {
+                                                                                                        // Handle the updated order response as needed
+                                                                                                        console
+                                                                                                            .log(
+                                                                                                                'Order updated successfully:',
+                                                                                                                updatedOrder
+                                                                                                            );
+                                                                                                        location
+                                                                                                            .reload();
+                                                                                                    }
+                                                                                                )
+                                                                                                .catch(
+                                                                                                    error => {
+                                                                                                        console
+                                                                                                            .error(
+                                                                                                                'Error updating order:',
+                                                                                                                error
+                                                                                                            );
+                                                                                                    }
+                                                                                                );
+                                                                                        })
+                                                                                    .catch(
+                                                                                        error => {
+                                                                                            console
+                                                                                                .error(
+                                                                                                    'Error uploading image:',
+                                                                                                    error
+                                                                                                );
+                                                                                        });
+                                                                            }
+                                                                        })
+                                                                    });
+                                                                });
+                                                            </script>
+
+
+                                                        </div>
+                                                    </div>
+                                                </div>
+                                            </div>
 
                                             <?php
                                                         }
@@ -976,10 +2125,10 @@ if ($_SESSION["isVendor"] == true) {
                                         <?php
                                             if (!$orderExist) {
                                                 echo '<p style="padding-top:30px; padding-left:20px;">No Completed Order/s Yet.</p>';
-                                        ?>    
-                                            <script>
-                                                completedTHead.style.display = 'none';
-                                            </script>  
+                                        ?>
+                                        <script>
+                                        completedTHead.style.display = 'none';
+                                        </script>
                                         <?php
                                             }
                                         ?>
@@ -988,136 +2137,149 @@ if ($_SESSION["isVendor"] == true) {
                                 </div>
 
                                 <script>
-                                    var sessionToken = '<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>';
-                                    var email = '<?php echo isset($_SESSION["email"]) ? $_SESSION["email"] : ""; ?>';
-                                    var password = '<?php echo isset($_SESSION["password"]) ? $_SESSION["password"] : ""; ?>';
-                  
-                                    function login(username, password, callback) {
-                                        fetch("https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/login", {
-                                                method: "POST",
-                                                headers: {
-                                                    "Content-Type": "application/json",
-                                                    "X-Api-Key": "{{apiKey}}"
-                                                },
-                                                body: JSON.stringify({
-                                                    username: username,
-                                                    password: password
-                                                })
+                                let globalRate = 0;
+
+                                var sessionToken = '<?php echo isset($_SESSION["token"]) ? $_SESSION["token"] : ""; ?>';
+                                var email = '<?php echo isset($_SESSION["email"]) ? $_SESSION["email"] : ""; ?>';
+                                var password =
+                                    '<?php echo isset($_SESSION["password"]) ? $_SESSION["password"] : ""; ?>';
+
+                                function login(username, password, callback) {
+                                    fetch("https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/login", {
+                                            method: "POST",
+                                            headers: {
+                                                "Content-Type": "application/json",
+                                                "X-Api-Key": "{{apiKey}}"
+                                            },
+                                            body: JSON.stringify({
+                                                username: username,
+                                                password: password
                                             })
-                                            .then(response => {
-                                                if (response.ok) {
-                                                    return response.json();
-                                                } else {
-                                                    throw new Error("Unable to login");
-                                                }
-                                            })
-                                            .then(data => {
-                                                fetch("update-token-session.php", {
-                                                        method: "POST",
-                                                        headers: {
-                                                            "Content-Type": "application/json"
-                                                        },
-                                                        body: JSON.stringify({
-                                                            token: data.token
-                                                        })
-                                                    })
-                                                    .then(response => response.json())
-                                                    .then(result => {
-                                                        if (result.status === 'success') {
-                                                            sessionToken = data.token;
-                                                            console.log("New Token:", sessionToken);
-                                                            callback(sessionToken);
-                                                        } else {
-                                                            throw new Error("Unable to update session token");
-                                                        }
-                                                    });
-                                            })
-                                            .catch(error => {
-                                                console.error("Error:", error.message);
-                                            });
-                                    }
-                                    document.addEventListener("DOMContentLoaded", function() {
-                                        // Check if there's an activeTab in local storage
-                                        var activeTab = localStorage.getItem('activeTab');
-                                        if (activeTab) {
-                                            showTab(activeTab);
-                                        }
-                                    });
-
-                                    function showTab(tabName) {
-                                        // Hide all tab contents
-                                        var tabContents = document.getElementsByClassName('tab-content');
-                                        for (var i = 0; i < tabContents.length; i++) {
-                                            tabContents[i].classList.remove('active');
-                                        }
-
-                                        // Remove the 'active' class from all tabs
-                                        var tabs = document.getElementsByClassName('tab');
-                                        for (var i = 0; i < tabs.length; i++) {
-                                            tabs[i].classList.remove('active');
-                                        }
-
-                                        // Show the selected tab content
-                                        document.getElementById(tabName).classList.add('active');
-
-                                        // Add the 'active' class to the clicked tab
-                                        document.querySelector(`.tab[data-tab-name="${tabName}"]`).classList.add('active');
-
-                                        // Save the active tab to local storage
-                                        localStorage.setItem('activeTab', tabName);
-                                    }
-
-                                    function updateCompletedStatus(orderId, referenceNumber) {
-                                        login(email, password, async function(token) {
-                                            // const token = '<?php echo $_SESSION["token"] ?>';
-                                            const orderResponse = await fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`);
-                                            const orderData = await orderResponse.json();
-                                            // const updatedDetails = orderData.payment.details.map(detail => ({
-                                            //     ...detail,
-                                            //     attributes: {
-                                            //         ...detail.attributes,
-                                            //         data: {
-                                            //             ...detail.attributes.data,
-                                            //             attributes: {
-                                            //                 ...detail.attributes.data.attributes,
-                                            //                 status: 'paid' 
-                                            //             }
-                                            //         }
-                                            //     },
-                                            //     status: 'paid' 
-                                            // }));
-                                            fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`, {
-                                                    method: 'PATCH',
+                                        })
+                                        .then(response => {
+                                            if (response.ok) {
+                                                return response.json();
+                                            } else {
+                                                throw new Error("Unable to login");
+                                            }
+                                        })
+                                        .then(data => {
+                                            fetch("update-token-session.php", {
+                                                    method: "POST",
                                                     headers: {
-                                                        'Content-Type': 'application/json',
-                                                        'Authorization': 'Bearer ' + token,
+                                                        "Content-Type": "application/json"
                                                     },
                                                     body: JSON.stringify({
-                                                        status: 'COMPLETED',
+                                                        token: data.token
+                                                    })
+                                                })
+                                                .then(response => response.json())
+                                                .then(result => {
+                                                    if (result.status === 'success') {
+                                                        sessionToken = data.token;
+                                                        console.log("New Token:", sessionToken);
+                                                        callback(sessionToken);
+                                                    } else {
+                                                        throw new Error("Unable to update session token");
+                                                    }
+                                                });
+                                        })
+                                        .catch(error => {
+                                            console.error("Error:", error.message);
+                                        });
+                                }
+                                document.addEventListener("DOMContentLoaded", function() {
+                                    // Check if there's an activeTab in local storage
+                                    var activeTab = localStorage.getItem('activeTab');
+                                    if (activeTab) {
+                                        showTab(activeTab);
+                                    }
+                                });
+
+                                function showTab(tabName) {
+                                    // Hide all tab contents
+                                    var tabContents = document.getElementsByClassName('tab-content');
+                                    for (var i = 0; i < tabContents.length; i++) {
+                                        tabContents[i].classList.remove('active');
+                                    }
+
+                                    // Remove the 'active' class from all tabs
+                                    var tabs = document.getElementsByClassName('tab');
+                                    for (var i = 0; i < tabs.length; i++) {
+                                        tabs[i].classList.remove('active');
+                                    }
+
+                                    // Show the selected tab content
+                                    document.getElementById(tabName).classList.add('active');
+
+                                    // Add the 'active' class to the clicked tab
+                                    document.querySelector(`.tab[data-tab-name="${tabName}"]`).classList.add('active');
+
+                                    // Save the active tab to local storage
+                                    localStorage.setItem('activeTab', tabName);
+                                }
+
+                                function updateCompletedStatus(orderId, referenceNumber) {
+                                    login(email, password, async function(token) {
+                                        // const token = '<?php echo $_SESSION["token"] ?>';
+                                        const orderResponse = await fetch(
+                                            `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`
+                                        );
+                                        const orderData = await orderResponse.json();
+                                        // const updatedDetails = orderData.payment.details.map(detail => ({
+                                        //     ...detail,
+                                        //     attributes: {
+                                        //         ...detail.attributes,
+                                        //         data: {
+                                        //             ...detail.attributes.data,
+                                        //             attributes: {
+                                        //                 ...detail.attributes.data.attributes,
+                                        //                 status: 'paid' 
+                                        //             }
+                                        //         }
+                                        //     },
+                                        //     status: 'paid' 
+                                        // }));
+                                        fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/orders/${orderId}`, {
+                                                method: 'PATCH',
+                                                headers: {
+                                                    'Content-Type': 'application/json',
+                                                    'Authorization': 'Bearer ' + token,
+                                                },
+                                                body: JSON.stringify({
+                                                    status: 'COMPLETED',
                                                     //     payment: {
                                                     //     status: 'PAID',
                                                     //     reference_number: orderData.payment.reference_number,
                                                     //     // details: updatedDetails,
                                                     // }
-                                                    }),
-                                                })
-                                                .then(response => response.json())
-                                                .then(data => {
-                                                    // Assuming the server responds with a JSON object indicating success or failure
-                                                    if (data && data !== "") {
-                                                        // Update the status in the table without reloading the page
-                                                        // document.querySelector(`[data-order-id="${orderId}"] .order-status`).innerText = 'COMPLETED';
-                                                        // location.reload();
-                                                        var rowToMove = document.querySelector(`#to-receive-${orderId}`);
+                                                }),
+                                            })
+                                            .then(response => response.json())
+                                            .then(data => {
+                                                // Assuming the server responds with a JSON object indicating success or failure
+                                                if (data && data !== "") {
+                                                    // Update the status in the table without reloading the page
+                                                    // document.querySelector(`[data-order-id="${orderId}"] .order-status`).innerText = 'COMPLETED';
+                                                    // location.reload();
+                                                    var rowToMove = document.querySelector(
+                                                        `#to-receive-${orderId}`);
                                                     if (rowToMove) {
                                                         // Get the values of the order
-                                                        var image = rowToMove.querySelector('td:nth-child(1)').innerHTML;
-                                                        var name = rowToMove.querySelector('td:nth-child(2)').innerHTML;
-                                                        var quantity = rowToMove.querySelector('td:nth-child(3)').innerHTML;
-                                                        var unitPrice = rowToMove.querySelector('td:nth-child(4)').innerHTML;
-                                                        var price = rowToMove.querySelector('td:nth-child(5)').innerHTML;
-                                                        var status = rowToMove.querySelector('td:nth-child(6)').innerHTML;
-                                                        var date = rowToMove.querySelector('td:nth-child(7)').innerHTML;
+                                                        var image = rowToMove.querySelector(
+                                                            'td:nth-child(1)').innerHTML;
+                                                        var name = rowToMove.querySelector(
+                                                            'td:nth-child(2)').innerHTML;
+                                                        var quantity = rowToMove.querySelector(
+                                                            'td:nth-child(3)').innerHTML;
+                                                        var unitPrice = rowToMove.querySelector(
+                                                            'td:nth-child(4)').innerHTML;
+                                                        var price = rowToMove.querySelector(
+                                                            'td:nth-child(5)').innerHTML;
+                                                        var status = rowToMove.querySelector(
+                                                            'td:nth-child(6)').innerHTML;
+                                                        var date = rowToMove.querySelector(
+                                                            'td:nth-child(7)').innerHTML;
 
                                                         // Construct the HTML for the new row in the "Completed" table
                                                         var newRowHTML = '<tr>' +
@@ -1129,7 +2291,7 @@ if ($_SESSION["isVendor"] == true) {
                                                             '<td><span> COMPLETED </span></td>' +
                                                             '<td>' + date + '</td>' +
                                                             '<td>' +
-                                                            
+
                                                             '</td>' +
                                                             '</tr>';
                                                         // var newRowHTML = 'HERE!!!!!!!!!!!!!!!!!'
@@ -1137,23 +2299,24 @@ if ($_SESSION["isVendor"] == true) {
                                                         rowToMove.parentNode.removeChild(rowToMove);
 
                                                         // Append the HTML for the new row to the "Completed" table
-                                                        document.querySelector('#completed tbody').innerHTML += newRowHTML;
+                                                        document.querySelector('#completed tbody')
+                                                            .innerHTML += newRowHTML;
                                                     }
-                                                   
-                                                        // rowToMove.parentNode.removeChild(rowToMove);
 
-                                                    } else {
-                                                        alert('Failed to update order status');
-                                                    }
-                                                })
-                                                .catch(error => {
-                                                    console.error('Error:', error);
-                                                    alert('An error occurred while updating order status');
-                                                });
+                                                    // rowToMove.parentNode.removeChild(rowToMove);
+
+                                                } else {
+                                                    alert('Failed to update order status');
+                                                }
+                                            })
+                                            .catch(error => {
+                                                console.error('Error:', error);
+                                                alert('An error occurred while updating order status');
+                                            });
 
 
-                                        })
-                                    }
+                                    })
+                                }
                                 </script>
                             </div>
                         </div>
@@ -1174,7 +2337,7 @@ if ($_SESSION["isVendor"] == true) {
         <div class="modal-dialog modal-dialog-centered" role="document">
             <div class="modal-content">
                 <div class="modal-body">
-                        <!-- modal header placed under script -->
+                    <!-- modal header placed under script -->
                     <div class="row" id="modalContent" style="display:flex; justify-content:center;">
                         <!-- modal body placed under script -->
                     </div>
@@ -1185,20 +2348,25 @@ if ($_SESSION["isVendor"] == true) {
     <!-- Modal End -->
 
     <script>
-        // 03-18-2024 Stacy added script for showing productDetails modal
-        document.getElementById('productDetails').addEventListener('shown.bs.modal', function (event) {
+    // 03-18-2024 Stacy added script for showing productDetails modal
+    document.getElementById('productDetails').addEventListener('shown.bs.modal', function(event) {
 
         var jsonString = $(event.relatedTarget).data('value');
 
         var jsonObject = JSON.parse(jsonString);
         const modal = document.getElementById('modalContent');
 
-        const date = new Date(jsonObject.updatedAt); const formatter = new Intl. DateTimeFormat('en-US', { day: '2-digit', month: 'long', year: 'numeric' }); const formattedDate = formatter. format(date);
+        const date = new Date(jsonObject.updatedAt);
+        const formatter = new Intl.DateTimeFormat('en-US', {
+            day: '2-digit',
+            month: 'long',
+            year: 'numeric'
+        });
+        const formattedDate = formatter.format(date);
 
         if (jsonObject.status === 'TO PAY') { // Changed $order['status'] to jsonObject.status
             modal.innerHTML = `
             <div class="modal-header" style="height:5px;">
-                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="row pt-3">
@@ -1209,20 +2377,21 @@ if ($_SESSION["isVendor"] == true) {
                 </div>
                 <div class="col-md-6" style="margin:auto;">
                     <ul>
-                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
-                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
-                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
-                        <li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
-                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left;">Name:</p></b> <p style="width:70%; text-align:left;">${jsonObject.items[0].product.name}</p></li>
+                    
+                        <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left;">Quantity:</p></b> <p style="width:70%; text-align:left;">${jsonObject.items[0].quantity}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left; white-space:nowrap;">Unit Price:</p></b> <p style="width:70%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left;">Price:</p></b> <p style="width:70%; text-align:left;"> ${jsonObject.total_amount}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left;">Status:</p></b> <p style="width:70%; text-align:left;"> ${jsonObject.status}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:40%; font-size:14px; text-align:left;">Date:</p></b> <p style="width:70%; text-align:left;"> ${formattedDate}</p></li>
                     </ul>
                 </div>
             </div>`;
         }
 
-        if (jsonObject.status === 'TO SHIP') { 
+        if (jsonObject.status === 'TO SHIP') {
             modal.innerHTML = `
             <div class="modal-header" style="height:5px;">
-                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="row pt-3">
@@ -1233,22 +2402,26 @@ if ($_SESSION["isVendor"] == true) {
                 </div>
                 <div class="col-md-6" style="margin:auto;">
                     <ul>
-                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
-                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
-                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
-                        <li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
-                        <li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
-                        <li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
-                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].product.name}</p></li>
+                <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].quantity}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left; white-space:nowrap;">Unit Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.total_amount}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Status:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.status}</p></li>
+                        
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Tracking Number:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.tracking_number}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Courier Name:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.courier_name}</p></li>
+
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b> <p style="width:50%; text-align:left;"> ${formattedDate}</p></li>
+
                     </ul>
                 </div>
             </div>`;
         }
 
-        if (jsonObject.status === 'TO RECEIVE') { 
+        if (jsonObject.status === 'TO RECEIVE') {
             modal.innerHTML = `
             <div class="modal-header" style="height:5px;">
-                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+              
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="row pt-3">
@@ -1259,22 +2432,25 @@ if ($_SESSION["isVendor"] == true) {
                 </div>
                 <div class="col-md-6" style="margin:auto;">
                     <ul>
-                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
-                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
-                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
-                        <li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
-                        <li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
-                        <li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
-                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].product.name}</p></li>
+                <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].quantity}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left; white-space:nowrap;">Unit Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.total_amount}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Status:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.status}</p></li>
+                        
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Tracking Number:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.tracking_number}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Courier Name:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.courier_name}</p></li>
+
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b> <p style="width:50%; text-align:left;"> ${formattedDate}</p></li>
                     </ul>
                 </div>
             </div>`;
         }
 
-        if (jsonObject.status === 'COMPLETED') { 
+        if (jsonObject.status === 'COMPLETED') {
             modal.innerHTML = `
             <div class="modal-header" style="height:5px;">
-                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
+                
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="row pt-3">
@@ -1285,22 +2461,24 @@ if ($_SESSION["isVendor"] == true) {
                 </div>
                 <div class="col-md-6" style="margin:auto;">
                     <ul>
-                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
-                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
-                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
-                        <li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
-                        <li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
-                        <li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
-                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].product.name}</p></li>
+                <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].quantity}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left; white-space:nowrap;">Unit Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.total_amount}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Status:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.status}</p></li>
+                        
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Tracking Number:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.tracking_number}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Courier Name:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.courier_name}</p></li>
+
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b> <p style="width:50%; text-align:left;"> ${formattedDate}</p></li>
                     </ul>
                 </div>
             </div>`;
         }
 
-        if (jsonObject.status === 'RETURNED') { 
+        if (jsonObject.status === 'RETURNED') {
             modal.innerHTML = `
             <div class="modal-header" style="height:5px;">
-                <h5 class="modal-title fs-5 font-weight-bold">${jsonObject.items[0].product.name}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
             </div>
             <div class="row pt-3">
@@ -1311,25 +2489,27 @@ if ($_SESSION["isVendor"] == true) {
                 </div>
                 <div class="col-md-6" style="margin:auto;">
                     <ul>
-                        <li class="fs-6"><b>Product Name:</b> ${jsonObject.items[0].product.name}</li>
-                        <li class="fs-6"><b>Quantity:</b> ${jsonObject.items[0].quantity}</li>
-                        <li class="fs-6"><b>Unit Price:</b> ${jsonObject.items[0].price}</li>
-                        <li class="fs-6"><b>Price:</b> ${jsonObject.total_amount}</li>
-                        <li class="fs-6"><b>Status:</b> ${jsonObject.status}</li>
-                        <li class="fs-6"><b>Tracking Number:</b> ${jsonObject.tracking_number}</li>
-                        <li class="fs-6"><b>Courier Name:</b> ${jsonObject.courier_name}</li>
-                        <li class="fs-6"><b>Date:</b> ${formattedDate}</li>
+                    <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Name:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].product.name}</p></li>
+                <li class="fs-6" style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Quantity:</p></b> <p style="width:50%; text-align:left;">${jsonObject.items[0].quantity}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left; white-space:nowrap;">Unit Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.items[0].price}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Price:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.total_amount}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Status:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.status}</p></li>
+                        
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Tracking Number:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.tracking_number}</p></li>
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;white-space:nowrap;">Courier Name:</p></b> <p style="width:50%; text-align:left;"> ${jsonObject.courier_name}</p></li>
+
+                        <li class="fs-6"style="display:flex; justify-content:space-between;"><b><p style="width:50%; font-size:14px; text-align:left;">Date:</p></b> <p style="width:50%; text-align:left;"> ${formattedDate}</p></li>
                     </ul>
                 </div>
             </div>`;
         }
-        
+
 
         console.log(jsonObject);
-        });
+    });
 
-        const modal = document.getElementById('productDetails');
-        console.log(modal);
+    const modal = document.getElementById('productDetails');
+    console.log(modal);
     </script>
 
 
@@ -1381,7 +2561,7 @@ if ($_SESSION["isVendor"] == true) {
     </div>
     <!-- Cart Floating Button end -->
 
-    
+
 
     <!-- Feature tools -->
     <div class="ec-tools-sidebar-overlay"></div>
@@ -1452,25 +2632,25 @@ if ($_SESSION["isVendor"] == true) {
 
     <!-- DataTables -->
     <script>
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#allOrdersTbl').DataTable();
-        } );
+    });
 
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#toPayTbl').DataTable();
-        } );
+    });
 
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#toShipTbl').DataTable();
-        } );
+    });
 
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#toReceiveTbl').DataTable();
-        } );
+    });
 
-        $(document).ready( function () {
+    $(document).ready(function() {
         $('#completedTbl').DataTable();
-        } );
+    });
     </script>
 
     <!-- Vendor JS -->
@@ -1491,7 +2671,7 @@ if ($_SESSION["isVendor"] == true) {
     <script src="assets/js/plugins/jquery.sticky-sidebar.js"></script>
     <script src="assets/js/plugins/nouislider.js"></script>
     <script src="https://cdn.datatables.net/v/bs5/dt-2.0.3/r-3.0.0/sp-2.3.0/datatables.min.js"></script>
-    
+
     <!-- Main Js -->
     <script src="assets/js/vendor/index.js"></script>
     <script src="assets/js/main.js"></script>
diff --git a/user-profile.php b/user-profile.php
index c525917..b87cd88 100644
--- a/user-profile.php
+++ b/user-profile.php
@@ -27,7 +27,8 @@ if ($_SESSION["isVendor"] == true) {
     <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
 
     <title>oBanana B2B - Elevate Your Business</title>
-    <meta name="keywords" content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
+    <meta name="keywords"
+        content="apparel, catalog, clean, ecommerce, ecommerce HTML, electronics, fashion, html eCommerce, html store, minimal, multipurpose, multipurpose ecommerce, online store, responsive ecommerce template, shops" />
     <meta name="description" content="Best ecommerce html template for single and multi vendor store.">
     <meta name="author" content="ashishmaraviya">
 
@@ -37,7 +38,7 @@ if ($_SESSION["isVendor"] == true) {
     <meta name="msapplication-TileImage" content="assets/images/favicon/favicon.png" />
 
     <!-- css Icon Font -->
-     <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
+    <link rel="stylesheet" href="assets/css/vendor/ecicons.min.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
         integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
@@ -56,52 +57,57 @@ if ($_SESSION["isVendor"] == true) {
     <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" />
+    <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" />
+    <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>
+    <script src="https://cdn.jsdelivr.net/npm/select2@latest/dist/js/select2.min.js" crossorigin="anonymous"
+        referrerpolicy="no-referrer"></script>
     <script>
-        function updateCartItemCount() {
-            $.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
-                if (data != "") {
-                    console.log("Data: " + data + "\nStatus: " + status);
-                    document.getElementById("cartItemCount").innerHTML = data;
-                }
-            });
-        }
+    function updateCartItemCount() {
+        $.get("cartitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data, status) {
+            if (data != "") {
+                console.log("Data: " + data + "\nStatus: " + status);
+                document.getElementById("cartItemCount").innerHTML = data;
+            }
+        });
+    }
 
-        function updateWishItemCount() {
-            $.get("wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data) {
-                if (data != "") {
-                    document.getElementById("wishItemCount").innerHTML = data;
-                }
-            });
-        }
+    function updateWishItemCount() {
+        $.get("wishlistitems.php?id=<?php echo $_SESSION['customerId']; ?>", function(data) {
+            if (data != "") {
+                document.getElementById("wishItemCount").innerHTML = data;
+            }
+        });
+    }
     </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;
-        }
+    #edit_modal .cover-upload:after {
+        background-color: orange;
+    }
 
-        #editDelete:hover i{
-            color: #ffaa00;
-            cursor: pointer;
-        }
+    .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>
 
@@ -168,7 +174,7 @@ if ($_SESSION["isVendor"] == true) {
                                 <?php include 'user-profile-tabs.php' ?>
                             </div>
                         </div>
-                        
+
                     </div>
                 </div>
                 <div class="ec-shop-rightside col-lg-9 col-md-12">
@@ -178,31 +184,39 @@ if ($_SESSION["isVendor"] == true) {
                                 <div class="col-md-12">
                                     <div class="ec-vendor-block-profile">
                                         <div class="ec-vendor-block-img space-bottom-30 ">
-                                            <div class="ec-vendor-block-bg" style="background-color: orange; background-image: url(<?php echo $customer_data['customer_banner'] ?>) !important;">
-                                                <a href="#" class="btn btn-lg btn-primary" data-link-action="editmodal" title="Edit Detail" data-bs-toggle="modal" data-bs-target="#edit_modal">Edit Detail</a>
+                                            <div class="ec-vendor-block-bg"
+                                                style="background-color: orange; background-image: url(<?php echo $customer_data['customer_banner'] ?>) !important;">
+                                                <a href="#" class="btn btn-lg btn-primary" data-link-action="editmodal"
+                                                    title="Edit Detail" data-bs-toggle="modal"
+                                                    data-bs-target="#edit_modal">Edit Detail</a>
                                             </div>
 
                                             <div class="ec-vendor-block-detail">
                                                 <?php
                                                 $customer_image = isset($customer_data[0]['customer_image']) ? $customer_data[0]['customer_image'] : 'https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg';
                                                 ?>
-                                                <img loading="lazy" class="v-img" src=<?php echo $customer_image ?> alt="vendor image">
-                                                <h5 class="name"><?php echo $customer_data[0]['first_name'] ?> <?php echo $customer_data[0]['last_name'] ?></h5>
+                                                <img loading="lazy" class="v-img" src=<?php echo $customer_image ?>
+                                                    alt="vendor image">
+                                                <h5 class="name"><?php echo $customer_data[0]['first_name'] ?>
+                                                    <?php echo $customer_data[0]['last_name'] ?></h5>
                                             </div>
                                         </div>
                                         <h5>Account Information </h5>
 
                                         <div class="row">
                                             <div class="col-md-6 col-sm-12">
-                                                <div class="ec-vendor-detail-block ec-vendor-block-email space-bottom-30">
+                                                <div
+                                                    class="ec-vendor-detail-block ec-vendor-block-email space-bottom-30">
                                                     <h6>E-mail address </h6>
                                                     <ul>
-                                                        <li><strong> </strong><?php echo $customer_data[0]['user_email'] ?></li>
+                                                        <li><strong>
+                                                            </strong><?php echo $customer_data[0]['user_email'] ?></li>
                                                     </ul>
                                                 </div>
                                             </div>
                                             <div class="col-md-6 col-sm-12">
-                                                <div class="ec-vendor-detail-block ec-vendor-block-contact space-bottom-30">
+                                                <div
+                                                    class="ec-vendor-detail-block ec-vendor-block-contact space-bottom-30">
                                                     <h6>Contact number</h6>
                                                     <ul>
                                                         <li><strong><?php echo $customer_data[0]['phone_number'] ?></li>
@@ -210,32 +224,43 @@ if ($_SESSION["isVendor"] == true) {
                                                 </div>
                                             </div>
                                             <div class="col-md-12 col-sm-12">
-                                                <div class="ec-vendor-detail-block ec-vendor-block-contact space-bottom-30">
+                                                <div
+                                                    class="ec-vendor-detail-block ec-vendor-block-contact space-bottom-30">
 
-                                                    <h6>Address <button type="button" class="btn btn-primary" id="addressModalBtn" data-bs-toggle="modal" data-bs-target="#addressModal">My Addresses</button></h6>
+                                                    <h6>Address <button type="button" class="btn btn-primary"
+                                                            id="addressModalBtn" data-bs-toggle="modal"
+                                                            data-bs-target="#addressModal">My Addresses</button></h6>
                                                     <div class="shipping">
                                                         <?php foreach ($customer_data[0]['address'] as $address) : ?>
-                                                            <?php if ($address['shipping']) : ?>
-                                                                <div class="sName">
-                                                                    <span>Name:
-                                                                        <span id="selectedFName"><?php echo $address['first_name']; ?></span>
-                                                                        <span id="selectedLName"> <?php echo $address['last_name']; ?></span>
-                                                                    </span>
-                                                                </div>
-                                                                <div class="sContact">
-                                                                    <span id="selectedContact">Contact #: <?php echo $address['phone']; ?></span>
-                                                                </div>
-                                                                <div class="sAddress">
-                                                                    <span>Address:
-                                                                        <span id="sBuilding"><?php echo $address['address_1']; ?></span>
-                                                                        <span id="sStreet"><?php echo $address['address_2']; ?></span>
-                                                                        <span id="sBarangay"><?php echo $address['barangay']; ?></span>
-                                                                        <span id="sCity"><?php echo $address['city']; ?></span>
-                                                                        <span id="sProvince"><?php echo $address['province']; ?></span>
-                                                                        <span id="sCountry"><?php echo $address['country']; ?></span>
-                                                                    </span>
-                                                                </div>
-                                                            <?php endif; ?>
+                                                        <?php if ($address['shipping']) : ?>
+                                                        <div class="sName">
+                                                            <span>Name:
+                                                                <span
+                                                                    id="selectedFName"><?php echo $address['first_name']; ?></span>
+                                                                <span id="selectedLName">
+                                                                    <?php echo $address['last_name']; ?></span>
+                                                            </span>
+                                                        </div>
+                                                        <div class="sContact">
+                                                            <span id="selectedContact">Contact #:
+                                                                <?php echo $address['phone']; ?></span>
+                                                        </div>
+                                                        <div class="sAddress">
+                                                            <span>Address:
+                                                                <span
+                                                                    id="sBuilding"><?php echo $address['address_1']; ?></span>
+                                                                <span
+                                                                    id="sStreet"><?php echo $address['address_2']; ?></span>
+                                                                <span
+                                                                    id="sBarangay"><?php echo $address['barangay']; ?></span>
+                                                                <span id="sCity"><?php echo $address['city']; ?></span>
+                                                                <span
+                                                                    id="sProvince"><?php echo $address['province']; ?></span>
+                                                                <span
+                                                                    id="sCountry"><?php echo $address['country']; ?></span>
+                                                            </span>
+                                                        </div>
+                                                        <?php endif; ?>
                                                         <?php endforeach; ?>
                                                     </div>
                                                 </div>
@@ -253,67 +278,98 @@ if ($_SESSION["isVendor"] == 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 mb-3" data-bs-toggle="modal" data-bs-target="#secondModal">Add New Address</button>
+                        <button type="button" class="btn btn-primary mb-3" data-bs-toggle="modal"
+                            data-bs-target="#secondModal">Add New Address</button>
 
                         <!-- Display a list of addresses and let the user choose -->
                         <form id="addressForm">
                             <?php foreach ($customer_data as $customer_index => $customer) { ?>
-                                <?php foreach ($customer['address'] as $address_index => $address) { ?>
-                                    <!-- 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%;">
-                                                    <!-- <input type="radio" style="padding-left: 0px !important; margin: 0px 0px !important;" name="selectedBillingAddress[<?php # echo $customer_index; ?>]" id="billing_address_<?php # echo $customer_index; ?>_<?php # echo $address_index; ?>" value="<?php # echo $customer_index; ?>_<?php # echo $address_index; ?>" class="form-check-input" onchange="updateAddressBilling('<?php # echo $customer['_id']; ?>', <?php # echo $address_index; ?>, true)" <?php # echo $address["billing"] ? 'checked' : ''; ?>> -->
-                                                    <input type="radio" style="padding-left: 0px !important; margin: 0px 0px !important;" name="selectedBillingAddress[<?php echo $customer_index; ?>]" id="billing_address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>" value="<?php echo $customer_index; ?>_<?php echo $address_index; ?>" class="form-check-input" <?php echo $address["billing"] ? 'checked' : ''; ?>>
-                                                    <label class="form-check-label" style="margin: 0px 10px !important;" for="billing_address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>">
-                                                        Billing Address
-                                                    </label>
-                                                </div>
-
-                                                <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 $customer_index; ?>]" id="shipping_address_<?php # echo $customer_index; ?>_<?php # echo $address_index; ?>" value="<?php # echo $customer_index; ?>_<?php # echo $address_index; ?>" class="form-check-input" onchange="updateAddressShipping('<?php # echo $customer['_id']; ?>', <?php # echo $address_index; ?>, true)" <?php # echo $address["shipping"] ? 'checked' : ''; ?>> -->
-                                                    <input type="radio" style="padding-left: 0px !important; margin: 0px 0px !important;" name="selectedShippingAddress[<?php echo $customer_index; ?>]" id="shipping_address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>" value="<?php echo $customer_index; ?>_<?php echo $address_index; ?>" class="form-check-input" <?php echo $address["billing"] ? 'checked' : ''; ?>>
-                                                    <label class="form-check-label" style="margin: 0px 10px !important;" for="shipping_address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>">
-                                                        Shipping Address
-                                                    </label>
-                                                </div>
-                                            </div>
-
-                                            <!-- 03-01-2024 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 $customer['_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 $customer_index; ?>_<?php echo $address_index; ?>">
-                                                            <?php echo $address['first_name']; ?> <?php echo $address['last_name']; ?><br>
-                                                            <?php echo $address['address_1']; ?> <?php echo $address['address_2']; ?>
-                                                            <?php echo $address['barangay']; ?>, <?php echo $address['city']; ?>,
-                                                            <?php echo $address['province']; ?> <?php echo $address['country']; ?><br>
-                                                            Phone: <?php echo $address['phone']; ?>
-                                                        </label>
-            
-                                                    </div>
-                                                </div>
-                                            </div>
+                            <?php foreach ($customer['address'] as $address_index => $address) { ?>
+                            <!-- 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%;">
+                                            <!-- <input type="radio" style="padding-left: 0px !important; margin: 0px 0px !important;" name="selectedBillingAddress[<?php # echo $customer_index; ?>]" id="billing_address_<?php # echo $customer_index; ?>_<?php # echo $address_index; ?>" value="<?php # echo $customer_index; ?>_<?php # echo $address_index; ?>" class="form-check-input" onchange="updateAddressBilling('<?php # echo $customer['_id']; ?>', <?php # echo $address_index; ?>, true)" <?php # echo $address["billing"] ? 'checked' : ''; ?>> -->
+                                            <input type="radio"
+                                                style="padding-left: 0px !important; margin: 0px 0px !important;"
+                                                name="selectedBillingAddress[<?php echo $customer_index; ?>]"
+                                                id="billing_address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>"
+                                                value="<?php echo $customer_index; ?>_<?php echo $address_index; ?>"
+                                                class="form-check-input"
+                                                <?php echo $address["billing"] ? 'checked' : ''; ?>>
+                                            <label class="form-check-label" style="margin: 0px 10px !important;"
+                                                for="billing_address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>">
+                                                Billing Address
+                                            </label>
+                                        </div>
 
+                                        <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 $customer_index; ?>]" id="shipping_address_<?php # echo $customer_index; ?>_<?php # echo $address_index; ?>" value="<?php # echo $customer_index; ?>_<?php # echo $address_index; ?>" class="form-check-input" onchange="updateAddressShipping('<?php # echo $customer['_id']; ?>', <?php # echo $address_index; ?>, true)" <?php # echo $address["shipping"] ? 'checked' : ''; ?>> -->
+                                            <input type="radio"
+                                                style="padding-left: 0px !important; margin: 0px 0px !important;"
+                                                name="selectedShippingAddress[<?php echo $customer_index; ?>]"
+                                                id="shipping_address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>"
+                                                value="<?php echo $customer_index; ?>_<?php echo $address_index; ?>"
+                                                class="form-check-input"
+                                                <?php echo $address["billing"] ? 'checked' : ''; ?>>
+                                            <label class="form-check-label" style="margin: 0px 10px !important;"
+                                                for="shipping_address_<?php echo $customer_index; ?>_<?php echo $address_index; ?>">
+                                                Shipping Address
+                                            </label>
                                         </div>
                                     </div>
-                                <?php } ?>
+
+                                    <!-- 03-01-2024 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 $customer['_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 $customer_index; ?>_<?php echo $address_index; ?>">
+                                                    <?php echo $address['first_name']; ?>
+                                                    <?php echo $address['last_name']; ?><br>
+                                                    <?php echo $address['address_1']; ?>
+                                                    <?php echo $address['address_2']; ?>
+                                                    <?php echo $address['barangay']; ?>,
+                                                    <?php echo $address['city']; ?>,
+                                                    <?php echo $address['province']; ?>
+                                                    <?php echo $address['country']; ?><br>
+                                                    Phone: <?php echo $address['phone']; ?>
+                                                </label>
+
+                                            </div>
+                                        </div>
+                                    </div>
+
+                                </div>
+                            </div>
                             <?php } ?>
-                            <button type="button" onclick="updateAddressBilling('<?php echo $customer['_id']; ?>', <?php echo $address_index; ?>, true)">Use Selected Address</button>
+                            <?php } ?>
+                            <button type="button"
+                                onclick="updateAddressBilling('<?php echo $customer['_id']; ?>', <?php echo $address_index; ?>, true)">Use
+                                Selected Address</button>
                         </form>
                     </div>
                 </div>
@@ -327,23 +383,29 @@ if ($_SESSION["isVendor"] == true) {
                     <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>
+                                <label for="addressFirstName" class="text-dark font-weight-medium pt-3 mb-2">First
+                                    Name</label>
                                 <input type="text" class="form-control" id="addressFirstName">
                             </div>
                             <div class="form-group">
-                                <label for="addressLastName" class="text-dark font-weight-medium pt-3 mb-2">Last Name</label>
+                                <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="addressContact" value="+63 " oninput="preventErasePrefix(this)">
+                                <label for="addressContact" class="text-dark font-weight-medium pt-3 mb-2">Contact
+                                    Number</label>
+                                <input type="text" class="form-control" id="addressContact" value="+63 "
+                                    oninput="preventErasePrefix(this)">
                             </div>
                             <div class="form-group">
-                                <label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2"> House/Unit/Floor #, Bldg Name, Block or Lot # </label>
+                                <label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2">
+                                    House/Unit/Floor #, Bldg Name, Block or Lot # </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>
+                                <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">
@@ -365,7 +427,8 @@ if ($_SESSION["isVendor"] == true) {
                                 </select>
                             </div>
                             <div class="form-group">
-                                <label for="addressCountry" class="text-dark font-weight-medium pt-3 mb-2">Country</label>
+                                <label for="addressCountry"
+                                    class="text-dark font-weight-medium pt-3 mb-2">Country</label>
                                 <input type="text" class="form-control" id="addressCountry" value="Philippines">
                             </div>
                             <button type="button" class="btn btn-primary mt-4" id="submitBtn">Submit</button>
@@ -385,42 +448,50 @@ if ($_SESSION["isVendor"] == true) {
                         <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="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" >
+                                <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="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']; ?>" oninput="preventEraseThePrefix(this)">
+                                <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']; ?>" oninput="preventEraseThePrefix(this)">
+
 
-                                
                                 <!-- <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="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="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"> -->
@@ -429,7 +500,8 @@ if ($_SESSION["isVendor"] == true) {
 
                                 <label for="provinceSelect2">Province</label>
                                 <select class="form-select" id="provinceSelect2">
-                                    <option id="provinceSelect2Opt"  value="<?php echo $address['province']; ?>" >Select Province</option>
+                                    <option id="provinceSelect2Opt" value="<?php echo $address['province']; ?>">Select
+                                        Province</option>
                                 </select>
 
                                 <!-- <label for="provinceSelect">Province</label>
@@ -440,21 +512,23 @@ if ($_SESSION["isVendor"] == true) {
                             <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>
+                                    <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>
+                                    <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>
+                                <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 mt-4" id="submitBtn2">Submit</button>
-                            
+
                         </form>
                     </div>
                 </div>
@@ -462,130 +536,132 @@ if ($_SESSION["isVendor"] == true) {
         </div>
 
         <script>
-            function preventErasePrefix(input) { /* secondmodal */
+        function preventErasePrefix(input) {
+            /* secondmodal */
 
-                var numericValue = input.value.replace(/\D/g, '');
-                    if (numericValue.startsWith('63')) {
-                        input.value = "+63 " + numericValue.substring(2);
-                    } else {
-                        input.value = "+63 " + numericValue;
-                    }
+            var numericValue = input.value.replace(/\D/g, '');
+            if (numericValue.startsWith('63')) {
+                input.value = "+63 " + numericValue.substring(2);
+            } else {
+                input.value = "+63 " + numericValue;
+            }
 
             if (input.value.length > 14) {
                 input.value = input.value.slice(0, 14);
             }
 
-            }
+        }
 
-            function preventEraseThePrefix(input) { /* thirdmodal */
-                
-                var numericValue = input.value.replace(/\D/g, '');
-                    if (numericValue.startsWith('63')) {
-                        input.value = "+63 " + numericValue.substring(2);
-                    } else {
-                        input.value = "+63 " + numericValue;
-                    }
+        function preventEraseThePrefix(input) {
+            /* thirdmodal */
+
+            var numericValue = input.value.replace(/\D/g, '');
+            if (numericValue.startsWith('63')) {
+                input.value = "+63 " + numericValue.substring(2);
+            } else {
+                input.value = "+63 " + numericValue;
+            }
 
             if (input.value.length > 14) {
                 input.value = input.value.slice(0, 14);
-            }       
-
             }
 
-            function preventEraseInPrefix(input) { /* edit details */
-                
-                var numericValue = input.value.replace(/\D/g, '');
-                    if (numericValue.startsWith('63')) {
-                        input.value = "+63 " + numericValue.substring(2);
-                    } else {
-                        input.value = "+63 " + numericValue;
-                    }
+        }
+
+        function preventEraseInPrefix(input) {
+            /* edit details */
+
+            var numericValue = input.value.replace(/\D/g, '');
+            if (numericValue.startsWith('63')) {
+                input.value = "+63 " + numericValue.substring(2);
+            } else {
+                input.value = "+63 " + numericValue;
+            }
 
             if (input.value.length > 14) {
                 input.value = input.value.slice(0, 14);
-            }       
-
             }
-            
+
+        }
         </script>
 
         <script>
-            // var myElement = document.getElementById('myElement');
-            // myElement.style.backgroundImage = 'red';
+        // var myElement = document.getElementById('myElement');
+        // myElement.style.backgroundImage = 'red';
 
-            function editUser() {
-                // var fileInput = document.getElementById('fileInput' + vendorId);
-                // var file = fileInput.files[0];
-                const customerId = `<?php echo $customer_data[0]['_id']; ?>`;
+        function editUser() {
+            // var fileInput = document.getElementById('fileInput' + vendorId);
+            // var file = fileInput.files[0];
+            const customerId = `<?php echo $customer_data[0]['_id']; ?>`;
 
-                const firstName = document.getElementById('first_name-').value;
-                const lastName = document.getElementById('last_name-').value;
-                const username = document.getElementById('username-').value;
-                const phone = document.getElementById('phone-').value;
+            const firstName = document.getElementById('first_name-').value;
+            const lastName = document.getElementById('last_name-').value;
+            const username = document.getElementById('username-').value;
+            const phone = document.getElementById('phone-').value;
 
-                // If no file selected, only update the email
-                fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/${customerId}`, {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            first_name: firstName,
-                            last_name: lastName,
-                            user_login: username,
-                            phone_number: phone,
-                        })
+            // If no file selected, only update the email
+            fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/${customerId}`, {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        first_name: firstName,
+                        last_name: lastName,
+                        user_login: username,
+                        phone_number: phone,
                     })
-                    .then(response => {
-                        if (response.ok) {
-                            console.log('Profile updated Successful');
-                            location.reload();
-                            // Handle any other actions after the successful email update
-                        } else {
-                            console.error('Profile Failed to Upload');
-                            // Handle errors or display a message to the user
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error during fetch:', error);
-                        // Handle network or other errors
-                    });
+                })
+                .then(response => {
+                    if (response.ok) {
+                        console.log('Profile updated Successful');
+                        location.reload();
+                        // Handle any other actions after the successful email update
+                    } else {
+                        console.error('Profile Failed to Upload');
+                        // Handle errors or display a message to the user
+                    }
+                })
+                .catch(error => {
+                    console.error('Error during fetch:', error);
+                    // Handle network or other errors
+                });
 
-            }
+        }
         </script>
 
         <script>
-            // function for delete
-            function deleteAddress(customerId, addressIndex) {
-                fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId)
+        // function for delete
+        function deleteAddress(customerId, addressIndex) {
+            fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId)
                 .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/customers/' + customerId, {
-                            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');
-                        });
+                                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.");
                     }
@@ -594,22 +670,22 @@ if ($_SESSION["isVendor"] == true) {
                     console.error('Error:', error);
                     alert('Error fetching customer data');
                 });
-}
+        }
         </script>
 
         <script>
-            // 03-04-2024 added 
+        // 03-04-2024 added 
+
+        $('#thirdModal').on('shown.bs.modal', function(event) {
 
-            $('#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 customer
             document.querySelector('input[id="addressFirstName2"]').value = jsonObject.first_name;
             document.querySelector('input[id="addressLastName2"]').value = jsonObject.last_name;
@@ -674,8 +750,11 @@ if ($_SESSION["isVendor"] == true) {
                     // 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>');
+                        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();
@@ -687,14 +766,16 @@ if ($_SESSION["isVendor"] == true) {
 
             // 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
+                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/`;
+                        citiesEndpoint =
+                            `https://psgc.gitlab.io/api/provinces/${selectedProvinceCode}/cities-municipalities/`;
                     }
 
                     fetch(citiesEndpoint)
@@ -722,12 +803,15 @@ if ($_SESSION["isVendor"] == true) {
             // Add event listener to citySelect
             citySelect.on('change', function() {
                 // Clear existing options in barangaySelect
-                barangaySelect.html('<option value="" disabled selected hidden>Select Barangay</option>');
+                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/`)
+                    fetch(
+                            `https://psgc.gitlab.io/api/cities-municipalities/${selectedCityCode}/barangays/`
+                        )
                         .then(response => {
                             if (response.ok) {
                                 return response.json();
@@ -750,173 +834,184 @@ if ($_SESSION["isVendor"] == true) {
             });
 
             // document.querySelector('input[id="addressFirstName2"]').value = jsonObject.last_name;
+        });
+
+
+
+        const customerId = '<?php echo $customer_data[0]['_id']; ?>';
+        document.addEventListener('DOMContentLoaded', function() {
+            // Get the select elements
+            const provinceSelect = $('#provinceSelect'); // Use jQuery to select the element
+            const citySelect = $('#citySelect'); // Use jQuery to select the element
+            const barangaySelect = $('#barangaySelect'); // Use jQuery to select the element
+
+            // Initialize Select2 on the provinceSelect, citySelect, and barangaySelect elements
+            provinceSelect.select2({
+                dropdownParent: $('#secondModal'),
+                containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
+            });
+
+            citySelect.select2({
+                dropdownParent: $('#secondModal'),
+                containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
+            });
+            barangaySelect.select2({
+                dropdownParent: $('#secondModal'),
+                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);
+                        });
+                }
             });
 
 
 
-            const customerId = '<?php echo $customer_data[0]['_id']; ?>';
-            document.addEventListener('DOMContentLoaded', function() {
-                // Get the select elements
-                const provinceSelect = $('#provinceSelect'); // Use jQuery to select the element
-                const citySelect = $('#citySelect'); // Use jQuery to select the element
-                const barangaySelect = $('#barangaySelect'); // Use jQuery to select the element
+            $('#submitBtn').on('click', function() {
+                // Retrieve existing addresses from the API
+                // fetch('https://api.obanana.shop/api/v1/customers/65482e8d209ff8d348bd30fd')
+                console.log('clickkkkkkkk')
+                fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' +
+                        customerId)
+                    .then(response => response.json())
+                    .then(data => {
+                        // Get the existing addresses array
+                        const existingAddresses = data.address || [];
 
-                // Initialize Select2 on the provinceSelect, citySelect, and barangaySelect elements
-                provinceSelect.select2({
-                    dropdownParent: $('#secondModal'),
-                    containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
-                });
-
-                citySelect.select2({
-                    dropdownParent: $('#secondModal'),
-                    containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
-                });
-                barangaySelect.select2({
-                    dropdownParent: $('#secondModal'),
-                    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);
-                            });
-                    }
-                });
+                        // Get the new address details
+                        const firstName = $('#addressFirstName').val();
+                        const lastName = $('#addressLastName').val();
+                        const contact = $('#addressContact').val();
+                        const buildingNumber = $('#addressBuilding').val();
+                        const street = $('#addressStreet').val();
+                        const province = $('#provinceSelect :selected').text();
+                        const city = $('#citySelect :selected').text();
+                        const barangay = $('#barangaySelect :selected').text();
+                        const country = $('#addressCountry').val();
 
 
+                        // 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,
+                        };
 
-                $('#submitBtn').on('click', function() {
-                    // Retrieve existing addresses from the API
-                    // fetch('https://api.obanana.shop/api/v1/customers/65482e8d209ff8d348bd30fd')
-                    console.log('clickkkkkkkk')
-                    fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId)
-                        .then(response => response.json())
-                        .then(data => {
-                            // Get the existing addresses array
-                            const existingAddresses = data.address || [];
+                        // Add the new address to the existing addresses
+                        existingAddresses.push(newAddress);
 
-                            // Get the new address details
-                            const firstName = $('#addressFirstName').val();
-                            const lastName = $('#addressLastName').val();
-                            const contact = $('#addressContact').val();
-                            const buildingNumber = $('#addressBuilding').val();
-                            const street = $('#addressStreet').val();
-                            const province = $('#provinceSelect :selected').text();
-                            const city = $('#citySelect :selected').text();
-                            const barangay = $('#barangaySelect :selected').text();
-                            const country = $('#addressCountry').val();
-                            
-
-                            // 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);
-
-                            // Make a PATCH request to update the addresses array
-                            return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId, {
+                        // Make a PATCH request to update the addresses array
+                        return fetch(
+                            'https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' +
+                            customerId, {
                                 method: 'PATCH',
                                 headers: {
                                     'Content-Type': 'application/json'
@@ -925,30 +1020,30 @@ if ($_SESSION["isVendor"] == true) {
                                     address: existingAddresses
                                 }),
                             });
-                        })
-                        .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');
-                        });
-                });
-
-
+                    })
+                    .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');
+                    });
             });
 
-            
-            // Added function for edit
-            $('#submitBtn2').on('click', function() {
+
+        });
+
+
+        // Added function for edit
+        $('#submitBtn2').on('click', function() {
             // function updateAddress(){
             // Retrieve existing addresses from the API
             // fetch('https://api.obanana.shop/api/v1/customers/65482e8d209ff8d348bd30fd')
@@ -969,7 +1064,7 @@ if ($_SESSION["isVendor"] == true) {
                     const barangay = $('#barangaySelect2 :selected').text();
                     const country = $('#addressCountry2').val();
                     const id = $('#addressId').val();
-                    console.log('clickkkkkkkk'+ id)
+                    console.log('clickkkkkkkk' + id)
 
 
                     // Create a new address object
@@ -987,11 +1082,11 @@ if ($_SESSION["isVendor"] == true) {
 
                     // Add the new address to the existing addresses
                     // existingAddresses.push(newAddress);
-                    
-                //    var newAddresses= existingAddresses.filter((e,i)=>i!==id)
+
+                    //    var newAddresses= existingAddresses.filter((e,i)=>i!==id)
                     let existingAddress = existingAddresses
 
-                    existingAddress[id]={
+                    existingAddress[id] = {
                         first_name: firstName,
                         last_name: lastName,
                         phone: contact,
@@ -1002,17 +1097,18 @@ if ($_SESSION["isVendor"] == true) {
                         barangay: barangay,
                         country: country,
                     };
-                    console.log( existingAddress[id])
+                    console.log(existingAddress[id])
                     // Make a PATCH request to update the addresses array
-                    return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId, {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json'
-                        },
-                        body: JSON.stringify({
-                            address: existingAddress
-                        }),
-                    });
+                    return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' +
+                        customerId, {
+                            method: 'PATCH',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                address: existingAddress
+                            }),
+                        });
                 })
                 .then(response => {
                     if (response.ok) {
@@ -1030,144 +1126,142 @@ if ($_SESSION["isVendor"] == true) {
                     alert('Error submitting data');
                 });
         });
-
-
         </script>
 
         <script>
-            async function updateAddressBilling(customerId, addressIndex, isBilling) {
-                try {
-                    const apiUrl = `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/${customerId}`;
-                    const response = await fetch(apiUrl, {
-                        method: 'GET',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    });
+        async function updateAddressBilling(customerId, addressIndex, isBilling) {
+            try {
+                const apiUrl = `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/${customerId}`;
+                const response = await fetch(apiUrl, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                });
 
-                    if (!response.ok) {
-                        throw new Error(`Failed to fetch customer data: ${response.status}`);
-                    }
-                    // console.log(customerId + " ." + addressIndex + "." +isBilling + "." + isShipping)
-                    const customerData = await response.json();
-
-                    // Iterate through addresses and update billing/shipping flags
-                    customerData.address.forEach((address, index) => {
-                        if (index === addressIndex) {
-                            if (isBilling !== undefined) {
-                                address.billing = isBilling;
-
-                                const radioButtonId = `#billing_address_${customerId}_${addressIndex}`;
-                                $(radioButtonId).prop('checked', isBilling);
-                            }
-
-                            // if (isShipping !== undefined) {
-                            //     address.shipping = isShipping;
-                            // }
-                        } else {
-                            // Set other addresses to false
-                            address.billing = false;
-                            // address.shipping = false;
-                        }
-                    });
-
-                    // Send a PATCH request to update the customer data
-                    const updateResponse = await fetch(apiUrl, {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({
-                            address: customerData.address
-                        }),
-                    });
-
-                    if (!updateResponse.ok) {
-                        throw new Error(`Failed to update address: ${updateResponse.status}`);
-                    }
-                    console.log(`Address updated successfully for customer ${customerId}`);
-                } catch (error) {
-                    console.error('Error updating address:', error.message);
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch customer data: ${response.status}`);
                 }
-            }
+                // console.log(customerId + " ." + addressIndex + "." +isBilling + "." + isShipping)
+                const customerData = await response.json();
 
-            async function updateAddressShipping(customerId, addressIndex, isShipping) {
-                try {
-                    // const customerId = `<?php #echo $customer_data[0]['_id']; ?>`;
-                    
-                    const apiUrl = `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/${customerId}`;
-                    const response = await fetch(apiUrl, {
-                        method: 'GET',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                    });
+                // Iterate through addresses and update billing/shipping flags
+                customerData.address.forEach((address, index) => {
+                    if (index === addressIndex) {
+                        if (isBilling !== undefined) {
+                            address.billing = isBilling;
 
-                    if (!response.ok) {
-                        throw new Error(`Failed to fetch customer data: ${response.status}`);
-                    }
-                    // console.log(customerId + " ." + addressIndex + "." +isBilling + "." + isShipping)
-                    const customerData = await response.json();
-
-                    // Iterate through addresses and update billing/shipping flags
-                    customerData.address.forEach((address, index) => {
-                        if (index === addressIndex) {
-                            // if (isBilling !== undefined) {
-                            //     address.billing = isBilling;
-                            // }
-
-                            if (isShipping !== undefined) {
-                                address.shipping = isShipping;
-                            }
-                        } else {
-                            // Set other addresses to false
-                            // address.billing = false;
-                            address.shipping = false;
+                            const radioButtonId = `#billing_address_${customerId}_${addressIndex}`;
+                            $(radioButtonId).prop('checked', isBilling);
                         }
-                    });
 
-                    // Send a PATCH request to update the customer data
-                    const updateResponse = await fetch(apiUrl, {
-                        method: 'PATCH',
-                        headers: {
-                            'Content-Type': 'application/json',
-                        },
-                        body: JSON.stringify({
-                            address: customerData.address
-                        }),
-                    });
+                        // if (isShipping !== undefined) {
+                        //     address.shipping = isShipping;
+                        // }
+                    } else {
+                        // Set other addresses to false
+                        address.billing = false;
+                        // address.shipping = false;
+                    }
+                });
 
-                    if (!updateResponse.ok) {
-                        throw new Error(`Failed to update address: ${updateResponse.status}`);
-                    }
-                    const selectedShippingElement = document.getElementById('selectedFName');
-                    const selectedLNameElement = document.getElementById('selectedLName');
-                    const selectedContactElement = document.getElementById('selectedContact');
-                    const sBuildingElement = document.getElementById('sBuilding');
-                    const sStreetElement = document.getElementById('sStreet');
-                    const sBarangayElement = document.getElementById('sBarangay');
-                    const sCityElement = document.getElementById('sCity');
-                    const sProvinceElement = document.getElementById('sProvince');
-                    const sCountryElement = document.getElementById('sCountry');
-                    if (selectedShippingElement) {
-                        selectedShippingElement.textContent = customerData.address[addressIndex].first_name;
-                        // Update other address details similarly
-                        selectedLNameElement.textContent = customerData.address[addressIndex].last_name;
-                        selectedContactElement.textContent = 'Contact #: ' + customerData.address[addressIndex].phone;
-                        sBuildingElement.textContent = customerData.address[addressIndex].address_1;
-                        sStreetElement.textContent = customerData.address[addressIndex].address_2;
-                        sBarangayElement.textContent = customerData.address[addressIndex].barangay;
-                        sCityElement.textContent = customerData.address[addressIndex].city;
-                        sProvinceElement.textContent = customerData.address[addressIndex].province;
-                        sCountryElement.textContent = customerData.address[addressIndex].country;
-                    }
-                    console.log(`Address updated successfully for customer ${customerId}`);
-                    location.reload();
-                    header("location: user-profile.php");
-                } catch (error) {
-                    console.error('Error updating address:', error.message);
+                // Send a PATCH request to update the customer data
+                const updateResponse = await fetch(apiUrl, {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        address: customerData.address
+                    }),
+                });
+
+                if (!updateResponse.ok) {
+                    throw new Error(`Failed to update address: ${updateResponse.status}`);
                 }
+                console.log(`Address updated successfully for customer ${customerId}`);
+            } catch (error) {
+                console.error('Error updating address:', error.message);
             }
+        }
+
+        async function updateAddressShipping(customerId, addressIndex, isShipping) {
+            try {
+                // const customerId = `<?php #echo $customer_data[0]['_id']; ?>`;
+
+                const apiUrl = `https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/${customerId}`;
+                const response = await fetch(apiUrl, {
+                    method: 'GET',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                });
+
+                if (!response.ok) {
+                    throw new Error(`Failed to fetch customer data: ${response.status}`);
+                }
+                // console.log(customerId + " ." + addressIndex + "." +isBilling + "." + isShipping)
+                const customerData = await response.json();
+
+                // Iterate through addresses and update billing/shipping flags
+                customerData.address.forEach((address, index) => {
+                    if (index === addressIndex) {
+                        // if (isBilling !== undefined) {
+                        //     address.billing = isBilling;
+                        // }
+
+                        if (isShipping !== undefined) {
+                            address.shipping = isShipping;
+                        }
+                    } else {
+                        // Set other addresses to false
+                        // address.billing = false;
+                        address.shipping = false;
+                    }
+                });
+
+                // Send a PATCH request to update the customer data
+                const updateResponse = await fetch(apiUrl, {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        address: customerData.address
+                    }),
+                });
+
+                if (!updateResponse.ok) {
+                    throw new Error(`Failed to update address: ${updateResponse.status}`);
+                }
+                const selectedShippingElement = document.getElementById('selectedFName');
+                const selectedLNameElement = document.getElementById('selectedLName');
+                const selectedContactElement = document.getElementById('selectedContact');
+                const sBuildingElement = document.getElementById('sBuilding');
+                const sStreetElement = document.getElementById('sStreet');
+                const sBarangayElement = document.getElementById('sBarangay');
+                const sCityElement = document.getElementById('sCity');
+                const sProvinceElement = document.getElementById('sProvince');
+                const sCountryElement = document.getElementById('sCountry');
+                if (selectedShippingElement) {
+                    selectedShippingElement.textContent = customerData.address[addressIndex].first_name;
+                    // Update other address details similarly
+                    selectedLNameElement.textContent = customerData.address[addressIndex].last_name;
+                    selectedContactElement.textContent = 'Contact #: ' + customerData.address[addressIndex].phone;
+                    sBuildingElement.textContent = customerData.address[addressIndex].address_1;
+                    sStreetElement.textContent = customerData.address[addressIndex].address_2;
+                    sBarangayElement.textContent = customerData.address[addressIndex].barangay;
+                    sCityElement.textContent = customerData.address[addressIndex].city;
+                    sProvinceElement.textContent = customerData.address[addressIndex].province;
+                    sCountryElement.textContent = customerData.address[addressIndex].country;
+                }
+                console.log(`Address updated successfully for customer ${customerId}`);
+                location.reload();
+                header("location: user-profile.php");
+            } catch (error) {
+                console.error('Error updating address:', error.message);
+            }
+        }
         </script>
 
 
@@ -1204,7 +1298,8 @@ if ($_SESSION["isVendor"] == true) {
                             <div class="ec-vendor-block-detail">
                                 <div class="thumb-upload">
                                     <div class="thumb-edit">
-                                        <input type='file' id="imageUpload" class="ec-image-upload" accept=".png, .jpg, .jpeg" onchange="uploadProfileImage()" />
+                                        <input type='file' id="imageUpload" class="ec-image-upload"
+                                            accept=".png, .jpg, .jpeg" onchange="uploadProfileImage()" />
                                         <label><i class="fi-rr-edit"></i></label>
                                     </div>
                                     <div class="thumb-preview ec-preview">
@@ -1212,95 +1307,158 @@ if ($_SESSION["isVendor"] == true) {
                                             <?php
                                             $customer_image = isset($customer_data[0]['customer_image']) ? $customer_data[0]['customer_image'] : 'https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg';
                                             ?>
-                                            <img loading="lazy" class="image-thumb-preview ec-image-preview v-img" src=<?php echo $customer_image ?> alt="edit" />
+                                            <img loading="lazy" class="image-thumb-preview ec-image-preview v-img"
+                                                src=<?php echo $customer_image ?> alt="edit" />
                                         </div>
                                     </div>
                                 </div>
                             </div>
                             <script>
-                                function uploadProfileImage() {
-                                    var customerId = '<?php echo $_SESSION['customerId'] ?>';
-                                    var file = document.getElementById('imageUpload').files[0];
-                                    if (file) {
-                                        var formData = new FormData();
-                                        formData.append('image_id', customerId);
-                                        formData.append('category', 'customer');
-                                        formData.append('image', file);
+                            function uploadProfileImage() {
+                                var customerId = '<?php echo $_SESSION['customerId'] ?>';
+                                var file = document.getElementById('imageUpload').files[0];
+                                if (file) {
+                                    var formData = new FormData();
+                                    formData.append('image_id', customerId);
+                                    formData.append('category', 'customer');
+                                    formData.append('image', file);
 
-                                        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 = 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 = result.filename;
 
-                                                const payload = {
-                                                    customer_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/customer_uploads/${filename}`,
+                                            const payload = {
+                                                customer_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/customer_uploads/${filename}`,
 
-                                                };
+                                            };
 
-                                                console.log('Payload:', payload);
+                                            console.log('Payload:', payload);
 
-                                                return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' + customerId, {
+                                            return fetch(
+                                                'https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/customers/' +
+                                                customerId, {
                                                     method: 'PATCH',
                                                     headers: {
                                                         'Content-Type': 'application/json'
                                                     },
                                                     body: JSON.stringify(payload)
                                                 });
-                                            })
-                                            .then(secondResponse => {
-                                                if (secondResponse.ok) {
-                                                    console.log('Image Uploaded Successful');
-                                                    // location.reload();
-                                                } else {
-                                                    console.error('Image Failed to Upload');
-                                                }
-                                            })
-                                            .catch(error => {
-                                                console.error('Error during fetch:', error);
-                                            });
-                                    }
+                                        })
+                                        .then(secondResponse => {
+                                            if (secondResponse.ok) {
+                                                console.log('Image Uploaded Successful');
+                                                // location.reload();
+                                            } else {
+                                                console.error('Image Failed to Upload');
+                                            }
+                                        })
+                                        .catch(error => {
+                                            console.error('Error during fetch:', error);
+                                        });
                                 }
+                            }
                             </script>
+                            <style>
+                            .avatar {
+                                text-align: center;
+                                margin-bottom: 20px;
+                            }
+
+                            .avatar img {
+                                width: 100px;
+                                height: 100px;
+                                border-radius: 50%;
+                            }
+
+                            .form-row {
+                                display: flex;
+                                justify-content: space-between;
+                                margin-bottom: 15px;
+                            }
+
+                            .form-group {
+                                flex: 1;
+                            }
+
+                            .form-group+.form-group {
+                                margin-left: 10px;
+                            }
+
+                            .form-label {
+                                display: block;
+                                margin: 10px 0 5px;
+                                font-weight: 500;
+                                font-size: 14px;
+                                text-align: left;
+                            }
+
+                            .form-control1 {
+                                width: 100%;
+                                padding: 10px;
+                                border: 1px solid #ccc;
+                                border-radius: 15px !important;
+                            }
+
+                            .submit-button {
+                                width: 100%;
+                                padding: 10px 15px;
+                                background-color: #ffaa00;
+                                color: #fff;
+                                border: none;
+                                border-radius: 30px;
+                                cursor: pointer;
+                                font-size: 16px;
+                                margin-top: 20px;
+                            }
+
+                            .submit-button:hover {
+                                background-color: #e69900;
+                            }
+                            </style>
                             <div class="ec-vendor-upload-detail">
-                                <form class="row g-3">
-                                    <!-- <div class="col-md-6 space-t-15">
-                                        <label class="form-label">First name</label>
-                                        <input type="text" class="form-control">
-                                    </div> -->
-                                    <div class="form-group">
-                                        <label for="first_name-" class="text-dark font-weight-medium pt-3 mb-2">First Name</label>
-                                        <input type="text" class="form-control" id="first_name-" value="<?php echo $customer_data[0]['first_name'] ?>">
-                                    </div>
-                                    <div class="form-group">
-                                        <label for="last_name-" class="text-dark font-weight-medium pt-3 mb-2">Last Name</label>
-                                        <input type="text" class="form-control" id="last_name-" value="<?php echo $customer_data[0]['last_name'] ?>">
-                                    </div>
-                                    <div class="form-group">
-                                        <label for="username-" class="text-dark font-weight-medium pt-3 mb-2">Username</label>
-                                        <input type="text" class="form-control" id="username-" value="<?php echo $customer_data[0]['user_login'] ?>">
-                                    </div>
-                                    <div class="form-group">
-                                        <label for="phone-" class="text-dark font-weight-medium pt-3 mb-2">Contact Number</label>
-                                        <input type="text" class="form-control" id="phone-" value="<?php echo $customer_data[0]['phone_number'] ?>" oninput="preventEraseInPrefix(this)">
+                                <form>
+                                    <!-- First Name and Last Name Row -->
+                                    <div class="form-row">
+                                        <div class="form-group">
+                                            <label for="first_name" class="form-label">First Name</label>
+                                            <input type="text" id="first_name-" name="first_name" class="form-control1"
+                                                value="<?php echo $customer_data[0]['first_name'] ?>">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="last_name" class="form-label">Last Name</label>
+                                            <input type="text" id="last_name-" name="last_name" class="form-control1"
+                                                value="<?php echo $customer_data[0]['last_name'] ?>">
+                                        </div>
                                     </div>
 
-                                    <!-- <div class="col-md-12 space-t-15">
-                                        <button type="submit" class="btn btn-primary">Update</button>
-                                        <a href="#" class="btn btn-lg btn-secondary qty_close" data-bs-dismiss="modal"
-                                            aria-label="Close">Close</a>
-                                    </div> -->
+                                    <!-- Username and Contact Number Row -->
+                                    <div class="form-row">
+                                        <div class="form-group">
+                                            <label for="username" class="form-label">Username</label>
+                                            <input type="text" id="username-" name="username" class="form-control1"
+                                                value="<?php echo $customer_data[0]['user_login'] ?>">
+                                        </div>
+                                        <div class="form-group">
+                                            <label for="phone" class="form-label">Contact Number</label>
+                                            <input type="text" id="phone-" name="phone" class="form-control1"
+                                                value="<?php echo $customer_data[0]['phone_number'] ?>"
+                                                oninput="preventEraseInPrefix(this)">
+                                        </div>
+                                    </div>
+
+                                    <button type="submit" class="submit-button" onclick="editUser()">Submit</button>
                                 </form>
-                                <button type="button" class="btn btn-primary btn-pill mt-3" onclick="editUser()">Submit</button>
                             </div>
                         </div>
                     </div>
@@ -1358,7 +1516,7 @@ if ($_SESSION["isVendor"] == true) {
     </div>
     <!-- Cart Floating Button end -->
 
-    
+
 
     <!-- Feature tools -->
     <div class="ec-tools-sidebar-overlay"></div>