page_iterator = 2
standart_page_iterator = 1
separator_iterator = 1
iterator_f_check = 1

function load_routes (el,news=null) {
    let local_page_iterator = standart_page_iterator
    if (!news){
        local_page_iterator = page_iterator
    }
    let number_last_route = el.id
    let incrase = 2
    if (!news){
        incrase = 10
    }
    let data_d = {
     'from_el':parseInt(number_last_route),
     'to_el':parseInt(number_last_route) + incrase
    }
    let get_url = ""
    let url_ajax = "get_articles_block/"
    if (!news){
        let list = forloop_func_form(data_d,"get",get_url)
        data_d = list[0]
        get_url = list[1]
        url_ajax = "routes/find_routes/"
    }

    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: `/${url_ajax}`,
        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_" + pasge_iterator
            // let place_ins = document.querySelector(url_insert)
            //

            //
            let place_ins_parent = el.closest(".block_w_paging")
            let place_ins = place_ins_parent.querySelector(`.page_paging_elements_${local_page_iterator}`)
            //

            // let place_ins = el

            place_ins.innerHTML = data.html
            let old_page_iterator = local_page_iterator
            // standart_page_iterator++
            local_page_iterator++
            page_iterator++
            standart_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_paging_elements_" + local_page_iterator)
            $(new_page_routes).insertAfter(".page_paging_elements_" + old_page_iterator);
            let line_separator = document.createElement("div")
            line_separator.classList.add("line_separator_page_w_el")

            if (news){
                if (iterator_f_check === 1){
                //
                } else {
                    $(line_separator).insertAfter(".page_paging_elements_" + separator_iterator);
                    separator_iterator++
                }
            } else {
                $(line_separator).insertAfter(".page_paging_elements_" + separator_iterator);
                separator_iterator++
            }

            // document.querySelector(".info_profile").innerHTML = data.html;
            el.setAttribute("id",parseInt(number_last_route) + incrase)
            history.pushState({'data':data_d,'str_data':get_url}, "state_filters", `?${get_url}`);
            // number_last_route = parseInt(number_last_route) + "11"
            iterator_f_check++
            if (data.last_block === true){
                el.classList.add("hide")
            } else if (data.last_block === false){
                if (el.classList.contains("hide")) {
                    el.classList.remove("hide")
                }
            }
        },
        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) {
            let name_el = name_attr.value
            if (list_of_elements_form[i].tagName === "INPUT" && list_of_elements_form[i].type === "checkbox"){


                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=&`
    }
    let btn_find_routes = document.querySelector(".btn_find_routes")
    if (btn_find_routes){
        if (!str.includes('owner_type')){
            if (data['owner_type']){
                str = `${str}owner_type=${data['owner_type']}`
            } else {
                let btn_find_routes = document.querySelector(".btn_find_routes")
                if (btn_find_routes.dataset){
                    let dataset = btn_find_routes.dataset
                    if (dataset['owner_type']){
                        str = `${str}owner_type=${dataset['owner_type']}`
                    }
                }
            }
        }
    }
    if (get !== null){
        let list = [data,str]
        return list
    } else {
        return data
    }

}