diff --git a/admin/vendor-card.php b/admin/vendor-card.php
index 59bfcde..2712b7e 100644
--- a/admin/vendor-card.php
+++ b/admin/vendor-card.php
@@ -17,6 +17,11 @@ if ($_SESSION["user_type"] != "admin") {
 $products = productList();
 
 $vendorSearchResult = $_SESSION["vendorSearchResult"];
+
+$payoutResponse = getAllPayout($_SESSION["token"]);
+
+$payoutData = json_decode($payoutResponse, true);
+
 ?>
 <!DOCTYPE html>
 <html lang="en" dir="ltr">
@@ -103,16 +108,16 @@ $vendorSearchResult = $_SESSION["vendorSearchResult"];
                             </button>
                         </div>
                     </div>
-                    
+
                     <div class="card card-default p-4 ec-card-space">
-                            <div class="col-lg-6 col-md-12">
-                                <form style="display:flex; margin-bottom:50px;" method="POST" action="vendor-card-action.php">
-                                    <input type="text" name="search" class="form-control" id="searchProduct" placeholder="search with vendor name..">
-                                    <button class="submit" type="submit" id="search-btn" class="btn btn-flat">
-                                        <i class="mdi mdi-magnify" style="font-size:20px; color:gray; margin-left:-40px;"></i>
-                                    </button> 
-                                </form>
-                            </div>
+                        <div class="col-lg-6 col-md-12">
+                            <form style="display:flex; margin-bottom:50px;" method="POST" action="vendor-card-action.php">
+                                <input type="text" name="search" class="form-control" id="searchProduct" placeholder="search with vendor name..">
+                                <button class="submit" type="submit" id="search-btn" class="btn btn-flat">
+                                    <i class="mdi mdi-magnify" style="font-size:20px; color:gray; margin-left:-40px;"></i>
+                                </button>
+                            </form>
+                        </div>
                         <div class="ec-vendor-card mt-m-24px row">
 
                             <?php
@@ -126,16 +131,16 @@ $vendorSearchResult = $_SESSION["vendorSearchResult"];
                             $end = $start + $vendorsPerPage - 1;
 
                             $vendorsCopy = $vendors;
-											
-                            if (!empty($_GET['search']) ) {
-                                $filteredProducts=[];
+
+                            if (!empty($_GET['search'])) {
+                                $filteredProducts = [];
                                 foreach ($vendorsCopy as $result) {
-                                $vendorName = strtolower($result['user_login']);
+                                    $vendorName = strtolower($result['user_login']);
                                     if (
-                                        strpos($vendorName,strtolower($_GET['search']))!==false
+                                        strpos($vendorName, strtolower($_GET['search'])) !== false
                                     ) {
                                         $filteredProducts[] = $result;
-                                    } else{
+                                    } else {
                                     }
                                 }
 
@@ -149,6 +154,19 @@ $vendorSearchResult = $_SESSION["vendorSearchResult"];
                             // $vendors = vendorList();
                             for ($x = $start; $x <= $end && $x < $totalVendors; $x++) {
                                 $vendor = $vendors[$x];
+
+                                $vendorId = $vendor['_id'];
+                                $totalPayoutAmount = 0; // Initialize the total net amount for the current vendor
+                            
+                                // Loop through the payout data and sum up the net amounts
+                                foreach ($payoutData as $payout) {
+                                    if ($payout['vendor_details'][0]['vendor_id'] == $vendorId) {
+                                        $totalPayoutAmount += $payout['net_amount'];
+                                    }
+                                }
+
+                                $totalPayoutAmount = number_format($totalPayoutAmount, 2, '.', ',');
+
                             ?>
                                 <div class="col-lg-6 col-xl-4 col-xxl-3">
                                     <div class="card card-default mt-24px">
@@ -177,7 +195,7 @@ $vendorSearchResult = $_SESSION["vendorSearchResult"];
                                                         <i class="mdi mdi-cellphone-basic mr-1"></i>
                                                         <span style="font-size:13px;">
                                                             <?php
-                                                            echo isset($vendor['phone']) && !empty($vendor['phone']) ? $vendor['phone']: 'No Number yet';
+                                                            echo isset($vendor['phone']) && !empty($vendor['phone']) ? $vendor['phone'] : 'No Number yet';
                                                             ?>
                                                         </span>
                                                     </li>
@@ -192,7 +210,7 @@ $vendorSearchResult = $_SESSION["vendorSearchResult"];
                                                 </ul>
                                             </a>
                                             <div class="row justify-content-center ec-vendor-detail">
-                                                <div class="col-4">
+                                                <div class="col-3">
                                                     <h6 class="text-uppercase">Items</h6>
                                                     <?php
                                                     $vendorId = $vendor['_id'];
@@ -202,13 +220,13 @@ $vendorSearchResult = $_SESSION["vendorSearchResult"];
                                                     ?>
                                                     <h5><?php echo count($product); ?></h5>
                                                 </div>
-                                                <div class="col-4">
+                                                <div class="col-3">
                                                     <h6 class="text-uppercase">Sell</h6>
                                                     <h5>1908</h5>
                                                 </div>
-                                                <div class="col-4">
+                                                <div class="col-6">
                                                     <h6 class="text-uppercase">Payout</h6>
-                                                    <h5>$2691</h5>
+                                                    <h5 style="font-size: 15px;">₱ <?php echo $totalPayoutAmount; ?></h5>
                                                 </div>
                                             </div>
                                         </div>
@@ -231,11 +249,12 @@ $vendorSearchResult = $_SESSION["vendorSearchResult"];
                                             <!-- 02-28-2024 Stacy modified this block of code -->
                                             <div class="modal-body pt-0">
                                                 <div style="text-align: center; display: column; justify-content: center; align-items: center;" class="col-md-6">
-                                                    <!-- <input type="file" id="fileInput<?php #echo $vendor['_id']; ?>" accept=".png, .jpg, .jpeg" /> -->          
+                                                    <!-- <input type="file" id="fileInput<?php #echo $vendor['_id']; 
+                                                                                            ?>" accept=".png, .jpg, .jpeg" /> -->
                                                     <div class="thumb-edit" style="padding-left:120px; margin-bottom:-40px;">
-                                                        <input style="display:none;" type='file' id="fileInput<?php echo $vendor['_id']; ?>" class="ec-image-upload" accept=".png, .jpg, .jpeg" onchange="previewImage('<?php echo $vendor['_id']; ?>')"/>
+                                                        <input style="display:none;" type='file' id="fileInput<?php echo $vendor['_id']; ?>" class="ec-image-upload" accept=".png, .jpg, .jpeg" onchange="previewImage('<?php echo $vendor['_id']; ?>')" />
                                                         <label><i class="fa-solid fa-file-import" style="cursor:pointer;" onclick="document.getElementById('fileInput<?php echo $vendor['_id']; ?>').click()"></i></label>
-                                                        
+
                                                     </div>
                                                     <div class="vendor-image" style="padding-top:20px; ">
                                                         <?php
@@ -248,30 +267,29 @@ $vendorSearchResult = $_SESSION["vendorSearchResult"];
                                                     </div>
 
                                                     <script>
-                                                        function updateButtonText(input){
+                                                        function updateButtonText(input) {
                                                             var label = document.getElementById('fileInputLabel');
                                                             if (input.files.length > 0) {
                                                                 label.innerHTML = '<i class="fa-solid fa-file-arrow-up"></i> ' + input.files[0].name;
-                                                            }else{
+                                                            } else {
                                                                 label.innerHTML = '<i class="fa-solid fa-file-arrow-up"></i> Upload file';
                                                             }
                                                         }
                                                         // 03-14-2024 Jun Jihad modified this block of code to show preview of the image to be uploaded
                                                         function previewImage(vendorId) {
-                                                        var fileInput = document.getElementById('fileInput' + vendorId);
-                                                        var file = fileInput.files[0];
-                                                        console.log('clicked hereee');
-                                                        const reader = new FileReader();
+                                                            var fileInput = document.getElementById('fileInput' + vendorId);
+                                                            var file = fileInput.files[0];
+                                                            console.log('clicked hereee');
+                                                            const reader = new FileReader();
 
-                                                        reader.onload = function (e) {
-                                                            const dataUri = e.target.result;
-                                                            document.getElementById('imgPrev' + vendorId).src = dataUri; // Fixed concatenation here
-                                                        };
+                                                            reader.onload = function(e) {
+                                                                const dataUri = e.target.result;
+                                                                document.getElementById('imgPrev' + vendorId).src = dataUri; // Fixed concatenation here
+                                                            };
 
-                                                        reader.readAsDataURL(file);
-                                                    }
+                                                            reader.readAsDataURL(file);
+                                                        }
                                                         // 03-14-2024 Jun Jihad modified this block of code to show preview of the image to be uploaded
-
                                                     </script>
                                                 </div>
                                                 <form>
@@ -378,296 +396,293 @@ $vendorSearchResult = $_SESSION["vendorSearchResult"];
                                     </div>
                                 </div>
                                 <script>
-                                        function deleteVendor(vendorId){
+                                    function deleteVendor(vendorId) {
                                         let text = "Please confirm delete action!\nClick OK or Cancel button.";
                                         if (confirm(text) == true) {
                                             window.open("vendor-delete-action.php?id=" + vendorId, "_self");
                                         }
                                     }
+
                                     function uploadFile(vendorId) {
-    const originalEmail = document.getElementById('email-' + vendorId).defaultValue;
-    const updatedEmail = document.getElementById('email-' + vendorId).value;
-    const isEmailModified = originalEmail !== updatedEmail;
+                                        const originalEmail = document.getElementById('email-' + vendorId).defaultValue;
+                                        const updatedEmail = document.getElementById('email-' + vendorId).value;
+                                        const isEmailModified = originalEmail !== updatedEmail;
 
-    if (isEmailModified) {
-        validateEmail(vendorId).then(isEmailAvailable => {
-            if (!isEmailAvailable) {
-                $('#email-error-message-' + vendorId).text('Email is already in use').show();
-            } else {
-                $('#email-error-message-' + vendorId).text('').hide();
+                                        if (isEmailModified) {
+                                            validateEmail(vendorId).then(isEmailAvailable => {
+                                                if (!isEmailAvailable) {
+                                                    $('#email-error-message-' + vendorId).text('Email is already in use').show();
+                                                } else {
+                                                    $('#email-error-message-' + vendorId).text('').hide();
 
-                var fileInput = document.getElementById('fileInput' + vendorId);
-                var file = fileInput.files[0];
-
-                
-
-                const updatedUser = document.getElementById('user_login-' + vendorId).value;
-                const firstName = document.getElementById('firstName-' + vendorId).value;
-                const lastName = document.getElementById('lastName-' + vendorId).value;
-                const phone = document.getElementById('phone-' + vendorId).value;
-                const description = document.getElementById('description-' + vendorId).value;
-                const status = document.getElementById('status-' + vendorId).value;
-                const updatedAddress1 = document.getElementById('address_1-' + vendorId).value;
-                const updatedAddress2 = document.getElementById('address_2-' + vendorId).value;
-                const barangay = document.getElementById('barangay-' + vendorId).value;
-                const city = document.getElementById('city-' + vendorId).value;
-                const province = document.getElementById('province-' + vendorId).value;
-                const country = document.getElementById('country-' + vendorId).value;
-
-                var formData = new FormData();
-                formData.append('image_id', vendorId);
-                formData.append('category', 'vendor');
-                formData.append('image', file); // Include the file data in the form data
-
-                if(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;
-
-                        const payload = {
-                            vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
-                            user_login: updatedUser,
-                            first_name: firstName,
-                            last_name: lastName,
-                            user_email: updatedEmail,
-                            phone: phone,
-                            vendor_description: description,
-                            status: status,
-                            address: [{
-                                address_1: updatedAddress1,
-                                address_2: updatedAddress2,
-                                barangay: barangay,
-                                city: city,
-                                province: province,
-                                country: country,
-                            }]
-                        };
-
-                        return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
-                            method: 'PATCH',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(payload)
-                        });
-                    })
-                    .then(secondResponse => {
-                        if (secondResponse.ok) {
-                            console.log('Second request successful');
-                            location.reload();
-                        } else {
-                            console.error('Second request failed');
-                        }
-                    })
-                    .catch(error => {
-                        console.error('Error during fetch:', error);
-                    });
-
-                }else{
-                    const payload = {
-                            vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
-                            user_login: updatedUser,
-                            first_name: firstName,
-                            last_name: lastName,
-                            user_email: updatedEmail,
-                            phone: phone,
-                            vendor_description: description,
-                            status: status,
-                            address: [{
-                                address_1: updatedAddress1,
-                                address_2: updatedAddress2,
-                                barangay: barangay,
-                                city: city,
-                                province: province,
-                                country: country,
-                            }]
-                        };
-                        fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
-                            method: 'PATCH',
-                            headers: {
-                                'Content-Type': 'application/json'
-                            },
-                            body: JSON.stringify(payload)
-                        })
-                        .then(response => {
-                        if (response.ok) {
-                location.reload();
-
-                            return response.json();
-                        } else {
-                            console.error('vendor Update failed');
-                            throw new Error('vendor Update failed');
-                        }
-                    })
-                        ;
-                }
-
-            }
-        });
-    }else {
-    $('#email-error-message-' + vendorId).text('').hide();
-
-    const updatedUser = document.getElementById('user_login-' + vendorId).value;
-    const firstName = document.getElementById('firstName-' + vendorId).value;
-    const lastName = document.getElementById('lastName-' + vendorId).value;
-    const updatedEmail = document.getElementById('email-' + vendorId).value;
-    const phone = document.getElementById('phone-' + vendorId).value;
-    const description = document.getElementById('description-' + vendorId).value;
-    const status = document.getElementById('status-' + vendorId).value;
-    const updatedAddress1 = document.getElementById('address_1-' + vendorId).value;
-    const updatedAddress2 = document.getElementById('address_2-' + vendorId).value;
-    const barangay = document.getElementById('barangay-' + vendorId).value;
-    const city = document.getElementById('city-' + vendorId).value;
-    const province = document.getElementById('province-' + vendorId).value;
-    const country = document.getElementById('country-' + vendorId).value;
-
-    var fileInput = document.getElementById('fileInput' + vendorId);
-    var file = fileInput.files[0];
-
-    var formData = new FormData();
-    formData.append('image_id', vendorId);
-    formData.append('category', 'vendor');
-    formData.append('image', file);
-
-    if (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;
-
-            const payload = {
-                vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
-                user_login: updatedUser,
-                first_name: firstName,
-                last_name: lastName,
-                user_email: updatedEmail,
-                phone: phone,
-                vendor_description: description,
-                status: status,
-                address: [{
-                    address_1: updatedAddress1,
-                    address_2: updatedAddress2,
-                    barangay: barangay,
-                    city: city,
-                    province: province,
-                    country: country,
-                }]
-            };
-
-            // Make API request using the extracted filename
-            return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
-                method: 'PATCH',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
-                body: JSON.stringify(payload)
-            });
-        })
-        .then(secondResponse => {
-            if (secondResponse.ok) {
-                console.log('Second request successful');
-                location.reload();
-            } else {
-                console.error('Second request failed');
-            }
-        })
-        .catch(error => {
-            console.error('Error during fetch:', error);
-        });
-    }else{
-            
-            const payload = {
-                    user_login: updatedUser,
-                    first_name: firstName,
-                    last_name: lastName,
-                    user_email: updatedEmail,
-                    phone: phone,
-                    vendor_description: description,
-                    status: status,
-                    address: [{
-                        address_1: updatedAddress1,
-                        address_2: updatedAddress2,
-                        barangay: barangay,
-                        city: city,
-                        province: province,
-                        country: country,
-                    }]
-                };
-
-                fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
-                    method: 'PATCH',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify(payload)
-                })
-                .then(response => {
-                if (response.ok) {
-        location.reload();
-                    return response.json();
-                } else {
-                    console.error('vendor Update failed');
-                    throw new Error('vendor Update failed');
-                }
-            })
-                ;
-        }
-}
-
-}
-
-function validateEmail(vendorId) {
-    var emailInput = document.getElementById('email-' + vendorId);
-    var email = emailInput.value;
-
-    if (email.trim() !== '') {
-        return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/search?q=' + email)
-            .then(response => {
-                if (response.ok) {
-                    return response.json();
-                } else {
-                    throw new Error('Failed to check email availability');
-                }
-            })
-            .then(data => {
-                const isEmailAvailable = parseInt(data.results.length) === 0;
-                $('#email-error-message-' + vendorId).text(isEmailAvailable ? '' : 'Email is already in use').show();
-                return isEmailAvailable;
-            })
-            .catch(error => {
-                console.error('Error during email validation:', error);
-                return false;
-            });
-    } else {
-        $('#email-error-message-' + vendorId).text('').hide();
-        return Promise.resolve(true);
-    }
-}
+                                                    var fileInput = document.getElementById('fileInput' + vendorId);
+                                                    var file = fileInput.files[0];
 
 
+
+                                                    const updatedUser = document.getElementById('user_login-' + vendorId).value;
+                                                    const firstName = document.getElementById('firstName-' + vendorId).value;
+                                                    const lastName = document.getElementById('lastName-' + vendorId).value;
+                                                    const phone = document.getElementById('phone-' + vendorId).value;
+                                                    const description = document.getElementById('description-' + vendorId).value;
+                                                    const status = document.getElementById('status-' + vendorId).value;
+                                                    const updatedAddress1 = document.getElementById('address_1-' + vendorId).value;
+                                                    const updatedAddress2 = document.getElementById('address_2-' + vendorId).value;
+                                                    const barangay = document.getElementById('barangay-' + vendorId).value;
+                                                    const city = document.getElementById('city-' + vendorId).value;
+                                                    const province = document.getElementById('province-' + vendorId).value;
+                                                    const country = document.getElementById('country-' + vendorId).value;
+
+                                                    var formData = new FormData();
+                                                    formData.append('image_id', vendorId);
+                                                    formData.append('category', 'vendor');
+                                                    formData.append('image', file); // Include the file data in the form data
+
+                                                    if (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;
+
+                                                                const payload = {
+                                                                    vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
+                                                                    user_login: updatedUser,
+                                                                    first_name: firstName,
+                                                                    last_name: lastName,
+                                                                    user_email: updatedEmail,
+                                                                    phone: phone,
+                                                                    vendor_description: description,
+                                                                    status: status,
+                                                                    address: [{
+                                                                        address_1: updatedAddress1,
+                                                                        address_2: updatedAddress2,
+                                                                        barangay: barangay,
+                                                                        city: city,
+                                                                        province: province,
+                                                                        country: country,
+                                                                    }]
+                                                                };
+
+                                                                return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
+                                                                    method: 'PATCH',
+                                                                    headers: {
+                                                                        'Content-Type': 'application/json'
+                                                                    },
+                                                                    body: JSON.stringify(payload)
+                                                                });
+                                                            })
+                                                            .then(secondResponse => {
+                                                                if (secondResponse.ok) {
+                                                                    console.log('Second request successful');
+                                                                    location.reload();
+                                                                } else {
+                                                                    console.error('Second request failed');
+                                                                }
+                                                            })
+                                                            .catch(error => {
+                                                                console.error('Error during fetch:', error);
+                                                            });
+
+                                                    } else {
+                                                        const payload = {
+                                                            vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
+                                                            user_login: updatedUser,
+                                                            first_name: firstName,
+                                                            last_name: lastName,
+                                                            user_email: updatedEmail,
+                                                            phone: phone,
+                                                            vendor_description: description,
+                                                            status: status,
+                                                            address: [{
+                                                                address_1: updatedAddress1,
+                                                                address_2: updatedAddress2,
+                                                                barangay: barangay,
+                                                                city: city,
+                                                                province: province,
+                                                                country: country,
+                                                            }]
+                                                        };
+                                                        fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
+                                                                method: 'PATCH',
+                                                                headers: {
+                                                                    'Content-Type': 'application/json'
+                                                                },
+                                                                body: JSON.stringify(payload)
+                                                            })
+                                                            .then(response => {
+                                                                if (response.ok) {
+                                                                    location.reload();
+
+                                                                    return response.json();
+                                                                } else {
+                                                                    console.error('vendor Update failed');
+                                                                    throw new Error('vendor Update failed');
+                                                                }
+                                                            });
+                                                    }
+
+                                                }
+                                            });
+                                        } else {
+                                            $('#email-error-message-' + vendorId).text('').hide();
+
+                                            const updatedUser = document.getElementById('user_login-' + vendorId).value;
+                                            const firstName = document.getElementById('firstName-' + vendorId).value;
+                                            const lastName = document.getElementById('lastName-' + vendorId).value;
+                                            const updatedEmail = document.getElementById('email-' + vendorId).value;
+                                            const phone = document.getElementById('phone-' + vendorId).value;
+                                            const description = document.getElementById('description-' + vendorId).value;
+                                            const status = document.getElementById('status-' + vendorId).value;
+                                            const updatedAddress1 = document.getElementById('address_1-' + vendorId).value;
+                                            const updatedAddress2 = document.getElementById('address_2-' + vendorId).value;
+                                            const barangay = document.getElementById('barangay-' + vendorId).value;
+                                            const city = document.getElementById('city-' + vendorId).value;
+                                            const province = document.getElementById('province-' + vendorId).value;
+                                            const country = document.getElementById('country-' + vendorId).value;
+
+                                            var fileInput = document.getElementById('fileInput' + vendorId);
+                                            var file = fileInput.files[0];
+
+                                            var formData = new FormData();
+                                            formData.append('image_id', vendorId);
+                                            formData.append('category', 'vendor');
+                                            formData.append('image', file);
+
+                                            if (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;
+
+                                                        const payload = {
+                                                            vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
+                                                            user_login: updatedUser,
+                                                            first_name: firstName,
+                                                            last_name: lastName,
+                                                            user_email: updatedEmail,
+                                                            phone: phone,
+                                                            vendor_description: description,
+                                                            status: status,
+                                                            address: [{
+                                                                address_1: updatedAddress1,
+                                                                address_2: updatedAddress2,
+                                                                barangay: barangay,
+                                                                city: city,
+                                                                province: province,
+                                                                country: country,
+                                                            }]
+                                                        };
+
+                                                        // Make API request using the extracted filename
+                                                        return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
+                                                            method: 'PATCH',
+                                                            headers: {
+                                                                'Content-Type': 'application/json'
+                                                            },
+                                                            body: JSON.stringify(payload)
+                                                        });
+                                                    })
+                                                    .then(secondResponse => {
+                                                        if (secondResponse.ok) {
+                                                            console.log('Second request successful');
+                                                            location.reload();
+                                                        } else {
+                                                            console.error('Second request failed');
+                                                        }
+                                                    })
+                                                    .catch(error => {
+                                                        console.error('Error during fetch:', error);
+                                                    });
+                                            } else {
+
+                                                const payload = {
+                                                    user_login: updatedUser,
+                                                    first_name: firstName,
+                                                    last_name: lastName,
+                                                    user_email: updatedEmail,
+                                                    phone: phone,
+                                                    vendor_description: description,
+                                                    status: status,
+                                                    address: [{
+                                                        address_1: updatedAddress1,
+                                                        address_2: updatedAddress2,
+                                                        barangay: barangay,
+                                                        city: city,
+                                                        province: province,
+                                                        country: country,
+                                                    }]
+                                                };
+
+                                                fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
+                                                        method: 'PATCH',
+                                                        headers: {
+                                                            'Content-Type': 'application/json'
+                                                        },
+                                                        body: JSON.stringify(payload)
+                                                    })
+                                                    .then(response => {
+                                                        if (response.ok) {
+                                                            location.reload();
+                                                            return response.json();
+                                                        } else {
+                                                            console.error('vendor Update failed');
+                                                            throw new Error('vendor Update failed');
+                                                        }
+                                                    });
+                                            }
+                                        }
+
+                                    }
+
+                                    function validateEmail(vendorId) {
+                                        var emailInput = document.getElementById('email-' + vendorId);
+                                        var email = emailInput.value;
+
+                                        if (email.trim() !== '') {
+                                            return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/search?q=' + email)
+                                                .then(response => {
+                                                    if (response.ok) {
+                                                        return response.json();
+                                                    } else {
+                                                        throw new Error('Failed to check email availability');
+                                                    }
+                                                })
+                                                .then(data => {
+                                                    const isEmailAvailable = parseInt(data.results.length) === 0;
+                                                    $('#email-error-message-' + vendorId).text(isEmailAvailable ? '' : 'Email is already in use').show();
+                                                    return isEmailAvailable;
+                                                })
+                                                .catch(error => {
+                                                    console.error('Error during email validation:', error);
+                                                    return false;
+                                                });
+                                        } else {
+                                            $('#email-error-message-' + vendorId).text('').hide();
+                                            return Promise.resolve(true);
+                                        }
+                                    }
                                 </script>
 
                                 <!-- <script>
@@ -821,27 +836,27 @@ function validateEmail(vendorId) {
                             } */
 
                             $start = max(1, $currentpage - 2);
-                                $end = min($totalPages, $start + 4);
+                            $end = min($totalPages, $start + 4);
 
-                                if ($start > 1) {
-                                    echo "<a href='?page=1'>1</a>";
-                                    if ($start > 2) {
-                                        echo "<span>&nbsp;...&nbsp;</span>";
-                                    }
+                            if ($start > 1) {
+                                echo "<a href='?page=1'>1</a>";
+                                if ($start > 2) {
+                                    echo "<span>&nbsp;...&nbsp;</span>";
                                 }
+                            }
 
-                                for ($i = $start; $i <= $end; $i++) {
-                                    echo "<a href='?page=$i' class='" . ($currentpage == $i ? 'active' : '') . "'>$i</a>&nbsp;";
-                                }
+                            for ($i = $start; $i <= $end; $i++) {
+                                echo "<a href='?page=$i' class='" . ($currentpage == $i ? 'active' : '') . "'>$i</a>&nbsp;";
+                            }
 
-                                if ($end < $totalPages) {
-                                    if ($end < $totalPages - 1) {
-                                        echo "<span>&nbsp;...&nbsp;</span>";
-                                    }
-                                    echo "<a href='?page=$totalPages'>$totalPages</a>";
+                            if ($end < $totalPages) {
+                                if ($end < $totalPages - 1) {
+                                    echo "<span>&nbsp;...&nbsp;</span>";
                                 }
+                                echo "<a href='?page=$totalPages'>$totalPages</a>";
+                            }
                             ?>
-                            
+
                         </div>
                         <!-- Ec Pagination End -->
 
@@ -858,35 +873,35 @@ function validateEmail(vendorId) {
                                         <form action="add_vendor_action.php" method="post">
                                             <div class="ec-vendor-block-img space-bottom-30">
                                                 <!-- <div class="ec-vendor-block-bg cover-upload">
-                               <div class="thumb-upload">
-                                   <div class="thumb-edit">
-                                       <input type='file' id="thumbUpload01" class="ec-image-upload"
-                                           accept=".png, .jpg, .jpeg" />
-                                       <label><i class="fi-rr-edit"></i></label>
-                                   </div>
-                                   <div class="thumb-preview ec-preview">
-                                       <div class="image-thumb-preview">
-                                           <img loading="lazy" class="image-thumb-preview ec-image-preview v-img"
-                                               src="assets/images/banner/7.jpg" alt="edit" />
-                                       </div>
-                                   </div>
-                               </div>
-                           </div> -->
-                                                <!-- <div class="ec-vendor-block-detail">
-                               <div class="thumb-upload">
-                                   <div class="thumb-edit">
-                                       <input type='file' id="thumbUpload02" class="ec-image-upload"
-                                           accept=".png, .jpg, .jpeg" />
-                                       <label><i class="fi-rr-edit"></i></label>
-                                   </div>
-                                   <div class="thumb-preview ec-preview">
-                                       <div class="image-thumb-preview">
-                                           <img loading="lazy" class="image-thumb-preview ec-image-preview v-img"
-                                               src="assets/images/vendor/5.jpg" alt="edit" />
-                                       </div>
-                                   </div>
-                               </div>
-                           </div> -->
+                                                    <div class="thumb-upload">
+                                                        <div class="thumb-edit">
+                                                            <input type='file' id="thumbUpload01" class="ec-image-upload"
+                                                                accept=".png, .jpg, .jpeg" />
+                                                            <label><i class="fi-rr-edit"></i></label>
+                                                        </div>
+                                                        <div class="thumb-preview ec-preview">
+                                                            <div class="image-thumb-preview">
+                                                                <img loading="lazy" class="image-thumb-preview ec-image-preview v-img"
+                                                                    src="assets/images/banner/7.jpg" alt="edit" />
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div> -->
+                                                                        <!-- <div class="ec-vendor-block-detail">
+                                                    <div class="thumb-upload">
+                                                        <div class="thumb-edit">
+                                                            <input type='file' id="thumbUpload02" class="ec-image-upload"
+                                                                accept=".png, .jpg, .jpeg" />
+                                                            <label><i class="fi-rr-edit"></i></label>
+                                                        </div>
+                                                        <div class="thumb-preview ec-preview">
+                                                            <div class="image-thumb-preview">
+                                                                <img loading="lazy" class="image-thumb-preview ec-image-preview v-img"
+                                                                    src="assets/images/vendor/5.jpg" alt="edit" />
+                                                            </div>
+                                                        </div>
+                                                    </div>
+                                                </div> -->
                                                 <div class="ec-vendor-upload-detail">
                                                     <form class="row g-3">
                                                         <div class="col-md-12 space-t-15">
diff --git a/vendor-settings.php b/vendor-settings.php
index aefff24..7714a0b 100644
--- a/vendor-settings.php
+++ b/vendor-settings.php
@@ -438,27 +438,27 @@ if ($_SESSION["isCustomer"] == 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="addressFirstName">
+                                <input type="text" class="form-control" id="addressFirstName" required>
                             </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="addressLastName">
+                                <input type="text" class="form-control" id="addressLastName" required>
                             </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)">
+                                <input type="text" class="form-control" id="addressContact" value="+63 " oninput="preventErasePrefix(this)" required>
                             </div>
                             <div class="form-group">
                                 <label for="addressBuilding" class="text-dark font-weight-medium pt-3 mb-2"> House/Unit/Flr #, Bldg Name, Blk or Lot # </label>
-                                <input type="text" class="form-control" id="addressBuilding">
+                                <input type="text" class="form-control" id="addressBuilding" required>
                             </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="addressStreet">
+                                <input type="text" class="form-control" id="addressStreet" required>
                             </div>
                             <div class="form-group">
                                 <label for="provinceSelect">Province</label>
-                                <select class="form-select" id="provinceSelect">
+                                <select class="form-select" id="provinceSelect" required>
                                     <option value="" disabled selected hidden>Select Province</option>
                                 </select>
                             </div>
@@ -476,7 +476,7 @@ if ($_SESSION["isCustomer"] == true) {
                             </div>
                             <div class="form-group">
                                 <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">
+                                <input type="text" class="form-control" id="addressCountry" value="Philippines" required>
                             </div>
                             <button type="button" class="btn btn-primary mt-4" id="submitBtn">Submit</button>
 
