page_iterator = 2
separator_iterator = 1

function load_routes (el) {
    let number_last_route = el.id
    let data_d = {
     'from_el':parseInt(number_last_route) + 1,
     'to_el':parseInt(number_last_route) + 11
    }
    let get_url = ""
    let list = forloop_func_form(data_d,"get",get_url)
    data_d = list[0]
    get_url = list[1]
    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_d),
        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)
            history.pushState({'data':data_d,'str_data':get_url}, "state_filters", `?${get_url}`);
            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,get,str) {
    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}`
                            if (get !== null){
                                // let new_old_val = old_val.replace("", )
                                let new_str = str.replace(`type_transport=${old_val}`,`type_transport=${old_val},${value_el}`)
                                str = new_str
                                // str.replace(`type_transport=${new_old_val}&`,"")
                            }
                        } else {
                            data[name_el] = value_el
                            if (get !== null){
                                str = `${str}${name_el}=${value_el}&`
                            }
                        }
                    }


                }

            } else {
                let name_el = name_attr.value
                data[name_el] = value_el
                str = `${str}${name_el}=${value_el}&`
            }
        }
    }
    if (!data["type_transport"]){
        data["type_transport"] = ""
        str = `${str}type_transport=&`
    }
    if (get !== null){
        let list = [data,str]
        return list
    } else {
        return data
    }

}