async function fieldValue(select, input) {
    if (select.value != undefined) {
        const placeId = select.value.id;

        const { Place } = await google.maps.importLibrary("places");

        const place = new Place({
            id: placeId
        });

        await place.fetchFields({
            fields: ["id", "formattedAddress", "addressComponents", "location"]
        });

        input.value = JSON.stringify(place.toJSON());
    } else
        input.value = 'null';
}

customElements.whenDefined("gmpx-place-picker").then(() => {
    let timestampInput = document.createElement('input');
    timestampInput.type = "hidden";
    timestampInput.name = "timestamp";
    timestampInput.value = Date.now();
    document.getElementById('form-order').appendChild(timestampInput);

    let html_style = "input, input:focus{border:none !important; outline:none !important;}";

    let pickupSelect = document.getElementById('pickupSelect');
    let pickupInput = document.getElementById('pickupValue');
    let pickupStyle = document.createElement('style');
    pickupStyle.innerHTML = html_style;

    let destinationSelect = document.getElementById('destinationSelect');
    let destinationInput = document.getElementById('destinationValue');
    let destinationStyle = document.createElement('style');
    destinationStyle.innerHTML = html_style;
    

    pickupSelect.shadowRoot.appendChild(pickupStyle);
    destinationSelect.shadowRoot.appendChild(destinationStyle);
    
    pickupSelect.addEventListener("gmpx-placechange", () => {
        fieldValue(pickupSelect, pickupInput);
    });
        destinationSelect.addEventListener("gmpx-placechange", () => {
        fieldValue(destinationSelect, destinationInput);
    });
    document.getElementById('form-order').addEventListener('submit', function (e) {    
        if (document.getElementById('pickupValue').value == '' || document.getElementById('destinationValue').value == '') {
             e.preventDefault();
            if (document.getElementById('pickupValue').value == '')
                pickupSelect.style.borderColor = "red";
            if (document.getElementById('destinationValue').value == '')
                destinationSelect.style.borderColor = "red";
        }
        if (document.getElementById('pickupValue').value != '')
            pickupSelect.removeAttribute('style');
        if (document.getElementById('destinationValue').value != '')
            destinationSelect.removeAttribute('style');
    });
});
(()=>{"use strict";const e=t=>{t&&t.addEventListener("input",()=>{t.disabled||(t.value=t.value.replace(/\D+/g,""))})};e(document.getElementById("orderPhone"));e(document.getElementById("b2b-tel-input"));e(document.getElementById("cta-tel-input"));e(document.getElementById("orderLevel1"));e(document.getElementById("orderLevel2"))})();