{"id":2545,"date":"2024-01-09T14:51:34","date_gmt":"2024-01-09T07:51:34","guid":{"rendered":"http:\/\/cpanel.jblstore.co.id\/?page_id=2545"},"modified":"2024-11-07T15:22:46","modified_gmt":"2024-11-07T08:22:46","slug":"e-warranty","status":"publish","type":"page","link":"https:\/\/jblstore.co.id\/en\/e-warranty\/","title":{"rendered":"E-Warranty"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"2545\" class=\"elementor elementor-2545\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7bc08d0 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"7bc08d0\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-966a846\" data-id=\"966a846\" 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-01ccfbd elementor-widget elementor-widget-shortcode\" data-id=\"01ccfbd\" 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<div class=\"elementor-shortcode\">\n    <style>\n        .elementor-column-gap-default > .elementor-column > .elementor-element-populated {\n            padding: 0 !important;\n        }\n        #title .container {\n            padding-top: 0 !important;\n        }\n        .jumbotron {\n            \/* width: 100vw; *\/\n            margin-bottom: 20px;\n            background: #ffffff url('\/wp-content\/uploads\/2024\/06\/warranty_mobile.webp') 100% center \/ cover no-repeat;\n            min-height: 400px;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            \/* max-width: 970px; *\/\n        }\n        @media (min-width: 767px) {\n            .jumbotron {\n                background: #ffffff url('\/wp-content\/uploads\/2024\/06\/warranty_desktop.webp') 100% center \/ cover no-repeat;\n            }\n        }\n        .jumbotron-container {\n            margin-left: auto;\n            margin-right: auto;\n            max-width: 1240px;\n            padding 0 5px;\n            display: flex;\n            flex-direction: column-reverse;\n            gap: 10px;\n            padding: 30px 20px;\n        }\n        @media (min-width: 767px) {\n            .jumbotron-container {\n                padding: 0 20px;\n                flex-direction: row;\n            }\n        }\n        .e-warranty-card {\n            padding: 45px;\n            border-radius: 25px;\n            box-shadow: 1px 1px 21px 0px rgb(0 0 0 \/ 10%);\n            -webkit-box-shadow: 1px 1px 21px 0px rgb(0 0 0 \/ 10%);\n            -moz-box-shadow: 1px 1px 21px 0px rgba(0,0,0,0.1);\n            max-width: 600px;\n            margin-left: auto;\n            margin-right: auto;\n            margin-bottom: 20px;\n            text-align: center;\n            background-color: white;\n        }\n        @media (max-width: 767px) {\n            .e-warranty-card {\n                padding: 10px;\n                margin: 20px;\n            }\n        }\n\n        .e-warranty-img {\n            max-width: 320px;\n        }\n\n        .e-warranty-content-container {\n            display: flex;\n            flex-direction: column;\n            padding: 20px 10px 10px 10px;\n            justify-content: space-between;\n            align-items: center;\n        }\n        \n        @media (min-width: 768px) {\n            .e-warranty-content-container {\n                height: 300px;\n                align-items: normal;\n            }\n        }\n\n        .e-warranty-heading {\n            font-family: 'Kostic - Roc Grotesk Wide ExtraBold';\n            font-weight: bold;\n            color: #FFFFFF;\n            font-size: 2rem;\n            text-transform: uppercase;\n        }\n        @media (min-width: 768px) {\n            .e-warranty-heading {\n                margin-bottom: 0.5rem;\n                font-family: 'Kostic - Roc Grotesk Wide ExtraBold';\n                font-size: 4rem;\n            }\n        }\n        .table-ims {\n            font-size: 16px;\n        }\n        .e-warranty-paragraph {\n            margin: 0;\n            color: #FFFFFF;\n            font-family: 'Open Sans';\n        }\n        @media (max-width: 767px) {\n            .e-warranty-paragraph {\n                font-size: 12px;\n                margin-bottom: 20px;\n            }\n        }\n\n        .e-warranty-button-register {\n            width: 90%;\n            margin-left: auto;\n            margin-right: auto;\n            max-width: 320px;\n            color: #353535 !important;\n            \/* background: linear-gradient(251.5deg, #F04C24 46.51%, #F88D2A 99.75%); *\/\n            background: white !important;\n            border-radius: 10px;\n            border: none;\n            font-family: Grostesk-Regular !important;\n            font-weight: 600 !important;\n        }\n\n        .e-warranty-button-register:hover {\n            background: var(--colorDark) !important;\n            color: white !important;\n        }\n\n        .btn-submit-daftarkan-garansi {\n            border: 1px solid #ddd !important;\n        }\n\n        \/* #region form *\/\n        .title-e-warranty-card {\n            font-family: \"Kostic - Roc Grotesk Bold\";\n            font-size: \"1.8rem\";\n            margin-top: 40px;\n            margin-bottom: 10px;\n        }\n        .e-warranty-welcome {\n            display: none;\n        }\n        .e-warranty-welcome.active {\n            display: block;\n        }\n        .e-warranty-wrapper {\n            margin: 3rem 0 2rem 0;\n        }\n        @media (min-width: 767px) {\n            .e-warranty-wrapper {\n                margin: 4.5rem 0 4rem 0;\n            }\n        }\n        .e-warranty-form-container {\n            display: none;\n        }\n        .e-warranty-form-container.active {\n            display: block;\n        }\n        .my-heading {\n            margin-top: 20px;\n            text-align: center;\n            font-family: \"Kostic - Roc Grotesk Regular\";\n        }\n        .my-subheading-1 {\n            text-align: left;\n            font-family: \"Kostic - Roc Grotesk Bold\";\n        }\n        .my-subheading {\n            text-align: left;\n            margin-top: 30px;\n        }\n        .my-field {\n            width: 100%;\n            text-align: left;\n            margin-bottom: 20px;\n        }\n        .my-field > div {\n            font-family: \"Kostic - Roc Grotesk Bold\";\n        }\n        .my-text {\n            width: 100%;\n            font-family: 'Open Sans';\n        }\n        .my-radio-container {\n            margin-top: 5px;\n        }\n        .my-radio-container .my-radio:not(:last-child){\n            margin-right: 10px;\n        }\n        .my-radio-span {\n            font-size: 0.9em;\n        }\n\n        .validation-result {\n            font-size: 0.8em;\n            font-family: 'Open Sans';\n            position: absolute;\n            top: 100%;\n            left: 0.75em;\n        }\n        .validation-result.success {\n            color: green;\n        }\n        .validation-result.error {\n            color: red;\n        }\n\n        .serial-number-container {\n            position: relative;\n            margin-bottom: 20px;\n        }\n        .btn-check-serial-number {\n            position: absolute;\n            right: 0;\n            padding: 7px 18px;\n            background-color: var(--colorMain);\n            color: white;\n            font-weight: bold;\n            font-family: \"Kostic - Roc Grotesk Regular\";\n        }\n        .btn-check-serial-number.disabled {\n            pointer-events: none;\n            opacity: 0.8;\n        }\n        .bg-whitesmoke {\n            background-color: whitesmoke !important;\n        }\n        \/* #endregion form *\/\n    <\/style>\n    <style>\n        \/* replace *\/\n        .row {\n            margin-left: -16px;\n            margin-right: -16px;\n        }\n        .col-12 {\n            padding-left: 16px;\n            padding-right: 16px;\n        }\n        @media (min-width: 1200px){\n            .col-lg-6 {\n                padding-left: 16px;\n                padding-right: 16px;\n            }\n        }\n\n        .e-warranty-bg {\n            background-image: url('\/wp-content\/uploads\/2024\/01\/bg-e-warranty.png');\n            background-position: center;\n            background-size: cover;\n            background-repeat: no-repeat;\n        }\n        .table-ims tbody td {\n            text-align: left;\n            min-width: 155px;\n            vertical-align: top;\n            font-family: 'Open Sans';\n            font-size: 14px;\n        }\n        @media (max-width: 767px) {\n            .table-ims tbody td {\n                min-width: 110px;\n                font-size: 12px;\n            }\n        }\n        .col-12 {\n            padding-left: 0 !important;\n            padding-right: 0 !important;\n        }\n        .row {\n            margin-left: 0 !important;\n            margin-right: 0 !important;\n        }\n    <\/style>\n    <div>\n        <div class=\"e-warranty-welcome active\">\n            <div class=\"jumbotron\">\n                <div class=\"jumbotron-container\">\n                    <div class=\"e-warranty-content-container\">\n                        <h3 class=\"e-warranty-heading\">E-Warranty<\/h3>\n                        <p class=\"e-warranty-paragraph\">Make sure your JBL product meets the requirements and plan for protection by adding JBL warranty extension service today!<\/p>\n                        <button class=\"button alt e-warranty-button-register btn-daftarkan-garansi\">Register Warranty<\/button>\n                    <\/div>\n                    <div>\n                        <picture>\n                            <!-- <source \/> -->\n                            <img decoding=\"async\" src=\"https:\/\/jblstore.co.id\/wp-content\/uploads\/2024\/06\/e_warranty_illustration_desktop.webp\" alt=\"JBL E-Warranty Illustration\"  \/>\n                        <\/picture>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"row e-warranty-wrapper\">\n                <!-- IMS -->\n                <div class=\"col-12 col-lg-6\">\n                    <div class=\"e-warranty-card\">\n                        <div style=\"position: relative;height: 250px;border-radius:12px;overflow:hidden;margin:10px;\">\n                            <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m14!1m8!1m3!1d15866.473527047914!2d106.83893079364015!3d-6.1818029369813825!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f5b6507b3219%3A0x57823e6d4db7f5f7!2sIMS%20Indonesia%20Service%20Center!5e0!3m2!1sen!2sid!4v1699607366196!5m2!1sen!2sid\" width=\"600\" height=\"260\" style=\"border:0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\n                        <\/div>\n                        <div class=\"e-warranty-content-container\">\n                            <h3 class=\"title-e-warranty-card\">Pusat Servis IMS Indonesia<\/h3>\n                            <table class=\"table-ims\">\n                                <tbody>\n                                    <tr>\n                                        <td><b>Address: <\/b><\/td>\n                                        <td>Jl. Kramat Kwitang No.13, RT.1\/RW.7, Kwitang, Kec. Senen, Kota Jakarta Pusat, Jakarta 10420.<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><b>Phone: <\/b><\/td>\n                                        <td>021 - 26538580 \/ 26538581<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><b>Web: <\/b><\/td>\n                                        <td>www.imsindo.co.id<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><b>Monday - Friday: <\/b><\/td>\n                                        <td>09.30 - 16.30<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><b>Saturday: <\/b><\/td>\n                                        <td>09.30 - 12.30<\/td>\n                                    <\/tr>\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n                    <\/div>\n                <\/div>\n\n                <!-- Car Audio Service -->\n                <div class=\"col-12 col-lg-6\">\n                    <div class=\"e-warranty-card\">\n                        <div style=\"position: relative;height: 250px;border-radius:12px;overflow:hidden;margin:10px;\">\n                            <iframe src=\"https:\/\/www.google.com\/maps\/embed?pb=!1m18!1m12!1m3!1d247.91975136382163!2d106.84384458414871!3d-6.168768139759208!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x2e69f710321f0c6d%3A0xd3f4807d8cd19318!2sService%20Center%20SBM%20-%20Nakamichi%20Karaoke%20%26%20Audiobank!5e0!3m2!1sid!2sid!4v1717740772808!5m2!1sid!2sid\" width=\"600\" height=\"260\" style=\"border:0; position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" allowfullscreen=\"\" loading=\"lazy\" referrerpolicy=\"no-referrer-when-downgrade\"><\/iframe>\n                        <\/div>\n                        <div class=\"e-warranty-content-container\">\n                            <h3 class=\"title-e-warranty-card\">Pusat Servis Audio Mobil<\/h3>\n                            <table class=\"table-ims\">\n                                <tbody>\n                                    <tr>\n                                        <td><b>Address: <\/b><\/td>\n                                        <td>Jl. Kepu Selatan No. 4, RT. 13\/ RW. 1 Bungur, Kec. Senen, Kota Jakarta Pusat, Jakarta 10460<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><b>Phone 1: <\/b><\/td>\n                                        <td>+62 21 4287 1224<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><b>Phone 2: <\/b><\/td>\n                                        <td>+62 21 2653 8555<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><b>Email: <\/b><\/td>\n                                        <td>admin.sc.kepu@sumberberkat.com<\/td>\n                                    <\/tr>\n                                    <tr>\n                                        <td><b>WhatsApp: <\/b><\/td>\n                                        <td><a href=\"https:\/\/wa.me\/6289515961181\" target=\"_blank\">+62 8951-5961-181<\/a><\/td>\n                                    <\/tr>\n                                <\/tbody>\n                            <\/table>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            <\/div>\n        <\/div>\n        \n        <div class=\"e-warranty-form-container\">\n            <h2 class=\"my-heading\">JBL E-Warranty<\/h2>\n            <div class=\"e-warranty-card\">\n                <h3 class=\"my-subheading-1\">Contact Information<\/h3>\n                <form id=\"eWarrantyForm\" action=\"\">\n                    <label class=\"my-field\">\n                        <div>Name<\/div>\n                        <input type=\"text\" name=\"customerName\" class=\"my-text\" required>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Gender<\/div>\n                        <div class=\"my-radio-container\">\n                            <label class=\"my-radio\">\n                                <input type=\"radio\" name=\"customerGender\" value=\"Male\" required>\n                                <span class=\"my-radio-span\">Male<\/span>\n                            <\/label>\n                            <label class=\"my-radio\">\n                                <input type=\"radio\" name=\"customerGender\" value=\"Female\" required>\n                                <span class=\"my-radio-span\">Female<\/span>\n                            <\/label>\n                        <\/div>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Tanggal lahir'<\/div>\n                        <input type=\"date\" name=\"dateofbirth\" class=\"my-text\" required>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Address<\/div>\n                        <input type=\"text\" name=\"customerAddress\" class=\"my-text\" required>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Zip Code<\/div>\n                        <input type=\"text\" name=\"customerZipCode\" class=\"my-text\" required>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Phone<\/div>\n                        <input type=\"text\" name=\"customerPhoneNumber\" class=\"my-text\" required>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Email<\/div>\n                        <input type=\"email\" name=\"customerEmail\" class=\"my-text\" required>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Store<\/div>\n                        <div id=\"storeContainer\">\n                            <select id=\"store\" class=\"my-text\" name=\"imsStoreId\" required style=\"width: 100%;\">\n                            \n                            <\/select>\n                        <\/div>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Store City<\/div>\n                        <input type=\"hidden\" name=\"imsCityId\" value=\"\" \/>\n                        <div id=\"storeCityContainer\">\n                            <select id=\"storeCity\" class=\"my-text\" name=\"imsStoreCityId\" required style=\"width: 100%;\">\n                            \n                            <\/select>\n                        <\/div>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Purchase Date<\/div>\n                        <input type=\"date\" name=\"purchaseDate\" class=\"my-text\" required>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Invoice Number<\/div>\n                        <input type=\"text\" name=\"invoiceNumber\" class=\"my-text\" required>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Transaction Id<\/div>\n                        <input type=\"text\" name=\"transactionId\" class=\"my-text\" required>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Upload Invoice<\/div>\n                        <input type=\"file\" name=\"image\" class=\"my-text\" required>\n                        <img decoding=\"async\" id=\"imagePreview\" src=\"\" width=\"100%\" height=\"auto\" \/>\n                    <\/label>\n\n                    <h3 class=\"my-subheading\">Warranty Registration<\/h3>\n                    <label class=\"my-field\">\n                        <div>Serial Number<\/div>\n                        <div class=\"serial-number-container\">\n                            <input type=\"text\" name=\"serialNumber\" class=\"my-text\" required>\n                            <span class=\"btn-check-serial-number\">Check Serial Number<\/span>\n                            <div class=\"validation-result\" style=\"display: none;\"><\/div>\n                        <\/div>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Model and Color<\/div>\n                        <input type=\"text\" name=\"productName\" class=\"my-text bg-whitesmoke\" value=\"\" required readonly>\n                    <\/label>\n                    <label class=\"my-field\">\n                        <div>Subscribe to JBL<\/div>\n                        <div class=\"my-radio-container\">\n                            <label class=\"my-radio\">\n                                <input type=\"radio\" name=\"allowNews\" value=\"true\" required>\n                                <span class=\"my-radio-span\">Yes<\/span>\n                            <\/label>\n                            <label class=\"my-radio\">\n                                <input type=\"radio\" name=\"allowNews\" value=\"false\" required>\n                                <span class=\"my-radio-span\">No<\/span>\n                            <\/label>\n                        <\/div>\n                    <\/label>\n                    <button id=\"btnSubmit\" class=\"button alt e-warranty-button-register btn-submit-daftarkan-garansi\">Register Warranty<\/button>\n                <input type=\"hidden\" name=\"trp-form-language\" value=\"en\"\/><\/form>\n                        \n            <\/div>\n        <\/div>\n\n        <script>\n            const formattedDate = (d) => {\n                if(!d){\n                    return ''\n                }\n\n                const zeroPad = function(num, size) {\n                    var s = num+\"\";\n                    while (s.length < size) s = \"0\" + s;\n                    return s;\n                }\n                const listMonth = [\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"];\n\n                const date = new Date(d)\n                const day = zeroPad(date.getDate(), 2);\n                const monthName = listMonth[date.getMonth()]\n                const year = zeroPad(date.getFullYear(), 2);\n\n                return `${day} ${monthName} ${year}`\n            }\n\n            const toBase64 = file => new Promise((resolve, reject) => {\n                const reader = new FileReader();\n                reader.readAsDataURL(file);\n                reader.onload = () => resolve(reader.result);\n                reader.onerror = error => reject(error);\n            });\n\n            const body = document.querySelector(\"body\")\n            body.classList.add(\"e-warranty-bg\")\n\n            \n            const inputImage = document.querySelector(\"input[name=image]\")\n            const btnCheck = document.querySelector(\".btn-check-serial-number\")\n            const btnStartRegis = document.querySelector(\".btn-daftarkan-garansi\")\n            const eWarrantyWelcome = document.querySelector(\".e-warranty-welcome\")\n            const eWarrantyFormContainer = document.querySelector(\".e-warranty-form-container\")\n            const eWarrantyForm = document.querySelector(\"#eWarrantyForm\")\n\n            inputImage.addEventListener(\"change\", async function(e){\n                \/\/ if(e.target.files.length > 0){\n                    const imgBase64 = await toBase64(e.target.files[0])\n                    console.log(imgBase64)\n                    console.log(document.querySelector(\"#imagePreview\"))\n                    document.querySelector(\"#imagePreview\").src = imgBase64\n                    \/\/ jQuery(\"input[name=imagePreview]\").show()\n                    \/\/ jQuery(\"input[name=imagePreview]\").attr(\"src\", imgBase64)\n                \/\/ }\n            })\n\n            if(btnCheck){\n                btnCheck.addEventListener(\"click\", function(){\n                    jQuery(\"input[name=serialNumber]\").attr(\"disabled\", \"\")\n                    jQuery(btnCheck).addClass(\"disabled\")\n                    const textBefore = jQuery(btnCheck).text()\n                    jQuery(btnCheck).text(\"Checking...\")\n                    const serialNumber = jQuery(\"input[name=serialNumber]\").val()\n                    jQuery.ajax({\n                        type: \"post\",\n                        url: \"https:\/\/jblstore.co.id\/wp-admin\/admin-ajax.php?action=validateProduct\",\n                        data: {\n                            serial_number: serialNumber\n                        },\n                        success: function(res){\n                            const resJson = JSON.parse(res)\n                            jQuery(\".validation-result\").show()\n                            if(resJson.statusCode === 200 && resJson.data) {\n                                jQuery(\".img-original\").show()\n                                jQuery(\".img-not-listed\").hide()\n\n                                if(resJson.data.serialNumberExist){\n                                    jQuery(\".validation-result\").text(`Success`)\n                                    jQuery(\".validation-result\").addClass(\"success\")\n                                    jQuery(\".validation-result\").removeClass(\"error\")\n                                    jQuery(\"input[name=productName]\").val(resJson.data.description)\n                                } else {\n                                    jQuery(\".validation-result\").text(`Serial Number '${serialNumber}' is not listed`)\n                                    jQuery(\".validation-result\").removeClass(\"success\")\n                                    jQuery(\".validation-result\").addClass(\"error\")\n                                    jQuery(\"input[name=productName]\").val(\"\")\n                                }\n                            } else {\n                                jQuery(\".validation-result\").text(`Something went wrong, please try again`)\n                                jQuery(\".validation-result\").removeClass(\"success\")\n                                jQuery(\".validation-result\").addClass(\"error\")\n                                jQuery(\"input[name=productName]\").val(\"\")\n                            }\n\n                            jQuery(\"input[name=serialNumber]\").removeAttr(\"disabled\")\n                            jQuery(btnCheck).removeClass(\"disabled\")\n                            jQuery(btnCheck).text(textBefore)\n                        }, error: function (xhr, status, error) {\n                            console.log(\"Something went wrong\", xhr, status, error)\n                            jQuery(\".validation-result\").text(`Something went wrong, please try again`)\n                            jQuery(\".validation-result\").removeClass(\"success\")\n                            jQuery(\".validation-result\").addClass(\"error\")\n                            jQuery(\"input[name=productName]\").val(\"\")\n\n                            jQuery(\"input[name=serialNumber]\").removeAttr(\"disabled\")\n                            jQuery(btnCheck).removeClass(\"disabled\")\n                            jQuery(btnCheck).text(textBefore)\n                        }\n                    })\n                })\n            }\n\n            btnStartRegis.addEventListener(\"click\", function(){\n                console.log(\"btnStartRegis clicked\")\n                eWarrantyWelcome.classList.remove(\"active\")\n                eWarrantyFormContainer.classList.add(\"active\")\n            })\n\n            eWarrantyForm.addEventListener(\"submit\", async function(e){\n                console.log(\"submit\")\n                e.preventDefault()\n\n                const customerName = jQuery(\"input[name=customerName]\").val()\n                const customerGender = jQuery(\"input[name=customerGender]:checked\").val()\n                const customerAddress = jQuery(\"input[name=customerAddress]\").val()\n                const customerZipCode = jQuery(\"input[name=customerZipCode]\").val()\n                const customerPhoneNumber = jQuery(\"input[name=customerPhoneNumber]\").val()\n                const customerEmail = jQuery(\"input[name=customerEmail]\").val()\n                \n                const imsStoreId = jQuery(\"#store\").val()\n                const imsStoreName = jQuery(\"#store\").find(':selected').data('storename');\n                const imsCityId = jQuery(\"#storeCity\").val()\n                const imsStoreCityId = jQuery(\"#storeCity\").find(':selected').val();\n\n                const purchaseDate = formattedDate(jQuery(\"input[name=purchaseDate]\").val())\n                const invoiceNumber = jQuery(\"input[name=invoiceNumber]\").val()\n                const transactionId = jQuery(\"input[name=transactionId]\").val()\n                const image = await toBase64(document.querySelector(\"input[name=image]\").files[0])\n                const serialNumber = jQuery(\"input[name=serialNumber]\").val()\n                const productName = jQuery(\"input[name=productName]\").val()\n                const allowNews = jQuery(\"input[name=allowNews]:checked\").val()\n                const dateofbirth = formattedDate(jQuery(\"input[name=dateofbirth]\").val())\n\n                if(!productName){\n                    alert(\"Please check serial number to see model and color\")\n                    return\n                }\n\n                if (!dateofbirth) {\n                    alert(\"Please choose date of birth\")\n                    return\n                }\n\n                const formData = {\n                    customerName,\n                    customerGender,\n                    customerAddress,\n                    customerZipCode,\n                    customerPhoneNumber,\n                    customerEmail,\n                    imsStoreId,\n                    imsStoreName,\n                    imsCityId,\n                    imsStoreCityId,\n                    purchaseDate,\n                    invoiceNumber,\n                    transactionId,\n                    image,\n                    serialNumber,\n                    productName,\n                    allowNews,\n                    dateofbirth,\n                }\n\n                \/\/ const jsonStringify = JSON.stringify(formData);\n                jQuery(\"#eWarrantyForm\").css(\"pointer-events\", \"none\")\n                const btnSubmitTextBefore = jQuery(\"#btnSubmit\").text()\n                jQuery(\"#btnSubmit\").text(\"Registering...\")\n\n                let clientIp = null;\n\n                jQuery.getJSON(\"https:\/\/api.ipify.org?format=json\")\n                    .done(function(data) {\n                        clientIp = data.ip;\n                        console.log(\"UserIP Address\");\n                    })\n                    .fail(function(jqXHR, textStatus, errorThrown) {\n                        console.error(\"Gagal ambil IP:\", textStatus, errorThrown);\n                    });\n                \n                jQuery.ajax({\n                    type: \"post\",\n                    url: \"https:\/\/jblstore.co.id\/wp-admin\/admin-ajax.php?action=jblweb_ajax_register_warranty\",\n                    data: {\n                        customerName,\n                        customerGender,\n                        customerAddress,\n                        customerZipCode,\n                        customerPhoneNumber,\n                        customerEmail,\n                        imsStoreId,\n                        imsStoreName,\n                        imsCityId,\n                        imsStoreCityId,\n                        purchaseDate,\n                        invoiceNumber,\n                        transactionId,\n                        image,\n                        serialNumber,\n                        productName,\n                        allowNews,\n                        clientIp,\n                        dateofbirth,\n                    },\n                    success: function(res) {\n                        console.log(res);\n\n                        if (res.data && res.data.warranty_response) {\n                            const warrantyResponse = res.data.warranty_response;\n\n                            \/\/ convert body string to lowercase and check if contains berhasil\n                            if (warrantyResponse.body && warrantyResponse.body.toLowerCase().includes(\"berhasil\")) {\n                                showModalAlert('Info', 'Your data has been submitted');\n                            } else {\n                                \/\/ pesan dari wp_send_json_error\n                                showModalAlert('Error', warrantyResponse?.body || \"Something went wrong, please try again\");\n                            }\n                        } else {\n                            showModalAlert('Error', res.data?.message || \"Something went wrong, please try again\");\n                        }\n\n                        jQuery(\"#eWarrantyForm\").css(\"pointer-events\", \"auto\");\n                        jQuery(\"#eWarrantyForm\").css(\"opacity\", \"1\");\n                        jQuery(\"#btnSubmit\").text(btnSubmitTextBefore);\n\n                        \/\/ Reset form setelah submit\n                        jQuery(\"#eWarrantyForm\")[0].reset();\n                        jQuery(\"#imagePreview\").attr(\"src\", \"\");\n                    },\n                    error: function(xhr, status, error) {\n                        console.log(\"Something went wrong\", xhr, status, error);\n\n                        let message = \"Something went wrong, please try again\";\n\n                        try {\n                            \/\/ Coba parse JSON dari responseText\n                            let res = JSON.parse(xhr.responseText);\n                            if (res?.data?.message) {\n                                message = res.data.message;\n                            }\n                        } catch (e) {\n                            console.warn(\"Failed to parse error response JSON\");\n                        }\n\n                        showModalAlert('Error', message);\n\n                        jQuery(\"#eWarrantyForm\").css(\"pointer-events\", \"auto\");\n                        jQuery(\"#eWarrantyForm\").css(\"opacity\", \"1\");\n                        jQuery(\"#btnSubmit\").text(btnSubmitTextBefore);\n                    }\n                })\n\n                return false;\n            })\n\n            \/\/select2\n            function formatRepoStore (repo) {\n                if (repo.loading) {\n                    return repo.text;\n                }\n\n                const $container = jQuery(\n                    \"<div class='select2-result-repository clearfix'>\" +\n                        \"<div class='select2-result-repository__meta'>\" +\n                            \"<div class='select2-result-repository__title'><\/div>\" +\n                        \"<\/div>\" +\n                    \"<\/div>\"\n                );\n\n                $container.find(\".select2-result-repository__title\").text(repo.storeName);\n\n                return $container;\n            }\n\n            function formatRepoStoreSelection (repo) {\n                const text = repo.storeName\n                jQuery(repo.element).attr('data-storename', repo.storeName);\n                return repo.storeName || repo.text;\n            }\n\n            function formatRepoCity (repo) {\n                if (repo.loading) {\n                    return repo.text;\n                }\n\n                const $container = jQuery(\n                    \"<div class='select2-result-repository clearfix'>\" +\n                        \"<div class='select2-result-repository__meta'>\" +\n                            \"<div class='select2-result-repository__title'><\/div>\" +\n                        \"<\/div>\" +\n                    \"<\/div>\"\n                );\n\n                $container.find(\".select2-result-repository__title\").text(repo.cityName);\n\n                return $container;\n            }\n\n            function formatRepoCitySelection (repo) {\n                const text = repo.cityName\n                jQuery(repo.element).attr('data-cityname', repo.cityName);\n                return repo.cityName || repo.text;\n            }\n\n            jQuery(document).ready(function() {\n                jQuery('#store').select2({\n                    placeholder: 'Search Store',\n                    dropdownParent: jQuery('#storeContainer'),\n                    language: {\n                        searching: function() {\n                            return \"Searching...\";\n                        }\n                    },\n                    ajax: {\n                        url: \"https:\/\/jblstore.co.id\/wp-admin\/admin-ajax.php?action=jblweb_get_ims_stores\",\n                        dataType: 'json',\n                        delay: 250,\n                        data: function (params) {\n                            return {\n                                filter: params.term,\n                                page: params.page\n                            };\n                        },\n                        processResults: function (data, params) {\n                            params.page = params.page || 1;\n\n                            const dataAdded = data.map(a => {\n                                return {\n                                    ...a,\n                                    id: a.storeId\n                                }\n                            })\n\n                            return {\n                                results: dataAdded,\n                                pagination: {\n                                    more: (params.page * 2) < data.total_count\n                                }\n                            };\n                        },\n                        cache: true\n                    },\n                    minimumInputLength: 1,\n                    templateResult: formatRepoStore,\n                    templateSelection: formatRepoStoreSelection\n                });\n\n                jQuery('#storeCity').select2({\n                    placeholder: 'Search City',\n                    dropdownParent: jQuery('#storeCityContainer'),\n                    language: {\n                        searching: function() {\n                            return \"Searching...\";\n                        }\n                    },\n                    ajax: {\n                        url: \"https:\/\/jblstore.co.id\/wp-admin\/admin-ajax.php?action=jblweb_get_ims_cities\",\n                        dataType: 'json',\n                        delay: 250,\n                        data: function (params) {\n                            return {\n                                filter: params.term,\n                                page: params.page\n                            };\n                        },\n                        processResults: function (data, params) {\n                            params.page = params.page || 1;\n\n                            const dataAdded = data.map(a => {\n                                return {\n                                    ...a,\n                                    id: a.cityId\n                                }\n                            })\n\n                            return {\n                                results: dataAdded,\n                                pagination: {\n                                    more: (params.page * 2) < data.total_count\n                                }\n                            };\n                        },\n                        cache: true\n                    },\n                    minimumInputLength: 1,\n                    templateResult: formatRepoCity,\n                    templateSelection: formatRepoCitySelection\n                });\n\n            });\n        <\/script>\n    <\/div>\n\n    <\/div>\n\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>","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-2545","page","type-page","status-publish","hentry","no-post-thumbnail"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v23.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>E-Warranty<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jblstore.co.id\/en\/e-warranty\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"E-Warranty\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jblstore.co.id\/en\/e-warranty\/\" \/>\n<meta property=\"og:site_name\" content=\"JBL Store\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-07T08:22:46+00:00\" \/>\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=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jblstore.co.id\/en\/e-warranty\/\",\"url\":\"https:\/\/jblstore.co.id\/en\/e-warranty\/\",\"name\":\"E-Warranty - JBL Store\",\"isPartOf\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\"},\"datePublished\":\"2024-01-09T07:51:34+00:00\",\"dateModified\":\"2024-11-07T08:22:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/e-warranty\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jblstore.co.id\/en\/e-warranty\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jblstore.co.id\/en\/e-warranty\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jblstore.co.id\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"E-Warranty\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#website\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"name\":\"JBL Store\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jblstore.co.id\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#organization\",\"name\":\"JBL Store\",\"url\":\"https:\/\/jblstore.co.id\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\",\"url\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"contentUrl\":\"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png\",\"width\":70,\"height\":52,\"caption\":\"JBL Store\"},\"image\":{\"@id\":\"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/JBLAudioIndonesia\/\",\"https:\/\/www.instagram.com\/jblindonesia\/\",\"https:\/\/www.youtube.com\/c\/JBLIndonesia\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"E-Warranty","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:\/\/jblstore.co.id\/en\/e-warranty\/","og_locale":"en_US","og_type":"article","og_title":"E-Warranty","og_url":"https:\/\/jblstore.co.id\/en\/e-warranty\/","og_site_name":"JBL Store","article_publisher":"https:\/\/www.facebook.com\/JBLAudioIndonesia\/","article_modified_time":"2024-11-07T08:22:46+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/jblstore.co.id\/en\/e-warranty\/","url":"https:\/\/jblstore.co.id\/en\/e-warranty\/","name":"E-Warranty - JBL Store","isPartOf":{"@id":"https:\/\/jblstore.co.id\/en\/#website"},"datePublished":"2024-01-09T07:51:34+00:00","dateModified":"2024-11-07T08:22:46+00:00","breadcrumb":{"@id":"https:\/\/jblstore.co.id\/en\/e-warranty\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jblstore.co.id\/en\/e-warranty\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jblstore.co.id\/en\/e-warranty\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jblstore.co.id\/"},{"@type":"ListItem","position":2,"name":"E-Warranty"}]},{"@type":"WebSite","@id":"https:\/\/jblstore.co.id\/en\/#website","url":"https:\/\/jblstore.co.id\/en\/","name":"JBL Store","description":"","publisher":{"@id":"https:\/\/jblstore.co.id\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jblstore.co.id\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jblstore.co.id\/en\/#organization","name":"JBL Store","url":"https:\/\/jblstore.co.id\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/","url":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","contentUrl":"\/wp-content\/uploads\/2025\/11\/cropped-logo-jbl-1536x1131_cropped.png","width":70,"height":52,"caption":"JBL Store"},"image":{"@id":"https:\/\/jblstore.co.id\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/JBLAudioIndonesia\/","https:\/\/www.instagram.com\/jblindonesia\/","https:\/\/www.youtube.com\/c\/JBLIndonesia"]}]}},"_links":{"self":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/2545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/comments?post=2545"}],"version-history":[{"count":9,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/2545\/revisions"}],"predecessor-version":[{"id":106388,"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/pages\/2545\/revisions\/106388"}],"wp:attachment":[{"href":"https:\/\/jblstore.co.id\/en\/wp-json\/wp\/v2\/media?parent=2545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}