<div class="map-container t-text">
    <div id="map"></div>
    <div class="map-tabs-wrapper"></div>
    
</div>

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

<style>

.uc-map-point{
    display:none;
}

.map-container {
    display: flex;
}
div#map, .map-tabs-wrapper {
    height: 570px;
}

div#map {
    width: 70%;
    padding: 0; 
    margin: 0;
    box-shadow: 0 0 0 1px #2196F3;
}
.map-tabs-wrapper {
    width: 30%;
}

.mab-btn-location {
    font-size: 14px;
}

.mab-btn-title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 6px;
    margin-bottom: 10px;
}

.mab-btn-adress,
.mab-btn-site,
.mab-btn-mail,
.mab-btn-phone{
    font-size: 14px;
    margin-bottom:6px;
    padding-left: 6px;
    margin-left: 2px;
}

.map-container {
    box-shadow: 0 0 0 1px #e2e2e2;
}

.mab-btn a {
    color: #006abf !important;
    text-decoration: underline !important;
}

.mab-btn a:hover {
    text-decoration: none !important;
}

.mab-btn {
    border: 1px solid #e3e3e3;
}
.mab-btn-adress:before,
.mab-btn-site:before,
.mab-btn-mail:before,
.mab-btn-phone:before{
    content: "";
    width: 14px;
    height: 14px;
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
    position: relative;
    top: 3px;
    left: -8px;
}


.mab-btn-adress:before {
    background-image: url(https://static.tildacdn.com/tild3433-3962-4339-b035-303532666662/pin_gps_location_fin.svg); 
}
.mab-btn-site:before {
    background-image: url(https://static.tildacdn.com/tild6664-3930-4663-a162-383066343834/Group_1.svg);
}
.mab-btn-mail:before {
    background-image: url(https://static.tildacdn.com/tild3332-3331-4234-b865-393964626363/Group_3.svg);
}
.mab-btn-phone:before {
    background-image: url(https://static.tildacdn.com/tild6664-6264-4535-b036-356533383638/1.svg);
}


.map-tabs-wrapper>div {
    padding: 15px;
}
.map-tabs-wrapper {
    overflow-y: auto;
}


.tn-atom.tn-atom__html {
    width: inherit;
    height: inherit;
}
ymaps strong {    color: #2196f3}
a[href^="#place"] {pointer-events:none}
div[class*="mapgoto_"] {cursor:pointer}
@media screen and (min-width:860px){
div[class*="mapgoto_"] .tn-atom {
    text-align: left;
    padding-left: 10px;
}
}
[class$='-image-with-content'] { border-radius: 100px}
.activepoint{
    
    background-color: #dfe9ff  !important;
}


@media screen and (max-width:960px){
.map-container {
    flex-direction: column;
}

div#map {
    width: 100%;
}

.map-tabs-wrapper {
    width: 100%;
}
div#map, .map-tabs-wrapper {
    height: 370px;
}  
}

</style>

<script>
$(document).ready(function(){

let coordinatesArr = [];

//Заполняем данные из карточки
$('.t958__card-inner').each(function(index){
    
    let lineArr = [];
    
    let title = $(this).find('.t958__author-name li:first').html();
    let location = $(this).find('.t958__author-name li:last').html();
    
    let coord = $(this).find('.t958__author-descr li:first').html(); coord=coord.replace(/\s+/g, '');
    let crdArr = coord.split(',');
    
    let hint = $(this).find('.t958__author-descr li:last').html();
    let adress = $(this).find('.t958__review-text li:eq(0)').html();
    let site = $(this).find('.t958__review-text li:eq(1)').html();
    let mail = $(this).find('.t958__review-text li:eq(2)').html();
    let phone = $(this).find('.t958__review-text li:eq(3)').html();

    let img = $(this).find('.t958__avatar').attr('data-original');
    
    lineArr.push( parseFloat(crdArr[0]) , parseFloat(crdArr[1]) ,hint,hint,img);
    
    coordinatesArr.push(lineArr);

    let mButton =  `<div class="mab-btn mapgoto_${index+1}" data-coord="${coord}">
    
                        <div class="mab-btn-location">${location}</div>
                        <div class="mab-btn-title">${title}</div>
                        
                        <div class="mab-btn-adress mp-contact">${adress}</div>
                        <div class="mab-btn-site mp-contact">${site}</div>
                        <div class="mab-btn-mail mp-contact">${mail}</div>
                        <div class="mab-btn-phone mp-contact">${phone}</div>

                    </div>`;
    $('.map-tabs-wrapper').append(mButton);
});

//Создание аттрибутов для кнопок
$('div[class*="mapgoto_"]').each(function( index ) {
      
        let className = $(this).attr('class');
        for (let i = 0; i < coordinatesArr.length; i++) {
            let contain = className.includes('mapgoto_'+(i+1));
            if (contain) {
                $(this).attr('mapgoto_',i);
            };
        };
});

$('.mp-contact').each(function() {
    if( $(this).text()=='-' ) $(this).hide();
});



setTimeout(function(){
    
//Создание карты
ymaps.ready(function () {
    let myMap = new ymaps.Map('map', {
            center: [ coordinatesArr[0][0] , coordinatesArr[0][1]  ], //Координаты центра при запуске карты
            zoom: 3,  //Увеличение карты при запуске
            controls: ['zoomControl']
        }, {searchControlProvider: 'yandex#search' }),
        MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
            '<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
        );
    
    for (i = 0; i < coordinatesArr.length; i++) {
        myMap.geoObjects
            .add(new ymaps.Placemark([ coordinatesArr[i][0] , coordinatesArr[i][1]  ], {
                hintContent: coordinatesArr[i][2],
                balloonContent: '',
            }, {
            iconLayout: 'default#imageWithContent',
            iconImageHref: coordinatesArr[i][4],
            iconImageSize: [30, 30], // Размеры метки.
            iconImageOffset: [-15, -15], // Смещение левого верхнего угла иконки относительно
            iconContentOffset: [15, 15], // Смещение слоя с содержимым относительно слоя с картинкой
            iconContentLayout: MyIconContentLayout
        }))
}; 

//Клик по метке
myMap.geoObjects.events.add(['click'], function (e) {
let target = e.get('target');
let crd = target['geometry']['_coordinates'];
myMap.setZoom( 15 );
myMap.panTo( [ crd[0] , crd[1] ], {duration: 0});  

crd = crd[0]+','+crd[1];crd = crd.trim();
$('div[class*="mapgoto_"]').removeClass('activepoint');
$('.mab-btn[data-coord="'+crd+'"]').addClass('activepoint');
    
    setTimeout(function(){
  
        let mP = $(".map-tabs-wrapper").offset().top;
        let aP = $(".activepoint").offset().top;
        let btw = aP - mP;
        if(btw>0) btw = '+='+btw;
        if(btw<0) btw = '-='+Math.abs(btw);
        
        $('.map-tabs-wrapper').animate({
            scrollTop: btw
        }, 500);
    
    }, 100);
});

//Клик по кнопке
        $('div[class*="mapgoto_"]').click(function(){
            $('div[class*="mapgoto_"]').removeClass('activepoint');
            $(this).addClass('activepoint');
            let pointNum = +$(this).attr('mapgoto_');
            myMap.setZoom( 15 );
            myMap.panTo([coordinatesArr[pointNum][0] , coordinatesArr[pointNum][1]], {duration: 1500});   
        });        
});

 }, 1500);

});
</script>

	<script src="https://forma.tinkoff.ru/static/onlineScript.js"></script>

<div class="t-input-group t-input-group_sb tkf-group" style="display:none"> 
    <div class="t-input-title t-descr t-descr_md" data-redactor-toolbar="no">Выбрать срок рассрочки</div> 
    <div class="t-input-subtitle t-descr t-descr_xxs t-opacity_70"></div>
    <div class="t-input-block"> 
        <div class="t-select__wrapper"> 
            <select name="tkf-select" class="t-select tkf-select"> 
                <option value="installment_0_0_4_6,43">На 4 месяца</option>
            </select>
        </div>
        <div class="tkf-button">Отправить заявку на рассрочку</div>
        </div>
</div> 

<style>
div[class^="modal-root"] {z-index: 101000}    
.tkfdis{opacity:0.4;pointer-events: none;}

select.tkf-select {
    color: #000000;
    border: 1px solid #000000;
}
.tkf-button {
    background-color: #ffdd2d;
    border-radius: 4px;
    padding: 20px 0px 20px;
    transition: all 0.25s linear;
    top: 18px;
    width: 100%;
    text-align: center;
    color: #484848;
    font-weight: 700;
    font-size: 16px;
    margin-top: 20px;
    cursor: pointer;
    font-family: 'Roboto',Arial,sans-serif;
}
.tkf-button:hover {
    background-color: #fcc521;
}
</style>

<script>
$(document).ready(function(){
$('input[value="banktransfer"]').closest('label').addClass('tkf-credit');
$('.tkf-group').insertAfter('.t706 .t-form');
function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min)) + min;
};
let creditActive=false;
let sumtotal = 0;
let prodListArr=[];
let orderName=0;
function getProdList(){
    orderName = "Ord-ImPro-"+getRandomInt(100000, 980900);
    $('input[name="tkfOrderNumber"]').val(orderName);
    
    
    sumtotal = window.tcart.amount;
    sumprod = window.tcart.prodamount;
    
    discoint = sumtotal/sumprod;
    prodListArr=[];
    for (let i = 0; i < window.tcart.products.length ; i++) {
        let prodListObj={};    
        prodListObj['name'] = window.tcart.products[i]['name'];
        prodListObj['price'] = ( (+window.tcart.products[i]['price'])*discoint).toFixed(2)  ;
        prodListObj['quantity'] = window.tcart.products[i]['quantity'];
        prodListArr.push(prodListObj);
    };
    prTotal = 0;
    for (let i = 0; i < prodListArr.length ; i++) {
        prTotal+= (+prodListArr[i].price)*(+prodListArr[i].quantity);
    };
    prTotal = +prTotal.toFixed(2);
    
};


function getCredit(){
tinkoff.create(
    {
      sum: prTotal ,
      items: prodListArr  ,
      Flow: 'sms',
      promoCode: $('select.tkf-select').val() ,
      orderNumber: orderName,

       shopId: '602afabb-dcf0-4929-a77f-f5f31cf56e0f',
      showcaseId: 'd98ab8cd-08a4-4bae-8b11-c8eb4d946d5a',

      values: {
        contact: {
          mobilePhone: $('input[name="cartPhone"]').val(),
          email: $('input[name="cartMail"]').val()
        }
      }
    },
    {view: 'modal'} // newTab - вая вкладка , modal - popup на странице
  );
};

function checkStartPosition(){
    if ( $('input[type=radio][name=paymentsystem]:checked').attr('data-payment-variant-system') == 'banktransfer') {
        creditActive=true;
        $('.tkf-group').show();
        $('.t706 .t-form__submit').hide();
    }else{creditActive=false;$('.tkf-group').hide();$('.t706 .t-form__submit').show()};  
};

$(".t706__cartwin-prodamount").bind( 'DOMSubtreeModified',function() {
    checkStartPosition();
    if(window.tcart.amount<7000){
        $('.tkf-credit input[type="radio"]').attr('disabled', true);
        $('.t-radio__wrapper-payment label:first input').prop('checked', true);
        $('.t-radio__wrapper-payment label:first input').change();
        $('.tkf-credit').addClass('tkfdis');
        $('.tkf-group').hide();
    }else{
        getProdList();    
        $('.tkf-credit input[type="radio"]').attr('disabled', false);
        $('.tkf-credit').removeClass('tkfdis');
    };
});

$('input[type=radio][name=paymentsystem]').change(function() { checkStartPosition()});
    
$('.t706').on("keydown", ".t-form", function(event) {return event.key != "Enter";});   

//Момент удаления товара
function uNdisSubm(){
    setTimeout(function(){ 
        if( $('.t706__product-deleted').length){disSubm();
        }else{
            $('.t706 .t-submit , .tkf-button').removeClass('tkfdis'); getProdList();  
        };
    }, 4000);
};
function disSubm(){
    if( $('.t706__product-deleted').length){
            $('.t706 .t-submit , .tkf-button').addClass('tkfdis'); uNdisSubm();
    };
};
$(document).on('click',' .t706__product-del ',function(e){ 
    setTimeout(function(){ disSubm()}, 500);
});


$('.tkf-button').click(function(e) {
setTimeout(function(){$('.t706 .t-submit').click()}, 400);
setTimeout(function(){ 
    if ( !$('.t706 .t-input-group').hasClass('js-error-control-box') ){
        getCredit();
        $('select.tkf-select').prop('disabled', true).parent().addClass('tkfdis');
        $('.tkf-group').hide();
} 
}, 700);
});    
});  
</script>