{"id":4028,"date":"2024-05-14T15:02:38","date_gmt":"2024-05-14T08:02:38","guid":{"rendered":"https:\/\/www.seva.id\/info\/?page_id=4028"},"modified":"2024-11-12T10:50:06","modified_gmt":"2024-11-12T03:50:06","slug":"lp-test-landing-page","status":"publish","type":"page","link":"https:\/\/www.seva.id\/info\/lp-test-landing-page","title":{"rendered":"TEST Landing Page (JP)"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4028\" class=\"elementor elementor-4028\">\n\t\t\t\t\t\t<section class=\"has_ma_el_bg_slider elementor-section elementor-top-section elementor-element elementor-element-55c8f89 elementor-section-boxed elementor-section-height-default elementor-section-height-default jltma-glass-effect-no\" data-id=\"55c8f89\" data-element_type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"has_ma_el_bg_slider elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0c4401a jltma-glass-effect-no\" data-id=\"0c4401a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7f83e89 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"7f83e89\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #000000; font-family: Kanyon, sans-serif; font-size: 20px; white-space-collapse: preserve;\">Udah punya mobil inceran? Yuk sini diskusiin sama SEVA!<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4c085d7 jltma-glass-effect-no elementor-widget elementor-widget-text-editor\" data-id=\"4c085d7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"color: #878d98; font-family: 'Open Sans', sans-serif; font-size: 14px; white-space-collapse: preserve;\">Pak Gub aja udah beli mobil di Seva.id, kamu kapan?<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d63ebc6 jltma-glass-effect-no elementor-widget elementor-widget-image\" data-id=\"d63ebc6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"1024\" height=\"451\" src=\"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453-1024x451.png\" class=\"attachment-large size-large wp-image-4040\" alt=\"\" srcset=\"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453-1024x451.png 1024w, https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453-300x132.png 300w, https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453-768x338.png 768w, https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453.png 1029w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e5353f7 jltma-glass-effect-no elementor-widget elementor-widget-shortcode\" data-id=\"e5353f7\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><span style=\"font-family: 'Open Sans', sans-serif;font-size: 12px;font-weight: 400;line-height: 16px;text-align: left;color: #878D98;\"><span style=\"color: red;\">*<\/span> Wajib diisi<\/span><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-54e8e21 jltma-glass-effect-no elementor-widget elementor-widget-shortcode\" data-id=\"54e8e21\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><label style=\"font-family: 'Open Sans', sans-serif;font-size: 12px;font-weight: 400;line-height: 16px;text-align: left;color: #878D98;\">Nama Lengkap <span style='color: red;'>*<\/span><\/label><br>\n    <input autocomplete=\"nope\" id=\"formName\" type='text' required='true' placeholder='Masukkan nama lengkap' style=\"font-family: 'Open Sans', sans-serif;font-size: 14px;font-weight: 400;line-height: 16px;text-align: left;color: #13131B;border: 1px solid #EBECEE;border-radius: 8px;padding: 8px;width: 100%;margin-top: 10px;height: 48px;\" >\n    \n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e80c707 jltma-glass-effect-no elementor-widget elementor-widget-shortcode\" data-id=\"e80c707\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><label style=\"font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; text-align: left; color: #878d98;\">Nomor HP aktif <span style='color: red;'>*<\/span><\/label><br \/>\n    <div style=\"font-family: 'Open Sans', sans-serif; background-color: #ffffff; font-size: 11px; font-weight: 400; line-height: 16px; text-align: left; color: #878d98; border: 1px solid #ebecee; border-radius: 8px; padding: 8px; width: 100%; margin-top: 10px; display: flex; height:48px;\">\n    \t<span style=\"color: black; width: 39px; font-size: 14px; display: flex; align-items: center; justify-content: center;\">+62 | <\/span>\n        <input autocomplete=\"nope\" id=\"formPhone\" type=\"text\" placeholder=\"Contoh: 812345678\" required=\"\" style=\"margin-left: 2px; width: calc(100% - 26px); border: none; outline: none; font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400; line-height: 16px; color: #13131B; \">\n    <\/div>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b29640 jltma-glass-effect-no elementor-widget elementor-widget-shortcode\" data-id=\"7b29640\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><label style=\"font-family: 'Open Sans', sans-serif;font-size: 12px;font-weight: 400;line-height: 16px;text-align: left;color: #878D98;\">Alamat Email aktif <span style='color: red;'>*<\/span><\/label><br>\n    <input autocomplete=\"nope\" id=\"formEmail\" type='email' required='true' placeholder='Contoh: john@mail.com' style=\"font-family: 'Open Sans', sans-serif;font-size: 14px;font-weight: 400;line-height: 16px;text-align: left;color: #13131B;border: 1px solid #EBECEE;border-radius: 8px;padding: 8px;width: 100%;margin-top: 10px;height: 48px;\" >\n    <span id='formEmail-error' style='color: #FF0000; margin-top: 4px; font-size: 11px; display: none;'>Gunakan format email yang benar. Contoh: john@mail.com.<\/span>\n    <script>\n            document.getElementById('formEmail').addEventListener('input', function() {\n                var emailInput = document.getElementById('formEmail');\n                var errorMessage = document.getElementById('formEmail-error');\n                var emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/;\n\n                if (emailInput.value === '') {\n                    errorMessage.style.display = 'none'; \/\/ Sembunyikan pesan error jika kosong\n                } else if (!emailPattern.test(emailInput.value)) {\n                    errorMessage.style.display = 'block'; \/\/ Tampilkan pesan error jika tidak valid\n                } else {\n                    errorMessage.style.display = 'none'; \/\/ Sembunyikan pesan error jika valid\n                }\n            });\n        <\/script>\n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1c14114 jltma-glass-effect-no elementor-widget elementor-widget-shortcode\" data-id=\"1c14114\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><label style=\"font-family: 'Open Sans', sans-serif;font-size: 12px;font-weight: 400;line-height: 16px;text-align: left;color: #878D98;\">Warna Mobil<\/label><br>\n    <input autocomplete=\"nope\" id=\"formAdditional-warna_mobil\" type='text' required='false' placeholder='Masukan warna yang diinginkan' style=\"font-family: 'Open Sans', sans-serif;font-size: 14px;font-weight: 400;line-height: 16px;text-align: left;color: #13131B;border: 1px solid #EBECEE;border-radius: 8px;padding: 8px;width: 100%;margin-top: 10px;height: 48px;\" >\n    \n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3603465 jltma-glass-effect-no elementor-widget elementor-widget-shortcode\" data-id=\"3603465\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\"><label style=\"font-family: 'Open Sans', sans-serif;font-size: 12px;font-weight: 400;line-height: 16px;text-align: left;color: #878D98;\">Alasan<\/label><br>\n    <input autocomplete=\"nope\" id=\"formAdditional-alasan\" type='text' required='false' placeholder='Tulis alasan memilih warna diatas' style=\"font-family: 'Open Sans', sans-serif;font-size: 14px;font-weight: 400;line-height: 16px;text-align: left;color: #13131B;border: 1px solid #EBECEE;border-radius: 8px;padding: 8px;width: 100%;margin-top: 10px;height: 48px;\" >\n    \n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-e33c041 jltma-glass-effect-no elementor-widget elementor-widget-shortcode\" data-id=\"e33c041\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<style>\n  * {\n    box-sizing: border-box;\n  }\n\n  .row {\n    display: flex;\n    gap: 16px;\n  }\n\n  .column {\n    width: 50%;\n    padding: 8px 0;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    \/* Tengah secara horizontal *\/\n    justify-content: start;\n    \/* Tengah secara vertikal *\/\n  }\n\n  .img-container {\n    width: 100%;\n    height: 48px;\n    border: 1px solid #EBECEE;\n    border-radius: 8px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    margin-bottom: 16px;\n    cursor: pointer;\n    background-color: #ffffff;\n    \/\/ width: 261px;\n  }\n\n  .img-container img {\n    max-width: 100%;\n    max-height: 100%;\n    \/* Mengatur gambar agar tidak lebih besar dari container *\/\n  }\n\n  .brand-name {\n    margin-left: 10px;\n    \/* Menambahkan margin kiri untuk nama merek *\/\n    font-family: 'Open Sans', sans-serif;\n    font-size: 14px;\n  }\n\n  .label {\n    font-family: 'Open Sans', sans-serif;\n    font-size: 12px;\n    font-weight: 400;\n    line-height: 18px;\n    text-align: left;\n    color: #878D98;\n  }\n\n  .active {\n    border: 2px solid #51A8DB;\n    \/* Perubahan warna border *\/\n    background-color: #F3F9FD;\n    \/* Perubahan warna background *\/\n  }\n\n  #modelDropdown {\n    width: 100%;\n    font-size: 14px;\n    color: #000000\n  }\n\n  #modelDropdown[disabled] {\n    pointer-events: none;\n    \/* Menonaktifkan interaksi *\/\n    background-color: #F5F6F6;\n    color: #CDD0D4;\n  }\n\n  #modelDropdown option:disabled {\n    color: #CDD0D4;\n    \/* Warna teks yang lebih ringan *\/\n  }\n\n  .disabled-option {\n    color: #CDD0D4 !important;\n    \/* Warna teks yang lebih ringan *\/\n  }\n\n  .new-cars {\n    display: none;\n    background-color: white;\n    z-index: 1;\n    position: absolute;\n    max-height: 350px;\n    border-radius: 8px;\n    border: 1px solid rgb(235, 236, 238);\n    width: 100%;\n  }\n<\/style>\n\n<p class=\"label\" style=\"color: #878D98 !important;\">Pilih merek mobil yang kamu inginkan<\/p>\n\n<div class=\"row\">\n  <div class=\"column\">\n    <div class=\"img-container\" onclick=\"activateContainer(this, event)\" itemNumber=\"1\">\n      <img decoding=\"async\" src=\"https:\/\/www.seva.id\/_next\/image?url=%2Frevamp%2Ficon%2Flogo-toyota.webp&w=48&q=75\" width=\"24px\"\n        alt=\"Toyota\">\n      <span class=\"brand-name\">Toyota<\/span>\n    <\/div>\n    <div class=\"img-container\" onclick=\"activateContainer(this, event)\" itemNumber=\"3\">\n      <img decoding=\"async\" src=\"https:\/\/www.seva.id\/_next\/image?url=%2Frevamp%2Ficon%2Flogo-isuzu.webp&w=48&q=75\" width=\"24px\"\n        alt=\"Isuzu\">\n      <span class=\"brand-name\">Isuzu<\/span>\n    <\/div>\n    <div class=\"img-container\" onclick=\"activateContainer(this, event)\" itemNumber=\"5\">\n      <img decoding=\"async\" src=\"https:\/\/www.seva.id\/_next\/image?url=%2Frevamp%2Ficon%2Flogo-hyundai.webp&w=48&q=75\" width=\"24px\"\n        alt=\"Hyundai\">\n      <span class=\"brand-name\">Hyundai<\/span>\n    <\/div>\n    <div class=\"img-container\" onclick=\"activateContainer(this, event)\" itemNumber=\"7\">\n      <img decoding=\"async\" src=\"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/09\/image-129.png\" width=\"40px\" alt=\"BYD\">\n      <span class=\"brand-name\">BYD<\/span>\n    <\/div>\n  <\/div>\n  <div class=\"column\">\n    <div class=\"img-container\" onclick=\"activateContainer(this, event)\" itemNumber=\"2\">\n      <img decoding=\"async\" src=\"https:\/\/www.seva.id\/_next\/image?url=%2Frevamp%2Ficon%2Flogo-daihatsu.webp&w=48&q=75\" width=\"24px\"\n        alt=\"Daihatsu\">\n      <span class=\"brand-name\">Daihatsu<\/span>\n    <\/div>\n    <div class=\"img-container\" onclick=\"activateContainer(this, event)\" itemNumber=\"4\">\n      <img decoding=\"async\" src=\"https:\/\/storage.googleapis.com\/seva-storage-dev\/cms\/product\/bmw\/BMW.webp\" width=\"24px\" alt=\"BMW\">\n      <span class=\"brand-name\">BMW<\/span>\n    <\/div>\n    <div class=\"img-container\" onclick=\"activateContainer(this, event)\" itemNumber=\"6\">\n      <img decoding=\"async\" src=\"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/09\/Wuling-logo.svg-1.png\" width=\"24px\" alt=\"Wuling\">\n      <span class=\"brand-name\">Wuling<\/span>\n    <\/div>\n  <\/div>\n<\/div>\n\n<label\n  style=\"font-family: 'Open Sans', sans-serif; font-size: 12px; font-weight: 400; line-height: 16px; text-align: left; color: #878d98;\">Model\n  mobil pilihan saya<\/label><br \/>\n<div id=\"dropdownContainerModel\"\n  style=\"background-color: #F5F6F6; height: 48px; margin-bottom: 20px; font-family: 'Open Sans', sans-serif; font-size: 11px; font-weight: 400; line-height: 16px; text-align: left; color: #878D98; border: 1px solid #EBECEE; border-radius: 8px; width: 100%; margin-top: 10px; align-items: center; justify-content: center;\">\n  <div style=\"padding: 8px;\">\n    <div trigerNewCar class=\"custom-select\" id=\"modelDropdown\"\n      style=\"cursor: pointer; height: 30px; color: #CDD0D4; display: flex; justify-content: space-between; align-items: center;\">\n      <input id=\"textModel\" onclick=\"showDropdownModel()\" type=\"text\" autocomplete=\"nope\" disabled=\"true\"\n        placeholder=\"Pilih model mobil\"\n        style=\"font-family: 'Open Sans', sans-serif; height: 18px; font-size: 14px; color: #AFB3BA; border: none; outline: none; width: 100%; background-color: #F5F6F6;\" \/>\n      <div class=\"iconWrapperModels\">\n        <svg onclick=\"showDropdownModel()\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\"\n          xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ant-collapse-arrow section2Arrow\">\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n            d=\"M9.53083 14.5212C9.91267 14.1463 10.5318 14.1463 10.9136 14.5212L20 23.4424L29.0864 14.5212C29.4682 14.1463 30.0873 14.1463 30.4692 14.5212C30.851 14.8961 30.851 15.5039 30.4692 15.8788L20.6914 25.4788C20.3095 25.8537 19.6905 25.8537 19.3086 25.4788L9.53083 15.8788C9.14898 15.5039 9.14898 14.8961 9.53083 14.5212Z\"\n            fill=\"#13131B\"><\/path>\n          <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\n            d=\"M9.35798 14.3515C9.83529 13.8828 10.6092 13.8828 11.0865 14.3515L20 23.1029L28.9135 14.3515C29.3908 13.8828 30.1647 13.8828 30.642 14.3515C31.1193 14.8201 31.1193 15.5799 30.642 16.0485L20.8642 25.6485C20.3869 26.1172 19.6131 26.1172 19.1358 25.6485L9.35798 16.0485C8.88067 15.5799 8.88067 14.8201 9.35798 14.3515ZM10.7408 14.6909C10.4544 14.4097 9.99006 14.4097 9.70368 14.6909C9.41729 14.9721 9.41729 15.4279 9.70368 15.7091L19.4815 25.3091C19.7678 25.5903 20.2322 25.5903 20.5185 25.3091L30.2963 15.7091C30.5827 15.4279 30.5827 14.9721 30.2963 14.6909C30.0099 14.4097 29.5456 14.4097 29.2592 14.6909L20.1728 23.6121C20.127 23.6571 20.0648 23.6824 20 23.6824C19.9352 23.6824 19.873 23.6571 19.8272 23.6121L10.7408 14.6909Z\"\n            fill=\"#13131B\"><\/path>\n        <\/svg>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n<div id=\"newCars\" class=\"new-cars\" data-simplebar list-new-cars>\n  <!-- Div untuk model mobil -->\n<\/div>\n\n<script>\n\n  \/\/ URL API\n  const apiUrl = 'https:\/\/api.seva.id\/recommendations\/car-catalog?city=jakarta&cityId=118';\n\n  const deletedItems = [\"\"].map(Number);\n\n  function removeAndReorderItems() {\n\n    \/\/ Ambil semua elemen dengan atribut itemNumber\n    const containers = document.querySelectorAll('.img-container');\n\n    if (!containers) {\n      return;\n    }\n\n    \/\/ Ubah NodeList menjadi Array agar bisa di-loop dengan lebih fleksibel\n    let visibleItems = Array.from(containers);\n\n    \/\/ Filter elemen yang harus dihapus berdasarkan deletedItems\n    visibleItems = visibleItems.filter(container => {\n      const itemNumber = parseInt(container.getAttribute('itemNumber'), 10);\n      return !deletedItems.includes(itemNumber);\n    });\n\n    \/\/ Fungsi untuk mengurutkan ulang itemNumber\n    const sortItems = (a, b) => {\n      const aNumber = parseInt(a.getAttribute('itemNumber'), 10);\n      const bNumber = parseInt(b.getAttribute('itemNumber'), 10);\n      return aNumber - bNumber;\n    };\n\n    visibleItems.sort(sortItems);\n\n    \/\/ Urutkan ulang itemNumber berdasarkan posisi baru\n    visibleItems.forEach((container, index) => {\n      container.setAttribute('itemNumber', index + 1); \/\/ Set ulang itemNumber\n    });\n\n    \/\/ Kosongkan semua kolom sebelum mengisi ulang\n    document.querySelectorAll('.column').forEach(column => column.innerHTML = '');\n\n    \/\/ Sisipkan ulang elemen yang tersisa ke kolom dengan urutan yang benar\n    visibleItems.forEach((item, index) => {\n      const targetColumn = document.querySelectorAll('.column')[index % 2]; \/\/ Sebar ke 2 kolom\n      targetColumn.appendChild(item); \/\/ Masukkan item ke kolom\n    });\n  }\n\n  \/\/ Jalankan fungsi setelah halaman selesai dimuat\n  document.addEventListener('DOMContentLoaded', removeAndReorderItems);\n\n  \/\/ Fungsi untuk mengambil data dari API\n  async function fetchData(url) {\n    const response = await fetch(url);\n    const data = await response.json();\n    return data;\n  }\n\n  \/\/ Fungsi untuk mengelompokkan model-model mobil berdasarkan mereknya\n  function groupModelsByBrand(carRecommendations) {\n    const groupedModels = {};\n\n    carRecommendations.forEach(car => {\n      let brand = car.make_name;\n      const model = car.model_name;\n\n      if (brand === 'WULING') {\n        brand = 'Wuling';\n      }\n\n      if (!groupedModels[brand]) {\n        groupedModels[brand] = [];\n      }\n\n      groupedModels[brand].push(model);\n    });\n\n    return groupedModels;\n  }\n\n  var groupedModels;\n  \/\/ Mengambil data dari API dan mengelompokkan model-model berdasarkan mereknya\n  fetchData(apiUrl)\n    .then(data => {\n      const carRecommendations = data.data;\n      groupedModels = groupModelsByBrand(carRecommendations);\n\n    })\n    .catch(error => {\n      console.error('Terjadi kesalahan:', error);\n    });\n\n\n  var newCarsDiv = document.getElementById('newCars');\n  var modelDropdown = document.getElementById('modelDropdown'); \/\/ Mendapatkan elemen dengan id modelDropdown\n  var textModel = document.getElementById('textModel');\n\n  newCarsDiv.addEventListener('click', handleClickBrand);\n\n  function activateContainer(element, event) {\n    if (event) {\n      event.stopPropagation(); \/\/ Mencegah event klik menyebar ke elemen lain\n    }\n\n    \/\/ Menghapus kelas \"active\" dari semua elemen .img-container\n    var containers = document.querySelectorAll('.img-container');\n    containers.forEach(function (container) {\n      container.classList.remove('active');\n    });\n\n    \/\/ Menambahkan kelas \"active\" ke elemen yang diklik\n    element.classList.add('active');\n\n    \/\/ Mendapatkan merek mobil yang dipilih\n    var selectedBrand = element.querySelector('.brand-name').textContent;\n\n    var dropdownContainer = document.getElementById('dropdownContainerModel');\n    dropdownContainer.style.backgroundColor = '#FFFFFF'; \/\/ Tambahkan tanda kutip pada nilai warna\n\n    \/\/ Mengisi dropdown dengan model mobil dari merek yang dipilih\n    modelDropdown.style.backgroundColor = '#FFFFFF'; \/\/ Tambahkan tanda kutip pada nilai warna\n    textModel.style.backgroundColor = '#FFFFFF';\n    textModel.disabled = false;\n    clearInputModel();\n    modelDropdown.style.color = '#CDD0D4';\n\n    \/\/ Mengambil model mobil dari groupedModels berdasarkan merek yang dipilih\n    var models = groupedModels[selectedBrand];\n    models.sort();\n\n    var dropdownContainer = document.getElementById('dropdownContainerModel');\n    \/\/ Kosongkan konten sebelum menambahkan model baru\n    newCarsDiv.innerHTML = '';\n\n    \/\/ Buat div untuk setiap model mobil dan tambahkan ke dalam newCarsDiv\n    models.forEach(function (model, index) {\n      var modelDiv = document.createElement('div');\n      modelDiv.textContent = model;\n      modelDiv.style.color = '#13131B';\n      modelDiv.style.padding = '16px';\n      modelDiv.style.textAlign = 'start';\n      modelDiv.style.fontFamily = '\"Open Sans\", sans-serif';\n      modelDiv.style.fontSize = '14px';\n      modelDiv.style.fontStyle = 'normal';\n      modelDiv.style.fontWeight = '400';\n      modelDiv.style.lineHeight = '20px';\n      modelDiv.setAttribute('modelNewCar', '');\n      modelDiv.style.cursor = 'pointer';\n      modelDiv.onclick = handleClickBrand;\n\n      if (index !== 0) {\n        modelDiv.style.borderTop = '1px solid rgb(235, 236, 238)';\n      }\n\n      newCarsDiv.appendChild(modelDiv);\n    });\n\n    new SimpleBar(newCarsDiv);\n\n    \/\/ Ketika select di klik, tampilkan div newCars\n    \/\/dropdownContainer.addEventListener('click', function () {\n    \/\/  newCarsDiv.style.display = 'block';\n    \/\/});\n  }\n\n  const clearInputModel = () => {\n    const inputField = document.querySelector('#textModel');\n    inputField.value = '';\n    filterModels();\n    updateSvgModel();\n  }\n\n  const updateSvgModel = () => {\n    const inputField = document.querySelector('#textModel')\n    const svgWrapper = document.querySelector('.iconWrapperModels')\n\n    if (inputField.value) {\n      svgWrapper.innerHTML = `\n              <svg onclick=\"clearInputModel()\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <circle cx=\"20\" cy=\"20\" r=\"16\" fill=\"#13131B\"><\/circle>\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.6964 25.7882C14.1106 25.2024 14.1106 24.2527 14.6964 23.6669L23.1817 15.1816C23.7675 14.5958 24.7172 14.5958 25.303 15.1816C25.8888 15.7674 25.8888 16.7171 25.303 17.3029L16.8177 25.7882C16.232 26.374 15.2822 26.374 14.6964 25.7882Z\" fill=\"white\"><\/path>\n                    <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M14.6967 15.182C15.2825 14.5962 16.2322 14.5962 16.818 15.182L25.3033 23.6673C25.8891 24.2531 25.8891 25.2028 25.3033 25.7886C24.7175 26.3744 23.7677 26.3744 23.1819 25.7886L14.6967 17.3033C14.1109 16.7175 14.1109 15.7678 14.6967 15.182Z\" fill=\"white\"><\/path>\n                <\/svg>\n            `\n    } else {\n      svgWrapper.innerHTML = `\n              <svg  onclick=\"showDropdownModel()\" width=\"24\" height=\"24\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"ant-collapse-arrow section2Arrow\">\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.53083 14.5212C9.91267 14.1463 10.5318 14.1463 10.9136 14.5212L20 23.4424L29.0864 14.5212C29.4682 14.1463 30.0873 14.1463 30.4692 14.5212C30.851 14.8961 30.851 15.5039 30.4692 15.8788L20.6914 25.4788C20.3095 25.8537 19.6905 25.8537 19.3086 25.4788L9.53083 15.8788C9.14898 15.5039 9.14898 14.8961 9.53083 14.5212Z\" fill=\"#13131B\"><\/path>\n                  <path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M9.35798 14.3515C9.83529 13.8828 10.6092 13.8828 11.0865 14.3515L20 23.1029L28.9135 14.3515C29.3908 13.8828 30.1647 13.8828 30.642 14.3515C31.1193 14.8201 31.1193 15.5799 30.642 16.0485L20.8642 25.6485C20.3869 26.1172 19.6131 26.1172 19.1358 25.6485L9.35798 16.0485C8.88067 15.5799 8.88067 14.8201 9.35798 14.3515ZM10.7408 14.6909C10.4544 14.4097 9.99006 14.4097 9.70368 14.6909C9.41729 14.9721 9.41729 15.4279 9.70368 15.7091L19.4815 25.3091C19.7678 25.5903 20.2322 25.5903 20.5185 25.3091L30.2963 15.7091C30.5827 15.4279 30.5827 14.9721 30.2963 14.6909C30.0099 14.4097 29.5456 14.4097 29.2592 14.6909L20.1728 23.6121C20.127 23.6571 20.0648 23.6824 20 23.6824C19.9352 23.6824 19.873 23.6571 19.8272 23.6121L10.7408 14.6909Z\" fill=\"#13131B\"><\/path>\n              <\/svg>\n            `\n    }\n  }\n\n  function handleClickBrand(event) {\n    modelDropdown.style.color = '#000000';\n    textModel.style.color = '#13131B';\n    if (event.target.getAttribute('modelNewCar') !== null) {\n      var modelNewCars = document.querySelectorAll('[modelNewCar]'); \/\/ Mengambil semua elemen dengan atribut modelNewCar\n      modelNewCars.forEach(function (modelNewCar) {\n        modelNewCar.style.display = 'none'; \/\/ Menyembunyikan elemen dengan atribut modelNewCar\n      });\n\n      var selectedModel = event.target.textContent; \/\/ Mendapatkan teks model yang dipilih\n      textModel.value = selectedModel; \/\/ Menetapkan teks model yang dipilih ke dalam elemen modelDropdown\n      updateSvgModel();\n      newCarsDiv.style.display = 'none'; \/\/ Hide the dropdown after selecting a model\n    }\n  }\n\n  function showDropdownModel() {\n    var modelNewCars = document.querySelectorAll('[modelNewCar]');\n    const arrowDropdown = document.querySelector('svg.section2Arrow');\n    if (newCarsDiv.style.display === 'none' || newCarsDiv.style.display === '') {\n      newCarsDiv.style.display = 'block';\n      if (arrowDropdown !== null) {\n        arrowDropdown.style.transform = 'rotate(180deg)';\n      }\n      if (listCityElements) {\n        listCityElements.forEach(listCity => {\n          if (listCity.style.display === 'block') {\n            showDropdownCity();\n          }\n        })\n      }\n      if (listCsvElements) {\n        listCsvElements.forEach(listCsv => {\n          if (listCsv.style.display === 'block') {\n            trigerCsvElements.forEach(el => {\n              if (el.classList.contains('rotated')) {\n                showDropdownValue(el);\n              }\n            });\n          }\n        })\n      }\n    } else {\n      newCarsDiv.style.display = 'none';\n      if (arrowDropdown !== null) {\n        arrowDropdown.style.transform = 'rotate(0deg)';\n      }\n    }\n  }\n\n  function restoreListModelFilter() {\n    var selectedBrand = document.querySelector('.active .brand-name').textContent;\n    \/\/ Mengambil model mobil dari groupedModels berdasarkan merek yang dipilih\n    var models = groupedModels[selectedBrand];\n\n    \/\/ Kosongkan konten sebelum menambahkan model baru\n    newCarsDiv.innerHTML = '';\n\n    \/\/ Buat div untuk setiap model mobil dan tambahkan ke dalam newCarsDiv\n    models.forEach(function (model, index) {\n      var modelDiv = document.createElement('div');\n      modelDiv.textContent = model;\n      modelDiv.style.color = '#13131B';\n      modelDiv.style.padding = '16px';\n      modelDiv.style.textAlign = 'start';\n      modelDiv.style.fontFamily = '\"Open Sans\", sans-serif';\n      modelDiv.style.fontSize = '14px';\n      modelDiv.style.fontStyle = 'normal';\n      modelDiv.style.fontWeight = '400';\n      modelDiv.style.lineHeight = '20px';\n      modelDiv.setAttribute('modelNewCar', '');\n      modelDiv.style.cursor = 'pointer';\n      modelDiv.onclick = handleClickBrand;\n\n      if (index !== 0) {\n        modelDiv.style.borderTop = '1px solid rgb(235, 236, 238)';\n      }\n\n      newCarsDiv.appendChild(modelDiv);\n\n    });\n  }\n\n  const restoreAfterBackspaceModelCar = (model) => {\n    var modelDiv = document.createElement('div');\n    modelDiv.textContent = model;\n    modelDiv.style.color = '#13131B';\n    modelDiv.style.padding = '16px';\n    modelDiv.style.textAlign = 'start';\n    modelDiv.style.fontFamily = '\"Open Sans\", sans-serif';\n    modelDiv.style.fontSize = '14px';\n    modelDiv.style.fontStyle = 'normal';\n    modelDiv.style.fontWeight = '400';\n    modelDiv.style.lineHeight = '20px';\n    modelDiv.setAttribute('modelNewCar', '');\n    modelDiv.style.cursor = 'pointer';\n    modelDiv.onclick = handleClickBrand;\n\n    if (newCarsDiv.children.length > 0) {\n      modelDiv.style.borderTop = '1px solid rgb(235, 236, 238)';\n    }\n\n    newCarsDiv.appendChild(modelDiv);\n  }\n\n  \/\/ Fungsi untuk memfilter model berdasarkan input\n  function filterModels() {\n    textModel.style.color = '#13131B';\n    var filter = textModel.value.toLowerCase();\n\n    \/\/ If the filter is empty, restore the original list\n    if (filter === '') {\n      restoreListModelFilter();\n      return;\n    }\n\n    var selectedBrand = document.querySelector('.active .brand-name').textContent;\n    var models = groupedModels[selectedBrand];\n\n    \/\/ Clear the current content before filtering\n    newCarsDiv.innerHTML = '';\n\n    \/\/ Filter and display models based on input\n    var foundModels = models.filter(model => model.toLowerCase().includes(filter));\n    foundModels.forEach(function (model) {\n      restoreAfterBackspaceModelCar(model);\n    });\n\n    \/\/ Show a message if no models are found\n    if (foundModels.length === 0) {\n      newCarsDiv.innerHTML = '<div style=\"padding: 16px; text-align: start; font-family: \\'Open Sans\\', sans-serif; font-size: 14px; font-style: normal; font-weight: 400; line-height: 20px; border: 1px solid rgb(235, 236, 238); text-align: center;\">Mobil tidak ditemukan<\/div>';\n    }\n    updateSvgModel();\n  }\n\n  \/\/ Add event listener to the input field to filter models on input change\n  textModel.addEventListener('input', filterModels);\n\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-abe700b jltma-glass-effect-no elementor-widget elementor-widget-shortcode\" data-id=\"abe700b\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">\n<script>\n    const otpFlow = null;\n    const waDirect = null;\n    const waNumber = null;\n    const waMessage = null;\n<\/script>\n\n<style>\n    input:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0 1000px white inset;\n    }\n\n    .button {\n        width: 100%;\n        height: 44px;\n        font-family: 'Open Sans', sans-serif;\n        font-size: 16px;\n        font-weight: 400;\n        line-height: 24px;\n        text-align: center;\n        color: #ffffff;\n        background: #05256E;\n        border: none;\n        border-radius: 8px;\n        cursor: pointer;\n    }\n\n    .disabled {\n        background-color: #CDD0D4;\n        cursor: not-allowed;\n    }\n\n    .label {\n        font-family: 'Open Sans', sans-serif;\n        font-size: 12px;\n        font-weight: 400;\n        line-height: 18px;\n        text-align: left;\n        color: #878D98;\n    }\n\n    .marketing-consent-lp {\n        display: grid;\n        grid-template-columns: 20px 1fr;\n        gap: 5px;\n        margin-bottom: 5px;\n        font-family: \"Open Sans\";\n        align-items: start;\n    }\n\n    .customer-consent-lp {\n        display: grid;\n        grid-template-columns: 20px 1fr;\n        gap: 5px;\n        margin-bottom: 20px;\n        font-family: \"Open Sans\";\n        align-items: start;\n    }\n\n    .consent-checkbox-lp {\n        display: flex;\n        justify-content: center;\n        align-items: start;\n        margin-top: 3px;\n        \/* Align checkbox to the top *\/\n    }\n\n    .consent-text-lp {\n        font-size: 12px;\n        color: #878d98;\n    }\n\n    .consent-text-lp a {\n        color: #007bff;\n        \/* Link color *\/\n        text-decoration: none;\n    }\n\n    .consent-text-lp a:hover {\n        text-decoration: underline;\n    }\n\n\n    \/* CSS untuk spinner di tengah *\/\n    .button-loading {\n        position: relative;\n        color: transparent !important;\n        \/* Sembunyikan teks *\/\n    }\n\n    .button-loading .spinner {\n        position: absolute;\n        transform: translate(-50%, -50%);\n        width: 24px;\n        height: 24px;\n    }\n<\/style>\n\n<div class=\"marketing-consent-lp\">\n    <div class=\"consent-checkbox-lp\">\n        <input type=\"checkbox\" id=\"marketing-consent-lp\" name=\"consent\">\n    <\/div>\n    <div class=\"consent-text-lp\">\n        <label for=\"consent\">\n            Ya, Saya mau menerima informasi promo terbaru.\n        <\/label>\n    <\/div>\n<\/div>\n<div class=\"customer-consent-lp\">\n    <div class=\"consent-checkbox-lp\">\n        <input type=\"checkbox\" id=\"consent-lp\" name=\"consent\" required onclick=\"checkFields()\">\n    <\/div>\n    <div class=\"consent-text-lp\">\n        <label for=\"consent\">\n            Saya menyetujui <a href=\"https:\/\/www.seva.id\/syarat-dan-ketentuan\" target=\"_blank\">Syarat & Ketentuan<\/a>\n            serta\n            <a href=\"https:\/\/www.seva.id\/kebijakan-privasi\" target=\"_blank\">Kebijakan Privasi<\/a> yang berlaku.\n        <\/label>\n    <\/div>\n<\/div>\n\n\n<button id=\"formButton\" class=\"button disabled\" disabled onclick=\"sendDataForm()\">Kirim<\/button>\n\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/crypto-js\/4.1.1\/crypto-js.min.js\"><\/script>\n\n<script>\n    var formName = document.getElementById('formName');\n    var formPhone = document.getElementById('formPhone');\n    var formEmail = document.getElementById('formEmail');\n    var formButton = document.getElementById('formButton');\n    let formCityDropdown = document.getElementById('cityList');\n    let formCity = document.getElementById('cityText') ? document.getElementById('cityText') : document.getElementById('textCityRef');\n    let dropdownItems = document.querySelectorAll('.dropdown-item');\n    let chcekboxItems = document.querySelectorAll('.formAdditional-checkbox');\n    let radioItems = document.querySelectorAll('.formAdditional-radio');\n    let customSelect = document.querySelectorAll('.custom-select');\n    let additionalFields = document.querySelectorAll(\n        '[id^=\"formAdditional-\"]:not([id*=\"radio\"]):not([id*=\"checkbox\"])'\n    );\n\n    let carYearRefinancing;\n    let locationRefinancing;\n\n    const categoryValue = \"new-car\";\n\n    formName.addEventListener('input', function () {\n        formName.value = formName.value.replace(\/[^a-zA-Z.,' -]\/g, '');\n        checkFields();\n    });\n\n    formPhone.addEventListener('input', function () {\n        checkNumber(formPhone);\n        checkFields();\n    });\n\n    formCity.addEventListener('input', function () {\n        checkFields();\n    });\n\n    if (formEmail) {\n        formEmail.addEventListener('input', function () {\n            checkFields();\n        });\n    }\n\n    \/\/ cek jika ada element city dropdown\n    if (formCityDropdown !== null) {\n        formCityDropdown.addEventListener('mouseleave', function () {\n            checkFields();\n        });\n    }\n\n    if (dropdownItems) {\n        dropdownItems.forEach(function (dropdownItem) {\n            dropdownItem.addEventListener('click', function () {\n                checkFields();\n            });\n        });\n    }\n\n    if (chcekboxItems) {\n        chcekboxItems.forEach(function (chcekboxItem) {\n            chcekboxItem.addEventListener('click', function () {\n                \/\/ console.log('chcekboxItem clicked');\n                checkFields();\n            });\n        });\n    }\n\n    if (radioItems) {\n        radioItems.forEach(function (radioItem) {\n            radioItem.addEventListener('click', function () {\n                checkFields();\n            });\n        });\n    }\n\n    if (customSelect) {\n        customSelect.forEach(function (customSelectItem) {\n            customSelectItem.addEventListener('click', function () {\n                checkFields();\n            });\n        });\n    }\n\n    if (additionalFields) {\n        additionalFields.forEach((field) => {\n            field.addEventListener('input', function () {\n                checkFields();\n            });\n        });\n    }\n\n    function checkNumber(input) {\n        var inputValue = input.value;\n        \/\/ Menghapus semua karakter non-digit dari input\n        input.value = inputValue.replace(\/\\D\/g, '');\n\n        \/\/ Memeriksa apakah digit pertama adalah 8\n        if (input.value.charAt(0) !== '8') {\n            \/\/ Jika tidak, hapus isi input\n            input.value = '';\n        }\n    }\n\n\n    function checkEmail(input) {\n        var emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/;\n        return emailPattern.test(input);\n    }\n\n    function checkFields() {\n        var isPhoneValid = formPhone.value.trim() !== '' && \/^\\d{9,}$\/.test(formPhone.value.trim());\n        var isNameValid = formName.value.trim() !== '';\n        let isCityValid = true;\n        var isConsentChecked = document.getElementById('consent-lp').checked; \/\/ Check if consent checkbox is checked\n        var isEmailValid = true;\n\n        \/\/ cek jika ada city dropdown\n        if (formCity !== null) {\n            isCityValid = (formCity.attributes.required.value === 'true' && formCity.attributes.data.value.trim() !== 'null') || formCity.attributes.required.value === 'false';\n        }\n\n        if (formEmail !== null) {\n            isEmailValid = (formEmail.attributes.required) ?\n                formEmail.value.trim() !== '' && checkEmail(formEmail.value) :\n                true;\n        }\n\n        var additionalElements = document.querySelectorAll('[id^=\"formAdditional-\"], .formAdditional-checkbox, .formAdditional-radio');\n        var areAdditionalFieldsValid = Array.from(additionalElements).every(function (el) {\n            \/\/ Check if the element is a checkbox container with class \"formAdditional-checkbox\"\n            if (el.classList.contains('formAdditional-checkbox')) {\n                if (el.hasAttribute('required') && el.getAttribute('required') === 'true') {\n                    var checkboxes = el.querySelectorAll('input[type=\"checkbox\"]');\n                    var isChecked = Array.from(checkboxes).some(function (checkbox) {\n                        return checkbox.checked;\n                    });\n                    if (!isChecked) {\n                        return false;\n                    }\n                }\n            }\n            \/\/ Check if the element is a radio container with class \"formAdditional-radio\"\n            if (el.classList.contains('formAdditional-radio')) {\n                if (el.hasAttribute('required') && el.getAttribute('required') === 'true') {\n                    var radios = el.querySelectorAll('input[type=\"radio\"]');\n                    var isChecked = Array.from(radios).some(function (radio) {\n                        return radio.checked;\n                    });\n                    if (!isChecked) {\n                        return false;\n                    }\n                }\n            } else {\n                \/\/ Check if the element has the required attribute\n                if (el.hasAttribute('required') && el.getAttribute('required') === 'true') {\n                    if (el.value === '') {\n                        return false;\n                    }\n                }\n            }\n            return true;\n        });\n\n        \/\/ Disable the form button if any of the fields are invalid or consent checkbox is unchecked\n        formButton.disabled = !(isNameValid && isPhoneValid && isCityValid && areAdditionalFieldsValid && isConsentChecked && isEmailValid);\n        formButton.classList.toggle('disabled', formButton.disabled);\n    }\n\n    async function sendDataForm() {\n        formButton.innerHTML = `\n    <span class=\"spinner\">\n      <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"spinner\">\n        <path d=\"M9.99992 1.66665C8.35174 1.66664 6.74058 2.15539 5.37017 3.07106C3.99976 3.98674 2.93165 5.28823 2.30092 6.81095C1.67019 8.33367 1.50516 10.0092 1.82671 11.6257C2.14825 13.2422 2.94192 14.7271 4.10736 15.8925C5.2728 17.058 6.75766 17.8516 8.37416 18.1732C9.99067 18.4947 11.6662 18.3297 13.1889 17.699C14.7117 17.0682 16.0132 16.0001 16.9288 14.6297C17.8445 13.2593 18.3333 11.6482 18.3333 9.99998\" \n              stroke=\"#000000\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><\/path>\n      <\/svg>\n    <\/span>\n  `;\n\n        formButton.classList.add('button-loading');\n        formButton.disabled = true;\n\n        \/\/ Tambahkan animasi spin\n        const style = document.createElement('style');\n        style.innerHTML = `\n    @keyframes spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n    .spinner svg {\n      animation: spin 1s linear infinite;\n    }\n  `;\n        document.head.appendChild(style);\n\n        if (formEmail && formEmail.value.trim() !== '' && !checkEmail(formEmail.value)) {\n            return;\n        } else {\n            var name = document.getElementById('formName').value;\n            var phone = document.getElementById('formPhone').value;\n            var emailField = document.getElementById('formEmail');\n            var email = emailField ? emailField.value : '';\n\n            \/\/ Mencari elemen .img-container yang memiliki kelas \"active\"\n            var activeContainer = document.querySelector('.img-container.active');\n            \/\/ Inisialisasi variabel merek (brand)\n            var brand = '';\n\n            if (activeContainer) {\n                \/\/ Jika ada elemen yang aktif, ambil data merek (brand)-nya\n                if (activeContainer) {\n                    \/\/ Ambil data merek (brand) dari elemen .img-container\n                    brand = activeContainer.querySelector('.brand-name').innerText;\n                }\n            } else {\n                var brand = document.getElementById('brand-input-ref') ? document.getElementById('brand-input-ref').value : '';\n            }\n\n\n            \/\/ Mendapatkan model yang dipilih dari dropdown\n            var textModel = document.getElementById('textModel') ? document.getElementById('textModel') : document.getElementById('model-input-ref');\n            var selectedModel = '';\n\n            if (textModel) {\n                selectedModel = textModel.value;\n            } else {\n                var usedBrand = document.getElementById('usedBrand');\n                var usedModel = document.getElementById('usedModel');\n\n                if (usedModel) {\n                    selectedModel = usedModel.value;\n                }\n\n                if (brand === \"Merek Lainnya\") {\n                    if (usedBrand) {\n                        brand = usedBrand.value;\n                    }\n                }\n            }\n\n            \/\/ Mendapatkan city yang dipilih dari dropdown\n            let selectorCity = document.getElementById('textCity');\n            let selectedCityId = null;\n            if (selectorCity !== null) {\n                selectedCityId = selectorCity.attributes.data.value;\n            }\n\n            \/\/ Objek untuk menyimpan data tambahan\n            var additionalData = {};\n\n            \/\/ Mendapatkan semua elemen dengan ID yang dimulai dengan \"formAdditional-\"\n            var additionalElements = document.querySelectorAll('[id^=\"formAdditional-\"]');\n\n            if (additionalElements) {\n                \/\/ Loop melalui setiap elemen tambahan dan simpan nilai dalam objek additionalData\n                additionalElements.forEach(function (element) {\n                    \/\/ Mendapatkan label dari ID\n                    var label = element.id.split('-')[1]; \/\/ Mengambil bagian belakang ID setelah tanda '-'\n\n                    \/\/ Menyimpan nilai dalam objek additionalData dengan menggunakan label dari ID\n                    additionalData[label] = element.value;\n                });\n            }\n\n            \/\/ Variabel untuk menyimpan nilai checkbox yang tercentang\n            var selectedCheckboxes = [];\n\n            \/\/ Mendapatkan semua elemen dengan tipe checkbox\n            var checkboxes = document.querySelectorAll('input[type=\"checkbox\"]');\n\n            \/\/ Loop melalui setiap checkbox dan cek apakah tercentang\n            let checkbox_title = '';\n            checkboxes.forEach(function (checkbox) {\n                if (checkbox.name.includes('consent')) {\n                    return;\n                }\n\n                if (checkbox.checked) {\n                    checkbox_title = checkbox.getAttribute('checkbox_title');\n                    \/\/ Mendapatkan nilai dari atribut name\n                    selectedCheckboxes.push(checkbox.name);\n                }\n            });\n\n            if (selectedCheckboxes.length > 0) {\n                selectedCheckboxes = selectedCheckboxes.filter(value => value.trim() !== \"\");\n\n                if (selectedCheckboxes.length > 0) {\n                    additionalData[checkbox_title] = selectedCheckboxes;\n                }\n            }\n\n            var selectedRadios = [];\n\n            \/\/ Mendapatkan semua elemen dengan tipe radio\n            var radios = document.querySelectorAll('input[type=\"radio\"]');\n\n            let radio_title = '';\n            radios.forEach(function (radio) {\n                if (radio.checked) {\n                    radio_title = radio.getAttribute('radio_title');\n                    \/\/ Mendapatkan nilai dari atribut name\n                    selectedRadios.push(radio.value);\n                }\n            });\n\n            if (selectedRadios.length > 0) {\n                additionalData[radio_title] = selectedRadios;\n            }\n\n            \/\/ Fungsi untuk mengambil nilai UTM parameters dari URL\n            function getUTMParameter(parameterName) {\n                var urlParams = new URLSearchParams(window.location.search);\n                return urlParams.get(parameterName) || ''; \/\/ Jika tidak ada nilai, kembalikan string kosong\n            }\n\n            \/\/ Variabel untuk menyimpan nilai-nilai UTM parameters\n            var utmCampaign = getUTMParameter('utm_campaign');\n            var utmMedium = getUTMParameter('utm_medium');\n            var utmSource = getUTMParameter('utm_source');\n            var utmContent = getUTMParameter('utm_content');\n            var utmAdset = getUTMParameter('utm_adset');\n            var utmTerm = getUTMParameter('utm_term');\n\n            \/\/ Variabel untuk menyimpan nilai pageURL dari URL saat ini\n            var pageURL = window.location.href;\n\n            \/\/ Membuat objek dengan data formulir, dan data tambahan\n            var formData = {\n                name: name,\n                phoneNumber: '+62' + phone,\n                email: email,\n                carBrand: brand,\n                ...(selectedCityId !== null && {\n                    cityId: selectedCityId\n                }),\n                carModelText: selectedModel,\n                utmCampaign: utmCampaign,\n                utmMedium: utmMedium,\n                utmSource: utmSource,\n                utmContent: utmContent,\n                adSet: utmAdset,\n                utmTerm: utmTerm,\n                promo: pageURL,\n                origination: categoryValue === 'used-car' ? 'SEVAFLPUC' :\n                    categoryValue === 'refinancing' ? 'SEVAFLPRC' :\n                        'SEVAFLPNC',\n                additionalData: additionalData,\n                isTncAccepted: true,\n                category: categoryValue,\n                promoSubscription: getMarketingConsentLp(),\n                isVerifyOtp: otpFlow\n            };\n\n            if (categoryValue === 'refinancing') {\n                formData.carYear = carYearRefinancing;\n                formData.location = locationRefinancing;\n            }\n\n            if (otpFlow) {\n                const externalLeads = await encryptData(formData, \"next_public_lead_payload_encryption_key\");\n                sessionStorage.setItem('external-leads', JSON.stringify(externalLeads));\n\n                if (waDirect) {\n                    const wa_direct_object = {\n                        isWaDirect: true,\n                        url: 'https:\/\/wa.me\/' + waNumber + '?text=' + waMessage\n                    };\n                    sessionStorage.setItem('redirect-wa', JSON.stringify(wa_direct_object));\n                } else {\n                    sessionStorage.removeItem('redirect-wa');\n                }\n                window.location.href = 'https:\/\/www.dev.sevaio.xyz\/otp';\n            } else {\n                sessionStorage.setItem('thankyouPageVisited', true);\n\n                const catLeads = categoryValue === 'new-car' ? 'new' :\n                    categoryValue === 'used-car' ? 'used-car' :\n                        categoryValue === 'refinancing' ? 'refinancing' : '';\n\n                const submitApiUrl = 'https:\/\/api.seva.id\/unverifiedLeads\/' + catLeads;\n\n                const tokenGuest = await getTokenGuest();\n\n                formData.categoryCode = formData.category.replace(\/-\/g, '_');\n                delete formData.category;\n\n                const headers = {\n                    \"torq-api-key\": 'task_runner_72cead13878406ca',\n                    \"content-type\": \"text\/plain\",\n                };\n\n                if (categoryValue === 'refinancing' || categoryValue === 'used-car') {\n                    headers[\"Authorization\"] = tokenGuest;\n                }\n\n                encryptData(formData, \"next_public_lead_payload_encryption_key\")\n                    .then((payload) => {\n                        fetch(submitApiUrl, {\n                            method: 'POST',\n                            headers: headers,\n                            body: payload\n                        })\n                            .then(response => response.json())\n                            .then(data => {\n                                if (waDirect) {\n                                    window.open('https:\/\/wa.me\/' + waNumber + '?text=' + waMessage, '_blank');\n                                }\n                                setTimeout(() => {\n                                    window.location.href = 'https:\/\/www.dev.sevaio.xyz\/thank-you';\n                                }, 1000);\n                            })\n                            .catch(error => {\n                                console.error('Error:', error);\n                            });\n                    })\n                    .catch((error) => {\n                        console.error(\"Terjadi kesalahan:\", error);\n                    });\n            }\n\n        }\n\n\n        dataLayer.push({\n            'event': 'web_form_landing_page_submit_button_click'\n        });\n    }\n\n    let trigerCsvElements = null;\n    let trigerCityElements = null;\n    let trigerNewCarElements = null;\n\n    let listCsvElements = null;\n    let listCityElements = null;\n    let listNewCarElements = null;\n\n    let dropdownCsvElements = null;\n\n    setTimeout(() => {\n        trigerCsvElements = document.querySelectorAll('[trigerCsv]');\n        trigerCityElements = document.querySelectorAll('[trigerCity]');\n        trigerNewCarElements = document.querySelectorAll('[trigerNewCar]');\n\n        listCsvElements = document.querySelectorAll('[list-csv]');\n        listCityElements = document.querySelectorAll('[list-city]');\n        listNewCarElements = document.querySelectorAll('[list-new-cars]');\n\n\n        dropdownCsvElements = document.querySelectorAll('[dropdownCsv]');\n\n        document.addEventListener('click', (event) => {\n            \/\/ Check if the click is inside any of the dropdown-related elements\n            const isInsideDropdown = Array.from(dropdownCsvElements).some(dropdown => dropdown.contains(event.target)) ||\n                Array.from(listCsvElements).some(list => list.contains(event.target)) ||\n                Array.from(listCityElements).some(list => list.contains(event.target)) ||\n                Array.from(listNewCarElements).some(list => list.contains(event.target)) ||\n                Array.from(trigerCsvElements).some(el => el.contains(event.target)) ||\n                Array.from(trigerCityElements).some(el => el.contains(event.target)) ||\n                Array.from(trigerNewCarElements).some(el => el.contains(event.target));\n\n            if (isInsideDropdown) {\n                return;\n            } else {\n                listCsvElements.forEach(listCsv => {\n                    if (listCsv.style.display === 'block') {\n                        trigerCsvElements.forEach(el => {\n                            if (el.classList.contains('rotated')) {\n                                showDropdownValue(el);\n                            }\n                        });\n                    }\n                });\n                listCityElements.forEach(listCity => {\n                    if (listCity.style.display === 'block') {\n                        trigerCityElements.forEach(el => showDropdownCity(el));\n                    }\n                });\n                listNewCarElements.forEach(listNewCar => {\n                    if (listNewCar.style.display === 'block') {\n                        trigerNewCarElements.forEach(el => showDropdownModel(el));\n                    }\n                });\n            }\n        });\n\n        \/\/ Add click listeners to each trigerCsv element\n        trigerCsvElements.forEach((el) => {\n            el.addEventListener('click', () => {\n                showDropdownValue(el)\n            });\n        });\n    }, 2000);\n\n    function getMarketingConsentLp() {\n        var marketingConsentElements = document.getElementById(\"marketing-consent-lp\");\n        return marketingConsentElements.checked;\n    }\n\n    async function getTokenGuest() {\n        var name = document.getElementById('formName').value;\n        var phone = '+62' + document.getElementById('formPhone').value;\n\n        const data = {\n            fullName: name,\n            phoneNumber: phone\n        }\n\n        try {\n            const combinedDataForSignature = await decryptDataResponse() + ';' + JSON.stringify(data);\n            const headerSignatureValue = CryptoJS.AES.encrypt(\n                JSON.stringify(combinedDataForSignature),\n                await getEncryptionKeyWithKeyName('next_public_lead_payload_encryption_key')\n            ).toString();\n\n            const response = await fetch('https:\/\/api.seva.id\/auth\/token\/guest', {\n                method: 'GET',\n                headers: {\n                    'torq-api-key': 'task_runner_72cead13878406ca',\n                    'x-signature': headerSignatureValue,\n                    'Content-Type': 'application\/json'\n                },\n                \/\/ body: JSON.stringify(data)\n            });\n\n            const responseData = await response.json();\n            return responseData.token;\n        } catch (error) {\n            throw error;\n        }\n    }\n<\/script><\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Udah punya mobil inceran? Yuk sini diskusiin sama SEVA! Pak Gub aja udah beli mobil di Seva.id, kamu kapan?<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-4028","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>TEST Landing Page (JP) - SEVA<\/title>\n<meta name=\"description\" content=\"Ingin tahu lebih lanjut tentang layanan SEVA? Jangan ragu untuk hubungi kami. Klik untuk cek selengkapnya.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.seva.id\/info\/lp-test-landing-page\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"TEST Landing Page (JP) - SEVA\" \/>\n<meta property=\"og:description\" content=\"Ingin tahu lebih lanjut tentang layanan SEVA? Jangan ragu untuk hubungi kami. Klik untuk cek selengkapnya.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.seva.id\/info\/lp-test-landing-page\" \/>\n<meta property=\"og:site_name\" content=\"SEVA\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-12T03:50:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453-1024x451.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"11 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.seva.id\/info\/lp-test-landing-page\",\"url\":\"https:\/\/www.seva.id\/info\/lp-test-landing-page\",\"name\":\"TEST Landing Page (JP) - SEVA\",\"isPartOf\":{\"@id\":\"https:\/\/www.seva.id\/info\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.seva.id\/info\/lp-test-landing-page#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.seva.id\/info\/lp-test-landing-page#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453-1024x451.png\",\"datePublished\":\"2024-05-14T08:02:38+00:00\",\"dateModified\":\"2024-11-12T03:50:06+00:00\",\"description\":\"Ingin tahu lebih lanjut tentang layanan SEVA? Jangan ragu untuk hubungi kami. Klik untuk cek selengkapnya.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.seva.id\/info\/lp-test-landing-page#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.seva.id\/info\/lp-test-landing-page\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.seva.id\/info\/lp-test-landing-page#primaryimage\",\"url\":\"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453.png\",\"contentUrl\":\"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453.png\",\"width\":1029,\"height\":453},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.seva.id\/info\/lp-test-landing-page#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.seva.id\/info\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"TEST Landing Page (JP)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.seva.id\/info\/#website\",\"url\":\"https:\/\/www.seva.id\/info\/\",\"name\":\"SEVA\",\"description\":\"Promo Jelas dari Awal Cicilan Kredit Mobil Mulai dari 0%!\",\"alternateName\":\"SEVA\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.seva.id\/info\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"TEST Landing Page (JP) - SEVA","description":"Ingin tahu lebih lanjut tentang layanan SEVA? Jangan ragu untuk hubungi kami. Klik untuk cek selengkapnya.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.seva.id\/info\/lp-test-landing-page","og_locale":"en_US","og_type":"article","og_title":"TEST Landing Page (JP) - SEVA","og_description":"Ingin tahu lebih lanjut tentang layanan SEVA? Jangan ragu untuk hubungi kami. Klik untuk cek selengkapnya.","og_url":"https:\/\/www.seva.id\/info\/lp-test-landing-page","og_site_name":"SEVA","article_modified_time":"2024-11-12T03:50:06+00:00","og_image":[{"url":"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453-1024x451.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.seva.id\/info\/lp-test-landing-page","url":"https:\/\/www.seva.id\/info\/lp-test-landing-page","name":"TEST Landing Page (JP) - SEVA","isPartOf":{"@id":"https:\/\/www.seva.id\/info\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.seva.id\/info\/lp-test-landing-page#primaryimage"},"image":{"@id":"https:\/\/www.seva.id\/info\/lp-test-landing-page#primaryimage"},"thumbnailUrl":"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453-1024x451.png","datePublished":"2024-05-14T08:02:38+00:00","dateModified":"2024-11-12T03:50:06+00:00","description":"Ingin tahu lebih lanjut tentang layanan SEVA? Jangan ragu untuk hubungi kami. Klik untuk cek selengkapnya.","breadcrumb":{"@id":"https:\/\/www.seva.id\/info\/lp-test-landing-page#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.seva.id\/info\/lp-test-landing-page"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.seva.id\/info\/lp-test-landing-page#primaryimage","url":"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453.png","contentUrl":"https:\/\/www.seva.id\/info\/wp-content\/uploads\/2024\/05\/1029x453.png","width":1029,"height":453},{"@type":"BreadcrumbList","@id":"https:\/\/www.seva.id\/info\/lp-test-landing-page#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.seva.id\/info\/"},{"@type":"ListItem","position":2,"name":"TEST Landing Page (JP)"}]},{"@type":"WebSite","@id":"https:\/\/www.seva.id\/info\/#website","url":"https:\/\/www.seva.id\/info\/","name":"SEVA","description":"Promo Jelas dari Awal Cicilan Kredit Mobil Mulai dari 0%!","alternateName":"SEVA","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.seva.id\/info\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.seva.id\/info\/wp-json\/wp\/v2\/pages\/4028","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.seva.id\/info\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.seva.id\/info\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.seva.id\/info\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/www.seva.id\/info\/wp-json\/wp\/v2\/comments?post=4028"}],"version-history":[{"count":13,"href":"https:\/\/www.seva.id\/info\/wp-json\/wp\/v2\/pages\/4028\/revisions"}],"predecessor-version":[{"id":4714,"href":"https:\/\/www.seva.id\/info\/wp-json\/wp\/v2\/pages\/4028\/revisions\/4714"}],"wp:attachment":[{"href":"https:\/\/www.seva.id\/info\/wp-json\/wp\/v2\/media?parent=4028"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}