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

function load_routes (el,news=null,incrase,owner_type) {
    let local_page_iterator = standart_page_iterator
    if (!news){
        local_page_iterator = page_iterator
    }
    let check_url = (window.location.href.indexOf("my_routes") > -1)
    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 && !check_url ){
        let list = forloop_func_form(data_d,"get",get_url)
        data_d = list[0]
        get_url = list[1]
        url_ajax = "routes/find_routes/"

    } else if (check_url) {
        let list = forloop_func_form(data_d,"get",get_url)
        data_d = list[0]
        get_url = list[1]
        url_ajax = "routes/get_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']
    if (owner_type){
        data_d['owner_type'] = owner_type
    }

    $.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 = el
            // if (news && standart_page_iterator === 1){
            //     page_iterator++
            //     let new_page_routes = document.querySelector(".page_paging_elements_1")
            //     let new_page_routes_f_ = null
            //     let insert_place = new_page_routes
            //     if (new_page_routes.innerHTML){
            //         new_page_routes_f_ = document.createElement("div")
            //         let page_iterator_f_1 = local_page_iterator
            //         page_iterator_f_1++
            //         new_page_routes_f_.classList.add("page_paging_elements_" + page_iterator_f_1)
            //         $(new_page_routes_f_).insertAfter(".page_paging_elements_" + local_page_iterator);
            //         local_page_iterator++
            //         local_page_iterator++
            //         insert_place = new_page_routes_f_
            //     }
            //
            //     insert_place.innerHTML = data.html
            //     local_page_iterator++
            //     separator_iterator++
            //     let new_page_routes1 = document.createElement("div")
            //     new_page_routes1.classList.add("page_paging_elements_" + local_page_iterator)
            //     $(new_page_routes1).insertAfter(".page_paging_elements_" + local_page_iterator--);
            //     let line_separator1 = document.createElement("div")
            //     line_separator1.classList.add("line_separator_page_w_el")
            //     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++
            //     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")
            //         }
            //     }
            //     page_iterator++
            //     standart_page_iterator++
            //     separator_iterator++
            //     iterator_f_check++
            //     document.querySelector(".loader_f_loading_routes.show").classList.remove("show")
            // } else {
            //     page_iterator++
            //     standart_page_iterator++
            //     separator_iterator++
            //     iterator_f_check++
            //     let place_ins_parent = el.closest(".block_w_paging")
            //     let place_ins = place_ins_parent.querySelector(`.page_paging_elements_${local_page_iterator}`)
            //     if (!place_ins){
            //         place_ins = place_ins_parent.querySelector(`.page_paging_elements_${local_page_iterator}`)
            //     }
            //
            //     place_ins.innerHTML = data.html
            //     let old_page_iterator = local_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"
            //     //     }
            //     // )
            //     local_page_iterator++
            //     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")
            //         }
            //     }
            // }
            if (data.next_page_els_count){
                document.querySelector(".col_vo_els_f_load").innerHTML = ` ${data.next_page_els_count}`
            }
            let first_block_iteration = document.querySelector(`.page_paging_elements_${paging_iterator}`)
            let insert_place = null
            if (first_block_iteration && first_block_iteration.innerHTML){
                paging_iterator++
                let new_page_paging_elements = document.createElement('div')
                new_page_paging_elements.classList.add(`page_paging_elements_${paging_iterator}`)
                let splitter = document.createElement("div")
                splitter.classList.add("line_separator_page_w_el")
                $(splitter).insertAfter(first_block_iteration)
                $(new_page_paging_elements).insertAfter(splitter)
                insert_place = new_page_paging_elements
            } else {
                let splitter = document.createElement("div")
                splitter.classList.add("line_separator_page_w_el")
                $(splitter).insertAfter(first_block_iteration)
            }
            insert_place.innerHTML = data.html
            document.querySelector(".loader_f_loading_routes.show").classList.remove("show")


            if (data.last_block === true){
                el.classList.add("hide")
            } else if (data.last_block === false){
                if (el.classList.contains("hide")) {
                    el.classList.remove("hide")
                }
            }
            el.setAttribute("id",parseInt(number_last_route) + incrase)
        },
        error: function (data){

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

        }
    });

    // }

}

function set_right_btn_owner_type (el){
    let els = document.querySelectorAll(".btns_owner")
    let i = 0
    els.forEach(function (){
        if (els[i] !== el){
            els[i].classList.remove("active")
            els[i].classList.add("deactive")
        }
        i++
    })
    el.classList.add('active')
    el.classList.remove('deactive')
}

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
        let class_el = list_of_elements_form[i].classList
        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
                if (name_el === 'owner_type'){
                    if (class_el.contains('active')){
                        data[name_el] = value_el
                        str = `${str}${name_el}=${value_el}&`
                    } else {
                    //
                    }
                } else {
                    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
    }

}