function writeMessage(el){
    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/ru/user_account/chats/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        // data: formData,
        success: function(data){

            // location.href = '/profile'
            document.querySelector(".info_profile").innerHTML = data.html;

            let list_div = document.querySelectorAll('.menu_profile div');
            list_div.forEach(el=>{ el.classList.remove('selected'); });
            el.classList.add('selected')

             //updating the url without reloading
            window.history.pushState(null, null, '/ru/profile/page/chat/')
            middleWareJS()

        },
        error: function (data, exception){
            console.log(400)

        }
    });
}


function technicalSupport(el){
    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/ru/user_account/support_tickets/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        // data: formData,
        success: function(data){


            // location.href = '/profile'
            document.querySelector(".info_profile").innerHTML = data.html;

            let list_div = document.querySelectorAll('.menu_profile div');
            list_div.forEach(el=>{ el.classList.remove('selected'); });
            el.classList.add('selected')

            //updating the url without reloading
            window.history.pushState(null, null, '/ru/profile/page/support/')
            middleWareJS()

        },
        error: function (data, exception){
            console.log(400)

        }
    });
}
function mySubscription(el){
    // boris changed
    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/ru/subscribes/show_cur_subscribe/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        // data: formData,
        success: function(data){

            document.querySelector(".info_profile").innerHTML = data.html;

            // location.href = '/profile'
            // document.querySelector(".info_profile").innerHTML = data.html;

            let list_div = document.querySelectorAll('.menu_profile div');
            list_div.forEach(el=>{ el.classList.remove('selected'); });
            el.classList.add('selected')

            //updating the url without reloading
            window.history.pushState(null, null, '/ru/profile/page/my_subscribe/')
            middleWareJS()

        },
        error: function (data, exception){
            console.log(400)

        }
    });
}
function myProfile(el){
    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/ru/user_account/change_profile/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        // data: formData,
        success: function(data){


            // location.href = '/profile'
            document.querySelector(".info_profile").innerHTML = data.html;

            let list_div = document.querySelectorAll('.menu_profile div');
            list_div.forEach(el=>{ el.classList.remove('selected'); });
            el.classList.add('selected')

            //updating the url without reloading
            window.history.pushState(null, null, '/ru/profile/page/change_profile/')
            middleWareJS()

        },
        error: function (data, exception){
            console.log(400)

        }
    });
}

// function selectMenuItem() {
//         let list_div = document.querySelectorAll('.menu_profile div');
//
//         list_div.forEach(item =>{
//             item.addEventListener('click', (e) =>{
//             list_div.forEach(el=>{ el.classList.remove('selected'); });
//             item.classList.add('selected')
//         })
//     })
//
//
// }



function removeRoute(el) {
    let data = el.currentTarget.closest('.carrier-card');
    let remove_item = data.dataset.numberOfRoute
    let remove_data = {}
    let name_route = 'route_id'
    remove_data[name_route] = remove_item

     // console.log(remove_item)

        $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/ru/routes/del_route/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        data: JSON.stringify(remove_data) ,
        success: function(data){


            // location.href = '/profile'
            document.querySelector(".info_profile").innerHTML = data.html;

            // let list_div = document.querySelectorAll('.menu_profile div');
            // list_div.forEach(el=>{ el.classList.remove('selected'); });
            // el.classList.add('selected')

            //updating the url without reloading
            window.history.pushState(null, null, '/ru/profile/page/change_profile/')

            middleWareJS()
        },
        error: function (data, exception){
            console.log(400)

        }
    });


}

function cancelRemove() {
    let parent_cancel_button = document.querySelector('.button_remove_route')
    let cancel_button = document.querySelector('.cancel_remove')
    parent_cancel_button.removeChild(cancel_button)

    let remove_button = document.querySelector('.confirm_remove');
    remove_button.classList.remove('confirm_remove');
    remove_button.innerText = 'Удалить';
    remove_button.setAttribute("id", "remove_route");

    remove_button.removeEventListener('click', removeRoute);


}


function confirmRemove(el) {

    el.setAttribute("id", "select-remove");
    let btn = document.querySelector("#select-remove");

    if (!btn.classList.contains('confirm_remove')) {
        btn.classList.add('confirm_remove');
        btn.innerText = 'Подтвердить удаление';
        btn.addEventListener('click', removeRoute, { once: true });

        let cancel_button = document.createElement('button');
        cancel_button.className = "cancel_remove";
        cancel_button.innerText = "Отменить удаление";
        cancel_button.addEventListener('click', cancelRemove)


        let place = btn.closest(".button_remove_route");
        place.insertBefore(cancel_button, btn.nextSibling);

        btn.removeAttribute( "select-remove");


    }
}



function searchTown(el){

    if (el.value.length > 0){
            el.style.background = 'white url("/static/img/svg/loader.svg") no-repeat calc(100% - 15px) center';
    }else {
            el.style.background = 'white url("/static/img/png/icon-arrow.svg") no-repeat calc(100% - 15px) center';
    }

      if(el.value.length>=3){
            let timer = null
            if (timer) {
              clearTimeout(timer);
            }
            timer = setTimeout(function(){

                timer = null;
                let form = el.form;
                let type_transport_el = form['type_transport'];
                let type_transport = ""
                if(type_transport_el){
                    type_transport = type_transport_el.value
                }
                let search_str = el.value;
                let get_address_point = new Object({type_transport, search_str});
                get_address_point['ctrl_name'] = el.name;

                $.ajax({
                    headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
                    url: '/ru/reference_data/get_address_point/',
                    type: "POST",
                    // async: true,
                    cache: false,
                    processData: false,
                    contentType: false,
                    // enctype: 'json',
                    data: JSON.stringify(get_address_point),
                    success: function(data){
                         el.style.background = 'white url("/static/img/png/icon-arrow.svg") no-repeat calc(100% - 15px) center';



                        return insertSearchList(data, el.name + '_list');
                        middleWareJS()
                    },
                    error: function (data){

                        console.log('Error')

                    }
                });
           }, 1500);
}

    }










function selectItemAddrPoint(id, name, ctrl_name,){
            let input_list = document.getElementsByName(ctrl_name + '_list')[0];
            let tap_txt_cont = document.querySelector("#id_" + ctrl_name);
            tap_txt_cont.value = name;
            let tap_cont = document.querySelector("#id_" + ctrl_name.slice(0, -4));
            tap_cont.value = id;

            input_list.classList.remove('show');

  }


function insertSearchList(data, ctrl_name) {

    let input_list = document.getElementsByName(ctrl_name)[0];
    let divs = data.res_search_list;

    if (divs.length > 0) {
        input_list.classList.add("show");
        input_list.innerHTML = divs;
    } else {
        input_list.classList.remove("show");
    }

}


function showSearchList(el) {
    if(el.classList.contains('from_address_point_txt')){
        let input_list = document.querySelectorAll('.input_list')
        let value = input_list[0].classList.contains('show')
        if(value === false && input_list[0].childElementCount > 0){
            input_list[0].classList.add("show");
        }
    }else if (el.classList.contains('to_address_point_txt')) {
        let input_list = document.querySelectorAll('.input_list')
        let value = input_list[1].classList.contains('show')
        if(value === false && input_list[1].childElementCount > 0){
            input_list[1].classList.add("show");
        }
    }


}

function onblurInputField(event,el){

    // if(el.classList.contains("from_country_container")){
        let search_list = document.getElementsByName(el.name + '_list')[0];
        let parent_event = $(event.explicitOriginalTarget).parents('.input_list' );
        if(!parent_event || parent_event[0] !== search_list){

       search_list.classList.remove('show')
    }

    // }
}


// function hideErrorMsg(el) {
//     let hide_element = document.querySelector()
//     if(el.value !== 0){
//         hide_element.classList.add('hide')
//     }
//
// }

function sliderInit() {

     let $range = $("#id_weight"),
         $input = $(".js-input"),
         instance,
         min = 0,
         max = 1000,
         start_value = document.querySelector(".range-slider").value;

    $range.ionRangeSlider({
        skin: "round",
        type: "single",
        min: min,
        max: max,
        from: start_value,
        step: 1,
        grid: true,
        grid_num: 5,
        onStart: function(data) {
            if(data.from > 0){
                $input.prop("value", data.from);
            }
        },
        onChange: function(data) {
            $input.prop("value", data.from);
        }
    });

    instance = $range.data("ionRangeSlider");

    $input.on("change keyup", function() {
        let val = $(this).prop("value");

        // validate
        if (val < min) {
            val = min;
        } else if (val > max) {
            val = max;
        }

        instance.update({
            from: val
        });
    });


}

function sendRoute(el, routeID = null){
    event.preventDefault()
    el.disabled = true


    let list_of_elements_form = document.querySelectorAll(".el_form_b_new_route");
    let checked_cargo_type = document.querySelectorAll('.cargo_check');



    let obj_w_el_form = {}


    for (let n = 0;n < checked_cargo_type.length; n++){
        let checked_cargo = checked_cargo_type[n]
        if(checked_cargo.checked === true){
           let name_cargo = checked_cargo.name
           let value_cargo = checked_cargo_type[n].value
           obj_w_el_form[name_cargo] = value_cargo


        }
    }




    for (let i = 0; i < list_of_elements_form.length ;i++) {
        // let id_el = list_of_elements_form[i].id
        // if (id_el){
        //     if (id_el === "")
        // }



        let name_attr = list_of_elements_form[i].attributes["name"]
        if (name_attr) {
            let name_el = name_attr.value
            let value_el = list_of_elements_form[i].value
            obj_w_el_form[name_el] = value_el
        }
    }



    let selected_owner_type = document.querySelectorAll("#customer, #mover")

    selected_owner_type.forEach(function(item) {
    if (item.classList.contains('selected')) {
          let { id, innerText } = item
          obj_w_el_form['owner_type'] = id
      }
    });

    if (selected_owner_type[0].classList.contains('selected')){

    }else{}

    let url = '/ru/routes/create_or_change_route/'
    if (routeID !== null){
        url = '/ru/routes/change_route/' + routeID + '/'
    }

    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: url,
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        data:  JSON.stringify(obj_w_el_form),
        success: function(data){


            // location.href = '/profile'
            document.querySelector(".info_profile").innerHTML = data.html

            let list_div = document.querySelectorAll('.menu_profile div');
            let my_routes = document.getElementById("my_routes_id")
            list_div.forEach(el=>{ el.classList.remove('selected'); });
            my_routes.classList.add('selected')
            middleWareJS()

        },
        error: function (data, exception){
            document.querySelector(".info_profile").innerHTML = data.responseJSON.html;
            // $(el).attr('disabled', 'false')

            sliderInit();



        }
    });
}



function validate(el) {
  if (el.checked) {
      console.log('cheked', el.id);
  } else {
      console.log("You didn't check it! Let me check it for you.", el.id);
  }
}




//cleaning route inputs after selection changes
function OnSelectionChange(el) {
    event.preventDefault()

    let form = el.form;
    let formData = new FormData(form);

    // let data = {};
    // data['csrfmiddlewaretoken'] = $('input[name="csrfmiddlewaretoken"]')[0].value;
    // data['type_transport'] = $('select[name="type_transport"]')[0].value;

    $.ajax({
        headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
        url: '/ru/user_account/new_route_view/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        // data: JSON.stringify(data),
        data: formData,
        success: function (data) {
            console.log('data.html');
            // location.href = '/profile'
            document.querySelector(".info_profile").innerHTML = data.html
            //
            // let checkbox_width = document.querySelector('.checkbox_cargo_type');
            // if(checkbox_width.childElementCount === 4){
            //     checkbox_width.classList.add('width')
            // }
               sliderInit();

       }
    });

};



function createRoute(el, owner_type){
    let obj = {
        'owner_type': owner_type
    }

    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/ru/user_account/new_route_view/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        data: JSON.stringify(obj),
        success: function(data){


            // location.href = '/profile'
            document.querySelector(".info_profile").innerHTML = data.html

            let list_div = document.querySelectorAll('.menu_profile div');
            list_div.forEach(el=>{ el.classList.remove('selected'); });
            el.classList.add('selected')

            //updating the url without reloading
            if(el.id == 'customer'){
               window.history.pushState(null, null, '/ru/profile/page/create_route_for_customer/')
            } else {
               window.history.pushState(null, null, '/ru/profile/page/create_route_for_mover/')
            }
            middleWareJS()



            //get dynamic value
            // let fromCountry = document.getElementById('id_from_country');
            // let toCounytry = document.getElementById('id_to_country')
            //
            // toCounytry.oninput = function (){
            //     console.log(toCounytry.value)
            // }
            // fromCountry.oninput = function (){
            // console.log(fromCountry.value)
//
// };


        },
        error: function (data, exception){
            console.log(101)

        }
    });
}

function getRoute(el){
    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/ru/routes/get_routes/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        // data: formData,
        success: function(data){


            // location.href = '/profile'
            document.querySelector(".info_profile").innerHTML = data.html;

            let list_div = document.querySelectorAll('.menu_profile div');
            list_div.forEach(el=>{ el.classList.remove('selected'); });
            el.classList.add('selected')

            window.history.pushState(null, null, '/ru/profile/page/my_routes/')

            middleWareJS()

        },
        error: function (data, exception){
            console.log(101)

        }
    });
}function editRoute(id) {
    let route_obj = {
        'route_id': id
    }

    $.ajax({
        headers: {"X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val()},
        url: '/ru/routes/edit_route/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        data: JSON.stringify(route_obj),
        success: function (data) {

            // location.href = '/profile'
            document.querySelector(".info_profile").innerHTML = data.html;

            sliderInit();



        },
        error: function (data, exception) {
            console.log(101)

        }
    });

}




function showMenu(el, event) {
    let menu = document.querySelector('.dropdown-content')
        menu.classList.add('show')


}
function hideMenu(event) {
    let menu = document.querySelector('.dropdown-content')
   if(event.currentTarget != event.relatedTarget && event.relatedTarget != null){
        menu.classList.remove('show')
        console.log('mouseOUT')
    }

}

function checkDate() {
      let dateDeparture = document.getElementById('id_departure_DT');
      let dateArrival = document.getElementById('id_arrival_DT');
      let DateStart = new Date(dateDeparture.value);
      let DateEnd = new Date(dateArrival.value);
      if (DateEnd < DateStart) {

        // alert("End date cannot be less than Start date.");
        dateArrival.value = ""

        let arrivalDiv = document.getElementById('arrival_div')
        let errorMessage = document.createElement('span');
            errorMessage.textContent = "Дата прибытия, не может быть установлена раньше даты отправки"
            errorMessage.classList.add('errorlist')
            arrivalDiv.appendChild(errorMessage);
      }
        else if (DateEnd > DateStart){
            let arrivalDiv = document.getElementById('arrival_div');
            let errorMessage = document.querySelector('.errorlist');
            arrivalDiv.removeChild((errorMessage))
      }
    
}

function RequestCommercialOffer (el){

    event.preventDefault()
    let form = el.form;
    let formData = new FormData(form);




    $.ajax({
        headers: { "X-CSRFToken": $('input[name=csrfmiddlewaretoken]').val() },
        url: '/ru/user_account/request_offer/',
        type: "POST",
        // async: true,
        cache: false,
        processData: false,
        contentType: false,
        // enctype: 'json',
        data: formData,
        success: function(data){

            // location.href = '/profile'


        },
        error: function (data, exception){
        //     document.querySelector(".login").innerHTML = data.responseJSON.html
        }
    });
}



function counterText(evt) {
    const counter = document.querySelector('.counter-text__current');
    const maxlength = 360;
    counter.textContent = evt.value.length;



}