<!--Основная карта-->
<div id='map-main' class="map-main"></div>

<!--Карты по секторам-->
<div id='map-sector-k'  class="map-sector-k"></div>
<div id='map-sector-l'  class="map-sector-l"></div>
<div id='map-sector-h'  class="map-sector-h"></div>
<div id='map-sector-j'  class="map-sector-j"></div>

<!--Форма-->
<a href="#popup:parkform" class="popuplink"></a>
<a href="#popup:alertform" class="popupalert"></a>

<script>

// Загрузка основной карты
$.get('https://310401.selcdn.ru/MIXED/SVG/main_map.svg', function(data) {  let svg =  $(data).find('svg')[0];  $('#map-main').html(svg);});

// Загрузка К - карты
$.get('https://310401.selcdn.ru/MIXED/SVG/sector_k.svg', function(data) {  let svg =  $(data).find('svg')[0]; $('#map-sector-k').html(svg); });

// Загрузка L - карты
$.get('https://310401.selcdn.ru/MIXED/SVG/sector_l.svg', function(data) {  let svg =  $(data).find('svg')[0]; $('#map-sector-l').html(svg); });

// Загрузка H - карты
$.get('https://310401.selcdn.ru/MIXED/SVG/sector_h.svg', function(data) {  let svg =  $(data).find('svg')[0]; $('#map-sector-h').html(svg); });

// Загрузка J - карты
$.get('https://310401.selcdn.ru/MIXED/SVG/sector_j.svg', function(data) {  let svg =  $(data).find('svg')[0]; $('#map-sector-j').html(svg); });





// При нажатии на сектор основной карты
$(document).on('click', 'g[id^="main_map_"]', function(){
    $('#map-main').hide(500);//Скрываем основную карту
    
    let letter = $(this).attr('id');
    letter = letter.split('_')[2];
    letter = letter.toLowerCase();

    $('#map-sector-'+letter).show(500);//Показываем нужную карту
    $('.uc-back').show(0);//Показываем кнопку назад
});

// При нажатии на кнопку назад
$(document).on('click', '.uc-back .back-btn', function(){
    $('div[id^="map-sector-"]').hide(500); //Скрываем все карты
    $('#map-main').show(500); //Показываем основную карту
    $('.uc-back').hide(0); //Скрываем кнопку назад
});


$( document ).ready(function() {

$('.uc-park-form .t702__text-wrapper').append('<div class="place-wrapper t-text"></div>');


//$('.uc-park-form .t-submit').clone().appendTo('.uc-park-form .t-form__submit');

$('.uc-park-form .t-submit:first').attr('type', 'button');

$('.call-btn').addClass('parked-already');




let placeLimit = 10;



//Сбор всех выбранных парковочных места
function collectParkPlace(){
    let places = '';
    let placesBox = '';
    
    $('.place-wrapper').html('');
    
    $('.parked').each(function(){
        let parent = $(this);
        let parkplace = parent.find('rect:last').attr('id');
        let color = parent.find('rect:last').attr('fill');
        parkplace = parkplace.split('_')[1];

        parkplace = parkplace.toUpperCase(); 
        places += parkplace+'; ';
        
        placesBox +=`
            <div class="place-box" style="background:${color}" ><span>${parkplace}</span> <div class="park-close-icon"></div></div>
        `;
        
    });
    
    $('input[name="park-place"]').val('Место: '+places);
    $('.place-wrapper').append(placesBox);
    //$('.popuplink')[0].click();
    
};

// При выборе парковочного места
$(document).on('click', 'g[id^="sector_"]>g', function(){
    
    let chsPlace = $('.parked').length;
    
    

        let parent = $(this);
        let parkplace = parent.find('rect:last').attr('id');
        parkplace = parkplace.split('_')[1];
        parkplace = parkplace.toUpperCase();
    
        if( parent.attr('class') == 'parked' ){
            parent.removeAttr('class');
            collectParkPlace();
        }else{
            
            if(chsPlace<placeLimit){
            
                parent.attr('class','parked');  
                collectParkPlace();
            
            }else{
            
                $('.t390__descr').html('Не больше 10-ти мест в одном заказе');
                $('.popupalert')[0].click();
            };    

        };
        
        
        if( $('.parked').length>0 ){
            $('.call-btn').removeClass('parked-already');
        }else{
            $('.call-btn').addClass('parked-already');
        };

});


// При удалении парковочного места из формы  
$(document).on('click', '.park-close-icon', function(){
    //Получаем код парковки из описания соседа
    let parkCode = $(this).prev('span').html().toLowerCase();
    
    //Удаляем этот элемент из формы
    //$(this).closest('.place-box').remove();
    

    
    //Ищем этот элемент на картах
    $('rect#place_'+parkCode).closest('g').removeAttr('class');
    collectParkPlace();

});


let dataIDList = {};
let dataParkList = {};
let dataIDListParked = [];

//Полчучаем данные из AirTable
function getAirTableLikes(){
    
        dataIDListParked = [];

        (function(){
            let url = "https://api.airtable.com/v0/appiYBYvEdbv4FANX/Park_K";
            let xhr = new XMLHttpRequest(); xhr.open("GET", url);
            xhr.setRequestHeader("Authorization", "Bearer keykltFv8keJC1QS1");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    let data = JSON.parse(xhr.responseText);
                    for (let i = 0; i < data.records.length; i++) {
                        dataIDList[data.records[i].fields.ParkName] = data.records[i].id;
                        dataParkList[data.records[i].id] = data.records[i].fields.ParkName;
                        let parkName = data.records[i].fields.ParkName;
                        let parked = data.records[i].fields.Parked;
                        if(parked!=undefined){
                            dataIDListParked.push(data.records[i].id);
                            $('rect#place_'+parkName.toLowerCase()).closest('g').attr('class','parked-already');
                        };
                    };
               }};
            xhr.send();
        })();
        
        (function(){
            let url = "https://api.airtable.com/v0/appiYBYvEdbv4FANX/Park_L";
            let xhr = new XMLHttpRequest(); xhr.open("GET", url);
            xhr.setRequestHeader("Authorization", "Bearer keykltFv8keJC1QS1");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    let data = JSON.parse(xhr.responseText);
                    for (let i = 0; i < data.records.length; i++) {
                        dataIDList[data.records[i].fields.ParkName] = data.records[i].id;
                        dataParkList[data.records[i].id] = data.records[i].fields.ParkName;
                        let parkName = data.records[i].fields.ParkName;
                        let parked = data.records[i].fields.Parked;
                        if(parked!=undefined){
                            dataIDListParked.push(data.records[i].id);
                            $('rect#place_'+parkName.toLowerCase()).closest('g').attr('class','parked-already');
                        };
                    };
               }};
            xhr.send();
        })();
        

        
};
    
goClick = true;  

//Обновляем данные в AirTable
function updateAirTableLikes(){
    let idList = [];
    
    let finData = '';
    
    $('.place-box').each(function(){
        let code = $(this).find('span').text();
        idList.push( dataIDList[code] );
        
    });
    
    let fPartData = `{  "records": [`;
    let lPartData = `]}`;
    let mPartData = '';
    
    let matchCodes = '';
    let match = false;
    
    dataIDList = {};
    dataParkList = {};
    dataIDListParked = [];
    
    
    let url = "https://api.airtable.com/v0/appiYBYvEdbv4FANX/ParkList";
        let xhr = new XMLHttpRequest(); xhr.open("GET", url);
        xhr.setRequestHeader("Authorization", "Bearer keykltFv8keJC1QS1");
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                let data = JSON.parse(xhr.responseText);
                for (let i = 0; i < data.records.length; i++) {

                    dataIDList[data.records[i].fields.ParkName] = data.records[i].id;
                    dataParkList[data.records[i].id] = data.records[i].fields.ParkName;

                    let parkName = data.records[i].fields.ParkName;
                    let parked = data.records[i].fields.Parked;
                    
                    if(parked!=undefined){
                        dataIDListParked.push(data.records[i].id);
                        $('rect#place_'+parkName.toLowerCase()).closest('g').attr('class','parked-already');
                    };

                };
                
                
                    $.each(idList , function(index, val) { 
                        mPartData += `{
                                        "id": "${val}",
                                        "fields": {
                                        "Parked": true
                                        }
                                     },`;
                     
            
                    $.each(dataIDListParked , function(ind, vl) { 
                        if(val==vl) {
                            match = true;
                            matchCodes += dataParkList[val]+'; ';   
                        };
                        
                    });        
        
                    });
                    
                    
                    
                    if(match){
                        $('.uc-alertform .t390__descr').html('Эти места уже заняли: '+matchCodes);
                        $('.popupalert')[0].click();
   
                    }else{
     
                        if(goClick){
                            goClick=false;
                        
                            $('.uc-park-form .t-submit:first').attr('type', 'submit');
                            $('.uc-park-form .t-submit').click();
                            $('.uc-park-form .t-submit:first').attr('type', 'button');
                            
                            
                            console.log(111);
                            
                            setTimeout(function(){
                                
                                if ( $('.uc-park-form .t-form').hasClass("js-send-form-success")){
                                    
                                    console.log(333);
                                    
                                    finData = fPartData + mPartData.slice(0,-1) + lPartData;    
                                    let url2 = "https://api.airtable.com/v0/appiYBYvEdbv4FANX/ParkList";
                                    let xhr2 = new XMLHttpRequest();
                                    xhr2.open("PATCH", url2);
                                    xhr2.setRequestHeader("Accept", "application/json");
                                    xhr2.setRequestHeader("Authorization", "Bearer keykltFv8keJC1QS1");
                                    xhr2.setRequestHeader("Content-Type", "application/json");
                                    xhr2.onreadystatechange = function () {
                                      if (xhr2.readyState === 4) { 
                                           window.setTimeout('location.reload()', 1000); 
                                          
                                      }};
                                    xhr2.send(finData);
                                    
    
                                }else{
                                    setTimeout(function(){
                                        goClick=true;  
                                    }, 500);    
                                };
                                
                                    
                            }, 1000);
                            
                            
                        };
          
                    };

                
           }};
        xhr.send();

};

setTimeout(function () {
    getAirTableLikes();
  
}, 500); 


//Отправка данных по событию
$('.uc-park-form .t-submit').click(function(){
    console.log(777);

        updateAirTableLikes();
   
});

$(document).on("keydown", ".t-form", function(event) {return event.key != "Enter";});

});
</script>


<style>

.back-btn{
    cursor: pointer;
}

g[id^="main_map_"] {transition: all 0.1s ease-in-out;cursor: pointer;}
g[id^="main_map_"]:hover {
    filter: drop-shadow(2px 4px 6px black);
}

g[id^="sector_"]>g {
    transition: all 0.1s ease-in-out;
    cursor: pointer;
}
g[id^="sector_"]>g:hover {
    -webkit-filter: drop-shadow(0px 1px 1px black);
    -moz-filter: drop-shadow(0px 1px 1px black);
    filter: drop-shadow(0px 1px 1px black);
}

/*g.parked {*/
/*    -webkit-filter: invert(1) !important;*/
/*    -moz-filter: invert(1) !important;*/
/*    filter: invert(1) !important;*/
/*}*/


g.parked rect {
    fill: #FFEB3B;
}

g[id^="sector_"]>g:hover rect {
    fill: #FFEB3B;
}


.place-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 30px;
}

.place-box {
    padding: 12px 10px;
    box-sizing: border-box;
    border: 1px solid #ababab;
    border-radius: 5px;
    min-width: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    position: relative;
}

.park-close-icon {
    width: 20px;
    height: 20px;
    background-image: url(https://static.tildacdn.com/tild3161-3336-4333-a133-356163366262/Group_6.svg);
    background-size: contain;
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 99;
    cursor: pointer;
}


div[id^="map-sector-"],
.uc-back {
  display: none;
}

.parked-already{
    opacity: 0.2;
    pointer-events: none;
}


/*.uc-park-form button.t-submit:last-child {*/
/*    display: none;*/
/*}*/

div#map-main svg{
    width: 100%;
    height: 550px;
    min-width: 800px;
}


div[id^="map-sector-"] svg {
    height: 400px;
    width: 100%;
    overflow: visible;
    min-width: 800px;
}

div#map-main , div[id^="map-sector-"] {
    padding: 40px;
    overflow-x: auto;
}

</style>