From 3e8e62a13143d8852cdfc63eae22d10e211ac9a5 Mon Sep 17 00:00:00 2001
From: Jun Barroga <jun.barroga@obanana.com>
Date: Tue, 27 Feb 2024 08:56:59 +0800
Subject: [PATCH] Vendor Page Modifications

---
 admin/config.php                        |   2 +-
 admin/login.php                         |   2 +-
 admin/vendor-card.php                   | 340 ++++++++++++----------
 assets/css/style.css                    |   2 +-
 checkouttest.php                        |   4 +-
 functions.php                           |  10 +-
 vendor-dashboard-orders-edit-action.php |   6 +
 vendor-dashboard-orders-edit.php        |   4 +
 vendor-settings.php                     | 367 +++++++++++++++---------
 9 files changed, 444 insertions(+), 293 deletions(-)

diff --git a/admin/config.php b/admin/config.php
index 57d9763..7f523ab 100644
--- a/admin/config.php
+++ b/admin/config.php
@@ -1,6 +1,6 @@
 <?php
 $_SESSION["is_test"]=true;
-$_SESSION["test_email_rcpt"]="stacyjoycemapano@gmail.com";
+$_SESSION["test_email_rcpt"]="junjihadbarroga@gmail.com";
 $_SESSION["sales_email"]="stacyjoycemapano@gmail.com";
 $_SESSION["data_endpoint"]="api.obanana.shop";
 if ($_SESSION["is_test"]){
diff --git a/admin/login.php b/admin/login.php
index a1883c5..41be8d6 100644
--- a/admin/login.php
+++ b/admin/login.php
@@ -81,7 +81,7 @@ if ($_SESSION["isLoggedIn"] == true and $_SESSION["user_type"] == "admin"){
                                     <?php
                                 }
                             ?>
-                            <form action="/login_action.php" method="post">
+                            <form action="../login_action.php" method="post">
                                 <div class="mb-3 mt-3">
                                     <label for="email">Email:</label>
                                     <input type="email" class="form-control" id="email" placeholder="Enter email" name="name">
diff --git a/admin/vendor-card.php b/admin/vendor-card.php
index 111c49c..a08d6b5 100644
--- a/admin/vendor-card.php
+++ b/admin/vendor-card.php
@@ -852,168 +852,212 @@ $products = productList();
                                     </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) {
-                                        validateEmail(vendorId).then(isEmailAvailable => {
-                                            if (!isEmailAvailable) {
-                                                // Display an error message and prevent form submission
-                                                $('#email-error-message-' + vendorId).text('Email is already in use').show();
-                                            } else {
-                                                // Proceed with form submission
-                                                $('#email-error-message-' + vendorId).text('').hide();
+    const originalEmail = document.getElementById('email-' + vendorId).defaultValue;
+    const updatedEmail = document.getElementById('email-' + vendorId).value;
+    const isEmailModified = originalEmail !== updatedEmail;
 
-                                                // Rest of the code for file upload and API request
-                                                var fileInput = document.getElementById('fileInput' + vendorId);
-                                                var file = fileInput.files[0];
+    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();
 
-                                                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];
 
-                                                // Check if a file is selected for upload
-                                                if (file) {
-                                                    var formData = new FormData();
-                                                    formData.append('image_id', vendorId);
-                                                    formData.append('category', 'vendor');
-                                                    formData.append('image', file);
+                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;
 
-                                                    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;
+                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
 
-                                                            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/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;
 
-                                                            // Make another 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 {
-                                                    // If no file selected, only update the email
-                                                    fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorId, {
-                                                            method: 'PATCH',
-                                                            headers: {
-                                                                'Content-Type': 'application/json'
-                                                            },
-                                                            body: JSON.stringify({
-                                                                user_login: updatedUser,
-                                                                first_name: firstName,
-                                                                last_name: lastName,
-                                                                user_email: updatedEmail,
-                                                                vendor_description: description,
-                                                                status: status,
-                                                                phone: phone,
-                                                                address: [{
-                                                                    address_1: updatedAddress1,
-                                                                    address_2: updatedAddress2,
-                                                                    barangay: barangay,
-                                                                    city: city,
-                                                                    province: province,
-                                                                    country: country,
-                                                                }]
-                                                            })
-                                                        })
-                                                        .then(response => {
-                                                            if (response.ok) {
-                                                                console.log('Email update successful');
-                                                                location.reload();
-                                                            } else {
-                                                                console.error('Email update failed');
-                                                            }
-                                                        })
-                                                        .catch(error => {
-                                                            console.error('Error during fetch:', error);
-                                                        });
-                                                }
-                                            }
-                                        });
-                                    }
+                        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 {
+    $('#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);
+
+    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);
+        });
+}
+
+}
+
+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);
+    }
+}
 
-                                    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>
diff --git a/assets/css/style.css b/assets/css/style.css
index 7c6fbae..cae6629 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -35085,7 +35085,7 @@ input[type=email]:focus::-webkit-input-placeholder {
 .ec-vendor-profile-card .ec-vendor-block-profile .ec-vendor-block-img .ec-vendor-block-bg {
   width: 100%;
   height: 200px;
-  background-image: url(../images/banner/7.jpg);
+  background-image:none;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
diff --git a/checkouttest.php b/checkouttest.php
index 6a07a4f..46c0ad0 100644
--- a/checkouttest.php
+++ b/checkouttest.php
@@ -605,7 +605,7 @@ if (isset($customer_data[0]["address"]) && is_array($customer_data[0]["address"]
                                                         <span class="ec-price">
                                                             <span class="new-price">Subtotal: <?php echo $checkout['shipping_fee'] + $checkout['total_amount']; ?></span>
                                                         </span>
-                                                        <div class="ec-pro-option">
+                                                        <!-- <div class="ec-pro-option">
                                                             <div class="ec-pro-color">
                                                                 <span class="ec-pro-opt-label">Color</span>
                                                                 <ul class="ec-opt-swatch ec-change-img">
@@ -629,7 +629,7 @@ if (isset($customer_data[0]["address"]) && is_array($customer_data[0]["address"]
                                                                     </li>
                                                                 </ul>
                                                             </div>
-                                                        </div>
+                                                        </div> -->
                                                     </div>
                                                 </div>
                                             <?php } ?>
diff --git a/functions.php b/functions.php
index cffbd8a..ae5ff93 100644
--- a/functions.php
+++ b/functions.php
@@ -1382,17 +1382,23 @@ function getOrderbyVendorId($id)
   return $response;
 }
 
-function editOrderStatus($orderId, $status, $currentStatus, $trackingNumber, $courierName, $token)
+function editOrderStatus($orderId, $status, $currentStatus, $trackingNumber, $courierName, $paymentStatus, $paymentReference, $token)
 {
   $curl = curl_init();
   $data = array(
     'status' => $status
   );
-  if ($currentStatus == "TO SHIP" || $currentStatus == "T Ship") {
+  if ($currentStatus == "TO SHIP" || $currentStatus == "To Ship") {
     // $data['tracking_number'] = $trackingNumber;
     $data['tracking_number'] = $trackingNumber;
     $data['courier_name'] = $courierName;
   }
+  if ($currentStatus == "TO RECEIVE" || $currentStatus == "To Receive") {
+    // $data['tracking_number'] = $trackingNumber;
+    $data['payment']['status'] = $paymentStatus;
+    $data['payment']['reference_number'] = $paymentReference;
+
+  }
   $params3 = json_encode($data);
   curl_setopt_array($curl, array(
     CURLOPT_URL => "https://".$_SESSION["data_endpoint"]."/api/v1/orders/" . $orderId,
diff --git a/vendor-dashboard-orders-edit-action.php b/vendor-dashboard-orders-edit-action.php
index f86541a..b47079e 100644
--- a/vendor-dashboard-orders-edit-action.php
+++ b/vendor-dashboard-orders-edit-action.php
@@ -5,15 +5,19 @@ $orderId =  $_SESSION['vendorOrderId'];
 $currentStatus = $_POST['order_status'];
 $trackingNumber = $_POST['tracking_number'];
 $courirerName = $_POST['courier_name'];
+$paymentReference = $_POST['payment_reference'];
 $token = $_SESSION['token'];
 // $status = "TO SHIP";
 
 if ($currentStatus === 'TO PAY' || $currentStatus === 'To Pay') {
     $status = 'TO SHIP';
+    $paymentStatus = 'UNPAID';
 } elseif ($currentStatus === 'TO SHIP' || $currentStatus === 'To Ship') {
     $status = 'TO RECEIVE';
+    $paymentStatus = 'UNPAID';
 } elseif ($currentStatus === 'TO RECEIVE' || $currentStatus === 'To Receive') {
     $status = 'COMPLETED';
+    $paymentStatus = 'PAID';
 }
 
 $response = editOrderStatus(
@@ -22,6 +26,8 @@ $response = editOrderStatus(
           $currentStatus,
           $trackingNumber,
           $courirerName,
+          $paymentStatus,
+          $paymentReference,
           $token
          );
 $array = json_decode($response,true);
diff --git a/vendor-dashboard-orders-edit.php b/vendor-dashboard-orders-edit.php
index 9d3a41a..06b7ac9 100644
--- a/vendor-dashboard-orders-edit.php
+++ b/vendor-dashboard-orders-edit.php
@@ -199,6 +199,10 @@ $array = json_decode($result, true);
                                                             <label for="inputEmail4" class="form-label">Payment Status</label>
                                                             <input type="text" class="form-control slug-title" value="<?php echo $array['payment']['status'] ?>" readonly>
                                                         </div>
+                                                        <div class="col-md-6" style="display:none;">
+                                                            <label for="inputEmail4" class="form-label">Payment Reference</label>
+                                                            <input type="text" name="payment_reference" class="form-control slug-title" value="<?php echo htmlspecialchars($array['payment']['reference_number']); ?>">
+                                                        </div>
                                                         <div class="col-md-6">
                                                             <label for="inputEmail4" class="form-label">Status</label>
                                                             <input type="text" class="form-control slug-title" name="order_status" value="<?php echo $array['status'] ?>" readonly>
diff --git a/vendor-settings.php b/vendor-settings.php
index 3758f5f..8e1f553 100644
--- a/vendor-settings.php
+++ b/vendor-settings.php
@@ -137,26 +137,42 @@ if ($_SESSION["userId"] <> "") {
                     <div class="ec-vendor-dashboard-card ec-vendor-setting-card">
                         <div class="ec-vendor-card-body">
                             <?php
-
-                            // var_dump($vendor);
                             ?>
                             <div class="row">
                                 <div class="col-md-12">
                                     <div class="ec-vendor-block-profile">
+                                        <!-- 02-23-2023 Jun Jihad Vendor Header Paceholder -->
                                         <div class="ec-vendor-block-img space-bottom-30 ">
-                                            <div class="ec-vendor-block-bg profBg" style="background-image: url(<?php echo $vendorData['vendor_banner'] ?>) !important;" id="myElement">
+                                        <?php
+                                            if (!isset($vendorData['vendor_banner']) || empty($vendorData['vendor_banner'])) {
+                                                $banner_style = 'background-color: orange !important; background-image: none !important;  width: 100% !important; height: 200px !important; background-size: cover !important; background-position: center !important; border-radius: 5px !important;';
+                                            } else {
+                                                $banner_style = 'background-image: url(' . $vendorData['vendor_banner'] . ') !important;  width: 100% !important; height: 200px !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; background-blend-mode: overlay !important; background-color: rgba(0, 0, 0, 0.6) !important; border-radius: 5px !important;';
+                                            }
+                                            ?>
+                                        <div class="ec-vendor-block-bg" style="<?php echo $banner_style; ?>">
                                                 <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">
-                                                <img class="v-img" src=<?php echo $vendorData['vendor_image'] ?> alt="vendor image">
+                                            <?php
+                                                $vendor_image_modal = isset($vendorData['vendor_image']) ?$vendorData['vendor_image'] : 'https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg';
+                                                ?>
+                                                <img class="v-img" src=<?php echo $vendor_image_modal ?> alt="vendor image">
                                                 <h5 class="name"><?php echo $vendorData['user_login'] ?></h5>
                                             </div>
                                         </div>
+                                        <!-- 02-23-2023 Jun Jihad Vendor Header Paceholder -->
+                                        <!-- 02-23-2023 Jun Jihad Vendor Description -->
                                         <div class="ec-vendor-block-about space-bottom-30">
                                             <h5>About Us</h5>
-                                            <p><?php echo $vendorData["vendor_description"] ?></p>
+                                            <?php if (!empty($vendorData['vendor_description'])): ?>
+                                                <p><?php echo $vendorData['vendor_description']; ?></p>
+                                            <?php else: ?>
+                                                <p>No description available.</p>
+                                            <?php endif; ?>
                                         </div>
+                                        <!-- 02-23-2023 Jun Jihad Vendor Description -->
                                         <h5>Account Information</h5>
 
                                         <div class="row">
@@ -164,7 +180,7 @@ if ($_SESSION["userId"] <> "") {
                                                 <div class="ec-vendor-detail-block ec-vendor-block-email space-bottom-30">
                                                     <h6>E-mail address </h6>
                                                     <ul>
-                                                        <li><strong><?php echo $vendorData["user_email"] ?></strong></li>
+                                                        <li style="padding:3%"><strong><?php echo $vendorData["user_email"] ?></strong></li>
                                                     </ul>
                                                 </div>
                                             </div>
@@ -172,7 +188,7 @@ if ($_SESSION["userId"] <> "") {
                                                 <div class="ec-vendor-detail-block ec-vendor-block-contact space-bottom-30">
                                                     <h6>Contact nubmer</h6>
                                                     <ul>
-                                                        <li><strong><?php echo $vendorData["phone"] ?></strong></li>
+                                                        <li style="padding:3%"><strong><?php echo $vendorData["phone"] ?></strong></li>
                                                     </ul>
                                                 </div>
                                             </div>
@@ -335,6 +351,7 @@ if ($_SESSION["userId"] <> "") {
                 const firstName = document.getElementById('cfirstname-').value;
                 const lastName = document.getElementById('clastname-').value;
                 const phone = document.getElementById('cphone-').value;
+                const description = document.getElementById('cdescription-').value;
 
                 // If no file selected, only update the email
                 fetch(`https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/${vendorid}`, {
@@ -347,6 +364,7 @@ if ($_SESSION["userId"] <> "") {
                             first_name: firstName,
                             last_name: lastName,
                             phone: phone,
+                            vendor_description:description
                         })
                     })
                     .then(response => {
@@ -369,24 +387,22 @@ if ($_SESSION["userId"] <> "") {
         <script>
             const vendorid = `<?php echo $_SESSION["LoggedInVendorId"]; ?>`;
             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
+                const provinceSelect = $('#provinceSelect'); 
+                const citySelect = $('#citySelect'); 
+                const barangaySelect = $('#barangaySelect'); 
 
-                // Initialize Select2 on the provinceSelect, citySelect, and barangaySelect elements
                 provinceSelect.select2({
                     dropdownParent: $('#secondModal'),
-                    containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
+                    containerCssClass: 'select2-zindex-high' 
                 });
 
                 citySelect.select2({
                     dropdownParent: $('#secondModal'),
-                    containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
+                    containerCssClass: 'select2-zindex-high' 
                 });
                 barangaySelect.select2({
                     dropdownParent: $('#secondModal'),
-                    containerCssClass: 'select2-zindex-high' // Optional, add a custom class for styling
+                    containerCssClass: 'select2-zindex-high' 
                 });
 
                 // Fetch provinces data
@@ -400,23 +416,19 @@ if ($_SESSION["userId"] <> "") {
                         }
                     })
                     .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();
                         });
                     })
@@ -424,13 +436,11 @@ if ($_SESSION["userId"] <> "") {
                         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
+                    const selectedProvinceCode = provinceSelect.val();
                     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/`;
@@ -446,7 +456,6 @@ if ($_SESSION["userId"] <> "") {
                                 }
                             })
                             .then(citiesData => {
-                                // Iterate through the cities data and add options
                                 citiesData.forEach(city => {
                                     const option = new Option(city.name, city.code);
                                     citySelect.append(option);
@@ -457,13 +466,9 @@ if ($_SESSION["userId"] <> "") {
                             });
                     }
                 }
-
-                // 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/`)
@@ -476,7 +481,6 @@ if ($_SESSION["userId"] <> "") {
                                 }
                             })
                             .then(barangaysData => {
-                                // Iterate through the barangays data and add options
                                 barangaysData.forEach(barangay => {
                                     const option = new Option(barangay.name, barangay.code);
                                     barangaySelect.append(option);
@@ -491,14 +495,11 @@ if ($_SESSION["userId"] <> "") {
 
 
                 $('#submitBtn').on('click', function() {
-                    // Retrieve existing addresses from the API
                     fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid)
                         .then(response => response.json())
                         .then(data => {
-                            // Get the existing addresses array
                             const existingAddresses = data.address || [];
 
-                            // Get the new address details
                             const firstName = $('#addressFirstName').val();
                             const lastName = $('#addressLastName').val();
                             const contact = $('#addressContact').val();
@@ -510,7 +511,6 @@ if ($_SESSION["userId"] <> "") {
                             const country = $('#addressCountry').val();
 
 
-                            // Create a new address object
                             const newAddress = {
                                 first_name: firstName,
                                 last_name: lastName,
@@ -523,10 +523,8 @@ if ($_SESSION["userId"] <> "") {
                                 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/vendors/' + vendorid, {
                                 method: 'PATCH',
                                 headers: {
@@ -539,16 +537,13 @@ if ($_SESSION["userId"] <> "") {
                         })
                         .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');
                         });
@@ -706,11 +701,18 @@ if ($_SESSION["userId"] <> "") {
                                         <label><i class="fi-rr-edit"></i></label>
                                     </div>
                                     <div class="thumb-preview ec-preview">
-                                        <div class="image-thumb-preview">
-                                            <img class="image-thumb-preview ec-image-preview v-img" src=<?php echo $vendorData['vendor_banner'] ?> alt="edit" />
-                                        </div>
+                                    <div class="image-thumb-preview">
+                                        <?php
+                                        if (!isset($vendorData['vendor_banner']) || empty($vendorData['vendor_banner'])) {
+                                            $banner_style2 = 'background-color: orange !important; background-image: none !important;  width: 100% !important; height: 200px !important; background-size: cover !important; background-position: center !important; border-radius: 5px !important;';
+                                            echo '<div class="image-thumb-preview ec-image-preview v-img" style="' . $banner_style2 . '"></div>';
+                                        } else {
+                                            echo '<img class="image-thumb-preview ec-image-preview v-img" src="' . $vendorData['vendor_banner'] . '" alt="edit" />';
+                                        }
+                                        ?>
                                     </div>
                                 </div>
+                                </div>
                             </div>
                             <div class="ec-vendor-block-detail">
                                 <div class="thumb-upload">
@@ -719,118 +721,201 @@ if ($_SESSION["userId"] <> "") {
                                         <label><i class="fi-rr-edit"></i></label>
                                     </div>
                                     <div class="thumb-preview ec-preview">
-                                        <div class="image-thumb-preview">
-                                            <img class="image-thumb-preview ec-image-preview v-img" src=<?php echo $vendorData['vendor_image'] ?> alt="edit" />
-                                        </div>
+                                    <div class="image-thumb-preview">
+                                        <?php if (!empty($vendorData['vendor_image'])): ?>
+                                            <img class="image-thumb-preview ec-image-preview v-img" src="<?php echo $vendorData['vendor_image']; ?>" alt="edit" />
+                                        <?php else: ?>
+                                            <img class="image-thumb-preview ec-image-preview v-img" src="https://yourteachingmentor.com/wp-content/uploads/2020/12/istockphoto-1223671392-612x612-1.jpg" alt="edit" />
+                                        <?php endif; ?>
+                                    </div>
                                     </div>
                                 </div>
                             </div>
                             <script>
-                                function uploadVendorProfileImage() {
-                                    var vendorid = '<?php echo $_SESSION["LoggedInVendorId"] ?>';
-                                    var file = document.getElementById('imageUpload').files[0];
-                                    if (file) {
-                                        var formData = new FormData();
-                                        formData.append('image_id', vendorid);
-                                        formData.append('category', 'vendor');
-                                        formData.append('image', file);
+                               function uploadVendorProfileImage() {
+    var vendorid = '<?php echo $_SESSION["LoggedInVendorId"] ?>';
+    var file = document.getElementById('imageUpload').files[0];
+    if (file) {
+        const reader = new FileReader();
 
-                                        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;
+        reader.onload = function(event) {
+            const img = new Image();
+            img.onload = function() {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                const maxWidth = 1200;
+                const maxHeight = 1000;
+                const aspectRatio = img.width / img.height;
+                let newWidth = img.width;
+                let newHeight = img.height;
 
-                                                const payload = {
-                                                    vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
+                if (img.width > maxWidth) {
+                    newWidth = maxWidth;
+                    newHeight = newWidth / aspectRatio;
+                }
 
-                                                };
+                if (newHeight > maxHeight) {
+                    newHeight = maxHeight;
+                    newWidth = newHeight * aspectRatio;
+                }
 
-                                                console.log('Payload:', payload);
+                canvas.width = newWidth;
+                canvas.height = newHeight;
+                ctx.drawImage(img, 0, 0, newWidth, newHeight);
 
-                                                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);
-                                            });
-                                    }
-                                }
+                canvas.toBlob((blob) => {
+                    const resizedFile = new File([blob], file.name, {
+                        type: 'image/jpeg'
+                    });
 
-                                function uploadProfileBanner() {
-                                    var vendorid = '<?php echo $_SESSION["LoggedInVendorId"] ?>';
-                                    var file = document.getElementById('thumbUpload01').files[0];
-                                    if (file) {
-                                        var formData = new FormData();
-                                        formData.append('image_id', vendorid + '_banner');
-                                        formData.append('category', 'vendor');
-                                        formData.append('image', file);
+                    var formData = new FormData();
+                    formData.append('image_id', vendorid);
+                    formData.append('category', 'vendor');
+                    formData.append('image', resizedFile);
 
-                                        fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
-                                                method: 'POST',
-                                                body: formData
-                                            })
-                                            .then(response => {
-                                                if (response.ok) {
-                                                    return response.json();
-                                                } else {
-                                                    console.error('File upload failed');
-                                                    throw new Error('File upload failed');
-                                                }
-                                            })
-                                            .then(result => {
-                                                const filename = result.filename;
+                    fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
+                            method: 'POST',
+                            body: formData
+                        })
+                        .then(response => {
+                            if (response.ok) {
+                                return response.json();
+                            } else {
+                                console.error('File upload failed');
+                                throw new Error('File upload failed');
+                            }
+                        })
+                        .then(result => {
+                            const filename = encodeURI(result.filename);
 
-                                                const payload = {
-                                                    vendor_banner: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
+                            const payload = {
+                                vendor_image: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
+                            };
 
-                                                };
+                            console.log('Payload:', payload);
 
-                                                console.log('Payload:', payload);
+                            return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
+                                method: 'PATCH',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify(payload)
+                            });
+                        })
+                        .then(secondResponse => {
+                            if (secondResponse.ok) {
+                                console.log('Second request successful');
+                                location.reload();
+                            } else {
+                                console.error('Second request failed');
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error during fetch:', error);
+                        });
+                }, 'image/jpeg');
+            };
+
+            img.src = event.target.result;
+        };
+
+        reader.readAsDataURL(file);
+    }
+}
+
+function uploadProfileBanner() {
+    var vendorid = '<?php echo $_SESSION["LoggedInVendorId"] ?>';
+    var file = document.getElementById('thumbUpload01').files[0];
+    if (file) {
+        const reader = new FileReader();
+
+        reader.onload = function(event) {
+            const img = new Image();
+            img.onload = function() {
+                const canvas = document.createElement('canvas');
+                const ctx = canvas.getContext('2d');
+                const maxWidth = 1200;
+                const maxHeight = 1000;
+                const aspectRatio = img.width / img.height;
+                let newWidth = img.width;
+                let newHeight = img.height;
+
+                if (img.width > maxWidth) {
+                    newWidth = maxWidth;
+                    newHeight = newWidth / aspectRatio;
+                }
+
+                if (newHeight > maxHeight) {
+                    newHeight = maxHeight;
+                    newWidth = newHeight * aspectRatio;
+                }
+
+                canvas.width = newWidth;
+                canvas.height = newHeight;
+                ctx.drawImage(img, 0, 0, newWidth, newHeight);
+
+                canvas.toBlob((blob) => {
+                    const resizedFile = new File([blob], file.name, {
+                        type: 'image/jpeg'
+                    });
+
+                    var formData = new FormData();
+                    formData.append('image_id', vendorid + '_banner');
+                    formData.append('category', 'vendor');
+                    formData.append('image', resizedFile);
+
+                    fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/upload_image', {
+                            method: 'POST',
+                            body: formData
+                        })
+                        .then(response => {
+                            if (response.ok) {
+                                return response.json();
+                            } else {
+                                console.error('File upload failed');
+                                throw new Error('File upload failed');
+                            }
+                        })
+                        .then(result => {
+                            const filename = encodeURI(result.filename);
+                            // const filename = result.filename;
+
+                            const payload = {
+                                vendor_banner: `https://<?php echo $_SESSION["data_endpoint"]; ?>/images/storage/vendor_uploads/${filename}`,
+
+                            };
+
+                            console.log('Payload:', payload);
+
+                            return fetch('https://<?php echo $_SESSION["data_endpoint"]; ?>/api/v1/vendors/' + vendorid, {
+                                method: 'PATCH',
+                                headers: {
+                                    'Content-Type': 'application/json'
+                                },
+                                body: JSON.stringify(payload)
+                            });
+                        })
+                        .then(secondResponse => {
+                            if (secondResponse.ok) {
+                                console.log('Second request successful');
+                                location.reload();
+                            } else {
+                                console.error('Second request failed');
+                            }
+                        })
+                        .catch(error => {
+                            console.error('Error during fetch:', error);
+                        });
+                }, 'image/jpeg');
+            };
+
+            img.src = event.target.result;
+        };
+
+        reader.readAsDataURL(file);
+    }
+}
 
-                                                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);
-                                            });
-                                    }
-                                }
                             </script>
                             <div class="ec-vendor-upload-detail">
                                 <form class="row g-3">
@@ -854,6 +939,12 @@ if ($_SESSION["userId"] <> "") {
                                         <label for="cphone-" class="text-dark font-weight-medium pt-3 mb-2">Contact Number</label>
                                         <input type="text" class="form-control" id="cphone-" value="<?php echo $vendorData['phone'] ?>">
                                     </div>
+                                        <!-- 02-23-2023 Jun Jihad Vendor Description Field-->
+                                     <div class="form-group">
+                                        <label for="cdescription-" class="text-dark font-weight-medium pt-3 mb-2">Vendor Description</label>
+                                        <textarea class="form-control" id="cdescription-"><?php echo $vendorData['vendor_description']; ?></textarea>
+                                    </div>
+                                        <!-- 02-23-2023 Jun Jihad Vendor Description Field-->
 
                                     <!-- <div class="col-md-12 space-t-15">
                                         <button type="submit" class="btn btn-primary">Update</button>