{"id":4146,"date":"2024-12-16T13:13:42","date_gmt":"2024-12-16T13:13:42","guid":{"rendered":"https:\/\/onyxautotransport.com\/onyxautotransport\/?page_id=4146"},"modified":"2025-12-09T14:55:47","modified_gmt":"2025-12-09T14:55:47","slug":"quote","status":"publish","type":"page","link":"https:\/\/onyxautotransport.com\/onyxautotransport\/quote\/","title":{"rendered":"quote"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4146\" class=\"elementor elementor-4146\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-7012901 elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"7012901\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-49163de\" data-id=\"49163de\" data-element_type=\"column\" data-e-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-f449c40 elementor-widget elementor-widget-heading\" data-id=\"f449c40\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Order quote<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-0fe5170 elementor-widget elementor-widget-shortcode\" data-id=\"0fe5170\" data-element_type=\"widget\" data-e-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\">    <link href=\"https:\/\/cdn.jsdelivr.net\/npm\/select2@4.1.0-rc.0\/dist\/css\/select2.min.css\" rel=\"stylesheet\" \/>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/select2@4.1.0-rc.0\/dist\/js\/select2.min.js\"><\/script>\n    <script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=AIzaSyBLjj60EElGLOVqw3_jzr5xrIUWKyylm8s&libraries=places\" async\n  defer><\/script>\n    <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\/dist\/flatpickr.min.css\">\n   <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/sweetalert2@11\"><\/script>\n    <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/flatpickr\"><\/script>\n    <div class=\"quote-card\" id=\"calculation-shortcode\">\n        <h2>Instant Car Shipping Quote<\/h2>\n        <div class=\"tabs\">\n          <button class=\"tab-btn active\" data-tab=\"destination\">Destination<\/button>\n          <button class=\"tab-btn\" data-tab=\"vehicle\">Vehicle<\/button>\n          <button class=\"tab-btn\" data-tab=\"date\">Date<\/button>\n        <\/div>\n        \n        <div class=\"tab-content active\" id=\"destination\">\n            <form>\n                <label for=\"from\" class=\"custom-label\">Transport car FROM<\/label>\n                <input type=\"text\" placeholder=\"ZIP or city\" id=\"from\" required \/>\n\t\t\t\t<span class=\"error-message\" style=\"display: none; color: red;\">This field is required.<\/span>\n                <label for=\"to\" class=\"custom-label\">Transport car TO<\/label>\n                <input type=\"text\" placeholder=\"ZIP or city\" id=\"to\" required \/>\n        <span class=\"error-message\" style=\"display: none; color: red;\">This field is required.<\/span>\n                <label>Transport type<\/label>\n                <div class=\"radio-group\">\n                    <input type=\"radio\" pautofocus=\"\" class=\"p-element\" value=\"1\" id=\"open\"name=\"transportType\" aria-checked=\"true\" data-pc-section=\"hiddenInput\" checked >\n                    <label for=\"open\">Open<\/label>\n                    <input type=\"radio\" pautofocus=\"\" class=\"p-element\" value=\"2\" id=\"enclosed\" name=\"transportType\" aria-checked=\"false\" data-pc-section=\"hiddenInput\">\n                    <label for=\"enclosed\">Enclosed<\/label>\n                <\/div>\n                <button type=\"button\" id=\"next-firsts\" class=\"next-btn next-first\" data-next=\"vehicle\">Vehicle details \u2192<\/button>\n\t\t\t\t\n            <\/form>\n          \n        <\/div>\n    \n        <div class=\"tab-content\" id=\"vehicle\">\n            <form>\n                <label for=\"year\" class=\"custom-label\">Vehicle year<\/label>\n                <select id=\"year\" required>\n                  <option value=\"\">Select<\/option>\n                   <option value=\"2026\">2026<\/option><option value=\"2025\">2025<\/option><option value=\"2024\">2024<\/option><option value=\"2023\">2023<\/option><option value=\"2022\">2022<\/option><option value=\"2021\">2021<\/option><option value=\"2020\">2020<\/option><option value=\"2019\">2019<\/option><option value=\"2018\">2018<\/option><option value=\"2017\">2017<\/option><option value=\"2016\">2016<\/option><option value=\"2015\">2015<\/option><option value=\"2014\">2014<\/option><option value=\"2013\">2013<\/option><option value=\"2012\">2012<\/option><option value=\"2011\">2011<\/option><option value=\"2010\">2010<\/option><option value=\"2009\">2009<\/option><option value=\"2008\">2008<\/option><option value=\"2007\">2007<\/option><option value=\"2006\">2006<\/option><option value=\"2005\">2005<\/option><option value=\"2004\">2004<\/option><option value=\"2003\">2003<\/option><option value=\"2002\">2002<\/option><option value=\"2001\">2001<\/option><option value=\"2000\">2000<\/option><option value=\"1999\">1999<\/option><option value=\"1998\">1998<\/option><option value=\"1997\">1997<\/option><option value=\"1996\">1996<\/option><option value=\"1995\">1995<\/option><option value=\"1994\">1994<\/option><option value=\"1993\">1993<\/option><option value=\"1992\">1992<\/option><option value=\"1991\">1991<\/option><option value=\"1990\">1990<\/option><option value=\"1989\">1989<\/option><option value=\"1988\">1988<\/option><option value=\"1987\">1987<\/option><option value=\"1986\">1986<\/option><option value=\"1985\">1985<\/option><option value=\"1984\">1984<\/option><option value=\"1983\">1983<\/option><option value=\"1982\">1982<\/option><option value=\"1981\">1981<\/option><option value=\"1980\">1980<\/option><option value=\"1979\">1979<\/option><option value=\"1978\">1978<\/option><option value=\"1977\">1977<\/option><option value=\"1976\">1976<\/option><option value=\"1975\">1975<\/option><option value=\"1974\">1974<\/option><option value=\"1973\">1973<\/option><option value=\"1972\">1972<\/option><option value=\"1971\">1971<\/option><option value=\"1970\">1970<\/option><option value=\"1969\">1969<\/option><option value=\"1968\">1968<\/option><option value=\"1967\">1967<\/option><option value=\"1966\">1966<\/option><option value=\"1965\">1965<\/option><option value=\"1964\">1964<\/option><option value=\"1963\">1963<\/option><option value=\"1962\">1962<\/option><option value=\"1961\">1961<\/option><option value=\"1960\">1960<\/option><option value=\"1959\">1959<\/option><option value=\"1958\">1958<\/option><option value=\"1957\">1957<\/option><option value=\"1956\">1956<\/option><option value=\"1955\">1955<\/option><option value=\"1954\">1954<\/option><option value=\"1953\">1953<\/option><option value=\"1952\">1952<\/option><option value=\"1951\">1951<\/option><option value=\"1950\">1950<\/option><option value=\"1949\">1949<\/option><option value=\"1948\">1948<\/option><option value=\"1947\">1947<\/option><option value=\"1946\">1946<\/option><option value=\"1945\">1945<\/option><option value=\"1944\">1944<\/option><option value=\"1943\">1943<\/option><option value=\"1942\">1942<\/option><option value=\"1941\">1941<\/option><option value=\"1940\">1940<\/option>                <\/select>\n        \t<span class=\"error-message\" style=\"display: none; color: red;\">This field is required.<\/span>\n                <label for=\"make\" class=\"custom-label\">Vehicle make<\/label>\n                <select id=\"make\" required>\n                  <option value=\"\">Select<\/option>\n                <\/select>\n\t\t\t\t<span class=\"error-message\" style=\"display: none; color: red;\">This field is required.<\/span>\n        \n                <label for=\"model\" class=\"custom-label\">Vehicle model<\/label>\n                <select id=\"model\" required>\n                  <option value=\"\">Select<\/option>\n                <\/select>\n        \t\t<span class=\"error-message\" style=\"display: none; color: red;\">This field is required.<\/span>\n                <label>Is it operable?<\/label>\n                <div class=\"radio-group\">\n                    <input type=\"radio\" pautofocus=\"\" class=\"p-element\" value=\"true\" id=\"yes\" name=\"isOperable\" aria-checked=\"true\" data-pc-section=\"hiddenInput\" checked>\n                        <!--<input type=\"radio\" id=\"yes\" name=\"operable\" checked \/>-->\n                    <label for=\"yes\">Yes<\/label>\n                    <input type=\"radio\" pautofocus=\"\" class=\"p-element\" value=\"false\" id=\"no\" name=\"isOperable\" aria-checked=\"false\" data-pc-section=\"hiddenInput\">\n                    <!--<input type=\"radio\" id=\"no\" name=\"operable\" \/>-->\n                    <label for=\"no\">No<\/label>\n                <\/div>\n                <button type=\"button\" id=\"next-firsts'\" class=\"next-btn next-first\" data-next=\"date\">Confirmation details \u2192<\/button>\n            <\/form>\n        <\/div>\n    \n        <div class=\"tab-content\" id=\"date\">\n            <form>\n                <label for=\"calculation-email\" class=\"custom-label\">Email<\/label>\n                <input type=\"email\" id=\"calculation-email\" placeholder=\"Your email\" required \/>\n        <span class=\"error-message\" style=\"display: none; color: red;\">This field is required.<\/span>\n                <label for=\"available-date\" class=\"custom-label\">First available date<\/label>\n                <select id=\"available-date\" required>\n                    <option value=\"\">Select<\/option>\n                    <option value=\"1\">As soon as possible<\/option>\n                    <option value=\"2\">Within 2 weeks<\/option>\n                    <option value=\"3\">Within 30 days<\/option>\n                    <option value=\"4\">Or select your date<\/option>\n                    <!-- Add more models -->\n                <\/select>\n\t\t\t\t<span class=\"error-message\" style=\"display: none; color: red;\">This field is required.<\/span>\n                <div class=\"select-date\" style=\"display:none;\">\n                    <label for=\"select-date-inserted\" class=\"custom-label\">Select date<\/label>\n                    <input type=\"text\" role=\"combobox\" aria-autocomplete=\"none\" aria-haspopup=\"dialog\" autocomplete=\"off\" pautofocus=\"\" class=\"select-date-inserted\" id=\"select-date-inserted\" placeholder=\"MM\/DD\/YYYY\" aria-expanded=\"false\">\n                <\/div>\n                <label for=\"calculation-phone\" class=\"custom-label\">Phone<\/label>\n                <input type=\"tel\" maxlength=\"15\" id=\"calculation-phone\" placeholder=\"Your phone (Optional)\" \/>\n        \n                <button type=\"submit\" id=\"loader-spin\" class=\"calculation\">Get a Quote<\/button>\n            <\/form>\n        <\/div>\n\t\t<div id=\"overlay\">\n\t\t\t<div class=\"cv-spinner\">\n\t\t\t<span class=\"spinner\"><\/span>\n\t\t\t<\/div>\n    \t<\/div>\n\t\t\n    <\/div>\n    \n\n<script>\n    jQuery(function ($) {\n        $('#loader-spin').on('click', function (event) {\n            \/\/ Prevent the default form submission\n            event.preventDefault();\n\n            \/\/ Show the loader\n            $(\"#overlay\").fadeIn(300);\n\n            \/\/ Simulate a delay to mimic an AJAX request\n            setTimeout(function () {\n                console.log(\"Simulated AJAX complete\");\n                $(\"#overlay\").fadeOut(300); \/\/ Hide the loader\n            }, 60000); \/\/ Simulated 1-minute delay\n        });\n    });\n\t\ndocument.getElementById('calculation-phone').addEventListener('input', function (event) {\n    const input = event.target;\n    let value = input.value.replace(\/\\D\/g, ''); \/\/ Remove all non-numeric characters\n\n    \/\/ Format as (XXX) XXX-XXXX\n    if (value.length > 3 && value.length <= 6) {\n        value = `(${value.slice(0, 3)}) ${value.slice(3)}`;\n    } else if (value.length > 6) {\n        value = `(${value.slice(0, 3)}) ${value.slice(3, 6)}-${value.slice(6, 10)}`;\n    }\n\n    input.value = value;\n});\n\n\n\tjQuery('#year').select2();\n\tjQuery('#available-date').select2();\n\t\n    \n  const tabButtons = document.querySelectorAll(\".tab-btn\");\n  const tabContents = document.querySelectorAll(\".tab-content\");\n  const nextButtons = document.querySelectorAll(\".next-btn\");\n\n  \/\/ Tab switching logic\n  tabButtons.forEach((btn) => {\n    btn.addEventListener(\"click\", () => {\n      const tab = btn.dataset.tab;\n\n      \/\/ Remove active classes\n      tabButtons.forEach((b) => b.classList.remove(\"active\"));\n      tabContents.forEach((c) => c.classList.remove(\"active\"));\n\n      \/\/ Add active classes\n      btn.classList.add(\"active\");\n      document.getElementById(tab).classList.add(\"active\");\n    });\n  });\n\n  \/\/ Next button logic with validation\n  nextButtons.forEach((btn) => {\n    btn.addEventListener(\"click\", () => {\n      const nextTab = btn.dataset.next;\n      const currentTabContent = btn.closest(\".tab-content\");\n      const requiredFields = currentTabContent.querySelectorAll(\"[required]\");\n      let isValid = true;\n\n      \/\/ Validate required fields in the current tab\n      requiredFields.forEach((field) => {\n        if (!field.value.trim()) {\n          isValid = false;\n\n          \/\/ Show error message\n          field.nextElementSibling?.classList.add(\"error-visible\");\n        } else {\n          \/\/ Hide error message\n          field.nextElementSibling?.classList.remove(\"error-visible\");\n        }\n      });\n\n      if (!isValid) {\n        \/\/ Show SweetAlert popup if validation fails\n\/\/         Swal.fire({\n\/\/           icon: \"error\",\n\/\/           title: \"Oops...\",\n\/\/           text: \"Please fill in all required fields!\",\n\/\/ \t\t  customClass: {\n\/\/       popup: 'small-popup' \/\/ Add a custom class for the popup\n\/\/     }\n\/\/         });\n      } else {\n        \/\/ If valid, simulate clicking on the next tab\n        document.querySelector(`.tab-btn[data-tab=\"${nextTab}\"]`).click();\n      }\n    });\n  });\n\n  \/\/ Optional: Enhance validation for specific types of inputs (e.g., email)\n  document.querySelector(\"#calculation-email\").addEventListener(\"input\", (e) => {\n    const emailPattern = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\n    const emailField = e.target;\n    if (!emailPattern.test(emailField.value)) {\n      emailField.nextElementSibling?.classList.add(\"error-visible\");\n    } else {\n      emailField.nextElementSibling?.classList.remove(\"error-visible\");\n    }\n  });\n\n        function openTab(event, tabName) {\n            var i, tabContent, tabs;\n            tabContent = document.getElementsByClassName(\"tab-content\");\n            for (i = 0; i < tabContent.length; i++) {\n                tabContent[i].classList.remove(\"active-content\");\n            }\n            tabs = document.getElementsByClassName(\"tab\");\n            for (i = 0; i < tabs.length; i++) {\n                tabs[i].classList.remove(\"active-tab\");\n            }\n            document.getElementById(tabName).classList.add(\"active-content\");\n            event.currentTarget.classList.add(\"active-tab\");\n        }\n        jQuery(document).ready(function() {\n            jQuery('#make').select2();\n            jQuery('#model').select2();\n        });\n        jQuery(document).on(\"change\", \"#year\", function() {\n            var Year = jQuery(this).val();\n            jQuery.ajax({\n                url: \"https:\/\/api.onyxautotransport.com\/api\/cars\/brands?Year=\" + Year, \/\/ WordPress AJAX URL\n                method: 'GET',\n                success: function(response) {\n                    \/\/ Clear the existing options\n                    jQuery('#make').empty().append('<option value=\"\">Select a Make<\/option>');\n                    jQuery('#model').empty().append('<option value=\"\">Select a Model<\/option>');\n                    \/\/ Append new options from the AJAX response\n                    jQuery.each(response, function(index, car) {\n                        jQuery('#make').append('<option value=\"' + car.id + '\">' + car.name + '<\/option>');\n                    });\n        \n                    \/\/ Destroy and reinitialize Select2 to refresh options\n                    \/\/ jQuery('#make').select2('destroy'); \/\/ Destroy existing Select2 instance\n                    \/\/ jQuery('#make').select2();          \/\/ Reinitialize Select2\n                    jQuery(this).parent(\"form\").find(\".next-btn\").attr(\"disabled\",\"disabled\");\n                    jQuery(this).parent(\"form\").find(\".next-btn\").addClass(\"disabled\");\n                },\n                error: function() {\n                    console.log(\"Error occurred while processing the request.\");\n                }\n            });\n        });\n        jQuery(document).on(\"change\", \"#make\", function() {\n            var Year = jQuery(\"#year\").val();\n            var BrandId = jQuery(this).val();\n            jQuery.ajax({\n                url: \"https:\/\/api.onyxautotransport.com\/api\/cars?Year=\" + Year+\"&BrandId=\"+BrandId, \/\/ WordPress AJAX URL\n                method: 'GET',\n                success: function(response) {\n                    \/\/ Clear the existing options\n                    jQuery('#model').empty().append('<option value=\"\">Select a Model<\/option>');\n        \n                    \/\/ Append new options from the AJAX response\n                    jQuery.each(response, function(index, car) {\n                        jQuery('#model').append('<option value=\"' + car.id + '\">' + car.name + '<\/option>');\n                    });\n        \n                    \/\/ Destroy and reinitialize Select2 to refresh options\n                    \/\/ jQuery('#model').select2('destroy'); \/\/ Destroy existing Select2 instance\n                    \/\/ jQuery('#model').select2();          \/\/ Reinitialize Select2\n                    jQuery(this).parent(\"form\").find(\".next-btn\").attr(\"disabled\",\"disabled\");\n                    jQuery(this).parent(\"form\").find(\".next-btn\").addClass(\"disabled\");\n                },\n                error: function() {\n                    console.log(\"Error occurred while processing the request.\");\n                }\n            });\n        });\n        jQuery(document).on(\"change\", \"#model\", function() {\n            var model = jQuery(this).val();\n            console.log(model);\n            if(model !=\"\"){\n                jQuery(this).parent(\"form\").find(\".next-btn\").removeAttr(\"disabled\");\n                jQuery(this).parent(\"form\").find(\".next-btn\").removeClass(\"disabled\")\n            }else{\n                jQuery(this).parent(\"form\").find(\".next-btn\").attr(\"disabled\",\"disabled\");\n                jQuery(this).parent(\"form\").find(\".next-btn\").addClass(\"disabled\");\n            }\n        });\n        jQuery(document).on(\"change\", \"#available-date\", function() {\n            var available_date = jQuery(this).val();\n            if(available_date == 4){\n                jQuery(this).parent(\"form\").find(\".calculation\").removeAttr(\"disabled\");\n                jQuery(this).parent(\"form\").find(\".calculation\").removeClass(\"disabled\")\n                jQuery(\".select-date\").show();   \n            }else{\n                jQuery(\".select-date\").hide();\n                jQuery(this).parent(\"form\").find(\".calculation\").removeAttr(\"disabled\");\n                jQuery(this).parent(\"form\").find(\".calculation\").removeClass(\"disabled\")\n            }\n        });\n        jQuery(document).on(\"keyup\", \"#from\", function() {\n            var from = jQuery(this).val();\n            var to = jQuery(\"#to\").val();\n            if(to !=\"\" && from !=\"\"){\n                jQuery(this).parent(\"form\").find(\".next-btn\").removeAttr(\"disabled\");\n            }else{\n                jQuery(this).parent(\"form\").find(\".next-btn\").attr(\"disabled\",\"disabled\");\n            }\n        });\n        jQuery(document).on(\"keyup\", \"#to\", function() {\n            var to = jQuery(this).val();\n            var from = jQuery(\"#from\").val();\n            if(to !=\"\" && from !=\"\"){\n                jQuery(this).parent(\"form\").find(\".next-btn\").removeAttr(\"disabled\");\n                jQuery(this).parent(\"form\").find(\".next-btn\").removeClass(\"disabled\")\n            }else{\n                jQuery(this).parent(\"form\").find(\".next-btn\").attr(\"disabled\",\"disabled\");\n                jQuery(this).parent(\"form\").find(\".next-btn\").addClass(\"disabled\")\n            }\n        });\n        jQuery(\".select-date-inserted\").flatpickr({minDate: \"today\"});\n        jQuery(document).on(\"keyup\", \"#calculation-email\", function() {\n            var calculation_email = jQuery(this).val();\n            var available_date = jQuery(\"#available-date\").val();\n            if(calculation_email !=\"\" && available_date !=\"\"){\n                jQuery(this).parent(\"form\").find(\".calculation\").removeAttr(\"disabled\");\n                jQuery(this).parent(\"form\").find(\".calculation\").removeClass(\"disabled\")\n            }else{\n                jQuery(this).parent(\"form\").find(\".calculation\").attr(\"disabled\",\"disabled\");\n                jQuery(this).parent(\"form\").find(\".calculation\").addClass(\"disabled\")\n            }\n        });\n        jQuery(document).on(\"keyup\", \"#select-date-inserted\", function() {\n            var select_date_inserted = jQuery(this).val();\n            var calculation_email = jQuery(\"#calculation-email\").val();\n            var available_date = jQuery(\"#available-date\").val();\n            if(calculation_email !=\"\" && available_date !=\"\" && select_date_inserted !=\"\"){\n                jQuery(this).parent(\"form\").find(\".calculation\").removeAttr(\"disabled\");\n                jQuery(this).parent(\"form\").find(\".calculation\").removeClass(\"disabled\")\n            }else{\n                jQuery(this).parent(\"form\").find(\".calculation\").attr(\"disabled\",\"disabled\");\n                jQuery(this).parent(\"form\").find(\".calculation\").addClass(\"disabled\")\n            }\n        });\n        jQuery(document).on(\"click\",\".calculation\",function(event){\n            event.preventDefault();\n            var calculation_email = jQuery(\"#calculation-email\").val();\n            var available_date = jQuery(\"#available-date\").val();\n            var selectdateinserted = jQuery(\"#select-date-inserted\").val();\n            if(selectdateinserted == \"\"){\n                selectdateinserted = null;\n            }\n            var year = jQuery(\"#year\").val();\n            var make = jQuery(\"#make\").val();\n            var makeText = jQuery(\"#make\").find('option:selected').text();\n            var model = jQuery(\"#model\").val();\n            var modelText = jQuery(\"#model\").find('option:selected').text();\n            var transportTypeval =jQuery('input[name=\"transportType\"]:checked').val();\n            var isOperableval =jQuery('input[name=\"isOperable\"]:checked').val();\n            var calculation_phone = jQuery(\"#calculation-phone\").val();\n            var calculation_phone = jQuery(\"#calculation-phone\").val();\n            var from = jQuery(\"#from\").val();\n            var to = jQuery(\"#to\").val();\n             var requestData = {\n                shipFrom: from,\n                shipTo: to,\n                email: calculation_email,\n                phone: calculation_phone,\n                firstAvailableDate: selectdateinserted,\n                vehicle: {\n                    year: parseInt(year),\n                    brandId:parseInt(make),\n                    brandName: makeText,\n                    modelId: parseInt(model),\n                    modelName: modelText,\n                    isOperable: (isOperableval==\"true\" ? true : false),\n                    transportType: parseInt(transportTypeval)\n                },\n                shippingDateId: parseInt(available_date),\n                id: parseInt(0)\n            };\n            jQuery.ajax({\n                url: \"https:\/\/api.onyxautotransport.com\/api\/calculations\", \/\/ API endpoint\n                method: 'POST',  \/\/ HTTP method\n                contentType: \"application\/json\",  \/\/ Data type being sent\n                data: JSON.stringify(requestData),  \/\/ Convert JS object to JSON string\n                success: function(response) {\n                    console.log(\"Success:\", response); \/\/ Handle success\n                    if(response.success == true){\n                         window.location.href = \"https:\/\/onyxautotransport.com\/onyxautotransport\/order\/calculation\/?id=\"+response.value.id;\n\n                    }else{\n                        alert(response.errorMessage);\n                    }\n                },\n                error: function(xhr, status, error) {\n                    jQuery(\"div#overlay\").hide();\n                    Swal.fire({\n                      icon: \"error\",\n                      text:  JSON.parse(xhr.responseText).title\n                    });\n                    console.error(\"Error:\",JSON.parse(xhr.responseText).title); \/\/ Handle error\n                }\n            });\n            \n        })\n        \/\/https:\/\/api.onyxautotransport.com\/api\/calculations\n        \/\/{\n        \/\/     \"shipFrom\": \"U\u015fak, U\u015fak Merkez\/U\u015fak, T\u00fcrkiye\",\n        \/\/     \"shipTo\": \"Usaqu\u00e9n, Bogota, Colombia\",\n        \/\/     \"email\": \"test@gmqail.com\",\n        \/\/     \"phone\": \"7410852963\",\n        \/\/     \"firstAvailableDate\": null,\n        \/\/     \"vehicle\": {\n        \/\/         \"year\": 2024,\n        \/\/         \"brandId\": 1,\n        \/\/         \"brandName\": \"Acura\",\n        \/\/         \"modelId\": 99,\n        \/\/         \"modelName\": \"RDX\",\n        \/\/         \"isOperable\": true,\n        \/\/         \"transportType\": 1\n        \/\/     },\n        \/\/     \"shippingDateId\": 2,\n        \/\/     \"id\": 0\n        \/\/ }\n\n        \/\/ function initialize() {\n        \/\/     \/\/ Reference the 'from' input field\n        \/\/     var inputFrom = document.getElementById('from');\n        \/\/     \/\/ Initialize the Autocomplete object with USA restriction\n        \/\/     var autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, {\n        \/\/         componentRestrictions: { country: 'us' }  \/\/ Restrict to USA\n        \/\/     });\n        \/\/     \/\/ Add a listener to get selected place details\n        \/\/     autocompleteFrom.addListener('place_changed', function() {\n        \/\/         var place = autocompleteFrom.getPlace();\n        \/\/         console.log('From Place:', place);  \/\/ Handle selected place data\n        \/\/     });\n        \n        \/\/     \/\/ Reference the 'to' input field\n        \/\/     var inputTo = document.getElementById('to');\n        \/\/     \/\/ Initialize the Autocomplete object with USA restriction\n        \/\/     var autocompleteTo = new google.maps.places.Autocomplete(inputTo, {\n        \/\/         componentRestrictions: { country: 'us' }  \/\/ Restrict to USA\n        \/\/     });\n        \/\/     \/\/ Add a listener to get selected place details\n        \/\/     autocompleteTo.addListener('place_changed', function() {\n        \/\/         var place = autocompleteTo.getPlace();\n        \/\/         console.log('To Place:', place);  \/\/ Handle selected place data\n        \/\/     });\n        \/\/ }\n        function initialize() {\n     if (typeof google === \"undefined\" || !google.maps || !google.maps.places) {\n        console.error(\"Google Maps JavaScript API is not loaded.\");\n        return;\n     }\n\n    const options = {\n        componentRestrictions: { country: \"us\" }, \/\/ Restrict to USA\n        fields: [\"address_components\", \"geometry\", \"formatted_address\"],\n        types: [\"(regions)\"], \/\/ Specify regions (states and cities)\n    };\n\n    \/\/ Initialize Autocomplete for \"from\" input\n    const inputFrom = document.querySelector(\"#from\");\n    if (inputFrom) {\n        const autocompleteFrom = new google.maps.places.Autocomplete(inputFrom, options);\n    \n        autocompleteFrom.addListener(\"place_changed\", function () {\n          const place = autocompleteFrom.getPlace();\n          if (place.geometry) {\n            console.log(\"From Place:\", place);\n            const cityStateZip = getCityStateZip(place);\n            inputFrom.value = cityStateZip;\n            console.log(\"From City, State, Zip:\", cityStateZip);\n          }\n        });\n     }\n\n      \/\/ Initialize Autocomplete for \"to\" input\n      const inputTo = document.querySelector(\"#to\");\n      if (inputTo) {\n        const autocompleteTo = new google.maps.places.Autocomplete(inputTo, options);\n    \n        autocompleteTo.addListener(\"place_changed\", function () {\n            const place = autocompleteTo.getPlace();\n            if (place.geometry) {\n                console.log(\"To Place:\", place);\n                const cityStateZip = getCityStateZip(place);\n                inputTo.value = cityStateZip;\n                console.log(\"To City, State, Zip:\", cityStateZip);\n            }\n        });\n      }\n\n}\n  \/\/ Function to extract city, state, and zip code\n  function getCityStateZip(place) {\n    let city = \"\";\n    let state = \"\";\n    let zip = \"\";\n    for (const component of place.address_components) {\n      if (component.types.includes(\"locality\")) {\n        city = component.long_name;\n      }\n      if (component.types.includes(\"administrative_area_level_1\")) {\n        state = component.short_name;\n      }\n      if (component.types.includes(\"postal_code\")) {\n        zip = component.long_name;\n      }\n    }\n    return `${city}, ${state} ${zip}`;\n  }\n        \/\/ Load the function after the window loads\n    \/\/     window.onload = initialize;\n    \/\/   document.querySelector('.next-btn.disabled').addEventListener('click', function (e) {\n    \/\/     e.preventDefault(); \n    \/\/     Swal.fire({\n    \/\/       icon: \"error\",\n    \/\/       title: \"Oops...\",\n    \/\/       text: \"This button is disabled!\",\n    \/\/       footer: '<a href=\"#\">Why is this button disabled?<\/a>'\n    \/\/     });\n    \/\/   });\n    \/\/ Iryna_dev\n    \/\/ ===============================\n    \/\/ SAFE REPLACEMENT (NO window.onload)\n    \/\/ ===============================\n\n    \/\/ 1) Lazy init Google Maps ONLY on user interaction\n    let mapsInitialized = false;\n\n    document.addEventListener('focusin', function (e) {\n    if (\n        !mapsInitialized &&\n        (e.target.id === 'from' || e.target.id === 'to')\n    ) {\n        mapsInitialized = true;\n        initialize();\n    }\n    });\n\n    \/\/ 2) Safe handler for disabled \"Next\" buttons (event delegation)\n    document.addEventListener('click', function (e) {\n    const btn = e.target.closest('.next-btn');\n\n    if (btn && btn.classList.contains('disabled')) {\n        e.preventDefault();\n        Swal.fire({\n        icon: \"error\",\n        title: \"Oops...\",\n        text: \"This button is disabled!\",\n        footer: '<a href=\"#\">Why is this button disabled?<\/a>'\n        });\n    }\n    });\n    \/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n<\/script>\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-0248231 elementor-alert-info elementor-widget elementor-widget-alert\" data-id=\"0248231\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"alert.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-alert\" role=\"alert\">\n\n\t\t\t\t\t\t<span class=\"elementor-alert-title\">Please note:<\/span>\n\t\t\t\n\t\t\t\t\t\t<span class=\"elementor-alert-description\">Receiving a vehicle shipping quote does not constitute a confirmed order. To finalize your vehicle shipment, you must formally book your order once you are satisfied with the quoted price. No payment is required during the booking process; payment becomes due when a driver is assigned to your order.\n<\/span>\n\t\t\t\n\t\t\t\t\t\t<button type=\"button\" class=\"elementor-alert-dismiss\" aria-label=\"Dismiss this alert.\">\n\t\t\t\t\t\t\t\t\t<span aria-hidden=\"true\">&times;<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\n\t\t<\/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>Order quote Please note: Receiving a vehicle shipping quote does not constitute a confirmed order. To finalize your vehicle shipment, [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-4146","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/onyxautotransport.com\/onyxautotransport\/wp-json\/wp\/v2\/pages\/4146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/onyxautotransport.com\/onyxautotransport\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/onyxautotransport.com\/onyxautotransport\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/onyxautotransport.com\/onyxautotransport\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/onyxautotransport.com\/onyxautotransport\/wp-json\/wp\/v2\/comments?post=4146"}],"version-history":[{"count":39,"href":"https:\/\/onyxautotransport.com\/onyxautotransport\/wp-json\/wp\/v2\/pages\/4146\/revisions"}],"predecessor-version":[{"id":13589,"href":"https:\/\/onyxautotransport.com\/onyxautotransport\/wp-json\/wp\/v2\/pages\/4146\/revisions\/13589"}],"wp:attachment":[{"href":"https:\/\/onyxautotransport.com\/onyxautotransport\/wp-json\/wp\/v2\/media?parent=4146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}