Merge branch 'master' of https://git.harplabs.com/WordPress_Themes/Rogers_Motors_Theme

assets/css/styles.css

@@ -256,6 +256,18 @@ textarea {
   background-color: var(--gray-100) !important;
 }
 
+button:disabled {
+  background-color: var(--gray-200);
+  color: black;
+  cursor: not-allowed;
+}
+
+button:disabled:hover {
+  background-color: var(--gray-500);
+  color: white;
+  cursor: not-allowed;
+}
+
 .toggle-menu {
   height: 40px;
   display: flex;
@@ -690,7 +702,7 @@ body.login {
   text-decoration: underline;
 }
 
-.menu-item:hover {
+#menu-main-menu .menu-item:hover {
   background-color: var(--primary-500);
   color: #fff;
 }
@@ -705,6 +717,10 @@ body.login {
   font-size: 12px; /* Adjust the size as needed */
 }
 
+.menu-item-has-children:hover > a:after {
+  color: #fff; /* Change the color as needed */
+}
+
 /* Hide sub-menu items by default */
 .sub-menu {
   width: max-content;
@@ -2308,6 +2324,10 @@ select {
   border-width: 8px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -2316,10 +2336,6 @@ select {
   border-top-width: 4px;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219/var(--tw-border-opacity));

autocart_assets/js/AppointmentForm.js

@@ -1,6 +1,15 @@
 class AppointmentForm {
     constructor(vehicle) {
       this.vehicle = vehicle;
+      this.inputs = [
+        'name',
+        'email',
+        'phone',
+        'preferred-contact',
+        'message',
+        'agreeToOffersCheckbox',
+        'privacyPolicyCheckbox',
+      ];
       this.initForm();
       this.modalDiv = null;
       this.name = 'appointmentForm';
@@ -21,6 +30,7 @@ class AppointmentForm {
         },
       ];
       let checkboxes = ``;
+      const vehicleInput = `<input type="hidden" name="vehicle" id="vehicle" value='${JSON.stringify(this.vehicle)}'>`;
       inputIds.forEach((input) => {
         checkboxes += `
               <div class=" mdc-form-field flex flex-row flex-nowrap w-full my-2 lg:my-0 ${input.name} hover:text-red-500">
@@ -38,38 +48,41 @@ class AppointmentForm {
               </div>`;
       });
       this.modalDiv.innerHTML = `
-          <form class="p-4 md:p-5">
+          <form class="p-4 md:p-5" id="appointmentForm">
             <div class="grid gap-4 grid-cols-2">
                 <div class="col-span-2">
                     <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Name</label>
-                      <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Jane Doe" required="">
+                    <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Jane Doe" required>
+                    <div id="nameError" class="text-red-500 hidden">Please enter your name.</div>
                 </div>
                 <div class="col-span-2">
                     <label for="email" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email</label>
-                      <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="jane@gmail.com" required="">
+                    <input type="email" name="email" id="email" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="jane@gmail.com" required>
+                    <div id="emailError" class="text-red-500 hidden">Please enter a valid email address.</div>
                 </div>
                 <div class="col-span-2 ">
                     <label for="phone" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Phone</label>
-                      <input type="tel" name="phone" id="phone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="(123) 456-7890" required="">
+                    <input type="tel" name="phone" id="phone" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="(123) 456-7890" required>
+                    <div id="phoneError" class="text-red-500 hidden">Please enter a valid phone number.</div>
                 </div>
                 <div class="col-span-2 ">
                     <label for="preferred-contact" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Preferred Contact Method</label>
                     <select id="preferred-contact" name="preferred-contact" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
-                          <option selected="">---</option>
+                        <option selected disabled>---</option>
                         <option value="Call">Call</option>
-                          <option value="Email">Email</option>
+                        <option value="Email" selected>Email</option>
                         <option value="Text">Text</option>
                     </select>
+                    <div id="preferredContactError" class="text-red-500 hidden">Please select a preferred contact method.</div>
                 </div>
                 <div class="col-span-2">
                     <label for="message" name="message" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Product Description</label>
                     <textarea id="message" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="I am interested in..."></textarea>
                 </div>
             </div>
+            ${vehicleInput}
             ${checkboxes}
-  
+            <button class="w-full bg-gray-500 hover:bg-gray-800 text-white p-2 rounded-md transition duration-300 finance-view-only" id="send-button">Send</button>
-              <button class="w-full bg-gray-500 hover:bg-gray-800 text-white p-2 rounded-md transition duration-300" id="send-button">Send</button>
-  
           </form>
               `;
   
@@ -106,24 +119,53 @@ class AppointmentForm {
     }
 
     initializeFormEventListeners(modalDiv) {
-      const formInputs = [
+      let self = this;
-        'name',
+      self.inputs.forEach(id => {
-        'email',
-        'phone',
-        'preferred-contact',
-        'message',
-        'agreeToOffersCheckbox',
-        'privacyPolicyCheckbox',
-      ];
-  
-      formInputs.forEach((id) => {
           const inputElement = modalDiv.querySelector(`#${id}`);
           if (inputElement) {
               inputElement.addEventListener('input', () => {
-            this.saveFormValues(); // Save form values whenever an input changes
+                self.saveFormValues(); // Save form values whenever an input changes
               });
           }
       });
+  
+      const sendButton = modalDiv.querySelector('#send-button');
+      
+      if (sendButton) {
+          sendButton.addEventListener('click', function(e) {
+              e.preventDefault();
+              if (self.validateForm()) {
+                console.log('Form submitted successfully');
+              }else{
+                return
+              }
+  
+              const formData = {};
+
+              [...['loanTerm', 'intRate', 'downPayment', 'tradeValue', 'paymentFrequency', 'rate', 'customRateValue'],...self.inputs].forEach(inputID => {
+                  const inputElement = document.getElementById(inputID);
+                  if (inputElement) {
+                      formData[inputID] = postDetails.hasOwnProperty(inputID) ? postDetails[inputID] : null;
+                  }
+              });
+              // AJAX request
+              jQuery.ajax({
+                  type: 'POST',
+                  url: ajax_object.ajax_url,
+                  data: {
+                      action: 'send_appointment_data',
+                      appointment_data: formData,
+                      nonce: ajax_object.appointment_nonce 
+                  },
+                  success: function(response) {
+                      alert('Appointment data sent successfully!');
+                  },
+                  error: function(xhr, status, error) {
+                      console.error(xhr.responseText);
+                  }
+              });
+          });
+      }
   }
   
     initializeFormInputs() {
@@ -133,7 +175,7 @@ class AppointmentForm {
         const inputElement = document.getElementById(key);
         if (inputElement) {
           inputElement.value = storedValues[key];
-          inputElement.dispatchEvent(new Event('input')); // Dispatch input event
+          inputElement.dispatchEvent(new Event('input'));
         }
       }
     }
@@ -142,13 +184,11 @@ class AppointmentForm {
       this.checkboxes = modalDiv.querySelectorAll('.mdc-checkbox');
       if (this.checkboxes) {
         this.checkboxes.forEach((checkbox, index) => {
-          // Initialize the MDCCheckbox with the actual checkbox element
           const checkboxElement = checkbox.querySelector(
             `.mdc-checkbox__native-control.${inputIds[index].name}`
           );
           const checkboxInstance = new mdc.checkbox.MDCCheckbox(checkbox);
   
-          // If the checkbox is found, initialize the form field as well
           if (checkboxElement) {
             const formFieldInstance = new mdc.formField.MDCFormField(
               modalDiv.querySelector(`.mdc-form-field.${inputIds[index].name}`)
@@ -164,18 +204,10 @@ class AppointmentForm {
     }
   
     saveFormValues() {
-      const formInputs = [
+     
-        'name',
-        'email',
-        'phone',
-        'preferred-contact',
-        'message',
-        'agreeToOffersCheckbox',
-        'privacyPolicyCheckbox',
-      ];
       const formValues = {};
   
-      formInputs.forEach((input) => {
+      this.inputs.forEach((input) => {
         const inputElement = document.getElementById(input);
         if (inputElement) {
           formValues[input] = inputElement.value;
@@ -184,5 +216,22 @@ class AppointmentForm {
   
       localStorage.setItem(`autocart_${this.name}`, JSON.stringify(formValues));
     }
+
+    validateForm() {
+      let isValid = true;
+      this.inputs.forEach((id) => {
+          const inputElement = document.getElementById(id);
+          const errorElement = document.getElementById(`${id}Error`);
+  
+          if (inputElement && !inputElement.checkValidity()) {
+            isValid = false;
+            errorElement.classList.remove('hidden');
+          } else {
+             errorElement.classList.add('hidden'); 
+          }
+      });
+  
+      return isValid;
+    }
   }
   

autocart_assets/js/FinanceForm.js

@@ -1,9 +1,18 @@
 class FinanceForm {
-    constructor(vehicle, notifyParentCallback) {
+    constructor(vehicle,appointmentForm, notifyParentCallback) {
       this.notifyParentCallback = notifyParentCallback;
+      this.inputs = [
+        'loanTerm',
+        'intRate',
+        'downPayment',
+        'tradeValue',
+        'paymentFrequency',
+        'rate',
+        'customRateValue',
+      ];
       this.modalDiv = null;
       this.name = 'financeForm';
-  
+      this.appointmentForm = appointmentForm;
       this.frequencyMap = {
         12: 'Monthly',
         26: 'Bi-Weekly',
@@ -62,11 +71,36 @@ class FinanceForm {
   
       // Initialize the form
       this.initForm();
-      // this.initializeFormInputs();
+      this.initializeFormInputs();
     }
 
+    generateLoanTermOptions(vehicleAge) {
+    const defaultOptions = [
+        { year: 2, terms: [12, 24, 36, 48, 60, 72, 84, 96] },
+        { year: 5, terms: [12, 24, 36, 48, 60, 72, 84] },
+        { year: 7, terms: [12, 24, 36, 48, 60, 72] },
+        { year: 8, terms: [12, 24, 36, 48, 60] },
+        { year: 10, terms: [12, 24, 36, 48] }
+    ];
+
+    const selectedOptions = defaultOptions.find(option => vehicleAge <= option.year);
+
+    if (selectedOptions) {
+        const optionsHTML = selectedOptions.terms.map(term => `<option value="${term}">${term} Month Term</option>`).join('\n');
+        return optionsHTML;
+    } else {
+        return '';
+    }
+  }
+  
+  
     initForm() {
+      // console.log('initForm')
       this.modalDiv = document.createElement('div');
+      const currentYear = new Date().getFullYear();
+      const vehicleYear = this.vehicle.year;
+      const vehicleAge = currentYear - vehicleYear;
+      const loanTermOptions = this.generateLoanTermOptions(vehicleAge);
 
       // const modalDiv = document.createElement('div');
       this.modalDiv.innerHTML = `
@@ -90,8 +124,8 @@ class FinanceForm {
   
               
               <div class="tab-content" data-content="tab1">
-                  <h4 class="text-xl mb-2">Let’s Structure a Deal That Works For You</h4>
+                  <h4 class="text-xl mb-2 finance-view-only">Let’s Structure a Deal That Works For You</h4>
-                  <p class="mb-4">
+                  <p class="mb-4 finance-view-only">
                       We understand that purchasing a vehicle is a big decision, so we want you to be paying a price that you’re comfortable with. 
                       <strong>Let’s structure a deal that works for you below:</strong>
                   </p>
@@ -128,13 +162,7 @@ class FinanceForm {
                                   <div>
                                       <label for="loanTerm" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Loan Term</label>
                                       <select  name="loanTerm" id="loanTerm" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-600 dark:border-gray-500 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" required="">
-                                          <option value="12" selected>12 Month Term</option>
+                                      ${loanTermOptions}
-                                          <option value="24">24 Month Term</option>
-                                          <option value="36">36 Month Term</option>
-                                          <option value="48">48 Month Term</option>
-                                          <option value="60">60 Month Term</option>
-                                          <option value="72">72 Month Term</option>
-                                          <option value="84">84 Month Term</option>
                                       </select>
                                   </div>
                                   <div>
@@ -169,9 +197,9 @@ class FinanceForm {
                       </div>
   
               <div class="tab-content hidden" data-content="tab2">
-                  <h4 class="text-xl mb-2">Let’s Structure a Deal That Works For You</h4>
+                  <h4 class="text-xl mb-2 finance-view-only">Let’s Structure a Deal That Works For You</h4>
   
-                  <p class="mb-4">
+                  <p class="mb-4 finance-view-only">
                       We understand that purchasing a vehicle is a big decision, so we want you to be paying a price that you’re comfortable with.
                       <strong>Let’s structure a deal that works for you below:</strong>
                   </p>
@@ -257,7 +285,7 @@ class FinanceForm {
                               </span>
                           </p>
                       </div>
-                      <button class="w-full bg-gray-500 hover:bg-gray-800 text-white p-2 rounded-md transition duration-300" id="next-step">next step</button>
+                      <button class="w-full bg-gray-500 hover:bg-gray-800 text-white p-2 rounded-md transition duration-300" id="next-step">Next Step</button>
                   </div>
               </div>
           </div>
@@ -267,7 +295,8 @@ class FinanceForm {
           const formContainer = this.modalDiv.querySelector(
             '#appointmentFormContainer'
           );
-      formContainer.appendChild(appointmentForm.initForm());
+          
+          formContainer.appendChild(this.appointmentForm.initForm());
       
           this.initializeTabNavigation(this.modalDiv);
           this.initializeFormEventListeners(this.modalDiv);
@@ -290,13 +319,23 @@ class FinanceForm {
     // }
   
     initializeFormInputs() {
-      const storedValues =
+      const storedValues = JSON.parse(localStorage.getItem(`autocart_${this.name}`)) || {};
-        JSON.parse(localStorage.getItem(`autocart_${this.name}`)) || {};
+      const selectElements = document.querySelectorAll('select');
+  
       for (const key in storedValues) {
           const inputElement = document.getElementById(key);
           if (inputElement) {
               inputElement.value = storedValues[key];
-          inputElement.dispatchEvent(new Event('input')); // Dispatch input event
+              if (inputElement.tagName.toLowerCase() === 'select') {
+                const optionValues = Array.from(inputElement.options).map(option => option.value);
+                const selectedValue = storedValues[key];
+                
+                if (!optionValues.includes(selectedValue)) {
+                    const closestValue = optionValues.reduce((a, b) => Math.abs(b - selectedValue) < Math.abs(a - selectedValue) ? b : a);
+                    inputElement.value = closestValue;
+                }
+            }
+            inputElement.dispatchEvent(new Event('input')); 
           }
       }
       this.updateView();
@@ -306,8 +345,7 @@ class FinanceForm {
       var vehiclePrice = this.vehicle.advertise_price;
       this.loanTerm = document.getElementById('loanTerm').value;
       this.paymentFrequency = document.getElementById('paymentFrequency').value;
-      this.intRate =
+      this.intRate = document.getElementById('rate').value == 'default-rate'
-        document.getElementById('rate').value == 'default-rate'
           ? 7.99
           : document.getElementById('customRateValue').value;
       this.downPayment = document.getElementById('downPayment').value;
@@ -347,11 +385,14 @@ class FinanceForm {
   
     updateView() {
       ['default-rate', 'custom-rate'].forEach((el) => {
-        document.getElementById(el).classList.add('hidden');
+        document.getElementById(el)?.classList?.add('hidden');
       });
+      if(document.getElementById('rate')){
         document
         .getElementById(document.getElementById('rate').value)
         .classList.remove('hidden');
+      }
+     
   
       if (document.querySelectorAll('.loanTermSpan').length) {
         document.querySelectorAll('.loanTermSpan').forEach((el) => {
@@ -448,17 +489,9 @@ class FinanceForm {
     }
   
     initializeFormEventListeners(modalDiv) {
-      const formInputs = [
-        'loanTerm',
-        'intRate',
-        'downPayment',
-        'tradeValue',
-        'paymentFrequency',
-        'rate',
-        'customRateValue',
-      ];
      
-      formInputs.forEach((id) => {
+  
+      this.inputs.forEach((id) => {
         const inputElement = modalDiv.querySelector(`#${id}`);
         if (inputElement) {
           inputElement.addEventListener('input', () => {
@@ -470,18 +503,10 @@ class FinanceForm {
     }
   
     saveFormValues() {
-      const formInputs = [
+    
-        'loanTerm',
-        'intRate',
-        'downPayment',
-        'tradeValue',
-        'paymentFrequency',
-        'rate',
-        'customRateValue',
-      ];
       const formValues = {};
   
-      formInputs.forEach((input) => {
+      this.inputs.forEach((input) => {
         const inputElement = document.getElementById(input);
         if (inputElement) {
           formValues[input] = inputElement.value;

autocart_assets/js/Modal.js

@@ -93,6 +93,6 @@ class Modal {
     }
   }
   document.addEventListener('DOMContentLoaded', function () {
-    console.log('modal is here');
+    
   });
   

autocart_assets/templates/search-form.php

@@ -78,7 +78,7 @@ $carMakes = [
         <div>
             <label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_model">Model</label>
             <select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_model" name="vehicle_search_model">
-                <option value="" disabled="" selected="">Select Model</option>
+                <option value="" disabled="" selected="">All Models</option>
                 <!-- <option value="Camry">Camry</option>
                 <option value="Accord">Accord</option>
                 <option value="F-150">F-150</option>
@@ -101,7 +101,7 @@ $carMakes = [
         <div>
             <label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_body_type">Body Type</label>
             <select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_body_type" name="vehicle_search_body_type">
-                <option value="" disabled="" selected="">Select Body Type</option>
+                <option value="" disabled="" selected="">All Body Types</option>
                 <!-- <option value="Sedan">Sedan</option>
                 <option value="SUV">SUV</option>
                 <option value="Truck">Truck</option>
@@ -113,7 +113,7 @@ $carMakes = [
         <div>
             <label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_transmission">Transmission</label>
             <select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_transmission" name="vehicle_search_transmission">
-                <option value="" disabled="" selected="">Select Transmission</option>
+                <option value="" disabled="" selected="">All Transmissions</option>
                 <!-- <option value="Automatic">Automatic</option>
                 <option value="Manual">Manual</option>
                 <option value="CVT">CVT</option> -->
@@ -123,7 +123,7 @@ $carMakes = [
         <div>
             <label class="block mb-2 text-sm font-medium text-gray-700" for="vehicle_search_trim">Trim</label>
             <select class="w-full px-3 py-2 border rounded-md text-gray-700 focus:outline-none focus:border-red-500" id="vehicle_search_trim" name="vehicle_search_trim">
-                <option value="" disabled="" selected="">Select Trim</option>
+                <option value="" disabled="" selected="">All Trims</option>
                 <!-- <option value="LE">LE</option>
                 <option value="EX">EX</option>
                 <option value="XLT">XLT</option>

autocart_assets/templates/single-appointment.php

@@ -0,0 +1,79 @@
+<?php
+/*
+Template Name: Appointment Page
+*/
+
+get_header();
+
+// The Loop
+if (have_posts()) {
+    while (have_posts()) {
+        the_post();
+
+        $post_meta = get_post_meta(get_the_ID(), '', true);
+       
+        ?>
+        <main id="content-container" class="overflow-scroll no-scrollbar">
+            <div class="max-w-7xl mx-auto">
+                <h2><?php the_title(); ?></h2>
+                <div><?php the_content(); ?></div>
+                <div id="appointment-body"></div>
+            </div>
+        </main>
+
+        <script>
+            document.addEventListener('DOMContentLoaded', function() {
+                let rawVehicleDetails = <?php echo json_encode($post_meta); ?>;
+                let postDetails = {};
+
+                for (let key in rawVehicleDetails) {
+                    if (rawVehicleDetails.hasOwnProperty(key)) {
+                        if (key === 'vehicle' && rawVehicleDetails[key][0]) {
+                            postDetails[key] = JSON.parse(rawVehicleDetails[key][0]);
+                        } else {
+                            postDetails[key] = rawVehicleDetails[key][0] || null;
+                        }
+                    }
+                }
+                const appointmentForm = new AppointmentForm(postDetails.vehicle);
+                if(appointmentForm){
+                    const financeForm = new FinanceForm(postDetails.vehicle, appointmentForm, ()=>{});
+                    const appointmentBody = document.querySelector('#appointment-body');
+                    let userForm = financeForm.initForm();
+                    
+                    const elementsToRemove = userForm.querySelectorAll('.finance-view-only');
+                    elementsToRemove.forEach(element => {
+                        element.remove();
+                    });
+
+                   
+
+                  
+                    appointmentBody.appendChild(userForm);
+                    
+                    const allInputs = [...appointmentForm.inputs, ...financeForm.inputs ]
+                    allInputs.forEach(input=>{
+                        const inputElement = userForm.querySelector(`#${input}`);
+                        if (inputElement) {
+                            inputElement.value = postDetails[input] || 0;
+                            inputElement.dispatchEvent(new Event('input'));
+                            inputElement.disabled = true; 
+
+                        }
+                    })
+               
+                    financeForm.updateView();
+
+                }
+
+
+
+            });
+        </script>
+        <?php
+    }
+} else {
+    echo 'Appointment not found.';
+}
+
+get_footer();

autocart_assets/templates/single-vehicle.php

@@ -106,9 +106,16 @@ if ($vehicle_id) {
 
             if (!is_wp_error($similar_vehicles_response) && wp_remote_retrieve_response_code($similar_vehicles_response) === 200) {
                 $similar_vehicles = json_decode(wp_remote_retrieve_body($similar_vehicles_response), true);
+                if (is_array($similar_vehicles)) {
                     $filtered_vehicles = array_filter($similar_vehicles, function ($vehicle) use ($vehicle_details) {
                         return $vehicle['id_vehicle'] !== $vehicle_details['id_vehicle'];
                     });
+                } else {
+                    $filtered_vehicles = array_filter([], function ($vehicle) use ($vehicle_details) {
+                        return $vehicle['id_vehicle'] !== $vehicle_details['id_vehicle'];
+                    });
+                }
+                
 
                 // echo '<pre>';
                 // print_r($filtered_vehicles);
@@ -480,9 +487,29 @@ $image_description = !empty($vehicle_images[0]['description']) ? $vehicle_images
 
 <?php
 get_footer();
+
+
+
+// Extracting necessary details
+$importantDetails = array(
+    'title' => $vehicle_details['year'] . ' ' . $vehicle_details['make'] . ' ' . $vehicle_details['model'] . ' ' . $vehicle_details['trim'] . ' - ' . $vehicle_details['exterior_color'] . ' ' . $vehicle_details['interior_color'],
+    'id_vehicle' => $vehicle_details['id_vehicle'],
+    'advertise_price'=> $vehicle_details['advertise_price']
+);
+
+// Encoding important details as JSON
+$importantDetailsJSON = json_encode($importantDetails);
 ?>
 
 <script>
+// Assigning important details JSON to a JavaScript variable
+const appointmentVehicle = <?php echo $importantDetailsJSON; ?>;
+
+// Creating a new object to merge with appointment form data
+const mergedDetails = {
+    image_title: <?php echo json_encode($vehicle_images[0]['url']); ?>,
+    ...appointmentVehicle
+};
     // modal
     const handleFinanceChanges = (financeForm) => {
         if (document.querySelectorAll('.paymentSpan').length) {
@@ -515,8 +542,8 @@ get_footer();
     };
 
     const vehicleDetails = <?php echo json_encode($vehicle_details); ?>;
-    const appointmentForm = new AppointmentForm();
+    const appointmentForm = new AppointmentForm(mergedDetails);
-    const financeForm = new FinanceForm(vehicleDetails, handleFinanceChanges);
+    const financeForm = new FinanceForm(vehicleDetails, appointmentForm, handleFinanceChanges);
     const modal = new Modal(<?php echo $vehicle_id ?>);
     document.body.appendChild(modal.initModal());
 
@@ -586,7 +613,6 @@ get_footer();
         var queryString = window.location.search;
         var urlParams = new URLSearchParams(queryString);
         var filters = JSON.parse(decodeURIComponent(urlParams.get('filters')));
-        console.log(filters);
         setFeatureImage(0);
         const accordionHeaders = document.querySelectorAll('[data-accordion-target]');
         accordionHeaders.forEach(header => {

single.php

@@ -12,9 +12,10 @@
 <?php get_header(); ?>
 
 <!-- Single Post Template -->
-<section class="flex h-full items-center justify-center">
+<section>
-  <i class="text-7xl bi-sticky"></i>
+  <div class="max-w-7xl mx-auto px-4">
-  <h1 class="text-2xl p-4 underline ">Single Post Template</h1>
+    <?php the_content() ?>
+  </div>
 </section>
 
 <!-- Get Footer -->

src/scss/base/_base.scss

@@ -124,3 +124,15 @@ select,
 textarea {
   background-color: var(--gray-100) !important;
 }
+
+button:disabled {
+  background-color: var(--gray-200);
+  color: black;
+  cursor: not-allowed;
+}
+
+button:disabled:hover {
+  background-color: var(--gray-500);
+  color: white;
+  cursor: not-allowed;
+}

src/scss/vendors/_wordpress.scss

@@ -116,7 +116,7 @@ body.login {
   text-decoration: underline;
 }
 
-.menu-item:hover {
+#menu-main-menu .menu-item:hover {
     background-color: var(--primary-500);
     color: #fff;
 }
@@ -131,6 +131,10 @@ body.login {
   font-size: 12px; /* Adjust the size as needed */
 }
 
+.menu-item-has-children:hover > a:after {
+  color: #fff; /* Change the color as needed */
+}
+
 /* Hide sub-menu items by default */
 .sub-menu {
   width: max-content;

src/scss/vendors/tailwind/_tailwind.scss

@@ -1580,6 +1580,10 @@ select {
   border-width: 8px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -1588,10 +1592,6 @@ select {
   border-top-width: 4px;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
-}
-
 .border-gray-300 {
   --tw-border-opacity: 1;
   border-color: rgb(209 213 219 / var(--tw-border-opacity));