<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@cdek-it/widget@3" charset="utf-8"></script>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
    $('.uc-form-result input[name="pvz-client"]').attr('disabled','disabled');
});
</script>

<style>
.js-error-control-box div#cdek-map {
    box-shadow: 0 0 0 2px #ff0000;
    border-radius: 5px;
}    
</style>



<script type="text/javascript">

document.addEventListener("DOMContentLoaded", function() {
    
const image = `<img class="t-img" src="https://static.tildacdn.com/tild3431-3833-4333-b830-623438613662/PfcOwsvr2eLL646XIoST.png" imgfield="img" alt="">`;
$('.uc-form-result input[name="vk-link"]').closest('.t-input-group').prepend(image);
    
    
    
const mapEl = `<div id="cdek-map" style="width:100%;height:450px"></div>`;
$('.uc-form-result input[name="pvz-client"]').closest('.t-input-group').prepend(mapEl);
    


var request = new XMLHttpRequest();
    request.open('GET', 'https://geo.tildacdn.com/geo/full/');
    request.timeout = 15 * 1000;
    request.send();
    request.onprogress = function() {
        try {
            let data = JSON.parse(request.response);

            console.log(data['city']['name_ru']);
            createMap(data['city']['name_ru']);
            
        } catch (e) {}
    }
    ;
    request.onerror = function() {
        try {
            data = JSON.parse(request.response);
            createMap('Москва');
        } catch (e) {}
    }
    ;

});

function createMap(em){
    new window.CDEKWidget({ 
      from: 'Москва', 
      root: 'cdek-map', 
      apiKey: 'd77e20ea-866a-43a2-8bc3-4c7fdf2e3bb6', 
      servicePath: 'https://moti.domenforexample.ru/cdek/service.php', 
      defaultLocation: em,
      
       hideFilters: {
                            have_cashless: true,
                            have_cash: true,
                            is_dressing_room: true,
                            type: true,
                          },
      
      
      hideDeliveryOptions: {
                            door: true,
                          },

       onChoose(delivery, rate, address) {
            fiilPvz(address);                 
            //console.log(address.city_code);
            //console.log(address.name);
        },
      
      
    })
};

function fiilPvz(em){
    //let point = $('#cdek-map button').parent().parent().parent().parent();
    //let pvzNum = point.find(':first div').text();
    //let pvzAdress = point.find('div:first').next('div').find('div:first div:first').text();
    
    
    
    
    $('.uc-form-result input[name="pvz-client"]').val(em.city+', '+em.address);
    
    $('.uc-form-result input[name="pvz-adress"]').val(em.city+', '+em.address);
    
    $('.uc-form-result input[name="pvz-point"]').val(em.name+'; Код города: '+em.city_code);
    
    
    console.log(em);
    
    
};

</script>


<style>
.uc-form-result .t-bgimg.t-img-select__indicator {
    box-shadow: none;
}

.uc-form-result .t696 .t-form_bbonly .t-input-title {
    margin-bottom: 25px;
}

.uc-form-result  .t696 .t-form__inputsbox {
    max-width: none;
}

.uc-form-result   .t-input-group.t-input-group_in>img {
    width: 100%;
    margin-bottom: 20px;
}

.uc-form-result input[name="pvz-client"] {
    pointer-events: none;
}

.mobile .cdek-gxcyiu[data-v-e47c72c1] {
    width: 16rem !important;
}

.mobile .cdek-vfgr9z[data-v-e47c72c1] {
    display: block !important;
}


</style>