let page_iterator = 2
let separator_iterator = 1

function load_routes (el) {
    let number_last_route = el.id
    let data = {
     'from_el':parseInt(number_last_route) + 1,
     'to_el':parseInt(number_last_route) + 11
    }
    data = forloop_func_form(data)
    let loader = document.querySelector(".loader_f_loading_routes")
    loader.classList.toggle("show")
    el.classList.toggle("hide")
    event.preventDefault()
    // let el_parent = el.parentNode
    // let new_el = el_parent.previousSibling.previousSibling
    // let new_el_dataset = new_el.dataset
    // if (new_el_dataset){
    // let number_last_route = new_el_dataset['numberOfRoute']
    // let number_last_route = el.dataset['lastRoute']


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

            // new_el.parentNode.insertBefore(data.html, new_el.nextSibling);
            let url_insert = ".page_routes_" + page_iterator
            let place_ins = document.querySelector(url_insert)
            place_ins.innerHTML = data.html
            let old_page_iterator = page_iterator
            page_iterator++
            loader.classList.toggle("show")
            if (!data.last_block_routes){
                el.classList.toggle("hide")
            }
            // let el_scroll = place_ins.firstElementChild
            // el_scroll.scrollIntoView(
            // {
            //         behavior:"smooth"
            //     }
            // )
            let new_page_routes = document.createElement("div")
            new_page_routes.classList.add("page_routes_" + page_iterator)
            $(new_page_routes).insertAfter(".page_routes_" + old_page_iterator);
            let line_separator = document.createElement("div")
            line_separator.classList.add("line_separator_page_w_el")
            $(line_separator).insertAfter(".page_routes_" + separator_iterator);
            // document.querySelector(".info_profile").innerHTML = data.html;
            el.setAttribute("id",parseInt(number_last_route) + 11)
            separator_iterator++
            // number_last_route = parseInt(number_last_route) + "11"
        },
        error: function (data){

            document.querySelector(".block-finded-routes").innerHTML = data.responseJSON.html;

        }
    });

    // }

}

function forloop_func_form (data) {
    let list_of_elements_form = document.querySelectorAll(".el_form_find_route");
    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"]
        let value_el = list_of_elements_form[i].value
        if (name_attr) {
            if (list_of_elements_form[i].tagName === "INPUT" && list_of_elements_form[i].type === "checkbox"){
                let name_el = name_attr.value

                if (list_of_elements_form[i].checked){

                    if (name_el === "type_transport"){
                        let old_val = data["type_transport"]
                        if (old_val){
                            data["type_transport"] = `${data["type_transport"]},${value_el}`
                        } else {
                            data[name_el] = value_el
                        }
                    }


                } else {
                    data[name_el] = ""
                }

            } else {
                let name_el = name_attr.value
                data[name_el] = value_el
            }
        }
    }
    return data
}