rbs@u2-js

INSERT INTO `cp_filejs` (`id`,`app`,`path`,`modul`,`file_name`,`content`) VALUES ('643','4','u8/manager','profile','js/profile.js----','import store from \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"./store.js\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\r\nimport app, {\r\n showToast\r\n} from \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"./app.js\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\r\nimport {\r\n addVehicleToGarage,\r\n deleteVehicleFromGarage,\r\n getGargeById,\r\n updateVehicleInGarage\r\n} from \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"./api/garage.js\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\r\nimport {\r\n getSessionUser\r\n} from \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"./api/auth.js\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\r\nimport {\r\n sendRNMessage\r\n} from \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"./api/consts.js\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\r\nvar $ = Dom7\r\n\r\nvar myPostsStore = store.getters.myPosts\r\nvar myWastesStore = store.getters.myWastes\r\n\r\nvar garageStore = store.getters.myGarage\r\nvar myTagsStore = store.getters.myTags\r\nvar pathStore = store.getters.getPathData\r\nvar userStore = store.getters.user\r\nvar refreshed = false;\r\n\r\nvar isFetchingPosts = false\r\nvar totalPostPages = 1\r\nvar currentPostPage = 1\r\n\r\nvar isFetchingWastes = false\r\nvar totalWastePages = 1\r\nvar currentWastePage = 1\r\n\r\n\r\nvar totalFPostPages = 1\r\nvar currentFPostPage = 1\r\n\r\n// Garage posts\r\nvar totalGaragePostPages = 1\r\nvar currentGaragePostPage = 1\r\n\r\nvar totalGarageWastePages = 1\r\nvar currentGarageWastePage = 1\r\n\r\n\r\n// Garage tags\r\nvar totalGarageTagPages = 1\r\nvar currentGarageTagPage = 1\r\n\r\nexport function displayProfile(user, container = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {\r\n if (!user) {\r\n console.error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'User object not provided\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n return;\r\n }\r\n\r\n // Select the container element\r\n const containerElem = document.querySelector(`.page[data-name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"${container}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]`);\r\n if (!containerElem) {\r\n console.error(`Container element with data-name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"${container}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\" not found.`);\r\n return;\r\n }\r\n\r\n // Profile Head\r\n const usernameElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-head .profile-username\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n const nameElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-head .profile-name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n if (usernameElem) usernameElem.textContent = `@${user.username}`;\r\n if (nameElem) nameElem.textContent = `${user.first_name} ${user.last_name}`;\r\n\r\n // Profile Image\r\n const profileImageElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-head .profile-image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n if (profileImageElem) {\r\n profileImageElem.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${user.profile_image || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'assets/img/profile-placeholder.jpg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`;\r\n }\r\n\r\n // Cover Image\r\n if (user.cover_image) {\r\n const profileBackgroundElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-background\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n if (profileBackgroundElem) {\r\n profileBackgroundElem.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${user.cover_image}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`;\r\n }\r\n }\r\n\r\n // Profile Links\r\n const profileLinks = user.profile_links || {};\r\n\r\n const setLinkHref = (selector, url) => {\r\n const linkElem = containerElem.querySelector(selector);\r\n if (linkElem) {\r\n linkElem.setAttribute(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'href\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', url);\r\n linkElem.onclick = (e) => {\r\n e.preventDefault();\r\n window.open(url, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'_blank\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n }\r\n\r\n // Enable the link\r\n linkElem.style.opacity = 1;\r\n }\r\n };\r\n\r\n if (profileLinks.instagram) {\r\n setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#instagram\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.instagram.com/${profileLinks.instagram}`);\r\n } else {\r\n // set opacity to 0.5\r\n const instagramElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#instagram\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n if (instagramElem) {\r\n instagramElem.style.opacity = 0.2;\r\n // disable the link\r\n instagramElem.onclick = (e) => e.preventDefault();\r\n }\r\n }\r\n\r\n if (profileLinks.facebook) {\r\n setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#facebook\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.facebook.com/${profileLinks.facebook}`);\r\n } else {\r\n // set opacity to 0.5\r\n const facebookElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#facebook\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n if (facebookElem) {\r\n facebookElem.style.opacity = 0.2;\r\n // disable the link\r\n facebookElem.onclick = (e) => e.preventDefault();\r\n }\r\n }\r\n\r\n if (profileLinks.tiktok) {\r\n setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#tiktok\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.tiktok.com/@${profileLinks.tiktok}`);\r\n } else {\r\n // set opacity to 0.5\r\n const tiktokElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#tiktok\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n if (tiktokElem) {\r\n tiktokElem.style.opacity = 0.2;\r\n // disable the link\r\n tiktokElem.onclick = (e) => e.preventDefault();\r\n }\r\n }\r\n\r\n if (profileLinks.youtube) {\r\n setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#youtube\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.youtube.com/${profileLinks.youtube}`);\r\n } else {\r\n // set opacity to 0.5\r\n const youtubeElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#youtube\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n if (youtubeElem) {\r\n youtubeElem.style.opacity = 0.2;\r\n // disable the link\r\n youtubeElem.onclick = (e) => e.preventDefault();\r\n }\r\n }\r\n\r\n // Display External Links\r\n const externalLinks = profileLinks.external_links || []; // Assuming this is an array\r\n const linksList = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-external-links ul\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n if (linksList) {\r\n linksList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'; // Clear any existing links\r\n\r\n if (externalLinks.length > 0) {\r\n externalLinks.forEach(linkObj => {\r\n const listItem = document.createElement(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'li\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n const link = document.createElement(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'a\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n link.href = linkObj.link.url;\r\n\r\n link.target = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'_blank\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\';\r\n link.textContent = linkObj.link.label;\r\n listItem.appendChild(link);\r\n linksList.appendChild(listItem);\r\n });\r\n } else {\r\n // Optionally handle the case where there are no external links\r\n const noLinksItem = document.createElement(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'li\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n noLinksItem.textContent = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'No external links available\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\';\r\n linksList.appendChild(noLinksItem);\r\n }\r\n }\r\n}\r\n\r\n$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-external-links ul li a\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {\r\n e.preventDefault()\r\n const url = new URL(e.target.href)\r\n window.open(url, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'_blank\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n})\r\n\r\nexport function displayGarage(garage) {\r\n if (!garage) return\r\n\r\n const garageContainer = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') // Make sure you have a container with this ID\r\n garageContainer.innerHTML = createGarageContent(garage)\r\n}\r\n\r\nexport function createGarageContent(garages, currentList, pastList) {\r\n // Elements for current and past vehicles\r\n const currentVehiclesList = document.querySelector(currentList)\r\n const pastVehiclesList = document.querySelector(pastList)\r\n\r\n if (!currentVehiclesList || !pastVehiclesList) {\r\n console.log(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Invalid elements provided for current and past vehicles\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n return\r\n }\r\n\r\n currentVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the list before adding new vehicles\r\n pastVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the list before adding new vehicles\r\n\r\n if (garages.error) {\r\n currentVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

No current vehicles

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n pastVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

No past vehicles

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n return\r\n }\r\n\r\n // Function to generate vehicle HTML\r\n function generateVehicleHTML(vehicle) {\r\n return `\r\n

\r\n \r\n

\r\n

\r\n ${vehicle.make} ${vehicle.model}\r\n

\r\n

\r\n \r\n

\r\n `\r\n }\r\n\r\n // Sort vehicles into current and past vehicles\r\n garages.forEach(vehicle => {\r\n if (vehicle.owned_until === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\" || vehicle.owned_until.toLowerCase() === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"present\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\") {\r\n currentVehiclesList.innerHTML += generateVehicleHTML(vehicle)\r\n } else {\r\n pastVehiclesList.innerHTML += generateVehicleHTML(vehicle)\r\n }\r\n })\r\n\r\n if (currentVehiclesList.innerHTML === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {\r\n currentVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

No current vehicles

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n }\r\n\r\n if (pastVehiclesList.innerHTML === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {\r\n pastVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

No past vehicles

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n }\r\n}\r\n\r\nfunction generatePostGridItem(post) {\r\n if (!post.media || post.media.length === 0) return \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n\r\n const media = post.media[0] // Get the first media item\r\n const isVideo = media.media_type === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"video\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\" || media.media_url.includes(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.mp4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n if (isVideo) {\r\n return `\r\n \r\n

\r\n

\r\n `\r\n } else {\r\n return `\r\n \r\n

\r\n `\r\n }\r\n}\r\n\r\n// Calculate the number of posts and decide if we need to add empty items\r\nexport function fillGridWithPosts(posts, profileGridID, reset = false) {\r\n // Select the container where the posts will be displayed\r\n const profileGrid = document.getElementById(profileGridID)\r\n\r\n if (reset) {\r\n profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the grid before adding new posts\r\n }\r\n\r\n posts.forEach(post => {\r\n profileGrid.innerHTML += generatePostGridItem(post)\r\n })\r\n}\r\n\r\nuserStore.onUpdated((user) => {\r\n displayProfile(user)\r\n})\r\n\r\ngarageStore.onUpdated((garage) => {\r\n // clear path data\r\n store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'clearPathData\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n createGarageContent(garage, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.current-vehicles-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.past-vehicles-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n})\r\n\r\nmyPostsStore.onUpdated((data) => {\r\n if (data && data.new_data) {\r\n const posts = data.new_data\r\n totalPostPages = data.total_pages\r\n\r\n if ((data.page === data.total_pages) || (data.total_pages == 0)) {\r\n // hide preloader\r\n $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.posts-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()\r\n }\r\n\r\n if (data.data.length === 0) {\r\n const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

No posts

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n return;\r\n }\r\n\r\n // Call the function to fill the grid\r\n fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.cleared || false)\r\n }\r\n})\r\n\r\nmyTagsStore.onUpdated((data) => {\r\n if (data && data.new_data) {\r\n const posts = data.new_data\r\n totalFPostPages = data.total_pages\r\n\r\n if ((data.page === data.total_pages) || (data.total_pages == 0)) {\r\n // hide preloader\r\n $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()\r\n }\r\n\r\n if (data.data.length === 0) {\r\n const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-tags\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

No tagged posts

No posts yet

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n return;\r\n }\r\n\r\n\r\n // Call the function to fill the grid\r\n fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-posts-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n }\r\n})\r\n\r\nstore.getters.getGarageViewTags.onUpdated((data) => {\r\n if (data && data.data) {\r\n const posts = data.data\r\n totalGarageTagPages = data.total_pages\r\n\r\n // if there is only one page of posts or no posts\r\n if ((data.page == data.total_pages) || (data.total_pages == 0)) {\r\n // hide preloader\r\n $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.garage-tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()\r\n }\r\n\r\n if (data.data.length === 0) {\r\n const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

No tagged posts yet

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n return;\r\n }\r\n\r\n // Call the function to fill the grid\r\n //fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n }\r\n})\r\n\r\n// Function to update the HTML with the data\r\nasync function updateProfilePage(data) {\r\n const user = await getSessionUser()\r\n\r\n // Update the cover photo\r\n const coverPhotoElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.vehicle-profile-background\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n if (coverPhotoElement) {\r\n coverPhotoElement.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${data.cover_photo}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`\r\n }\r\n\r\n // Update the profile image\r\n const profileImageElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.vehicle-profile-image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n if (profileImageElement) {\r\n profileImageElement.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${data.owner.profile_image || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'assets/img/profile-placeholder.jpg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`\r\n\r\n let profile_link = `/profile-view/${data.owner_id}`\r\n\r\n if (user.id == data.owner_id) {\r\n profile_link = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/profile/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n // add class view-profile\r\n profileImageElement.classList.add(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'view-profile\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n }\r\n\r\n profileImageElement.setAttribute(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'href\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', profile_link)\r\n }\r\n // Update the vehicle make and model\r\n const vehicleTitleElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-garage-intro h1\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n if (vehicleTitleElement) {\r\n vehicleTitleElement.textContent = `${data.make} ${data.model}`\r\n }\r\n\r\n\r\n const profileLinks = $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-links-edit.garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n if (profileLinks) {\r\n const editLink = `Edit Vehicle`\r\n const user = await getSessionUser()\r\n\r\n if (data.owner_id == user.id) {\r\n profileLinks.prepend(editLink)\r\n }\r\n\r\n // $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-add-post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').attr(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'data-garage-id\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.id)\r\n\r\n $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-add-post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {\r\n return;\r\n const garageId = $(this).attr(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'data-garage-id\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n if (!garageId) {\r\n app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n return\r\n }\r\n\r\n const user = await getSessionUser()\r\n if (user) {\r\n sendRNMessage({\r\n type: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"createPost\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\",\r\n user_id: user.id,\r\n page: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-garage-post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n association_id: garageId,\r\n association_type: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n })\r\n }\r\n })\r\n }\r\n\r\n // Update the ownership information\r\n const ownershipInfoElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-owned-information\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n if (ownershipInfoElement) {\r\n const ownedUntilText = data.owned_until ? ` - ${data.owned_until}` : \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' - Present\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n ownershipInfoElement.textContent = `Owned from ${data.owned_since}${ownedUntilText}`\r\n }\r\n\r\n // Update the vehicle description\r\n const vehicleDescriptionElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-vehicle-description\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n if (vehicleDescriptionElement) {\r\n vehicleDescriptionElement.textContent = data.short_description\r\n }\r\n}\r\n\r\n$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"profile-garage-edit\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {\r\n const garage = garageStore.value\r\n createGarageContent(garage, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#garage-edit-current-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#garage-edit-past-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n})\r\n\r\n$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"profile-garage-vehicle-edit\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {\r\n var garageId = e.detail.route.params.id\r\n var view = app.views.current\r\n\r\n if (!garageId) {\r\n app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n view.router.back(view.history[0], {\r\n force: true\r\n })\r\n return\r\n }\r\n\r\n let data = null\r\n try {\r\n if (pathStore && pathStore.value[`/garage/${garageId}`]) {\r\n data = pathStore.value[`/garage/${garageId}`]\r\n }\r\n } catch (error) {\r\n console.error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Error fetching cached data:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', error)\r\n }\r\n\r\n if (!data) {\r\n $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').show()\r\n const garage = await getGargeById(garageId)\r\n\r\n if (!garage) {\r\n app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n view.router.back(view.history[0], {\r\n force: true\r\n })\r\n return\r\n }\r\n\r\n data = garage\r\n // Assuming `path` is a dynamic path like \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/garage/2\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setPathData\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {\r\n path: `/garage/${garageId}`,\r\n data: data,\r\n })\r\n }\r\n\r\n $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()\r\n\r\n // check if user is the owner of the garage\r\n const user = await getSessionUser()\r\n if (data.owner_id != user.id) {\r\n app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'You are not authorized to edit this vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n view.router.back(view.history[0], {\r\n force: true\r\n })\r\n return\r\n }\r\n\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"garage_id\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = garageId\r\n\r\n // Populate form fields with garage data\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_make\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.make\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_model\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.model\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_variant\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.variant\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_reg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.registration\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_colour\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.colour\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_owned_from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.owned_since\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.owned_until || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_tagging\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').checked = data.allow_tagging === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"1\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'textarea[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_description\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.short_description || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n\r\n // If a cover photo exists, use it as the background image of the upload label\r\n if (data.cover_photo) {\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${data.cover_photo}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundSize = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'cover\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n }\r\n\r\n // Set vehicle ownership and toggle the \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"Owned To\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\" date picker\r\n const ownershipSelect = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n const toggleOwnedToDatePicker = () => {\r\n const ownedToInput = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n const ownedToBContainer = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-to-block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n if (ownershipSelect.value === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"current\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\") { // Current Vehicle\r\n ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'none\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n ownedToInput.value = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n } else {\r\n ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n }\r\n }\r\n\r\n // Initially set the visibility based on the garage data\r\n const isPrimary = data.primary_car === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"1\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\" ? true : false;\r\n const hasOwndedTo = data.owned_until && data.owned_until.length > 1 ? true : false;\r\n ownershipSelect.value = hasOwndedTo ? \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"past\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\" : \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"current\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"\r\n toggleOwnedToDatePicker()\r\n\r\n // Attach event listener to toggle visibility when ownership type changes\r\n ownershipSelect.addEventListener(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', toggleOwnedToDatePicker)\r\n\r\n // input vehicle_image\r\n $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input#fileuploadInput\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {\r\n const file = e.target.files[0]\r\n const reader = new FileReader()\r\n\r\n reader.onload = function (e) {\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${e.target.result}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundSize = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'cover\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n }\r\n\r\n reader.readAsDataURL(file)\r\n })\r\n\r\n // #delete-vehicle on click\r\n $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#delete-vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {\r\n app.dialog.confirm(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Are you sure you want to delete this vehicle?\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function () {\r\n try {\r\n app.preloader.show()\r\n\r\n const response = await deleteVehicleFromGarage(garageId)\r\n\r\n if (!response || !response.success) {\r\n throw new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to delete vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n }\r\n\r\n app.preloader.hide()\r\n\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Vehicle deleted successfully\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n view.router.back(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/profile-garage-edit/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {\r\n force: true\r\n })\r\n\r\n } catch (error) {\r\n console.log(error);\r\n app.preloader.hide()\r\n\r\n app.notification.create({\r\n titleRightText: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'now\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n subtitle: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Oops, something went wrong\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n text: error.message || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to delete vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n }).open()\r\n }\r\n })\r\n })\r\n})\r\n\r\nfunction parseDate(dateString) {\r\n const parts = dateString.split(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n return new Date(parts[2], parts[1] - 1, parts[0]); // YYYY, MM, DD\r\n}\r\n\r\n// submit-vehicle-form\r\n$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#submit-vehicle-form\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {\r\n var view = app.views.current\r\n\r\n // form data\r\n const form = $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'form#vehicleForm\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n // values\r\n const garageId = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"garage_id\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n\r\n const make = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_make\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const model = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_model\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const variant = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_variant\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const reg = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_reg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const colour = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_colour\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const description = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'textarea[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_description\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n\r\n const owned_from = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_owned_from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const owned_to = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n\r\n const primary_car = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const allow_tagging = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_tagging\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').is(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\':checked\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') ? 1 : 0\r\n\r\n const cover_image = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').prop(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'files\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')[0]\r\n\r\n if (!make || make === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"0\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\") {\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please select a vehicle make\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n return\r\n }\r\n\r\n if (!model) {\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter a vehicle model\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n return\r\n }\r\n\r\n // if (!owned_from) {\r\n // showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n // return\r\n // }\r\n\r\n // // if primary_car is past, owned_to is required\r\n // if (primary_car === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"past\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\" && !owned_to) {\r\n // showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n // return\r\n // }\r\n\r\n if (owned_to && owned_from) {\r\n const ownedFromDate = parseDate(owned_from.trim());\r\n const ownedToDate = parseDate(owned_to.trim());\r\n\r\n if (isNaN(ownedFromDate) || isNaN(ownedToDate)) {\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'One or both of the dates are invalid.\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n return;\r\n }\r\n\r\n if (ownedToDate < ownedFromDate) {\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Owned to date cannot be less than owned from date\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n return;\r\n }\r\n }\r\n\r\n let base64 = null\r\n\r\n if (cover_image) {\r\n // Wrap the FileReader in a Promise to wait for it to complete\r\n base64 = await new Promise((resolve, reject) => {\r\n const reader = new FileReader()\r\n reader.readAsDataURL(cover_image)\r\n\r\n reader.onload = () => resolve(reader.result)\r\n reader.onerror = () => reject(new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to read image as base64\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'))\r\n })\r\n }\r\n\r\n try {\r\n app.preloader.show()\r\n\r\n const response = await updateVehicleInGarage({\r\n make,\r\n model,\r\n variant,\r\n registration: reg,\r\n colour,\r\n ownedFrom: owned_from,\r\n ownedTo: owned_to,\r\n primary_car,\r\n allow_tagging,\r\n cover_photo: base64,\r\n vehicle_period: primary_car,\r\n description\r\n },\r\n garageId\r\n )\r\n\r\n if (!response || !response.success) {\r\n throw new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to update vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n }\r\n\r\n app.preloader.hide()\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Vehicle updated successfully\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n // refresh garage\r\n await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n view.router.back(view.history[0], {\r\n force: true\r\n })\r\n } catch (error) {\r\n app.preloader.hide()\r\n app.notification.create({\r\n titleRightText: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'now\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n subtitle: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Oops, something went wrong\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n text: error.message || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to update vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n }).open()\r\n }\r\n})\r\n\r\n$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"profile-garage-vehicle-add\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {\r\n const toggleOwnedToDatePicker = (e) => {\r\n const ownedToInput = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n const ownedToBContainer = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-to-block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n const value = e.target.value\r\n\r\n if (value === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"current\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\") { // Current Vehicle\r\n ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'none\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n ownedToInput.value = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n } else {\r\n ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n }\r\n }\r\n\r\n $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', toggleOwnedToDatePicker)\r\n\r\n // input vehicle_image\r\n $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {\r\n const file = e.target.files[0]\r\n const reader = new FileReader()\r\n\r\n reader.onload = function (e) {\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${e.target.result}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`\r\n document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundSize = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'cover\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n }\r\n\r\n reader.readAsDataURL(file)\r\n })\r\n})\r\n\r\n$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#submit-add-vehicle-form\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {\r\n var view = app.views.current\r\n\r\n const form = $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'form#addVehicleForm\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n // values\r\n const make = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_make\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const model = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_model\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const variant = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_variant\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const reg = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_reg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const colour = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_colour\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const description = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'textarea[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_description\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n\r\n const owned_from = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_owned_from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const owned_to = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n\r\n const primary_car = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()\r\n const allow_tagging = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_tagging\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').is(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\':checked\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') ? 1 : 0\r\n\r\n const cover_image = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"vehicle_image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').prop(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'files\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')[0]\r\n\r\n if (!make || make === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"0\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\") {\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please select a vehicle make\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n return\r\n }\r\n\r\n if (!model) {\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter a vehicle model\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n return\r\n }\r\n\r\n // if (!reg) {\r\n // app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter a vehicle registration number\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n // return\r\n // }\r\n\r\n // if (!owned_from) {\r\n // app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n // return\r\n // }\r\n\r\n if (owned_to && owned_from) {\r\n const ownedFromDate = parseDate(owned_from.trim());\r\n const ownedToDate = parseDate(owned_to.trim());\r\n\r\n if (isNaN(ownedFromDate) || isNaN(ownedToDate)) {\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'One or both of the dates are invalid.\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n return;\r\n }\r\n\r\n if (ownedToDate < ownedFromDate) {\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Owned to date cannot be less than owned from date\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n return;\r\n }\r\n }\r\n\r\n // if primary_car is past, owned_to is required\r\n if (primary_car === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"past\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\" && !owned_to) {\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\r\n\r\n return\r\n }\r\n\r\n if (!cover_image) {\r\n showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please upload a cover image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n return\r\n }\r\n\r\n let base64 = null\r\n\r\n if (cover_image) {\r\n // Wrap the FileReader in a Promise to wait for it to complete\r\n base64 = await new Promise((resolve, reject) => {\r\n const reader = new FileReader()\r\n reader.readAsDataURL(cover_image)\r\n\r\n reader.onload = () => resolve(reader.result)\r\n reader.onerror = () => reject(new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to read image as base64\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'))\r\n })\r\n }\r\n\r\n try {\r\n app.preloader.show()\r\n\r\n const response = await addVehicleToGarage({\r\n make,\r\n model,\r\n variant,\r\n registration: reg,\r\n colour,\r\n ownedFrom: owned_from,\r\n ownedTo: owned_to,\r\n primary_car,\r\n allow_tagging,\r\n cover_photo: base64,\r\n vehicle_period: primary_car,\r\n description\r\n })\r\n\r\n if (!response || !response.success) {\r\n throw new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to update vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n }\r\n\r\n app.preloader.hide()\r\n\r\n store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Vehicle added successfully\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n // redirect to garage\r\n view.router.back(`/profile-garage-vehicle-view/${response.id}`, {\r\n force: true\r\n })\r\n } catch (error) {\r\n app.preloader.hide()\r\n\r\n app.notification.create({\r\n titleRightText: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'now\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n subtitle: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Oops, something went wrong\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n text: error.message || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to add vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',\r\n }).open()\r\n }\r\n})\r\n\r\n// waste start\r\nfunction generateWasteGridItem(waste) {\r\n if (!waste.media || waste.media.length === 0) return \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n\r\n const media = waste.media[0] // Get the first media item\r\n const isVideo = media.media_type === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"video\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\" || media.media_url.includes(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.mp4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n\r\n if (isVideo) {\r\n return `\r\n \r\n

\r\n

\r\n `\r\n } else {\r\n return `\r\n \r\n

\r\n `\r\n }\r\n}\r\n\r\n// Calculate the number of posts and decide if we need to add empty items\r\nexport function fillGridWithWastes(wastes, profileGridID, reset = false) {\r\n // Select the container where the posts will be displayed\r\n const profileGrid = document.getElementById(profileGridID)\r\n\r\n if (reset) {\r\n profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the grid before adding new posts\r\n }\r\n\r\n wastes.forEach(waste => {\r\n profileGrid.innerHTML += generateWasteGridItem(waste)\r\n })\r\n}\r\n\r\nmyWastesStore.onUpdated((data) => {\r\n if (data && data.new_data) {\r\n const wastes = data.new_data\r\n console.log(wastes)\r\n totalWastePages = data.total_pages\r\n\r\n if ((data.page === data.total_pages) || (data.total_pages == 0)) {\r\n // hide preloader\r\n $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()\r\n }\r\n\r\n if (data.data.length === 0) {\r\n const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-wastes\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

No wastes

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n return;\r\n }\r\n\r\n // Call the function to fill the grid\r\n fillGridWithWastes(wastes, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-wastes\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.cleared || false)\r\n }\r\n})\r\n\r\nstore.getters.getGarageViewWastes.onUpdated((data) => {\r\n if (data && data.data) {\r\n const wastes = data.data\r\n\r\n totalGarageWastePages = data.total_pages\r\n\r\n // if there is only one page of posts or no posts\r\n if ((data.page == data.total_pages) || (data.total_pages == 0)) {\r\n // hide preloader\r\n $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.garage-wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()\r\n }\r\n\r\n if (data.data.length === 0) {\r\n const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

No wastes yet

\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\r\n return;\r\n }\r\n\r\n\r\n // Call the function to fill the grid\r\n fillGridWithWastes(wastes, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')\r\n }\r\n})\r\n// waste end--');

Save File Also

Copy This

modul

file_name function_name content 54369

import store from \\\\\\\\\\\\\\\"./store.js\\\\\\\\\\\\\\\"
import app, {
  showToast
} from \\\\\\\\\\\\\\\"./app.js\\\\\\\\\\\\\\\"
import {
  addVehicleToGarage,
  deleteVehicleFromGarage,
  getGargeById,
  updateVehicleInGarage
} from \\\\\\\\\\\\\\\"./api/garage.js\\\\\\\\\\\\\\\"
import {
  getSessionUser
} from \\\\\\\\\\\\\\\"./api/auth.js\\\\\\\\\\\\\\\"
import {
  sendRNMessage
} from \\\\\\\\\\\\\\\"./api/consts.js\\\\\\\\\\\\\\\"
var $ = Dom7

var myPostsStore = store.getters.myPosts
var myWastesStore = store.getters.myWastes

var garageStore = store.getters.myGarage
var myTagsStore = store.getters.myTags
var pathStore = store.getters.getPathData
var userStore = store.getters.user
var refreshed = false;

var isFetchingPosts = false
var totalPostPages = 1
var currentPostPage = 1

var isFetchingWastes = false
var totalWastePages = 1
var currentWastePage = 1

var totalFPostPages = 1
var currentFPostPage = 1

// Garage posts
var totalGaragePostPages = 1
var currentGaragePostPage = 1

var totalGarageWastePages = 1
var currentGarageWastePage = 1

// Garage tags
var totalGarageTagPages = 1
var currentGarageTagPage = 1

export function displayProfile(user, container = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {
  if (!user) {
    console.error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'User object not provided\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    return;
  }

// Select the container element
  const containerElem = document.querySelector(`.page[data-name=\\\\\\\\\\\\\\\"${container}\\\\\\\\\\\\\\\"]`);
  if (!containerElem) {
    console.error(`Container element with data-name=\\\\\\\\\\\\\\\"${container}\\\\\\\\\\\\\\\" not found.`);
    return;
  }

// Profile Head
  const usernameElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-head .profile-username\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
  const nameElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-head .profile-name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
  if (usernameElem) usernameElem.textContent = `@${user.username}`;
  if (nameElem) nameElem.textContent = `${user.first_name} ${user.last_name}`;

// Profile Image
  const profileImageElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-head .profile-image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
  if (profileImageElem) {
    profileImageElem.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${user.profile_image || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'assets/img/profile-placeholder.jpg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`;
  }

// Cover Image
  if (user.cover_image) {
    const profileBackgroundElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-background\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    if (profileBackgroundElem) {
      profileBackgroundElem.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${user.cover_image}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`;
    }
  }

// Profile Links
  const profileLinks = user.profile_links || {};

const setLinkHref = (selector, url) => {
    const linkElem = containerElem.querySelector(selector);
    if (linkElem) {
      linkElem.setAttribute(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'href\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', url);
      linkElem.onclick = (e) => {
        e.preventDefault();
        window.open(url, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'_blank\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      }

// Enable the link
      linkElem.style.opacity = 1;
    }
  };

if (profileLinks.instagram) {
    setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#instagram\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.instagram.com/${profileLinks.instagram}`);
  } else {
    // set opacity to 0.5
    const instagramElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#instagram\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    if (instagramElem) {
      instagramElem.style.opacity = 0.2;
      // disable the link
      instagramElem.onclick = (e) => e.preventDefault();
    }
  }

if (profileLinks.facebook) {
    setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#facebook\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.facebook.com/${profileLinks.facebook}`);
  } else {
    // set opacity to 0.5
    const facebookElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#facebook\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    if (facebookElem) {
      facebookElem.style.opacity = 0.2;
      // disable the link
      facebookElem.onclick = (e) => e.preventDefault();
    }
  }

if (profileLinks.tiktok) {
    setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#tiktok\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.tiktok.com/@${profileLinks.tiktok}`);
  } else {
    // set opacity to 0.5
    const tiktokElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#tiktok\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    if (tiktokElem) {
      tiktokElem.style.opacity = 0.2;
      // disable the link
      tiktokElem.onclick = (e) => e.preventDefault();
    }
  }

if (profileLinks.youtube) {
    setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#youtube\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.youtube.com/${profileLinks.youtube}`);
  } else {
    // set opacity to 0.5
    const youtubeElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#youtube\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    if (youtubeElem) {
      youtubeElem.style.opacity = 0.2;
      // disable the link
      youtubeElem.onclick = (e) => e.preventDefault();
    }
  }

// Display External Links
  const externalLinks = profileLinks.external_links || []; // Assuming this is an array
  const linksList = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-external-links ul\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
  if (linksList) {
    linksList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'; // Clear any existing links

if (externalLinks.length > 0) {
      externalLinks.forEach(linkObj => {
        const listItem = document.createElement(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'li\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
        const link = document.createElement(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'a\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
        link.href = linkObj.link.url;

link.target = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'_blank\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\';
        link.textContent = linkObj.link.label;
        listItem.appendChild(link);
        linksList.appendChild(listItem);
      });
    } else {
      // Optionally handle the case where there are no external links
      const noLinksItem = document.createElement(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'li\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      noLinksItem.textContent = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'No external links available\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\';
      linksList.appendChild(noLinksItem);
    }
  }
}

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-external-links ul li a\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
  e.preventDefault()
  const url = new URL(e.target.href)
  window.open(url, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'_blank\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
})

export function displayGarage(garage) {
  if (!garage) return

const garageContainer = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') // Make sure you have a container with this ID
  garageContainer.innerHTML = createGarageContent(garage)
}

export function createGarageContent(garages, currentList, pastList) {
  // Elements for current and past vehicles
  const currentVehiclesList = document.querySelector(currentList)
  const pastVehiclesList = document.querySelector(pastList)

if (!currentVehiclesList || !pastVehiclesList) {
    console.log(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Invalid elements provided for current and past vehicles\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    return
  }

currentVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the list before adding new vehicles
  pastVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the list before adding new vehicles

if (garages.error) {
    currentVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<li>No current vehicles</li>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    pastVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<li>No past vehicles</li>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    return
  }

// Function to generate vehicle HTML
  function generateVehicleHTML(vehicle) {
    return `
    <li>
        <a href=\\\\\\\\\\\\\\\"/profile-garage-vehicle-view/${vehicle.id}\\\\\\\\\\\\\\\" class=\\\\\\\\\\\\\\\"item\\\\\\\\\\\\\\\">
            <div class=\\\\\\\\\\\\\\\"imageWrapper\\\\\\\\\\\\\\\">
                <div class=\\\\\\\\\\\\\\\"image-square image-rounded\\\\\\\\\\\\\\\"
                    style=\\\\\\\\\\\\\\\"background-image:url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${vehicle.cover_photo || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'assets/img/placeholder1.jpg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\\\\\\\\\\\\\\\">
                    </div>
            </div>
            <div class=\\\\\\\\\\\\\\\"in\\\\\\\\\\\\\\\">
                <div>
                    ${vehicle.make} ${vehicle.model}
                </div>
            </div>
        </a>
    </li>
    `
  }

// Sort vehicles into current and past vehicles
  garages.forEach(vehicle => {
    if (vehicle.owned_until === \\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\" || vehicle.owned_until.toLowerCase() === \\\\\\\\\\\\\\\"present\\\\\\\\\\\\\\\") {
      currentVehiclesList.innerHTML += generateVehicleHTML(vehicle)
    } else {
      pastVehiclesList.innerHTML += generateVehicleHTML(vehicle)
    }
  })

if (currentVehiclesList.innerHTML === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {
    currentVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<li>No current vehicles</li>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  }

if (pastVehiclesList.innerHTML === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {
    pastVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<li>No past vehicles</li>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  }
}

function generatePostGridItem(post) {
  if (!post.media || post.media.length === 0) return \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

const media = post.media[0] // Get the first media item
  const isVideo = media.media_type === \\\\\\\\\\\\\\\"video\\\\\\\\\\\\\\\" || media.media_url.includes(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.mp4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

if (isVideo) {
    return `
      <a href=\\\\\\\\\\\\\\\"/post-view/${post.id}\\\\\\\\\\\\\\\" class=\\\\\\\\\\\\\\\"grid-item\\\\\\\\\\\\\\\" data-src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\">
        <div class=\\\\\\\\\\\\\\\"video-square\\\\\\\\\\\\\\\">
        </div>
      </a>`
  } else {
    return `
      <a href=\\\\\\\\\\\\\\\"/post-view/${post.id}\\\\\\\\\\\\\\\" class=\\\\\\\\\\\\\\\"grid-item image-square\\\\\\\\\\\\\\\" data-src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\">
        <img 
          src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\"
          loading=\\\\\\\\\\\\\\\"lazy\\\\\\\\\\\\\\\"
          role=\\\\\\\\\\\\\\\"presentation\\\\\\\\\\\\\\\"
          sizes=\\\\\\\\\\\\\\\"(max-width: 320px) 280px, 320px\\\\\\\\\\\\\\\"
          decoding=\\\\\\\\\\\\\\\"async\\\\\\\\\\\\\\\"
          fetchPriority=\\\\\\\\\\\\\\\"high\\\\\\\\\\\\\\\"
        />
      </a>`
  }
}

// Calculate the number of posts and decide if we need to add empty items
export function fillGridWithPosts(posts, profileGridID, reset = false) {
  // Select the container where the posts will be displayed
  const profileGrid = document.getElementById(profileGridID)

if (reset) {
    profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the grid before adding new posts
  }

posts.forEach(post => {
    profileGrid.innerHTML += generatePostGridItem(post)
  })
}

userStore.onUpdated((user) => {
  displayProfile(user)
})

garageStore.onUpdated((garage) => {
  // clear path data
  store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'clearPathData\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  createGarageContent(garage, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.current-vehicles-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.past-vehicles-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
})

myPostsStore.onUpdated((data) => {
  if (data && data.new_data) {
    const posts = data.new_data
    totalPostPages = data.total_pages

if ((data.page === data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.posts-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p></p><p>No posts</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }

// Call the function to fill the grid
    fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.cleared || false)
  }
})

myTagsStore.onUpdated((data) => {
  if (data && data.new_data) {
    const posts = data.new_data
    totalFPostPages = data.total_pages

if ((data.page === data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-tags\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p></p><p>No tagged posts</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }

// Call the function to fill the grid
    //fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-tags\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.cleared || false)
  }
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-vehicle-add\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
  app.calendar.create({
    inputEl: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    openIn: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'customModal\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    header: true,
    footer: true,
    dateFormat: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'dd/mm/yyyy\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    maxDate: new Date()
  })

app.calendar.create({
    inputEl: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    openIn: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'customModal\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    header: true,
    footer: true,
    dateFormat: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'dd/mm/yyyy\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    // minDate: new Date()
  })
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-vehicle-edit\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
  app.calendar.create({
    inputEl: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    openIn: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'customModal\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    header: true,
    footer: true,
    dateFormat: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'dd/mm/yyyy\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    maxDate: new Date()
  })

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'infinite\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-landing-page.infinite-scroll-content\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  refreshed = false

if (isFetchingPosts) return

const activeTab = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-tabs .tab-link-active\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  const activeTabId = activeTab.id

if (!activeTabId || activeTabId === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'my-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') return

const getterFunc = activeTabId === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'my-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' ? \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyPosts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' : \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyWastes\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

isFetchingPosts = true

if (activeTabId === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'my-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {
    currentPostPage++

if (currentPostPage <= totalPostPages) {
      await store.dispatch(getterFunc, {
        page: currentPostPage,
        clear: false
      })
      isFetchingPosts = false
    }
  } else {
    currentFPostPage++

if (currentFPostPage <= totalFPostPages) {
      await store.dispatch(getterFunc, {
        page: currentPostPage,
        clear: false
      })
      isFetchingPosts = false
    }
  }
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'ptr:refresh\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-landing-page.ptr-content.my-profile\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  refreshed = true

try {
    store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'clearPathData\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'updateUserDetails\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyPosts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {
      page: 1,
      clear: true
    })
    await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyWastes\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {
      page: 1,
      clear: true
    })
  } catch (error) {
    console.log(error);
  }
  app.ptr.get(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-landing-page.ptr-content.my-profile\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').done()
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:beforein\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
  app.popup.create({
    el: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.links-popup\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    swipeToClose: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'to-bottom\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  })
})

// ------- Garage Views -------
$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-vehicle-view\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  var garageId = e.detail.route.params.id

if (!garageId) {
    app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    app.views.main.router.back()
    return
  }

if (garageId == -1) {
    return;
  }

let cachedData = null
  try {
    if (pathStore && pathStore.value[`/garage/${garageId}`]) {
      cachedData = pathStore.value[`/garage/${garageId}`]
    }
  } catch (error) {
    console.error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Error fetching cached data:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', error)
  }

if (cachedData) {
    $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen.garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setGarageViewPosts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', garageId, 1)
    store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setGarageViewTags\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', garageId, 1)
    updateProfilePage(cachedData)
    return
  }

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen.garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').show()

const garage = await getGargeById(garageId)
  if (!garage) {
    $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()

app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    app.views.main.router.back()
    return
  }

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen.garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()

// Assuming `path` is a dynamic path like \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/garage/2\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setPathData\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {
    path: `/garage/${garageId}`,
    data: garage,
  })

// Call the function to update the page
  updateProfilePage(garage)
  store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setGarageViewPosts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', garageId, 1)
  store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setGarageViewTags\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', garageId, 1)
})

store.getters.getGarageViewPosts.onUpdated((data) => {
  if (data && data.data) {
    const posts = data.data

totalGaragePostPages = data.total_pages

// if there is only one page of posts or no posts
    if ((data.page == data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.garage-posts-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-posts-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p>No posts yet</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }

// Call the function to fill the grid
    fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-posts-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  }
})

store.getters.getGarageViewTags.onUpdated((data) => {
  if (data && data.data) {
    const posts = data.data
    totalGarageTagPages = data.total_pages

// if there is only one page of posts or no posts
    if ((data.page == data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.garage-tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p>No tagged posts yet</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }

// Call the function to fill the grid
    //fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  }
})

// Function to update the HTML with the data
async function updateProfilePage(data) {
  const user = await getSessionUser()

// Update the cover photo
  const coverPhotoElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.vehicle-profile-background\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (coverPhotoElement) {
    coverPhotoElement.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${data.cover_photo}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`
  }

// Update the profile image
  const profileImageElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.vehicle-profile-image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (profileImageElement) {
    profileImageElement.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${data.owner.profile_image || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'assets/img/profile-placeholder.jpg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`

let profile_link = `/profile-view/${data.owner_id}`

if (user.id == data.owner_id) {
      profile_link = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/profile/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      // add class view-profile
      profileImageElement.classList.add(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'view-profile\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    }

profileImageElement.setAttribute(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'href\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', profile_link)
  }
  // Update the vehicle make and model
  const vehicleTitleElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-garage-intro h1\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (vehicleTitleElement) {
    vehicleTitleElement.textContent = `${data.make} ${data.model}`
  }

const profileLinks = $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-links-edit.garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (profileLinks) {
    const editLink = `<a class=\\\\\\\\\\\\\\\"profile-link\\\\\\\\\\\\\\\" href=\\\\\\\\\\\\\\\"/profile-garage-vehicle-edit/${data.id}\\\\\\\\\\\\\\\">Edit Vehicle</a>`
    const user = await getSessionUser()

if (data.owner_id == user.id) {
      profileLinks.prepend(editLink)
    }

// $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-add-post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').attr(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'data-garage-id\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.id)

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-add-post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
      return;
      const garageId = $(this).attr(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'data-garage-id\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

if (!garageId) {
        app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
        return
      }

const user = await getSessionUser()
      if (user) {
        sendRNMessage({
          type: \\\\\\\\\\\\\\\"createPost\\\\\\\\\\\\\\\",
          user_id: user.id,
          page: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-garage-post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
          association_id: garageId,
          association_type: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
        })
      }
    })
  }

// Update the ownership information
  const ownershipInfoElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-owned-information\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (ownershipInfoElement) {
    const ownedUntilText = data.owned_until ? ` - ${data.owned_until}` : \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' - Present\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    ownershipInfoElement.textContent = `Owned from ${data.owned_since}${ownedUntilText}`
  }

// Update the vehicle description
  const vehicleDescriptionElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-vehicle-description\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (vehicleDescriptionElement) {
    vehicleDescriptionElement.textContent = data.short_description
  }
}

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-edit\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  const garage = garageStore.value
  createGarageContent(garage, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#garage-edit-current-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#garage-edit-past-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
})

if (!garageId) {
    app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    view.router.back(view.history[0], {
      force: true
    })
    return
  }

let data = null
  try {
    if (pathStore && pathStore.value[`/garage/${garageId}`]) {
      data = pathStore.value[`/garage/${garageId}`]
    }
  } catch (error) {
    console.error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Error fetching cached data:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', error)
  }

if (!data) {
    $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').show()
    const garage = await getGargeById(garageId)

if (!garage) {
      app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      view.router.back(view.history[0], {
        force: true
      })
      return
    }

data = garage
    // Assuming `path` is a dynamic path like \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/garage/2\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setPathData\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {
      path: `/garage/${garageId}`,
      data: data,
    })
  }

$(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()

// check if user is the owner of the garage
  const user = await getSessionUser()
  if (data.owner_id != user.id) {
    app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'You are not authorized to edit this vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    view.router.back(view.history[0], {
      force: true
    })
    return
  }

document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"garage_id\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = garageId

// Populate form fields with garage data
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_make\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.make
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_model\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.model
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_variant\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.variant
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_reg\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.registration
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_colour\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.colour
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_from\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.owned_since
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.owned_until || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_tagging\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').checked = data.allow_tagging === \\\\\\\\\\\\\\\"1\\\\\\\\\\\\\\\"
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'textarea[name=\\\\\\\\\\\\\\\"vehicle_description\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.short_description || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

// If a cover photo exists, use it as the background image of the upload label
  if (data.cover_photo) {
    document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${data.cover_photo}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`
    document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundSize = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'cover\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  }

// Set vehicle ownership and toggle the \\\\\\\\\\\\\\\"Owned To\\\\\\\\\\\\\\\" date picker
  const ownershipSelect = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

const toggleOwnedToDatePicker = () => {
    const ownedToInput = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    const ownedToBContainer = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-to-block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    if (ownershipSelect.value === \\\\\\\\\\\\\\\"current\\\\\\\\\\\\\\\") { // Current Vehicle
      ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'none\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      ownedToInput.value = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    } else {
      ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    }
  }

// Initially set the visibility based on the garage data
  const isPrimary = data.primary_car === \\\\\\\\\\\\\\\"1\\\\\\\\\\\\\\\" ? true : false;
  const hasOwndedTo = data.owned_until && data.owned_until.length > 1 ? true : false;
  ownershipSelect.value = hasOwndedTo ? \\\\\\\\\\\\\\\"past\\\\\\\\\\\\\\\" : \\\\\\\\\\\\\\\"current\\\\\\\\\\\\\\\"
  toggleOwnedToDatePicker()

// Attach event listener to toggle visibility when ownership type changes
  ownershipSelect.addEventListener(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', toggleOwnedToDatePicker)

// input vehicle_image
  $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input#fileuploadInput\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
    const file = e.target.files[0]
    const reader = new FileReader()

reader.onload = function (e) {
      document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${e.target.result}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`
      document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundSize = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'cover\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    }

reader.readAsDataURL(file)
  })

// #delete-vehicle on click
  $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#delete-vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
    app.dialog.confirm(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Are you sure you want to delete this vehicle?\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function () {
      try {
        app.preloader.show()

const response = await deleteVehicleFromGarage(garageId)

if (!response || !response.success) {
          throw new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to delete vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
        }

app.preloader.hide()

showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Vehicle deleted successfully\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
        view.router.back(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/profile-garage-edit/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {
          force: true
        })

} catch (error) {
        console.log(error);
        app.preloader.hide()

app.notification.create({
          titleRightText: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'now\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
          subtitle: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Oops, something went wrong\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
          text: error.message || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to delete vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
        }).open()
      }
    })
  })
})

function parseDate(dateString) {
  const parts = dateString.split(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
  return new Date(parts[2], parts[1] - 1, parts[0]); // YYYY, MM, DD
}

// submit-vehicle-form
$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#submit-vehicle-form\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  var view = app.views.current

// form data
  const form = $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'form#vehicleForm\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

// values
  const garageId = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"garage_id\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()

const make = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_make\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const model = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_model\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const variant = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_variant\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const reg = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_reg\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const colour = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_colour\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const description = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'textarea[name=\\\\\\\\\\\\\\\"vehicle_description\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()

const owned_from = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_from\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const owned_to = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()

const primary_car = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const allow_tagging = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_tagging\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').is(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\':checked\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') ? 1 : 0

const cover_image = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_image\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').prop(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'files\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')[0]

if (!make || make === \\\\\\\\\\\\\\\"0\\\\\\\\\\\\\\\") {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please select a vehicle make\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    return
  }

if (!model) {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter a vehicle model\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    return
  }

// if (!owned_from) {
  //   showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  //   return
  // }

// // if primary_car is past, owned_to is required
  // if (primary_car === \\\\\\\\\\\\\\\"past\\\\\\\\\\\\\\\" && !owned_to) {
  //   showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  //   return
  // }

if (owned_to && owned_from) {
    const ownedFromDate = parseDate(owned_from.trim());
    const ownedToDate = parseDate(owned_to.trim());

if (isNaN(ownedFromDate) || isNaN(ownedToDate)) {
      showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'One or both of the dates are invalid.\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      return;
    }

if (ownedToDate < ownedFromDate) {
      showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Owned to date cannot be less than owned from date\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      return;
    }
  }

let base64 = null

if (cover_image) {
    // Wrap the FileReader in a Promise to wait for it to complete
    base64 = await new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(cover_image)

reader.onload = () => resolve(reader.result)
      reader.onerror = () => reject(new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to read image as base64\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'))
    })
  }

try {
    app.preloader.show()

const response = await updateVehicleInGarage({
        make,
        model,
        variant,
        registration: reg,
        colour,
        ownedFrom: owned_from,
        ownedTo: owned_to,
        primary_car,
        allow_tagging,
        cover_photo: base64,
        vehicle_period: primary_car,
        description
      },
      garageId
    )

if (!response || !response.success) {
      throw new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to update vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    }

app.preloader.hide()
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Vehicle updated successfully\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

// refresh garage
    await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

view.router.back(view.history[0], {
      force: true
    })
  } catch (error) {
    app.preloader.hide()
    app.notification.create({
      titleRightText: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'now\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
      subtitle: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Oops, something went wrong\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
      text: error.message || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to update vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    }).open()
  }
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-vehicle-add\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  const toggleOwnedToDatePicker = (e) => {
    const ownedToInput = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    const ownedToBContainer = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-to-block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

const value = e.target.value

if (value === \\\\\\\\\\\\\\\"current\\\\\\\\\\\\\\\") { // Current Vehicle
      ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'none\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      ownedToInput.value = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    } else {
      ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    }
  }

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', toggleOwnedToDatePicker)

// input vehicle_image
  $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_image\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
    const file = e.target.files[0]
    const reader = new FileReader()

reader.readAsDataURL(file)
  })
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#submit-add-vehicle-form\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  var view = app.views.current

const form = $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'form#addVehicleForm\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

// values
  const make = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_make\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const model = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_model\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const variant = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_variant\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const reg = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_reg\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const colour = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_colour\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const description = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'textarea[name=\\\\\\\\\\\\\\\"vehicle_description\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()

if (!make || make === \\\\\\\\\\\\\\\"0\\\\\\\\\\\\\\\") {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please select a vehicle make\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    return
  }

if (!model) {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter a vehicle model\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    return
  }

// if (!reg) {
  //   app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter a vehicle registration number\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  //   return
  // }

// if (!owned_from) {
  //   app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  //   return
  // }

if (owned_to && owned_from) {
    const ownedFromDate = parseDate(owned_from.trim());
    const ownedToDate = parseDate(owned_to.trim());

if (isNaN(ownedFromDate) || isNaN(ownedToDate)) {
      showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'One or both of the dates are invalid.\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      return;
    }

if (ownedToDate < ownedFromDate) {
      showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Owned to date cannot be less than owned from date\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      return;
    }
  }

// if primary_car is past, owned_to is required
  if (primary_car === \\\\\\\\\\\\\\\"past\\\\\\\\\\\\\\\" && !owned_to) {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');

return
  }

if (!cover_image) {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please upload a cover image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    return
  }

let base64 = null

reader.onload = () => resolve(reader.result)
      reader.onerror = () => reject(new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to read image as base64\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'))
    })
  }

try {
    app.preloader.show()

const response = await addVehicleToGarage({
      make,
      model,
      variant,
      registration: reg,
      colour,
      ownedFrom: owned_from,
      ownedTo: owned_to,
      primary_car,
      allow_tagging,
      cover_photo: base64,
      vehicle_period: primary_car,
      description
    })

if (!response || !response.success) {
      throw new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to update vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    }

app.preloader.hide()

store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Vehicle added successfully\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

// redirect to garage
    view.router.back(`/profile-garage-vehicle-view/${response.id}`, {
      force: true
    })
  } catch (error) {
    app.preloader.hide()

app.notification.create({
      titleRightText: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'now\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
      subtitle: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Oops, something went wrong\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
      text: error.message || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to add vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    }).open()
  }
})

// waste start
function generateWasteGridItem(waste) {
  if (!waste.media || waste.media.length === 0) return \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

const media = waste.media[0] // Get the first media item
  const isVideo = media.media_type === \\\\\\\\\\\\\\\"video\\\\\\\\\\\\\\\" || media.media_url.includes(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.mp4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

if (isVideo) {
    return `
      <a href=\\\\\\\\\\\\\\\"/waste-view/${waste.id}\\\\\\\\\\\\\\\" class=\\\\\\\\\\\\\\\"grid-item\\\\\\\\\\\\\\\" data-src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\">
        <div class=\\\\\\\\\\\\\\\"video-square\\\\\\\\\\\\\\\">
        </div>
      </a>`
  } else {
    return `
      <a href=\\\\\\\\\\\\\\\"/waste-view/${waste.id}\\\\\\\\\\\\\\\" class=\\\\\\\\\\\\\\\"grid-item image-square\\\\\\\\\\\\\\\" data-src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\">
        <img 
          src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\"
          loading=\\\\\\\\\\\\\\\"lazy\\\\\\\\\\\\\\\"
          role=\\\\\\\\\\\\\\\"presentation\\\\\\\\\\\\\\\"
          sizes=\\\\\\\\\\\\\\\"(max-width: 320px) 280px, 320px\\\\\\\\\\\\\\\"
          decoding=\\\\\\\\\\\\\\\"async\\\\\\\\\\\\\\\"
          fetchPriority=\\\\\\\\\\\\\\\"high\\\\\\\\\\\\\\\"
        />
      </a>`
  }
}

// Calculate the number of posts and decide if we need to add empty items
export function fillGridWithWastes(wastes, profileGridID, reset = false) {
  // Select the container where the posts will be displayed
  const profileGrid = document.getElementById(profileGridID)

if (reset) {
    profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the grid before adding new posts
  }

wastes.forEach(waste => {
    profileGrid.innerHTML += generateWasteGridItem(waste)
  })
}

myWastesStore.onUpdated((data) => {
  if (data && data.new_data) {
    const wastes = data.new_data
    console.log(wastes)
    totalWastePages = data.total_pages

if ((data.page === data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-wastes\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p></p><p>No wastes</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }

// Call the function to fill the grid
    fillGridWithWastes(wastes, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-wastes\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.cleared || false)
  }
})

store.getters.getGarageViewWastes.onUpdated((data) => {
  if (data && data.data) {
    const wastes = data.data

totalGarageWastePages = data.total_pages

// if there is only one page of posts or no posts
    if ((data.page == data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.garage-wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p>No wastes yet</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }

// Call the function to fill the grid
    fillGridWithWastes(wastes, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  }
})
// waste end--

Warning: file_get_contents(/home/u340524018/domains/agniaga.com/public_html/sub/u8/manager/js/profile.js----): Failed to open stream: No such file or directory in /home/u340524018/domains/agniaga.com/public_html/sub/u2/cp/inc.filejs.php on line 190
file content 0

import store from \\\\\\\\\\\\\\\"./store.js\\\\\\\\\\\\\\\"
import app, {
  showToast
} from \\\\\\\\\\\\\\\"./app.js\\\\\\\\\\\\\\\"
import {
  addVehicleToGarage,
  deleteVehicleFromGarage,
  getGargeById,
  updateVehicleInGarage
} from \\\\\\\\\\\\\\\"./api/garage.js\\\\\\\\\\\\\\\"
import {
  getSessionUser
} from \\\\\\\\\\\\\\\"./api/auth.js\\\\\\\\\\\\\\\"
import {
  sendRNMessage
} from \\\\\\\\\\\\\\\"./api/consts.js\\\\\\\\\\\\\\\"
var $ = Dom7

var myPostsStore = store.getters.myPosts
var myWastesStore = store.getters.myWastes

var garageStore = store.getters.myGarage
var myTagsStore = store.getters.myTags
var pathStore = store.getters.getPathData
var userStore = store.getters.user
var refreshed = false;

var isFetchingPosts = false
var totalPostPages = 1
var currentPostPage = 1

var isFetchingWastes = false
var totalWastePages = 1
var currentWastePage = 1


var totalFPostPages = 1
var currentFPostPage = 1

// Garage posts
var totalGaragePostPages = 1
var currentGaragePostPage = 1

var totalGarageWastePages = 1
var currentGarageWastePage = 1


// Garage tags
var totalGarageTagPages = 1
var currentGarageTagPage = 1

export function displayProfile(user, container = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {
  if (!user) {
    console.error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'User object not provided\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    return;
  }

  // Select the container element
  const containerElem = document.querySelector(`.page[data-name=\\\\\\\\\\\\\\\"${container}\\\\\\\\\\\\\\\"]`);
  if (!containerElem) {
    console.error(`Container element with data-name=\\\\\\\\\\\\\\\"${container}\\\\\\\\\\\\\\\" not found.`);
    return;
  }

  // Profile Head
  const usernameElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-head .profile-username\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
  const nameElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-head .profile-name\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
  if (usernameElem) usernameElem.textContent = `@${user.username}`;
  if (nameElem) nameElem.textContent = `${user.first_name} ${user.last_name}`;

  // Profile Image
  const profileImageElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-head .profile-image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
  if (profileImageElem) {
    profileImageElem.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${user.profile_image || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'assets/img/profile-placeholder.jpg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`;
  }

  // Cover Image
  if (user.cover_image) {
    const profileBackgroundElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-background\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    if (profileBackgroundElem) {
      profileBackgroundElem.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${user.cover_image}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`;
    }
  }

  // Profile Links
  const profileLinks = user.profile_links || {};

  const setLinkHref = (selector, url) => {
    const linkElem = containerElem.querySelector(selector);
    if (linkElem) {
      linkElem.setAttribute(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'href\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', url);
      linkElem.onclick = (e) => {
        e.preventDefault();
        window.open(url, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'_blank\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      }

      // Enable the link
      linkElem.style.opacity = 1;
    }
  };

  if (profileLinks.instagram) {
    setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#instagram\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.instagram.com/${profileLinks.instagram}`);
  } else {
    // set opacity to 0.5
    const instagramElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#instagram\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    if (instagramElem) {
      instagramElem.style.opacity = 0.2;
      // disable the link
      instagramElem.onclick = (e) => e.preventDefault();
    }
  }

  if (profileLinks.facebook) {
    setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#facebook\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.facebook.com/${profileLinks.facebook}`);
  } else {
    // set opacity to 0.5
    const facebookElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#facebook\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    if (facebookElem) {
      facebookElem.style.opacity = 0.2;
      // disable the link
      facebookElem.onclick = (e) => e.preventDefault();
    }
  }

  if (profileLinks.tiktok) {
    setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#tiktok\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.tiktok.com/@${profileLinks.tiktok}`);
  } else {
    // set opacity to 0.5
    const tiktokElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#tiktok\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    if (tiktokElem) {
      tiktokElem.style.opacity = 0.2;
      // disable the link
      tiktokElem.onclick = (e) => e.preventDefault();
    }
  }

  if (profileLinks.youtube) {
    setLinkHref(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#youtube\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', `https://www.youtube.com/${profileLinks.youtube}`);
  } else {
    // set opacity to 0.5
    const youtubeElem = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#youtube\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    if (youtubeElem) {
      youtubeElem.style.opacity = 0.2;
      // disable the link
      youtubeElem.onclick = (e) => e.preventDefault();
    }
  }

  // Display External Links
  const externalLinks = profileLinks.external_links || []; // Assuming this is an array
  const linksList = containerElem.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-external-links ul\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
  if (linksList) {
    linksList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'; // Clear any existing links

    if (externalLinks.length > 0) {
      externalLinks.forEach(linkObj => {
        const listItem = document.createElement(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'li\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
        const link = document.createElement(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'a\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
        link.href = linkObj.link.url;

        link.target = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'_blank\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\';
        link.textContent = linkObj.link.label;
        listItem.appendChild(link);
        linksList.appendChild(listItem);
      });
    } else {
      // Optionally handle the case where there are no external links
      const noLinksItem = document.createElement(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'li\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      noLinksItem.textContent = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'No external links available\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\';
      linksList.appendChild(noLinksItem);
    }
  }
}

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-external-links ul li a\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
  e.preventDefault()
  const url = new URL(e.target.href)
  window.open(url, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'_blank\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
})

export function displayGarage(garage) {
  if (!garage) return

  const garageContainer = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') // Make sure you have a container with this ID
  garageContainer.innerHTML = createGarageContent(garage)
}

export function createGarageContent(garages, currentList, pastList) {
  // Elements for current and past vehicles
  const currentVehiclesList = document.querySelector(currentList)
  const pastVehiclesList = document.querySelector(pastList)

  if (!currentVehiclesList || !pastVehiclesList) {
    console.log(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Invalid elements provided for current and past vehicles\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
    return
  }

  currentVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the list before adding new vehicles
  pastVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the list before adding new vehicles

  if (garages.error) {
    currentVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<li>No current vehicles</li>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    pastVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<li>No past vehicles</li>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    return
  }

  // Function to generate vehicle HTML
  function generateVehicleHTML(vehicle) {
    return `
    <li>
        <a href=\\\\\\\\\\\\\\\"/profile-garage-vehicle-view/${vehicle.id}\\\\\\\\\\\\\\\" class=\\\\\\\\\\\\\\\"item\\\\\\\\\\\\\\\">
            <div class=\\\\\\\\\\\\\\\"imageWrapper\\\\\\\\\\\\\\\">
                <div class=\\\\\\\\\\\\\\\"image-square image-rounded\\\\\\\\\\\\\\\"
                    style=\\\\\\\\\\\\\\\"background-image:url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${vehicle.cover_photo || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'assets/img/placeholder1.jpg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');\\\\\\\\\\\\\\\">
                    </div>
            </div>
            <div class=\\\\\\\\\\\\\\\"in\\\\\\\\\\\\\\\">
                <div>
                    ${vehicle.make} ${vehicle.model}
                </div>
            </div>
        </a>
    </li>
    `
  }

  // Sort vehicles into current and past vehicles
  garages.forEach(vehicle => {
    if (vehicle.owned_until === \\\\\\\\\\\\\\\"\\\\\\\\\\\\\\\" || vehicle.owned_until.toLowerCase() === \\\\\\\\\\\\\\\"present\\\\\\\\\\\\\\\") {
      currentVehiclesList.innerHTML += generateVehicleHTML(vehicle)
    } else {
      pastVehiclesList.innerHTML += generateVehicleHTML(vehicle)
    }
  })

  if (currentVehiclesList.innerHTML === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {
    currentVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<li>No current vehicles</li>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  }

  if (pastVehiclesList.innerHTML === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {
    pastVehiclesList.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<li>No past vehicles</li>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  }
}

function generatePostGridItem(post) {
  if (!post.media || post.media.length === 0) return \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

  const media = post.media[0] // Get the first media item
  const isVideo = media.media_type === \\\\\\\\\\\\\\\"video\\\\\\\\\\\\\\\" || media.media_url.includes(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.mp4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

  if (isVideo) {
    return `
      <a href=\\\\\\\\\\\\\\\"/post-view/${post.id}\\\\\\\\\\\\\\\" class=\\\\\\\\\\\\\\\"grid-item\\\\\\\\\\\\\\\" data-src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\">
        <div class=\\\\\\\\\\\\\\\"video-square\\\\\\\\\\\\\\\">
        </div>
      </a>`
  } else {
    return `
      <a href=\\\\\\\\\\\\\\\"/post-view/${post.id}\\\\\\\\\\\\\\\" class=\\\\\\\\\\\\\\\"grid-item image-square\\\\\\\\\\\\\\\" data-src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\">
        <img 
          src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\"
          loading=\\\\\\\\\\\\\\\"lazy\\\\\\\\\\\\\\\"
          role=\\\\\\\\\\\\\\\"presentation\\\\\\\\\\\\\\\"
          sizes=\\\\\\\\\\\\\\\"(max-width: 320px) 280px, 320px\\\\\\\\\\\\\\\"
          decoding=\\\\\\\\\\\\\\\"async\\\\\\\\\\\\\\\"
          fetchPriority=\\\\\\\\\\\\\\\"high\\\\\\\\\\\\\\\"
        />
      </a>`
  }
}

// Calculate the number of posts and decide if we need to add empty items
export function fillGridWithPosts(posts, profileGridID, reset = false) {
  // Select the container where the posts will be displayed
  const profileGrid = document.getElementById(profileGridID)

  if (reset) {
    profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the grid before adding new posts
  }

  posts.forEach(post => {
    profileGrid.innerHTML += generatePostGridItem(post)
  })
}

userStore.onUpdated((user) => {
  displayProfile(user)
})

garageStore.onUpdated((garage) => {
  // clear path data
  store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'clearPathData\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  createGarageContent(garage, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.current-vehicles-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.past-vehicles-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
})

myPostsStore.onUpdated((data) => {
  if (data && data.new_data) {
    const posts = data.new_data
    totalPostPages = data.total_pages

    if ((data.page === data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.posts-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

    if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p></p><p>No posts</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }

    // Call the function to fill the grid
    fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.cleared || false)
  }
})

myTagsStore.onUpdated((data) => {
  if (data && data.new_data) {
    const posts = data.new_data
    totalFPostPages = data.total_pages

    if ((data.page === data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

    if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-tags\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p></p><p>No tagged posts</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }

    // Call the function to fill the grid
    //fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-tags\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.cleared || false)
  }
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-vehicle-add\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
  app.calendar.create({
    inputEl: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    openIn: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'customModal\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    header: true,
    footer: true,
    dateFormat: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'dd/mm/yyyy\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    maxDate: new Date()
  })

  app.calendar.create({
    inputEl: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    openIn: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'customModal\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    header: true,
    footer: true,
    dateFormat: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'dd/mm/yyyy\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    // minDate: new Date()
  })
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-vehicle-edit\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
  app.calendar.create({
    inputEl: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    openIn: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'customModal\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    header: true,
    footer: true,
    dateFormat: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'dd/mm/yyyy\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    maxDate: new Date()
  })

  app.calendar.create({
    inputEl: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    openIn: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'customModal\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    header: true,
    footer: true,
    dateFormat: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'dd/mm/yyyy\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    // minDate: new Date()
  })
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'infinite\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-landing-page.infinite-scroll-content\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  refreshed = false

  if (isFetchingPosts) return

  const activeTab = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-tabs .tab-link-active\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  const activeTabId = activeTab.id

  if (!activeTabId || activeTabId === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'my-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') return

  const getterFunc = activeTabId === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'my-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' ? \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyPosts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' : \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyWastes\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

  isFetchingPosts = true

  if (activeTabId === \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'my-posts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') {
    currentPostPage++

    if (currentPostPage <= totalPostPages) {
      await store.dispatch(getterFunc, {
        page: currentPostPage,
        clear: false
      })
      isFetchingPosts = false
    }
  } else {
    currentFPostPage++

    if (currentFPostPage <= totalFPostPages) {
      await store.dispatch(getterFunc, {
        page: currentPostPage,
        clear: false
      })
      isFetchingPosts = false
    }
  }
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'ptr:refresh\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-landing-page.ptr-content.my-profile\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  refreshed = true

  try {
    store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'clearPathData\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

    await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'updateUserDetails\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyPosts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {
      page: 1,
      clear: true
    })
    await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyWastes\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {
      page: 1,
      clear: true
    })
  } catch (error) {
    console.log(error);
  }
  app.ptr.get(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-landing-page.ptr-content.my-profile\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').done()
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:beforein\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
  app.popup.create({
    el: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.links-popup\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    swipeToClose: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'to-bottom\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  })
})

// ------- Garage Views -------
$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-vehicle-view\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  var garageId = e.detail.route.params.id

  if (!garageId) {
    app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    app.views.main.router.back()
    return
  }

  if (garageId == -1) {
    return;
  }

  let cachedData = null
  try {
    if (pathStore && pathStore.value[`/garage/${garageId}`]) {
      cachedData = pathStore.value[`/garage/${garageId}`]
    }
  } catch (error) {
    console.error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Error fetching cached data:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', error)
  }

  if (cachedData) {
    $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen.garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setGarageViewPosts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', garageId, 1)
    store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setGarageViewTags\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', garageId, 1)
    updateProfilePage(cachedData)
    return
  }

  $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen.garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').show()

  const garage = await getGargeById(garageId)
  if (!garage) {
    $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()

    app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    app.views.main.router.back()
    return
  }

  $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen.garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()

  // Assuming `path` is a dynamic path like \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/garage/2\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setPathData\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {
    path: `/garage/${garageId}`,
    data: garage,
  })

  // Call the function to update the page
  updateProfilePage(garage)
  store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setGarageViewPosts\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', garageId, 1)
  store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setGarageViewTags\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', garageId, 1)
})

store.getters.getGarageViewPosts.onUpdated((data) => {
  if (data && data.data) {
    const posts = data.data

    totalGaragePostPages = data.total_pages

    // if there is only one page of posts or no posts
    if ((data.page == data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.garage-posts-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

    if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-posts-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p>No posts yet</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }


    // Call the function to fill the grid
    fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-posts-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  }
})

store.getters.getGarageViewTags.onUpdated((data) => {
  if (data && data.data) {
    const posts = data.data
    totalGarageTagPages = data.total_pages

    // if there is only one page of posts or no posts
    if ((data.page == data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.garage-tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

    if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p>No tagged posts yet</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }

    // Call the function to fill the grid
    //fillGridWithPosts(posts, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-tags-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  }
})

// Function to update the HTML with the data
async function updateProfilePage(data) {
  const user = await getSessionUser()

  // Update the cover photo
  const coverPhotoElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.vehicle-profile-background\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (coverPhotoElement) {
    coverPhotoElement.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${data.cover_photo}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`
  }

  // Update the profile image
  const profileImageElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.vehicle-profile-image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (profileImageElement) {
    profileImageElement.style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${data.owner.profile_image || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'assets/img/profile-placeholder.jpg\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`

    let profile_link = `/profile-view/${data.owner_id}`

    if (user.id == data.owner_id) {
      profile_link = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/profile/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      // add class view-profile
      profileImageElement.classList.add(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'view-profile\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    }

    profileImageElement.setAttribute(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'href\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', profile_link)
  }
  // Update the vehicle make and model
  const vehicleTitleElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-garage-intro h1\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (vehicleTitleElement) {
    vehicleTitleElement.textContent = `${data.make} ${data.model}`
  }


  const profileLinks = $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.profile-links-edit.garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (profileLinks) {
    const editLink = `<a class=\\\\\\\\\\\\\\\"profile-link\\\\\\\\\\\\\\\" href=\\\\\\\\\\\\\\\"/profile-garage-vehicle-edit/${data.id}\\\\\\\\\\\\\\\">Edit Vehicle</a>`
    const user = await getSessionUser()

    if (data.owner_id == user.id) {
      profileLinks.prepend(editLink)
    }

    // $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-add-post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').attr(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'data-garage-id\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.id)

    $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-add-post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
      return;
      const garageId = $(this).attr(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'data-garage-id\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

      if (!garageId) {
        app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
        return
      }

      const user = await getSessionUser()
      if (user) {
        sendRNMessage({
          type: \\\\\\\\\\\\\\\"createPost\\\\\\\\\\\\\\\",
          user_id: user.id,
          page: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-garage-post\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
          association_id: garageId,
          association_type: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
        })
      }
    })
  }

  // Update the ownership information
  const ownershipInfoElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-owned-information\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (ownershipInfoElement) {
    const ownedUntilText = data.owned_until ? ` - ${data.owned_until}` : \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' - Present\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    ownershipInfoElement.textContent = `Owned from ${data.owned_since}${ownedUntilText}`
  }

  // Update the vehicle description
  const vehicleDescriptionElement = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.garage-vehicle-description\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  if (vehicleDescriptionElement) {
    vehicleDescriptionElement.textContent = data.short_description
  }
}

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-edit\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  const garage = garageStore.value
  createGarageContent(garage, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#garage-edit-current-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#garage-edit-past-list\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-vehicle-edit\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  var garageId = e.detail.route.params.id
  var view = app.views.current

  if (!garageId) {
    app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    view.router.back(view.history[0], {
      force: true
    })
    return
  }

  let data = null
  try {
    if (pathStore && pathStore.value[`/garage/${garageId}`]) {
      data = pathStore.value[`/garage/${garageId}`]
    }
  } catch (error) {
    console.error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Error fetching cached data:\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', error)
  }

  if (!data) {
    $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').show()
    const garage = await getGargeById(garageId)

    if (!garage) {
      app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Garage not found\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      view.router.back(view.history[0], {
        force: true
      })
      return
    }

    data = garage
    // Assuming `path` is a dynamic path like \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/garage/2\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'setPathData\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {
      path: `/garage/${garageId}`,
      data: data,
    })
  }

  $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.loading-fullscreen\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()

  // check if user is the owner of the garage
  const user = await getSessionUser()
  if (data.owner_id != user.id) {
    app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'You are not authorized to edit this vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    view.router.back(view.history[0], {
      force: true
    })
    return
  }

  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"garage_id\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = garageId

  // Populate form fields with garage data
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_make\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.make
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_model\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.model
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_variant\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.variant
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_reg\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.registration
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_colour\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.colour
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_from\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.owned_since
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.owned_until || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_tagging\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').checked = data.allow_tagging === \\\\\\\\\\\\\\\"1\\\\\\\\\\\\\\\"
  document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'textarea[name=\\\\\\\\\\\\\\\"vehicle_description\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').value = data.short_description || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

  // If a cover photo exists, use it as the background image of the upload label
  if (data.cover_photo) {
    document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${data.cover_photo}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`
    document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundSize = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'cover\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
  }

  // Set vehicle ownership and toggle the \\\\\\\\\\\\\\\"Owned To\\\\\\\\\\\\\\\" date picker
  const ownershipSelect = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

  const toggleOwnedToDatePicker = () => {
    const ownedToInput = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    const ownedToBContainer = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-to-block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    if (ownershipSelect.value === \\\\\\\\\\\\\\\"current\\\\\\\\\\\\\\\") { // Current Vehicle
      ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'none\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      ownedToInput.value = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    } else {
      ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    }
  }

  // Initially set the visibility based on the garage data
  const isPrimary = data.primary_car === \\\\\\\\\\\\\\\"1\\\\\\\\\\\\\\\" ? true : false;
  const hasOwndedTo = data.owned_until && data.owned_until.length > 1 ? true : false;
  ownershipSelect.value = hasOwndedTo ? \\\\\\\\\\\\\\\"past\\\\\\\\\\\\\\\" : \\\\\\\\\\\\\\\"current\\\\\\\\\\\\\\\"
  toggleOwnedToDatePicker()

  // Attach event listener to toggle visibility when ownership type changes
  ownershipSelect.addEventListener(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', toggleOwnedToDatePicker)

  // input vehicle_image
  $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input#fileuploadInput\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
    const file = e.target.files[0]
    const reader = new FileReader()

    reader.onload = function (e) {
      document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${e.target.result}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`
      document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundSize = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'cover\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    }

    reader.readAsDataURL(file)
  })

  // #delete-vehicle on click
  $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#delete-vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
    app.dialog.confirm(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Are you sure you want to delete this vehicle?\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function () {
      try {
        app.preloader.show()

        const response = await deleteVehicleFromGarage(garageId)

        if (!response || !response.success) {
          throw new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to delete vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
        }

        app.preloader.hide()

        showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Vehicle deleted successfully\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

        await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
        view.router.back(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/profile-garage-edit/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', {
          force: true
        })

      } catch (error) {
        console.log(error);
        app.preloader.hide()

        app.notification.create({
          titleRightText: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'now\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
          subtitle: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Oops, something went wrong\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
          text: error.message || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to delete vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
        }).open()
      }
    })
  })
})

function parseDate(dateString) {
  const parts = dateString.split(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'/\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
  return new Date(parts[2], parts[1] - 1, parts[0]); // YYYY, MM, DD
}

// submit-vehicle-form
$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#submit-vehicle-form\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  var view = app.views.current

  // form data
  const form = $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'form#vehicleForm\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

  // values
  const garageId = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"garage_id\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()

  const make = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_make\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const model = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_model\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const variant = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_variant\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const reg = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_reg\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const colour = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_colour\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const description = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'textarea[name=\\\\\\\\\\\\\\\"vehicle_description\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()

  const owned_from = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_from\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const owned_to = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()

  const primary_car = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const allow_tagging = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_tagging\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').is(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\':checked\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') ? 1 : 0

  const cover_image = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_image\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').prop(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'files\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')[0]

  if (!make || make === \\\\\\\\\\\\\\\"0\\\\\\\\\\\\\\\") {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please select a vehicle make\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    return
  }

  if (!model) {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter a vehicle model\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    return
  }

  // if (!owned_from) {
  //   showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  //   return
  // }

  // // if primary_car is past, owned_to is required
  // if (primary_car === \\\\\\\\\\\\\\\"past\\\\\\\\\\\\\\\" && !owned_to) {
  //   showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  //   return
  // }

  if (owned_to && owned_from) {
    const ownedFromDate = parseDate(owned_from.trim());
    const ownedToDate = parseDate(owned_to.trim());

    if (isNaN(ownedFromDate) || isNaN(ownedToDate)) {
      showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'One or both of the dates are invalid.\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      return;
    }

    if (ownedToDate < ownedFromDate) {
      showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Owned to date cannot be less than owned from date\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      return;
    }
  }

  let base64 = null

  if (cover_image) {
    // Wrap the FileReader in a Promise to wait for it to complete
    base64 = await new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(cover_image)

      reader.onload = () => resolve(reader.result)
      reader.onerror = () => reject(new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to read image as base64\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'))
    })
  }

  try {
    app.preloader.show()

    const response = await updateVehicleInGarage({
        make,
        model,
        variant,
        registration: reg,
        colour,
        ownedFrom: owned_from,
        ownedTo: owned_to,
        primary_car,
        allow_tagging,
        cover_photo: base64,
        vehicle_period: primary_car,
        description
      },
      garageId
    )

    if (!response || !response.success) {
      throw new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to update vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    }

    app.preloader.hide()
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Vehicle updated successfully\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

    // refresh garage
    await store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

    view.router.back(view.history[0], {
      force: true
    })
  } catch (error) {
    app.preloader.hide()
    app.notification.create({
      titleRightText: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'now\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
      subtitle: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Oops, something went wrong\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
      text: error.message || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to update vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    }).open()
  }
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'page:init\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.page[data-name=\\\\\\\\\\\\\\\"profile-garage-vehicle-add\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  const toggleOwnedToDatePicker = (e) => {
    const ownedToInput = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    const ownedToBContainer = document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#owned-to-block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

    const value = e.target.value

    if (value === \\\\\\\\\\\\\\\"current\\\\\\\\\\\\\\\") { // Current Vehicle
      ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'none\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      ownedToInput.value = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    } else {
      ownedToBContainer.style.display = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'block\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    }
  }

  $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', toggleOwnedToDatePicker)

  // input vehicle_image
  $(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'change\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_image\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', function (e) {
    const file = e.target.files[0]
    const reader = new FileReader()

    reader.onload = function (e) {
      document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundImage = `url(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'${e.target.result}\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')`
      document.querySelector(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.custom-file-upload label\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').style.backgroundSize = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'cover\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
    }

    reader.readAsDataURL(file)
  })
})

$(document).on(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'click\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'#submit-add-vehicle-form\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', async function (e) {
  var view = app.views.current

  const form = $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'form#addVehicleForm\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

  // values
  const make = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_make\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const model = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_model\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const variant = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_variant\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const reg = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_reg\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const colour = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_colour\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const description = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'textarea[name=\\\\\\\\\\\\\\\"vehicle_description\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()

  const owned_from = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_from\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const owned_to = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_owned_to\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()

  const primary_car = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'select[name=\\\\\\\\\\\\\\\"vehicle_ownership\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').val()
  const allow_tagging = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_tagging\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').is(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\':checked\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\') ? 1 : 0

  const cover_image = form.find(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'input[name=\\\\\\\\\\\\\\\"vehicle_image\\\\\\\\\\\\\\\"]\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').prop(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'files\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')[0]

  if (!make || make === \\\\\\\\\\\\\\\"0\\\\\\\\\\\\\\\") {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please select a vehicle make\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    return
  }

  if (!model) {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter a vehicle model\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    return
  }

  // if (!reg) {
  //   app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter a vehicle registration number\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  //   return
  // }

  // if (!owned_from) {
  //   app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle from\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  //   return
  // }

  if (owned_to && owned_from) {
    const ownedFromDate = parseDate(owned_from.trim());
    const ownedToDate = parseDate(owned_to.trim());

    if (isNaN(ownedFromDate) || isNaN(ownedToDate)) {
      showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'One or both of the dates are invalid.\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      return;
    }

    if (ownedToDate < ownedFromDate) {
      showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Owned to date cannot be less than owned from date\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');
      return;
    }
  }

  // if primary_car is past, owned_to is required
  if (primary_car === \\\\\\\\\\\\\\\"past\\\\\\\\\\\\\\\" && !owned_to) {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please enter the date you owned the vehicle to\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\');

    return
  }

  if (!cover_image) {
    showToast(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Please upload a cover image\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    return
  }

  let base64 = null

  if (cover_image) {
    // Wrap the FileReader in a Promise to wait for it to complete
    base64 = await new Promise((resolve, reject) => {
      const reader = new FileReader()
      reader.readAsDataURL(cover_image)

      reader.onload = () => resolve(reader.result)
      reader.onerror = () => reject(new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to read image as base64\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'))
    })
  }

  try {
    app.preloader.show()

    const response = await addVehicleToGarage({
      make,
      model,
      variant,
      registration: reg,
      colour,
      ownedFrom: owned_from,
      ownedTo: owned_to,
      primary_car,
      allow_tagging,
      cover_photo: base64,
      vehicle_period: primary_car,
      description
    })

    if (!response || !response.success) {
      throw new Error(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to update vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    }

    app.preloader.hide()

    store.dispatch(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'getMyGarage\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
    app.dialog.alert(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Vehicle added successfully\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

    // redirect to garage
    view.router.back(`/profile-garage-vehicle-view/${response.id}`, {
      force: true
    })
  } catch (error) {
    app.preloader.hide()

    app.notification.create({
      titleRightText: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'now\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
      subtitle: \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Oops, something went wrong\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
      text: error.message || \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'Failed to add vehicle\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\',
    }).open()
  }
})

// waste start
function generateWasteGridItem(waste) {
  if (!waste.media || waste.media.length === 0) return \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'

  const media = waste.media[0] // Get the first media item
  const isVideo = media.media_type === \\\\\\\\\\\\\\\"video\\\\\\\\\\\\\\\" || media.media_url.includes(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.mp4\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')

  if (isVideo) {
    return `
      <a href=\\\\\\\\\\\\\\\"/waste-view/${waste.id}\\\\\\\\\\\\\\\" class=\\\\\\\\\\\\\\\"grid-item\\\\\\\\\\\\\\\" data-src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\">
        <div class=\\\\\\\\\\\\\\\"video-square\\\\\\\\\\\\\\\">
        </div>
      </a>`
  } else {
    return `
      <a href=\\\\\\\\\\\\\\\"/waste-view/${waste.id}\\\\\\\\\\\\\\\" class=\\\\\\\\\\\\\\\"grid-item image-square\\\\\\\\\\\\\\\" data-src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\">
        <img 
          src=\\\\\\\\\\\\\\\"${media.media_url}\\\\\\\\\\\\\\\"
          loading=\\\\\\\\\\\\\\\"lazy\\\\\\\\\\\\\\\"
          role=\\\\\\\\\\\\\\\"presentation\\\\\\\\\\\\\\\"
          sizes=\\\\\\\\\\\\\\\"(max-width: 320px) 280px, 320px\\\\\\\\\\\\\\\"
          decoding=\\\\\\\\\\\\\\\"async\\\\\\\\\\\\\\\"
          fetchPriority=\\\\\\\\\\\\\\\"high\\\\\\\\\\\\\\\"
        />
      </a>`
  }
}

// Calculate the number of posts and decide if we need to add empty items
export function fillGridWithWastes(wastes, profileGridID, reset = false) {
  // Select the container where the posts will be displayed
  const profileGrid = document.getElementById(profileGridID)

  if (reset) {
    profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\' // Clear the grid before adding new posts
  }

  wastes.forEach(waste => {
    profileGrid.innerHTML += generateWasteGridItem(waste)
  })
}

myWastesStore.onUpdated((data) => {
  if (data && data.new_data) {
    const wastes = data.new_data
    console.log(wastes)
    totalWastePages = data.total_pages

    if ((data.page === data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

    if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-wastes\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p></p><p>No wastes</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }

    // Call the function to fill the grid
    fillGridWithWastes(wastes, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'profile-grid-wastes\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\', data.cleared || false)
  }
})

store.getters.getGarageViewWastes.onUpdated((data) => {
  if (data && data.data) {
    const wastes = data.data

    totalGarageWastePages = data.total_pages

    // if there is only one page of posts or no posts
    if ((data.page == data.total_pages) || (data.total_pages == 0)) {
      // hide preloader
      $(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'.infinite-scroll-preloader.garage-wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\').hide()
    }

    if (data.data.length === 0) {
      const profileGrid = document.getElementById(\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
      profileGrid.innerHTML = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'<p>No wastes yet</p>\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'
      return;
    }


    // Call the function to fill the grid
    fillGridWithWastes(wastes, \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\'garage-wastes-tab\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\')
  }
})
// waste end--

Add JS Function Name

profile
js/profile-edit.js---

js/view-user-profile.js-

js/view-user-profile.js--

js/view-user-profile.js---

js/view-user-profile.js----

js/profile.js-

js/profile-edit.js-

js/profile-edit.js--

js/profile-edit.js

js/profile.js

js/view-user-profile.js