/*
 * User related JS
 * 
 * 
 * 
 * 
 */




// GLOBAL VARIABLES
var spinners = {
    'primary': '<div class="progress">' +
            '<div class="progress-bar progress-bar-striped" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>' +
            '</div>',
    'primary-spinner': '<div class="spinner-border text-primary" role="status" style="width:25px;height:25px">' +
            '<span class="visually-hidden">Loading...</span>' +
            '</div>',

}
const app = {
        visitor_pages: [],
        
        conversion_button: document.querySelector(".conversion-button"),
        
        conversion_type: null,
        
        allowed_types: [],
        
        seo_tags: ["description", "title"],
        
        is_dev: false,
        
        is_logged: false,
        
        allowed_file_size: null,
        
        file_size: 0,
        
        init(){
            cookies = this.getCookies()
            cookies.logged !== undefined && cookies.logged !== "false" ? this.is_logged = true : null,
            this.check_if_dev() ? this.is_dev = true : null;
            
            if( this.conversion_button !== null && this.conversion_button !== undefined){
                this.conversion_type = this.conversion_button.id;
                
                if( this.conversion_type === "ocr" ){
                    this.allowed_types = ["jpg","png","jpeg","pdf","tiff"];
                    this.max_files = 15;
                    this.is_logged ? this.allowed_file_size = 200 : this.allowed_file_size = 30
                }
                
                 if( this.conversion_type === "pdf-to-image"){
                    this.allowed_types = ["pdf"];
                    this.max_files = 10;
                    this.is_logged ? this.allowed_file_size = 200 : this.allowed_file_size = 30

                }
                
                if( this.conversion_type === "image-to-pdf"){
                    this.allowed_types = ["jpg","jpeg","png","tiff"];
                    this.is_logged ? this.max_files = 15 : this.max_files = 5
                    this.is_logged ? this.allowed_file_size = 200 : this.allowed_file_size = 30

                }
                if( this.conversion_type === "split-pdf"){
                    this.allowed_types = ["pdf"];
                    this.is_logged ? this.max_files = 1 : this.max_files = 1
//                    this.is_logged ? this.allowed_file_size = 200 : this.allowed_file_size = 30

                }
                
                if( this.conversion_type === "kw-check" ){
                    this.allowed_types = ["txt", "docx"]
                    this.max_files = 1;
                    this.is_logged ? this.allowed_file_size = 200 : this.allowed_file_size = 30

                }
                
                if( this.conversion_type == "pdf-add-watermark"){
                    this.allowed_types = ["pdf"]
                    this.max_files = 1;
                    this.is_logged ? this.allowed_file_size = 200 : this.allowed_file_size = 30

                }
                if( this.conversion_type == "merge-pdf"){
                    this.allowed_types = ["pdf"]
                    this.max_files = 10;
                    this.is_logged ? this.allowed_file_size = 200 : this.allowed_file_size = 30

                }
                if( this.conversion_type == "compress-pdf"){
                    this.allowed_types = ["pdf"]
                    this.max_files = 1;
                    this.is_logged ? this.allowed_file_size = 200 : this.allowed_file_size = 30
                }
                if( this.conversion_type == "swap-pdf-pages"){
                    this.allowed_types = ["pdf"]
                    this.max_files = 1;
                    this.is_logged ? this.allowed_file_size = 200 : this.allowed_file_size = 30

                }
            }
            
            this.is_dev ? prefix = "dev." : prefix = "";
            
            this.visitor_pages = [
                "https://" + prefix + "dailyocr.com/",
                "https://" + prefix + "dailyocr.com/tools/",
                "https://" + prefix + "dailyocr.com/tools/ocr",
                "https://" + prefix + "dailyocr.com/tools/pdf-to-image",
                "https://" + prefix + "dailyocr.com/tools/image-to-pdf",
                "https://" + prefix + "dailyocr.com/tools/keyword-density",
                "https://" + prefix + "dailyocr.com/tools/seo-heading-checker",
                "https://" + prefix + "dailyocr.com/tools/seo-description-checker",
                "https://" + prefix + "dailyocr.com/tools/seo-title-checker",
                "https://" + prefix + "dailyocr.com/tools/seo-sitemap-checker",
                "https://" + prefix + "dailyocr.com/tools/sitemap-broken-links",
                "https://" + prefix + "dailyocr.com/tools/sitemap-generator",
                "https://" + prefix + "dailyocr.com/tools/seo-robots-checker",
                "https://" + prefix + "dailyocr.com/tools/write-seo-title",
                "https://" + prefix + "dailyocr.com/tools/write-seo-description",
                "https://" + prefix + "dailyocr.com/tools/split-pdf",
                "https://" + prefix + "dailyocr.com/tools/pdf-add-watermark",
                "https://" + prefix + "dailyocr.com/tools/merge-pdf",
                "https://" + prefix + "dailyocr.com/tools/swap-pdf-pages",
                "https://" + prefix + "dailyocr.com/tools/minified-js-checker",
                "https://" + prefix + "dailyocr.com/tools/minified-css-checker",
                "https://" + prefix + "dailyocr.com/tools/seo-image-checker",
                "https://" + prefix + "dailyocr.com/tools/seo-social-checker",
                "https://" + prefix + "dailyocr.com/tools/seo-canonical-checker",
                "https://" + prefix + "dailyocr.com/tools/seo-page-size-checker",
                "https://" + prefix + "dailyocr.com/tools/seo-gzip-checker",
                "https://" + prefix + "dailyocr.com/tools/whois-lookup",
                "https://" + prefix + "dailyocr.com/tools/check-http-header",
                "https://" + prefix + "dailyocr.com/tools/domain-age-checker",
                "https://" + prefix + "dailyocr.com/tools/website-tree-structure",
                "https://" + prefix + "dailyocr.com/tools/broken-links-checker",

            ];
    
            if( !this.is_dev ){
                if( this.visitor_pages.find(elem => elem === window.location.href) ){
                    load_analitics();
                }
                
            }
        },
        
        check_if_dev(){
            if( location.hostname.indexOf("dev") !== -1 ){
                return true;
            }else{
                return false;
            }
        },
        
        getCookies(){
            var pairs = document.cookie.split(";");
            var cookies = {};
            for (var i=0; i<pairs.length; i++){
              var pair = pairs[i].split("=");
              cookies[(pair[0]+'').trim()] = unescape(pair.slice(1).join('='));
            }
            return cookies;
        },
        
        input_accept(){
            inpt = document.querySelector("#file");
            if( inpt == null || inpt == undefined ){
                return false;
            }
            replace_inpt = document.querySelector("#replace_file");
            attr_string = "";
            this.allowed_types.forEach(function(tp){
                if(tp == "pdf"){
                    attr_string += "application/" + tp + ", ";
                }
                attr_string += "image/" + tp + ", ";
            })
            
            inpt.setAttribute("accept", attr_string)
            if( replace_inpt !== undefined && replace_inpt !== null){
                replace_inpt.setAttribute("accept", attr_string)
            }
        }
        
        
};
app.init();
//console.log( app.is_dev);


function clear_storage(){
//    var conv_btn = document.querySelector(".conversion-button")
    window.addEventListener("beforeunload", clearHandler)
    
    function clearHandler(){
        if(localStorage.getItem("order_id" )){
            var url = "/clear?id=" + localStorage.getItem("order_id");
            sendRequest.doGet(url, null);
            localStorage.removeItem("order_id");
        }else {
            token = document.querySelector("#token")
            if(token){
                var url = "/clear?token=" + token.value 
                sendRequest.doGet(url, null);
            }

        }

    }
    
}

async function update_connection_status(){
    window.onbeforeunload = function () {
    token = document.querySelector("#token").value
    var url = "/progress-data?connection=closed&token=" + token;
    sendRequest.doGet(url, null);

    };
}

function user_create(){
    var pass = document.querySelector("[name=password]");
    var re_pass = document.querySelector("[name=retype_password]");
    var sbmt = document.querySelector("[name=create]");
    var user_name = document.querySelector("[name=user_name]");
    var numbers = [0,1,2,3,4,5,6,7,8,9];
    sbmt.addEventListener("click", function(ev){
        count = 0;
        Array.from(pass.value).forEach(function(elem){
           if( numbers.includes(parseInt(elem)) ){
               count++;
           }
        })
        if( user_name.value.length < 5 ){
            ev.preventDefault();
            set_alert("Username must be at least 5 characters long!", "danger");
        }
        else if( pass.value.length < 7 ){
            ev.preventDefault();
            set_alert("Password too short. Must be at least 7 characters long.", "danger");
        }
        else if( count < 1){
            ev.preventDefault();
            set_alert("Password must contain at least 2 alpha numeric characters!", "danger");
        }
        else if( pass.value !== re_pass.value){
            ev.preventDefault();
            set_alert("Passwords must match!", "danger");
        }
    })
}

function display_allowed_types(){
    var file_input = document.querySelector(".upload-span");
    if( file_input !== undefined && file_input !== null ){
        file_input.innerHTML = file_input.innerHTML + app.allowed_types.join(", ").toUpperCase();
    }
}

function change_convert_btn(bool, hide = false){
    var btn = document.querySelector(".conversion-button");
    if( bool ){
        btn.removeAttribute("disabled");
        btn.parentElement.classList.remove("d-none");

    }else{
        if( hide ){
            btn.parentElement.classList.add("d-none");
        }
        btn.setAttribute("disabled","disabled");
    }
}
function split_pdf_data(){
    var split_type = document.querySelectorAll(".split-type")
    split_type = Array.from(split_type).find(elem => elem.hasAttribute("checked"))
    var total_files = document.querySelector(".total-pdfs").innerHTML
    var form_data_results = [];
    form_data_results["total_pdfs"] = total_files;
    form_data_results["split_type"] = split_type.id;
    var split_points = []
    var removes = [];
    switch (split_type.id){
        case "manual":
            var manual_splits = document.querySelectorAll(".manual-split")
            var manual_removes = document.querySelectorAll(".manual-remove")
            manual_splits.forEach(function(elem){
                var from = parseInt(elem.querySelector(".manual-from-span").innerHTML.split(":")[1])
                var to = parseInt(elem.querySelector(".manual-to-span").innerHTML.split(":")[1])
                split_points.push(from + "-" + to);
            })
            form_data_results["splits"] =  split_points;

            manual_removes.forEach(function(elem){
                removes.push(elem.innerHTML);
            })
            removes.length == 0 ? form_data_results["removes"] = "none" : form_data_results["removes"] =  removes;
            break;
        case "range":
            var range_splits = document.querySelectorAll(".range-split-holder")
            range_splits.forEach(function(elem, idx){
                var from = parseInt(elem.querySelector("#start-page-" + (idx + 1) ).querySelector(".page-number").innerHTML)
                var to = parseInt(elem.querySelector("#end-page-" + (idx + 1) ).querySelector(".page-number").innerHTML)
                split_points.push(from + "-" + to);
            })
            form_data_results["splits"] =  split_points;
            form_data_results["removes"] =  "none";
            break;
        case "all":
            var all_splits = document.querySelectorAll(".all-split");
            all_splits.forEach(function(elem, idx){
                var from = parseInt(elem.children[0].innerHTML.split(":")[1])
                split_points.push(from);
            })
            var all_removes = document.querySelectorAll(".manual-remove")
            all_removes.forEach(function(elem){
                removes.push(elem.innerHTML.split(":")[1]);
            })
            form_data_results["splits"] =  split_points;
            form_data_results["removes"] =  removes;
            break;
    }
    document.querySelector("#zip-files").hasAttribute("checked") ? form_data_results["has_zip"] = "true" : form_data_results["has_zip"] = "false"
  
    //                return false;;
    return form_data_results;
}

function add_swap_pdf_pages_data(){
    var form_data_results = [];
    form_data_results["page-order"] = []
    pages = document.querySelectorAll(".page-holder")
    pages.forEach(function(page){
        form_data_results["page-order"].push(page.id); 
    })
    removed = document.querySelectorAll(".manual-remove");
    if( removed.length > 0 ){
        form_data_results["removed"] = []
        removed.forEach(function(rm){
            form_data_results["removed"].push(rm.innerHTML);
        })
    }
    return form_data_results
}
function add_watermark_data(){
    var method = document.querySelectorAll(".method")
    method = Array.from(method).find(elem => elem.hasAttribute("checked"))
    var form_data_results = [];

    form_data_results["pages"] = [];

    if( method.id == "manual" ){
        
        pages = document.querySelectorAll(".watermarked")
        if( pages.length == 0 ){
            set_alert("Select pages to add watermark!", "danger");
            return false;
        }
        to_add = [];
        pages.forEach(function(page){
            holder = page.parentElement.previousSibling
            to_add.push( parseInt(holder.querySelector(".page-number").innerHTML) - 1 )
            
        })
        form_data_results["pages"] = to_add

    }
    if( method.id == "all" ){
        form_data_results["pages"]= [1,pdf_renderer.total_pages]
        removed_pages = document.querySelector(".removed-pages-list").querySelectorAll(".manual-remove")
        if( removed_pages.length > 0 ){
            form_data_results["removed-pages"] = []
            removed_pages.forEach( function(elem){
                form_data_results["removed-pages"].push(elem.innerHTML)
            })
        }
    }
    
    if( method.id == "range"){
        menus = document.querySelectorAll(".range-menu");
        menus.forEach(function(menu){
            inpts = menu.querySelectorAll(".range-input")
            form_data_results["pages"].push( [parseInt(inpts[0].value) - 1, parseInt(inpts[1].value) - 1])
        })
    }
    
    form_data_results["method"] = method.id;
    form_data_results["wm-type"] = document.querySelector(".selected-watermark").id
    
    if( form_data_results["wm-type"] == "text-wm" ){
        
        form_data_results["input-text"] = document.querySelector("input[name=input-text]").value
    
        if( !form_data_results["input-text"] ){
            set_alert("Insert text before submitting!", "danger");
            return false;
        }

        form_data_results["text-font"] = document.querySelector("select[name=font-text]").value
        form_data_results["text-size"] = document.querySelector("input[name=size-text]").value
        form_data_results["text-color"] = hex2rgb(document.querySelector("input[name=color-text]").value)
        form_data_results["text-dimensions"] = get_text_dimensions(form_data_results["input-text"],form_data_results["text-size"])

        text_buttons = document.querySelectorAll(".text-decoration-input")
        text_buttons.forEach(function(btn){
            if( btn.hasAttribute("checked") ){
                form_data_results[btn.name] = "yes";
            }
        })

    }else{
        file = document.querySelector("#wm-file")
        if( !file.files ){
            set_alert("Please select an image as watermakr!", "danger");
            return false;
        }
        form_data_results["file-name"] = file.files[0].name
    }
    
   
    positions = [];
    p_boxes = document.querySelectorAll(".position-box")
    p_boxes.forEach( function(bx){
        if( bx.hasAttribute("checked") ){
            positions.push(bx.value);
        }
    })
    
    if( positions.length == 0 ){
        set_alert("Select a position for the watermark!", "danger")
        return false;
    }
    form_data_results["positions"] = positions
    form_data_results["opacity"] = document.querySelector("select[name=opacity]").value
    form_data_results["orientation"] = document.querySelector("select[name=orientation]").value

    return form_data_results;
    

}



function get_text_dimensions(str = "", size = false ){
    div = document.createElement("div")
    div.style.position = "absolute";
    div.style.visibility = "hidden"
    div.style.height = "auto"
    div.style.width = "auto"
    div.style.whiteSpace = "nowrap"
    div.innerHTML = str
    document.body.appendChild(div);
    res = [div.clientWidth, div.clientHeight]
    
    div.remove();
    
    return res;
}

async function upload_files(convert = true){
    loading(true);
    change_convert_btn(false);
    remove_download_btn();
    let form_data = new FormData();
    var file_selector = document.querySelector("#file");
    var selects = document.querySelectorAll("select");
    var boxes = document.querySelectorAll("input[type=checkbox]");
    idx = 0;
    if( file_selector.files.length == 0 ){
        message = "Please upload files before converting!";
        set_alert(message, "danger");
        change_convert_btn(true);
        loading(false, true);

        return false;
    }
    if( file_selector.files.length > app.max_files ){
        message = "You can upload up to " + app.max_files + " files at the same time!";
        set_alert(message, "danger");
        change_convert_btn(true);
        loading(false, true);

        return false;
    }
    
    if( app.file_size > app.allowed_file_size ){
        message = "Your files have exceeded the allowed size of " + app.allowed_file_size + "MB!";
        set_alert(message, "danger");
        loading(false, true);
        change_convert_btn(true);
        return false;
    }
    
    
    if( app.conversion_type === "image-to-pdf" || app.conversion_type == "merge-pdf" || app.conversion == "swap-pdf-pages"){
        form_data = order_file_list(); 
    }else{
        for ( const value of file_selector.files){
            form_data.append("files_" + idx ,value);
            ++idx;
        }
    }
    if( app.conversion_type === "split-pdf" ){
//        var split_type = document.querySelectorAll(".split-type");
//        var type = split_type.find(elem => elem.hasAttribtute("checked"))
        
//        form_data.append("split_type", type.id)

        var split_data = split_pdf_data()
        if( split_data["splits"].length == 0 ){
            set_alert("Please make sure your resulted PDF contains at least 1 page!", "danger")
            change_convert_btn(true)
            loading(false, true);

            return false;
        }
        form_data.append("split_type", split_data["split_type"])
        form_data.append("total_pdfs", split_data["total_pdfs"])
        form_data.append("ranges", split_data["splits"])
        form_data.append("removes", split_data["removes"])
        form_data.append("has_zip", split_data["has_zip"])
        
//        document.querySelector(".input-label").scrollIntoView()
    }
    
    if( app.conversion_type == "pdf-add-watermark" ){
        data = add_watermark_data();
        if( !data ){
            change_convert_btn(true)
            return false;
        }
        
        if( data["wm-type"] == "img-wm" ){
            form_data.append("watermark-image", document.querySelector("#wm-file").files[0]);
        }
        form_data.append("pdf-options",JSON.stringify(Object.assign({},data)));

    }
    if( app.conversion_type == "swap-pdf-pages" ){
        data = add_swap_pdf_pages_data(); 
        form_data.append("pdf-options",JSON.stringify(Object.assign({},data)));

    }
    
    if( selects.length > 0 ){
        selects.forEach( function(elem){
            form_data.append(elem.id, elem.value);
        })  
    }
    if( boxes.length > 0 ){
        boxes.forEach( function(elem){
            form_data.append(elem.id, elem.value);
        })  
    }
   
    form_data.append("conversion", app.conversion_type);

    function failure(error) {
        loading(false);
        console.log("ERROR: " + error);
    }

    function success(response){
        loading(false);
        if( response["Error"] !== null && response["Error"] !== undefined ){
            set_alert(response["Error"], "danger");
            return false;
        }
        if( response["success"] !== null && response["success"] !== undefined){

            conversion(response["success"]);
        }
       
        
    }
    if( !convert ){
        const upload_response = await  fetch("/upload",{
            method: "POST",
            body: form_data,
            success: function(data){
            }
        })
        return await upload_response.json();
         
    }else{
        await fetch("/upload",{
            method: "POST",
            body: form_data,
            success: function(data){
            }
        }).then(res => res.json())
        .then(response => success(response))
        .catch(error => failure(error));
    }
    
}

async function conversion(response){
    processing(true);
    localStorage.setItem("order_id", response);
    
    function failure(error) {
        change_convert_btn(true);
        processing(false);
        console.log("ERROR: " + error);
    }
    
    function success(response) {
        change_convert_btn(true);
        processing(false);
       if( response["success"] !== null && response["success"] !== undefined){
            create_download_btn(response["success"]);
       }else if( response["Error"] !== null && response["Error"] !== undefined){
            set_alert(response["Error"], "danger");
        }
    }
    
    await fetch( "../conversion-api?id=" + response + "&type=" + app.conversion_type,{
    }).then(res => res.json())
    .then(response => success(response))
    .catch(error => failure(error));
}

function exploded_name(name){
    var result = [];
    last_pos = name.lastIndexOf(".");
    result.push(name.slice(0,last_pos));
    result.push(name.slice(last_pos + 1, name.length));
    return result;
}

function check_types( file_input = false, allowed = []){
    if( !file_input ){
        var file_input = document.querySelector("#file");
    }
    if( allowed.length == 0 ){
        allowed = app.allowed_types;
    }
    for( const value of file_input.files){
        type = exploded_name(value.name)[1];
        found = allowed.find( element => element === type.toLowerCase());
        if( found === null || found === undefined){
            file_input.value = ""; 
            return false;
        }
    }
    return true;
}
function remove_file_handler(){
    parent = this.parentElement.closest("li");
    if( parent == null || parent == undefined ){
        parent = this.parentElement.parentElement
    }
    var list_div = document.querySelector("#file-list-holder");
    file_count = document.querySelector(".file-counter")
    size_count = document.querySelector(".size-counter")
    id = parent.id;
    parent.remove();
    var file_input = document.querySelector("#file");
    const dt = new DataTransfer()
    app.file_size = 0;
    idx = 0;
    app.file_size = 0;
    for (const value of file_input.files){
        if( idx != id){
            dt.items.add(value)
            app.file_size += parseFloat( (value.size/(1024*1024)).toFixed(2));
        }
        idx++;
    }
    
    file_input.files = dt.files;
    
    if( dt.files.length === 0 ){
        list_div ? list_div.classList.add("d-none") : null
    }
    
    if( file_count !== undefined && file_count !== null && size_count !== undefined && size_count !== null){

        var file_count = document.querySelector(".file-counter");
        var size_count = document.querySelector(".size-counter");

        if( app.file_size <= app.allowed_file_size ){
            size_count.classList.remove("bg-danger")
        }
        if( dt.files.length <= app.max_files  ){
            file_count.classList.remove("bg-danger")
        }
            file_count.innerHTML = dt.files.length;
            size_count.innerHTML = app.file_size.toFixed(2) + " MB"
      
    }
    
 
    reset_list_ids();
}

function replace_file_handler(){
    target = this
    parent = this.parentElement.closest("li");

    holder = target.parentElement.parentElement;
    replace_input = document.querySelector("#replace_file")
    file_input = document.querySelector("#file")

    
    replace_input.click();
    replace_input.addEventListener("change", function(){
        if( replace_input.files.length > 0 ){
            file_count = document.querySelector(".file-counter")
            size_count = document.querySelector(".size-counter")
            
            const dt = new DataTransfer()
            idx = 0;
            id = holder.id
            for (const value of file_input.files){
                if( idx != id){
                    dt.items.add( value)
                }else{
                    dt.items.add(replace_input.files[0])
                }

                idx++;
            }
            file_input.files = dt.files;
            
            if( parent !== null && parent !== undefined ){
                parent.querySelector(".size-span").innerHTML = (replace_input.files[0].size/(1024*1024)).toFixed(2) + " MB"
            }
            
            img = holder.querySelector("img")
            if( img !== undefined && img !== null ){
                holder.querySelector("img").src = URL.createObjectURL(replace_input.files[0])
                
            }
            name_span = holder.querySelector(".image-name") || holder.querySelector(".file-name") 
            name_span.innerHTML = replace_input.files[0].name
            
            obj = holder.querySelector("object")
            if( obj !== undefined && obj !== null ){
                type = exploded_name(replace_input.files[0].name)[1].toLowerCase();
                type == "jpeg" ? type = "jpg" : null;
                obj.className = ""
                obj.data = "../images/" + type +"-type.svg";
                obj.classList.add( type + "-icon" );
//                obj.classList.add("file-icon", "blue");
            }
            
            if( file_count !== undefined && file_count !== null 
                    && size_count !== undefined && size_count !== null){
                idx = 0;
                app.file_size = 0;
                for (const value of file_input.files){
                    app.file_size += parseFloat( (value.size/(1024*1024)).toFixed(2));
                }
                var file_count = document.querySelector(".file-counter");
                var size_count = document.querySelector(".size-counter");

                if( app.file_size <= app.allowed_file_size ){
                    size_count.classList.remove("bg-danger")
                }
                if( dt.files.length <= app.max_files  ){
                    file_count.classList.remove("bg-danger")
                }
                    file_count.innerHTML = dt.files.length;
                    size_count.innerHTML = app.file_size.toFixed(2) + " MB"

            }
            
            
        }
        
    })
}


function remove_file(){
    var close_btns = document.querySelectorAll(".delete");
    close_btns.forEach(function(btn){
        btn.addEventListener("click", remove_file_handler)
    })

}

function replace_file(){
    replace_btns = document.querySelectorAll(".replace")
    replace_btns.forEach(function(btn){
        btn.addEventListener("click", replace_file_handler)
    })
}

function reset_list_ids(){
    var lis = document.querySelectorAll(".name-li");
    if( lis.length == 0){
        lis = document.querySelectorAll(".list-image-holder");
    }
    lis.forEach(function(element,i){
        element.id = i;
    }) 
}

function clear_name_list(){
    // var list_div = document.querySelector("#file-list-holder");
    // var image_div = document.querySelector("#image-list");
    document.querySelector("#file-list-holder") !== null ? list_div = document.querySelector("#file-list-holder") : list_div = document.querySelector("#image-list");
    if ( list_div !== null && list_div.querySelector("#name-list") !== null ){
        list_div.querySelector("#name-list").remove();
        document.querySelector(".file-counter").classList.remove("bg-danger");
        document.querySelector(".size-counter").classList.remove("bg-danger");

    }
}


function names_list(){
    clear_name_list();
    document.querySelector("#tool-work-area").classList.remove("d-none");
    var list_div = document.querySelector("#file-list-holder");
    list_div.classList.contains("d-none") ? list_div.classList.remove("d-none") : null;
    
    label = document.querySelector(".input-label") || document.querySelector(".small-input-label");
    if( label.classList.contains("input-label")){
//        label.classList.add("small-input-label", "flex-row")
//        label.classList.remove("input-label","flex-column")
//        document.querySelector(".input-label-wrapper").classList.add("d-inline-block")
//        document.querySelector("#conversion-btn-holder").classList.add("d-inline-block")
        
    }
    
    var file_count = document.querySelector(".file-counter");
    
    var size_count = document.querySelector(".size-counter");
    var file_input = document.querySelector("#file");
    var ul = document.createElement("ul");
   

    ul.setAttribute("id","name-list");
    list_div.appendChild(ul);
    // ul.style.display = "none";
    i = 0;
    app.file_size = 0;
    for( const value of file_input.files){
        var li = document.createElement("li");
        var name_span = document.createElement("span");
        var icon = document.createElement("object");
        var right_container = document.createElement("div");
        var left_container = document.createElement("div");
        var size_span = document.createElement("span");
        var total_files_span = document.createElement("span")
        size_span.innerHTML  = (value.size/(1024*1024)).toFixed(2) + " MB"
        app.file_size += parseFloat((value.size/(1024*1024)).toFixed(2));
        size_span.classList.add("size-span");
        right_container.classList.add("justify-content-end","align-items-center","d-flex");
        left_container.classList.add("align-items-center","d-flex","overflow-hidden");

        type = exploded_name(value.name)[1].toLowerCase();
        type == "jpeg" ? type = "jpg" : null;
        icon.data = "../images/" + type +"-type.svg";
        icon.classList.add( type + "-icon" );
//        icon.classList.add("file-icon", "blue");
        
        li.classList.add("text-start","name-li", "list-group-item" , "align-items-center", "d-flex", "justify-content-between");
        app.allowed_file_size > (value.size/(1024*1024)).toFixed(2) ? null : li.classList.add("list-group-item-danger")
        li.setAttribute("id", i);
         
        
        left_container.appendChild(icon);
        left_container.appendChild(name_span);
        li.appendChild(left_container);
        name_span.classList.add("file-name");
        name_span.innerHTML = value.name;
        
         var remove_icon = document.createElement("i");
        var replace_icon = document.createElement("i");
        var remove_btn = document.createElement("button")
        var replace_btn = document.createElement("button")
        remove_btn.setAttribute("title", "Remove File")
        replace_btn.setAttribute("title", "Replace File")
        remove_btn.classList.add("btn", "btn-sm", "btn-danger","p-2","py-1","delete")
        replace_btn.classList.add("btn", "btn-sm", "btn-primary","p-2","py-1","me-2","replace")
        remove_icon.classList.add("fa-solid","fa-trash-can");
        replace_icon.classList.add("fa-solid","fa-file-arrow-up");
        
        total_files_span.innerHTML = "Pages: 1";
        total_files_span.classList.add("me-2")
        
        remove_btn.appendChild(remove_icon)
        replace_btn.appendChild(replace_icon)
//        right_container.appendChild(total_files_span);
        right_container.appendChild(replace_btn);
        right_container.appendChild(size_span);
        right_container.appendChild(remove_btn);
        li.appendChild(right_container);
        ul.appendChild(li);
        i++;
    }
    if( i > 0 ){
        file_count.innerHTML =   i;
        if( i > app.max_files ){
            file_count.classList.add("text-danger");
        }else{
            file_count.classList.add("text-success");
        }
    }
    if( app.file_size > 0 ){
        size_count.innerHTML = app.file_size.toFixed(2) + " MB"
        if( app.file_size > app.allowed_file_size ){
            size_count.classList.add("text-danger");
        }else{
            size_count.classList.add("text-success");
        }
    }
    ul.style.display = "block";
    loading(false);
    change_convert_btn(true)
    remove_file();
    replace_file();

}

function swap_images( ){

    function insertAfter(newNode, existingNode) {
        existingNode.parentNode.insertBefore(newNode, existingNode.nextSibling);
    }
    
    list_div = document.querySelector("#image-list")
    list_div_rect = list_div.getBoundingClientRect();
    right = document.querySelector(".right-arrow").parentElement;
    left = document.querySelector(".left-arrow").parentElement;
    right.addEventListener("click",function(){
        selected = document.querySelector(".selected");
        selected_rect = selected.getBoundingClientRect();
        if( selected !== null && selected !== undefined){
            parent = selected.parentElement;
            parent_next_sibling = parent.nextSibling;
            if( parent_next_sibling !== null){
                insertAfter(parent,parent_next_sibling);
                list_div.scrollLeft += selected_rect.width;
            }
        }else{
            return false;
        }
    })

    left.addEventListener("click",function(){
        selected = document.querySelector(".selected");
        selected_rect = selected.getBoundingClientRect();
        if( selected !== null && selected !== undefined){
            parent = selected.parentElement;
            list = parent.parentElement;
            parent_prev_sibling = parent.previousSibling;
            if( parent_prev_sibling !== null ){
                list.insertBefore(parent,parent_prev_sibling);
                list_div.scrollLeft = list_div.scrollLeft -(selected_rect.width);
            }
        }else{
            return false;
        }
    })

}

function select_image(){
    images = document.querySelectorAll(".list-image-holder");
    images.forEach(function(elm){
        elm.addEventListener("click",function(){
            if( elm.classList.contains("selected")){
                elm.classList.remove("selected")
            }else{
                found = Array.from(images).find( element => element.classList.contains("selected"));
                if ( found ){
                    found.classList.remove("selected");
                }
                elm.classList.add("selected");
            }
        })
    })
}

function images_list(){
    clear_name_list();
    var list_div = document.querySelector("#image-list");
    list_div.classList.remove("d-none")
    list_div.innerHTML = "";
    list_div.parentElement.parentElement.classList.remove("d-none");
    var file_count = document.querySelector(".file-counter");
    var file_input = document.querySelector("#file");
    var ul = document.createElement("ul");
    label = document.querySelector(".input-label") || document.querySelector(".small-input-label");
    if( label.classList.contains("input-label")){
        label.classList.add("small-input-label", "flex-row")
        label.classList.remove("input-label","flex-column")
        document.querySelector(".input-label-wrapper").classList.add("d-inline-block", "float-end")
        document.querySelector("#conversion-btn-holder").classList.add("d-inline-block")
        
    }
    i = 0;
    for( const value of file_input.files){
        var name_span = document.createElement("span");
        var list_image_holder = document.createElement("div");
        var image_holder = document.createElement("div")
        var img = document.createElement("img");
        var name_holder = document.createElement("div");
        
        
        img.classList.add("list-image")
        img.src = URL.createObjectURL(value);
        
        list_image_holder.classList.add("list-image-holder", "m-2","p-2")
        image_holder.classList.add("image-holder")
        
        var remove_icon = document.createElement("i");
        var replace_icon = document.createElement("i");
        var remove_btn = document.createElement("button")
        var replace_btn = document.createElement("button")
        
        remove_btn.setAttribute("title", "Remove File")
        replace_btn.setAttribute("title", "Replace File")
        remove_btn.classList.add("btn", "btn-sm", "btn-danger","position-absolute","delete")
        replace_btn.classList.add("btn", "btn-sm", "btn-primary","position-absolute","replace")
        remove_icon.classList.add("fa-solid","fa-trash-can");
        replace_icon.classList.add("fa-solid","fa-file-arrow-up");
        
        remove_btn.style.top = "10px"
        remove_btn.style.right = "10px"
        replace_btn.style.top = "10px"
        replace_btn.style.left = "10px"
        
        remove_btn.appendChild(remove_icon)
        replace_btn.appendChild(replace_icon)
        image_holder.appendChild(remove_btn)
        image_holder.appendChild(replace_btn)
        image_holder.appendChild(img);
        
        name_span.classList.add("image-name");
        name_span.innerHTML = value.name;
        name_holder.classList.add("d-flex", "justify-content-center")
        name_holder.appendChild(name_span);
        
        list_image_holder.appendChild(name_holder);
        list_image_holder.appendChild(image_holder);

        list_image_holder.setAttribute("id", i );
        list_image_holder.setAttribute("draggable","false")
        
        list_div.appendChild(list_image_holder);

        i++;
    }
    
    holders = document.querySelectorAll(".list-image-holder")
    holders.forEach(function(image_holder){
         image_holder.addEventListener("dragover", function(e){
            base_handlers._handleDragover(e, image_holder) 
         })

         image_holder.addEventListener("dragleave", function(e){
            base_handlers._handleDragleave(e, image_holder) 
         })

         image_holder.addEventListener("drop", function(e){
             base_handlers._handleDrop(e,image_holder,true)
         })

         image_holder.addEventListener("dragend",function(){
             image_holder.setAttribute("draggable", "false")
             image_holder.classList.remove("text-dark")
             image_holder.classList.remove("bg-white")
         })

         image_holder.addEventListener("dragstart", function(e){
            base_handlers._handleDragStart(e, image_holder) 
         })
         
        image_holder.addEventListener("mousedown", function(){
            image_holder.setAttribute("draggable", "true")
//                pdf.addEventListener("mousemove", pdf_handlers._handleDragMouseDown)
        })
    })

    remove_file();
    replace_file();
    loading(false);

}

function order_file_list(){
    var holders = document.querySelectorAll(".list-image-holder") 
    holders.length === 0 ? holders = document.querySelectorAll(".page-holder") : null;
    
    let data = new FormData();
    
//    first_id = holders[0].id
//    var decrementor = 0;
//    first_id == 0 ? null : decrementor = 1;
//    
    var file_input = document.querySelector("#file");
    for( j = 0; j < holders.length; j++){
        data.append("files_" + j, file_input.files[holders[j].id] )
    }
    return data;

}


function remove_alert(){
    alert_modal = document.querySelector(".alert-modal");
    alert_box = alert_modal.querySelector(".tool-alert");
    input_alert_box = alert_modal.querySelector(".input-alert");
    alert_modal.classList.add("d-none")
    if (alert_box.children.length > 1){
        alert_box.children[0].remove();
    }
    if( input_alert_box !== null && input_alert_box !== undefined){
        input_alert_box.classList.add("d-none");

    }

}



 function check_file_upload(){
    var file = document.querySelector("#file");
    async function handleEvent(event) {
        if (event.type === "loadstart") {
        }
        
        if (event.type === "error") {
            set_alert("Some problems encountered while loading the files! Please try again", "danger")
        }
        if (event.type === "loadend") {
            if( file.files.length > app.max_files){
                set_alert("You can upload up to " + app.max_files + " files!", "danger")
                const dt = new DataTransfer()
                file.files = dt.files
                return false;
            }
            if( check_types() ){
                clear_name_list();
                label = document.querySelector(".input-label") || document.querySelector(".small-input-label");

                switch (app.conversion_type){
                    case "image-to-pdf":
                        images_list();
                        break;
                    case "kw-check":
//                        document.querySelector(".file-counter").innerHTML = file.files[0].name;
                        break;
                    case "split-pdf":
                        await pdf_renderer.load_pdf();
                        await pdf_display.show();
                        await pdf_handlers.toggle_zip();
                        if( label.classList.contains("input-label")){
                            label.classList.add("small-input-label", "flex-row")
                            label.parentElement.classList.add("d-inline-block", "float-end")
                            label.classList.remove("input-label","flex-column")
                        }
                        break;
                    case "pdf-add-watermark":
                        await pdf_renderer.load_pdf();
                        await pdf_display.show();
                        add_manual_events();
                         if( label.classList.contains("input-label")){
                            label.classList.add("small-input-label", "flex-row")
                            label.parentElement.classList.add("d-inline-block", "float-end")
                            label.classList.remove("input-label","flex-column")
                        }
                 
                        break;
                    case "merge-pdf":
                        await pdf_display.display_all_first_page();
                        await pdf_display.make_replaceable();
                        if( label.classList.contains("input-label")){
                            label.classList.add("small-input-label", "flex-row")
                            label.parentElement.classList.add("d-inline-block", "float-end")
                            label.classList.remove("input-label","flex-column")
                        }
                        break;
                    case "swap-pdf-pages":
                        await pdf_display.show_all();
                        await pdf_display.add_pdf_icons();
                        pdf_display.update_removed();
                        await pdf_display.make_replaceable(true);
                        if( label.classList.contains("input-label")){
                            label.classList.add("small-input-label", "flex-row")
                            label.parentElement.classList.add("d-inline-block", "float-end")
                            label.classList.remove("input-label","flex-column")
                        }
                        break;
                    default:
                        names_list();
                        break;
                }
                change_convert_btn(true);

            }else{
                message = "Some files are not compatible! Make sure your files are " + app.allowed_types.join(", ").toUpperCase() + ".";
                set_alert(message,"danger");
            }
        }
    }
    
    function addListeners(reader) {
        reader.addEventListener('loadstart', handleEvent);
        reader.addEventListener('load', handleEvent);
        reader.addEventListener('loadend', handleEvent);
        reader.addEventListener('progress', handleEvent);
        reader.addEventListener('error', handleEvent);
        reader.addEventListener('abort', handleEvent);
    }
    
    function handleSelected(e) {
        // eventLog.textContent = '';
        // for ( const fl of file.files ){
            const reader = new FileReader();
            const input_file = file.files[0];
            if (input_file) {
                reader.readAsDataURL(input_file);
                addListeners(reader);
            }
        // }
        
    }
    
    file.addEventListener('change', handleSelected);

}

function toggle_sm_menu(){
    rotita = document.querySelector("#menu-toggle")
    rotita.addEventListener("click", function () {
        if (rotita.previousElementSibling.classList.contains("closed-menu")) {
            rotita.previousElementSibling.classList.remove("closed-menu")
            rotita.previousElementSibling.children[0].classList.remove("d-none")
            rotita.querySelector("i").style.bottom = "130px"
            rotita.querySelector("span").style.bottom = "105px"
        } else {
            rotita.previousElementSibling.classList.add("closed-menu")
            rotita.previousElementSibling.children[0].classList.add("d-none")
            rotita.querySelector("i").style.bottom = "35px"
            rotita.querySelector("span").style.bottom = "15px"
            containers = document.querySelectorAll(".sm-menu-content-item")
            document.querySelector("#small-menu-contents").classList.contains("d-none") ? null : document.querySelector("#small-menu-contents").classList.add("d-none")
            containers.forEach(function (elem) {
                elem.classList.contains("d-none") ? null : elem.classList.add("d-none")
            })
        }
    })
}

function split_pdf_menu(){
    
}

function pdf_watermark_menu(){
    rotita = document.querySelector("#menu-toggle")
    small_menu = document.querySelector("#small-menu")

    wm_option_btns = document.querySelectorAll(".wm-option-btn")
    wm_option_btns.forEach(function (elem) {
        elem.addEventListener("click", _handleWmOptionSelect)
    })


    function _handleWmOptionSelect() {
        opt = this.id.split("-")[1]

        container = document.getElementById("wm-" + opt + "-options")
        containers = document.querySelectorAll(".sm-menu-content-item")

        if (container.classList.contains("d-none")) {
            container.classList.remove("d-none")
            container.parentElement.classList.remove("d-none")
        } else {
            container.classList.add("d-none")
            container.parentElement.classList.add("d-none")

        }

        containers.forEach(function (elem) {
            if (elem !== container) {
                elem.classList.contains("d-none") ? null : elem.classList.add("d-none")
            }
        })

    }
}

function toggle_help(){
    var help_btn = document.querySelector(".help-menu-holder");
    var help_section = document.querySelector(".help-section");
    
    var close_help = document.querySelector(".close-help-holder");
    help_btn.addEventListener("click",function(){
        help_section.classList.contains("d-none") ? help_section.classList.remove("d-none") :  help_section.classList.add("d-none")
    })
    close_help.addEventListener("click",function(){
        help_section.classList.contains("d-none") ? help_section.classList.remove("d-none") :  help_section.classList.add("d-none")
    })
}


var pdf_renderer = {
    
    total_pages:0,
    
    pdfDoc: null,
    
    icons: [],
    
    tool:document.querySelector(".conversion-button") ?  document.querySelector(".conversion-button").id : null,
    
    //display divs
    pages_div_range: document.querySelector("#pdf-pages-range"),
    
    pages_div_manual: document.querySelector("#pdf-pages-manual"),
    
    pages_div_all: document.querySelector("#pdf-pages-all"),
    
    //result pdf lists
    manual_list: document.querySelector(".manual-list"),
    
    range_list: document.querySelector(".range-list"),
    
    all_list: document.querySelector(".all-list"),
    
    async load_pdf(file = false){
        if( !file ){
            file_selector = document.querySelector("#file");
            if( file_selector == null || file_selector == undefined ){
                return false;
            }
            file = file_selector.files[0]
        }
        
        let pdfjsLib = window['pdfjs-dist/build/pdf']
        pdfjsLib.GlobalWorkerOptions.workerSrc =
            "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.6.172/pdf.worker.min.js";
        
        return new Promise( async (resolve,reject) =>{
            let object = this
            let file_reader = new FileReader();
            file_reader.onload = async function() {
//                infos = JSON.parse(window.localStorage.get("uploaded_pdfs"));

                let total_pages
                var typedarray = new Uint8Array(this.result);
                object.pdfDoc = pdfjsLib.getDocument(typedarray);
                await object.pdfDoc.promise.then( pdf_obj => {(object.total_pages = ( pdf_obj._pdfInfo.numPages))})
//                localStorage.setItem("pdf_", total_pages);
                resolve();
            }
            await file_reader.readAsArrayBuffer(file);
        })
    

    },
    
    async render_all_first_page(){
        file_selector = document.querySelector("#file");
        container = document.querySelector("#pdfs-preview")
        container.innerHTML = "";
        counter = 1;
        infos = [];
        window.localStorage.setItem("uploaded_pdfs",JSON.stringify(infos));
        for ( let file of file_selector.files ){
            await this.load_pdf(file);
            page = await this.render_page(1)
            number = page.querySelector(".page-number")
            number.parentElement.classList.add("justify-content-center")
            number.innerHTML = file.name
            number.nextSibling.remove();
            number.style.fontSize = "12px;"
            page.setAttribute("id", counter)
            container.appendChild( page)
            counter++;
        }
    },
    
    async render_page(page_nr, range_order = null ){
        var canvas = document.createElement("canvas");
        canvas.classList.add("pdf-page-canvas")
        var container = this.page_container(canvas, page_nr)
        
        range_order !== null ? container.setAttribute("id",range_order) : null
        this.pdfDoc.promise.then(pdf => {
            pdf.getPage(parseInt(page_nr)).then(function(page) {
                var viewport = page.getViewport({scale:0.3,})
                var output_scale = window.devicePixelRatio || 1;
                var context = canvas.getContext("2d");
                canvas.width = Math.floor(viewport.width * output_scale);
                canvas.height = Math.floor(viewport.height * output_scale);
//                canvas.width = 150
//                canvas.height = 200
//                canvas.style.width = Math.floor(viewport.width) + "px";
//                canvas.style.height =  Math.floor(viewport.height) + "px";
                canvas.style.width = "140px"
                canvas.style.height =  "200px";

                var transform = output_scale !== 1
                ? [output_scale, 0, 0, output_scale, 0, 0]
                : null;

                var renderContext = {
                    canvasContext: context,
                    transform: transform,
                    viewport: viewport
                };
                
              page.render(renderContext);
            }).catch((e) => {{throw new Error("no page found")}} );
           
        }).catch( () => {throw new Error("problems querying doc")})
       
        return  container;
    },
    
    page_container( contained, page_num, icons ){
        var container = document.createElement("div");
        
        var icon_holder = document.createElement("div");
        icon_holder.classList.add("d-flex", "justify-content-end", "w-100", "align-items-center")
        
        var number_span = document.createElement("span");
        number_span.classList.add("page-number")
        number_span.innerHTML = page_num

        var page_menu = document.createElement("div")
        page_menu.classList.add("pdf-page-menu", "d-flex", "align-items-center", "border-bottom", "mb-2")
        page_menu.appendChild(number_span)
        
        page_menu.appendChild(icon_holder)

        var page_element = document.createElement("div")
        page_element.classList.add("d-flex", "justify-content-center", "align-items-center", "h-100")
        
        var canvas_holder = document.createElement("div")
        canvas_holder.classList.add("canvas-holder","position-relative");
        canvas_holder.appendChild(contained)
        page_element.appendChild(canvas_holder)
        container.appendChild(page_menu)
        
        container.appendChild(page_element);
        container.classList.add("mx-3","my-3", "d-flex", "flex-column", "page-holder");
        if( icons ){
            container.classList.add( "col", "col-xl-2")
        }
        container.setAttribute("id", page_num )
        return container;
    },
    
    async render_range(){
        object = this;
        range_div = document.querySelector("#pdf-pages-range")
        var range_holder = await this.create_range_inputs(1, 1, this.total_pages);
        var pages_holder = document.createElement("div");
        pages_holder.classList.add("range-pages", "d-flex", "justify-content-center")

        range_div.appendChild(range_holder);
        pages = await this.create_range_page_list(1);

        pages.forEach(function(page){
            page.classList.remove("mx-3")
            page.classList.remove("my-3")
            page.classList.add("m-2")
            pages_holder.appendChild(page)
        })

        range_holder.appendChild(pages_holder)
         
    },
    
    async create_range_page_list(range_index){
        var result = [];
        var start_range = document.querySelector("#start-" + range_index)
        var end_range = document.querySelector("#end-" + range_index)
        page_1 = await this.render_page(start_range.value, "start-page-" + range_index);
        page_2 = await this.render_page(end_range.value, "end-page-" + range_index )
        result.push(page_1)
        result.push(page_2)
        return result
    },
    
    async create_range_inputs(range_index = 0, from = 1, to = 2){

        var range_holder = document.createElement("div")
        range_holder.classList.add("range-split-holder", "col", "col-lg-6", "col-xl-6", "border", "p-2", "m-2")
        range_holder.setAttribute("id", range_index);

        var range_menu_holder = document.createElement("div")
        range_menu_holder.classList.add("range-menu", "d-flex","position-relative", "justify-content-center");

        var range_inputs_holder = document.createElement("div");
        range_inputs_holder.classList.add("range-inputs")
        range_holder.appendChild(range_menu_holder)

        var remove_range_icon = document.createElement("i")
        remove_range_icon.classList.add("fa-regular", "fa-circle-xmark", "range-remove-icon", "position-absolute");
        remove_range_icon.style.left = "95%";
        remove_range_icon.addEventListener("click", function(){
            pdf_handlers.removeRangeHandler(range_holder);   
        })

        let start_range = document.createElement("input");
        start_range.setAttribute("id", "start-" + range_index);
        start_range.addEventListener("change", function(ev){
            pdf_handlers.rangeChangeHandler(ev, start_range)
        })
        start_range.classList.add("range-input");

        var to_span = document.createElement("span")
        to_span.classList.add("mx-3")

        to_span.innerHTML = "to";
        let end_range = document.createElement("input");
        end_range.setAttribute("id","end-" + range_index);
        end_range.classList.add("range-input");
        end_range.addEventListener("change", function(ev){
            pdf_handlers.rangeChangeHandler(ev,end_range)
        })

        range_menu_holder.appendChild(range_inputs_holder)
        range_inputs_holder.appendChild(start_range);
        range_inputs_holder.appendChild(to_span);
        range_inputs_holder.appendChild(end_range)
        range_menu_holder.appendChild(remove_range_icon)

        start_range.setAttribute("type", "text")
        start_range.value = from

        end_range.setAttribute("type", "text")
        end_range.value = to
        return range_holder;
    },
    
    async render_manually(){
        pages_div_manual = document.querySelector("#pdf-pages-manual")
        for( i = 1; i <= this.total_pages; i++){
            container = await this.render_page(i)  
            await pages_div_manual.appendChild(container);
        }
    },
    
    async render_all(){
        var pages_div_all = document.querySelector("#pdf-pages-all")
        for( j = 1; j <= this.total_pages; j++ ){
            var container = await this.render_page(j)
            pages_div_all.appendChild(container);
        }
    },
    
    async render_all_methods(){
        await this.render_all();
        await this.render_manually();
        await this.render_range();
    } 
}

var pdf_display = {

    
    method: document.querySelector("#method-selectors") ? document.querySelector("#method-selectors").querySelector("input[checked]").id : null ,
    
    zip_input: document.querySelector("#zip-files"),
    
    add_range: document.querySelector("#add-range"),
    
    async show(){

        await pdf_renderer.load_pdf();
        
        const bindFunc = pdf_handlers.methodSelectHandler.bind(null, null);
        let radios = document.querySelectorAll("input[name=split-select]");
        radios.forEach(function(rad){
            //clone the radio buttons to remove event listeners
            var new_rad = rad.cloneNode(true)
            rad.parentElement.replaceChild(new_rad, rad)
            var res_div = document.querySelector("#pdf-pages-" + rad.id)
            res_div.innerHTML = "";
            rad.removeEventListener("click", bindFunc,true)

        })

        await pdf_renderer.render_all_methods();

        this.display_containers();

        //asign the new radios to the "radios" value
        radios = document.querySelectorAll("input[name=split-select]");
        this.method_select();
        this.add_range ? this.add_range.addEventListener("click", pdf_handlers.addRangeHandler) : null

        var zip_input = document.querySelector("#zip-files")
        var new_zip = zip_input ? zip_input.cloneNode(true) : null;
        zip_input ? zip_input.parentElement.replaceChild(new_zip, zip_input) : null

//        pdf_handlers.toggle_menu();
        this.add_pdf_icons();
        this.update_results(pdf_renderer.tool)

    },
    
    display_containers(show = true){
        if( show ){
            document.querySelector(".tool-holder").classList.remove("d-none")
            document.querySelector("#tool-work-area").classList.remove("d-none");
//            document.querySelector(".pdf-menu").classList.remove("d-none")
//            document.querySelector(".pdf-menu").previousElementSibling.classList.add("d-none")
        }else{
            tool_holder = document.querySelector(".tool-holder");
            tool_wrapper = document.querySelector("#tool-work-area");
            pdf_menu = document.querySelector(".pdf-menu");
            if( !tool_holder.contains("d-none") ){
                tool_holder.classList.add("d-none")
            }
            if( !tool_wrapper.contains("d-none") ){
                tool_wrapper.classList.add("d-none")
            }
            if( !pdf_menu.contains("d-none") ){
                pdf_menu.classList.add("d-none")
            }
        }
    },
    
    async show_all(){
        document.querySelector("#pdf-pages-all").innerHTML = "";
        await pdf_renderer.load_pdf()
        await pdf_renderer.render_all();
        this.display_containers()
//        pdf_handlers.toggle_menu();
        this.update_results(pdf_renderer.tool)

    },
    
    async display_all_first_page(){
        await pdf_renderer.render_all_first_page();
        this.display_containers()
//        pdf_handlers.toggle_menu();

    },
    
    method_select(){
        radios = document.querySelectorAll("input[name=split-select]");
        var pages_info = document.querySelector("#pdf-pages")
        radios.forEach( function(elem){
            elem.addEventListener('click',function(){
                pdf_handlers.methodSelectHandler(elem)
            })
        })
    },
    
   
   update_results(tool){
        this.update_removed();
        f_name = "this." + tool.replaceAll("-","_") + "_update"
        eval(f_name + "()");
        
    },
    
    pdf_add_watermark_update(){},
    swap_pdf_pages_update(){},
    
    split_pdf_update(){
                    switch (this.method){
                case "manual":
                    this.update_manual()
                    break
                case "range":
                    this.update_range()
                    break;
                case "all":
                    this.update_all();
                    break;
            }
    },
    
    update_manual(){
        // total_span = pdf counter
        let total_span = document.querySelector(".total-pdfs");
        var manual_list = document.querySelector(".manual-list")
        manual_list.classList.remove("d-none")
        let pdf_list = document.querySelector(".pdf-list")
        let manual_splits = document.querySelector(".manual-splits");
        let removed_list = document.querySelector(".removed-pages-list");
        let all_pages = pdf_renderer.pages_div_manual.querySelectorAll(".page-holder")
        manual_splits.innerHTML = ""
        // get all "action-points" 
        var total_points = document.querySelectorAll(".action-point");
        
        var totals;
        if( total_points.length == pdf_renderer.total_pages ){
            totals = pdf_renderer.total_pages
        }else{
            totals = parseInt(total_points.length) + 1
        }
        var first_split = total_points[0]
        var last_split = total_points[total_points.length - 1]
        if( last_split !== undefined ){
            if( parseInt(last_split.parentElement.id) == 1 && total_points.length == 1 ){
                totals = 1
            }
            var found = Array.from(all_pages).find( elem => parseInt(elem.id) > parseInt(last_split.parentElement.id) && !elem.children[1].classList.contains("remove-point"))
            if( !found ){
                totals = total_points.length
            }else{
                totals = total_points.length + 1
            }
        }
        
        total_span.innerHTML = totals
        //get all "remove-ponits"
        var total_removes = Array.from(pdf_renderer.pages_div_manual.querySelectorAll(".remove-point"))
        
        var span_holder = document.createElement("div")
        span_holder.classList.add("d-flex", "p-3","result-pdf","manual-split", "custom-shadow", "border", "border-1","border-secondary")
        span_holder.setAttribute("id", "pdf-1")
        //indicator = span containing pdf number
        var pdf_indicator = document.createElement("span")
        pdf_indicator.classList.add("d-block", "split-pdf-label")
        
        var from_span = document.createElement("span")
        var to_span = document.createElement("span")
        
        from_span.classList.add("manual-from-span","range-span")
        to_span.classList.add("manual-to-span","range-span")

        if( total_removes.length === pdf_renderer.total_pages ){
            manual_list.innerHTML = "";
            return false;
        }
        //if there is no split point display the 1->totalpages(default range)
        if( total_points.length == 0 ){
            from_span.innerHTML = "Page: " + 1
            to_span.innerHTML = "Page: " + pdf_renderer.total_pages
            
            pdf_indicator.innerHTML = "PDF - 1:"
            
            icon = document.createElement("i")
                icon.classList.add("fa-solid", "fa-ellipsis", "mx-2")
                        
            span_holder.appendChild(from_span)
            span_holder.appendChild(icon)

            span_holder.appendChild(to_span)
            manual_splits.appendChild(span_holder)
        }else{
            // for each split point create a from -> to section
            // clone from, to , holder and idincator nodes from above
            for( i = 0; i <= total_points.length; i++){
                var indicator = pdf_indicator.cloneNode()
                indicator.classList.add("d-block")
                
                var holder = span_holder.cloneNode()
                holder.classList.add( "manual-split")
                holder.setAttribute("id", "pdf-" + (i+1))

                //page number on current action-point
                var page_num
                var from = from_span.cloneNode()
                var to = to_span.cloneNode()

                from.classList.add("manual-from-span","range-span")
                to.classList.add("manual-to-span","range-span")

                //when i == length there is no split point on that position
                if( i == total_points.length  ){
                    page_num =  total_points[i-1].parentElement.id
                    // if the last point is not on the last page make another from -> to section    
                    if( parseInt(page_num) !== pdf_renderer.total_pages ){
                        to.innerHTML = "Page: " + pdf_renderer.total_pages
                        //last split point + 1
                        from.innerHTML = "Page: " + (parseInt(total_points[i-1].parentElement.id) + 1) 
                        indicator.innerHTML = "PDF -    " + (i +1) + ":"
                        holder.appendChild(from)

                        icon = document.createElement("i")
                        icon.classList.add("fa-solid", "fa-ellipsis", "mx-2")
                        holder.appendChild(icon)
                        holder.appendChild(to)
                        manual_splits.appendChild(holder)
                    }

                }else{
                    page_num =  total_points[i].parentElement.id

                    to.innerHTML = "Page: " + page_num

                    if( i > 0){
                        from.innerHTML = "Page: " + (parseInt(total_points[i-1].parentElement.id) + 1)
                        
                    }else{
                        from.innerHTML = "Page: " + 1
                    }
                    
                    var from_point = parseInt(from.innerHTML.split(":")[1]);
                    var from_res = from_point
                    
                    indicator.innerHTML = "PDF - " + (i +1) + ":"
                    
                    holder.appendChild(from)
                    
                    icon = document.createElement("i")
                    icon.classList.add("fa-solid", "fa-ellipsis", "mx-2")
                    holder.appendChild(icon)

                    holder.appendChild(to)
                    manual_splits.appendChild(holder)
                }
            }
        }
//        check if there is a removed page in bewtween from and to
        var result_pdfs = document.querySelectorAll(".result-pdf")
        var removed = document.querySelectorAll(".remove-point")
        if( total_removes.length > 0 ){
            //loop through each range and modify "from" point
            result_pdfs.forEach(function(elem){
                let first_none_remove = false
                var from_point = parseInt(elem.children[0].innerHTML.split(":")[1]);
                var to_point = parseInt(elem.children[2].innerHTML.split(":")[1]);
                //loop through each page
                for ( j = from_point; j <= to_point; j++ ){

                    var page = document.getElementById( j);
                    // find the first page in range that is not to be removed
                    if( !page.children[1].classList.contains("remove-point") && !first_none_remove ){
                        first_none_remove = true;
                        elem.children[0].innerHTML = "Page: " + parseInt(page.id)
                    }
                }
                
                // modify "to" point for last range || default range
                if( elem == result_pdfs[result_pdfs.length - 1 ]){
                    var aux = 0;
                    var page_number = parseInt(total_removes[total_removes.length - 1].parentElement.id)
                    //check if the removed page is last by checking the page number + aux = number of total pages
                    while( page_number + aux == pdf_renderer.total_pages ){
                        total_removes.pop()
                        if( total_removes.length > 0 ){
                            page_number = parseInt(total_removes[total_removes.length - 1].parentElement.id)

                        }else{
                            page_number  = pdf_renderer.total_pages + 1
                        }
                        aux++;
                    }
                    // if all pages are marked to be removed, remove the "result_pdf" element from page
                    if( parseInt(pdf_renderer.total_pages - aux ) < parseInt(elem.children[0].innerHTML.split(":")[1])){
                        elem.remove()
                    }else{
                        elem.children[2].innerHTML = "Page: " + (pdf_renderer.total_pages - aux) ;
                    }
                    
                }
                
            })
        }
        
    },
    
    update_all(){
        let total_span = document.querySelector(".total-pdfs");
        
        var all_list = document.querySelector(".all-list")
        all_list.innerHTML = "";
        var all = pdf_renderer.pages_div_all.querySelectorAll(".page-holder")
        var removed = pdf_renderer.pages_div_all.querySelectorAll(".remove-point")

        removed == null ? aux = 0 : aux = removed.length
        
        total_span.innerHTML = parseInt(all.length) - parseInt(aux)
        var counter = 0;
        for ( i = 0; i < all.length; i++ ){
            if( all[i].children[1].classList.contains("remove-point")){
                counter ++;
                continue
            }
            var span_holder = document.createElement("div")
            span_holder.classList.add("d-flex","p-3","custom-shadow", "border", "border-secondary", "result-pdf","all-split")
            span_holder.setAttribute("id", "pdf-" + (i + 1))
            //indicator = span containing pdf number
            var pdf_indicator = document.createElement("span")
            pdf_indicator.classList.add("d-block", "split-pdf-label")
            pdf_indicator.innerHTML = "PDF - " + (i + 1 - counter) + ":"

            var from_span = document.createElement("span")
            var to_span = document.createElement("span")
            
            from_span.innerHTML = "Page: " + (i + 1)
            to_span.innerHTML = "Page: " + (i + 1)
            
            from_span.classList.add("all-from-span","range-span")
            to_span.classList.add("all-to-span","range-span")
            
            span_holder.appendChild(from_span)
            
            icon = document.createElement("i")
            icon.classList.add("fa-solid", "fa-ellipsis", "mx-2")
            span_holder.appendChild(icon)

            span_holder.appendChild(to_span)
            all_list.appendChild(span_holder)
        }
            
        
    },
    
    update_range(){
        let total_span = document.querySelector(".total-pdfs");
//        document.querySelector(".total-removes").innerHTML = 0;
        var ranges = document.querySelectorAll(".range-split-holder")
        total_span.innerHTML = ranges.length
        
        var range_list = document.querySelector(".range-list")
        range_list.innerHTML = "";
        
        ranges.forEach(function(elem,idx){
            var range_from = elem.querySelector("#start-" + (idx + 1))
            var range_to = elem.querySelector("#end-" + (idx + 1))
            var span_holder = document.createElement("div")
            span_holder.classList.add("d-flex", "p-3","custom-shadow","border","border-secondary", "result-pdf","range-split")
            span_holder.setAttribute("id", "pdf-" + (idx + 1))
            //indicator = span containing pdf number
            var pdf_indicator = document.createElement("span")
            pdf_indicator.classList.add("d-block", "split-pdf-label")
            pdf_indicator.innerHTML = "PDF - " + (idx + 1) + ":"

            var from_span = document.createElement("span")
            var to_span = document.createElement("span")
            
            from_span.innerHTML = "Page: " + range_from.value
            to_span.innerHTML = "Page: " + range_to.value
            
            from_span.classList.add("range-from-span","range-span")
            to_span.classList.add("range-to-span","range-span")
            
            span_holder.appendChild(from_span)
            icon = document.createElement("i")
            icon.classList.add("fa-solid", "fa-ellipsis", "mx-2")
            span_holder.appendChild(icon)
            span_holder.appendChild(to_span)
            range_list.appendChild(span_holder)

        })
    },
    
    
    update_removed(){
        var total_removed_span = document.querySelector(".total-removes")
        switch (this.method){
            case "manual":
                //add a span containing removed page number to the "removed pages" list
                var remove_points = pdf_renderer.pages_div_manual.querySelectorAll(".remove-point")
                var removed_list = document.querySelector(".removed-pages-list")
                removed_list.innerHTML = ""
                remove_points.forEach(function(elem){
                    var remove_span = document.createElement("span")
                    remove_span.classList.add("form-control", "form-control-sm", "manual-remove", "bg-danger")
                    remove_span.setAttribute("id", "remove-page-" + elem.parentElement.id);
                    remove_span.innerHTML = elem.parentElement.id
                    removed_list.appendChild(remove_span)
                })
                total_removed_span.innerHTML = remove_points.length
                break;
            case "range":
                break;
            case "all":
                //add a span containing removed page number to the "removed pages" list
                var remove_points = pdf_renderer.pages_div_all.querySelectorAll(".remove-point")
                var removed_list = document.querySelector(".removed-pages-list")
                var all_list = document.querySelector(".all-list")
                removed_list.innerHTML = ""
               
                remove_points.forEach(function(elem, idx){
                    var remove_span = document.createElement("span")
                    remove_span.classList.add("form-control", "form-control-sm", "manual-remove","bg-danger")
                    remove_span.setAttribute("id", "remove-page-" + elem.parentElement.id);
                    remove_span.innerHTML = elem.parentElement.id
                    removed_list.appendChild(remove_span)
                    //remove the result pdf from the list
                    var list_item = all_list ? all_list.querySelector("#pdf-" + elem.parentElement.id) : null
                    list_item !== null ? list_item.remove() : null
                })
                total_removed_span.innerHTML = remove_points.length
                break;
        }
       
    },
    
    add_pdf_icons(){
        manual_icons = "";
        manual_remove_icon = false;
        switch( pdf_renderer.tool ){
            case "split-pdf":
                manual_icons = ["fa-solid", "fa-flag"];
                manual_remove_icon = true;

//                icons.push(manual_icons)
//                icons.push(["fa-regular fa-circle-xmark "]);
                break;
            case "pdf-add-watermark":
                manual_icons = ["fa-solid", "fa-flag"];
                break;
        }
        man_pages =  pdf_renderer.pages_div_manual ? pdf_renderer.pages_div_manual.querySelectorAll(".page-holder") : [];
        all_pages =  pdf_renderer.pages_div_all ? pdf_renderer.pages_div_all.querySelectorAll(".page-holder") : [];

        all_pages.forEach(function(page){
            icons_container = page.querySelector(".pdf-page-menu").children[1]
            var icon_remove = document.createElement("i");

            icon_remove.classList.add( "fa-regular", "fa-circle-xmark", "remove-icon")
            icon_remove.addEventListener("click", function(){
                pdf_handlers.pageIconHandler(icon_remove, "remove")    
            })

            var remove_holder = document.createElement("div")
            remove_holder.classList.add("remove-icon-holder", "float-end")
            remove_holder.appendChild(icon_remove, "remove")
            icons_container.appendChild(remove_holder);

        })
        man_pages.forEach(function(page){
            icons_container = page.querySelector(".pdf-page-menu").children[1]
            var icon_remove = document.createElement("i");

            var action_icon = document.createElement("i");
            action_icon.classList.add( manual_icons[0], manual_icons[1], "split-icon", "action-icon")
            action_icon.addEventListener("click", function(){
                pdf_handlers.pageIconHandler(action_icon, "action")    
            })

            var action_holder = document.createElement("div")
            action_holder.classList.add("split-icon-holder", "float-end", "me-2")
            action_holder.appendChild(action_icon)
            icons_container.appendChild(action_holder);

            if(manual_remove_icon){
                icon_remove.classList.add( "fa-regular", "fa-circle-xmark", "remove-icon")
                icon_remove.addEventListener("click", function(){
                    pdf_handlers.pageIconHandler(icon_remove, "remove")    
                })

                var remove_holder = document.createElement("div")
                remove_holder.classList.add("remove-icon-holder", "float-end")
                remove_holder.appendChild(icon_remove, "remove")
                icons_container.appendChild(remove_holder);
            }

            
        })
    },
    
    make_replaceable(replace = false){
        //based on replace value the dragged objects will push on drop the other elements to the right or left depending
        // on the direction it is dragged. If push == true the dropped objects will replace the elements on drop.
        
        pdfs = document.querySelectorAll(".page-holder")
        pdfs.length = 0 ? pdfs = document.querySelectorAll(".list-image-holder") : null
        pdfs.forEach(function(pdf){
            pdf.classList.add("position-relative")
            pdf.querySelector(".page-number").style.userSelect = "none"
            pdf.setAttribute("draggable", "false")
//            pdf.style.zIndex = "9999"
            pdf_rect = pdf.getBoundingClientRect();
            window.localStorage.setItem("pdf-" + pdf.id, JSON.stringify(pdf_rect))
           
            pdf.addEventListener("dragover", function(e){
               pdf_handlers._handlePDFDragover(e, pdf) 
            })
            
            pdf.addEventListener("dragleave", function(e){
               pdf_handlers._handlePDFDragleave(e, pdf) 
            })
         
            pdf.addEventListener("drop", function(e){
                pdf_handlers._handlePDFDrop(e,pdf,replace)
            })
            
            pdf.addEventListener("dragend",function(){
                pdf.setAttribute("draggable", "false")
                pdf.classList.remove("text-dark")
                pdf.classList.remove("bg-white")
            })
            
            pdf.addEventListener("dragstart", function(e){
               pdf_handlers._handlePDFStart(e, pdf) 
            })
            
            pdf.addEventListener("mousedown", function(){
                pdf.setAttribute("draggable", "true")
//                pdf.addEventListener("mousemove", pdf_handlers._handleDragMouseDown)
            })
            pdf.addEventListener("mouseup", () => {
//                pdf.removeEventListener("mousemove", pdf_handlers._handleDragMouseDown);
            });
        })
    }
    
    
}

var pdf_handlers = {
    tool:document.querySelector(".conversion-button") ?  document.querySelector(".conversion-button").id : null,

    _handlePDFDrop(e, pdf, replace){
        parent = pdf.parentElement
        pdf.classList.remove("bg-white")
        pdf.classList.remove("text-dark")
        pdf.classList.remove("border-danger")
        dragged = document.getElementById( window.localStorage.getItem("dragged"))
        zone_box = pdf.getBoundingClientRect()
        dragged_box = dragged.getBoundingClientRect()
//        if( zone_box["top"] > dragged_box["bottom"] ){
//            if( zone_box["right"] > dragged_box["right"] ){
//                this.after(dragged)
//            }else{
//                parent.insertBefore(dragged, this)
//            }
//        }
//        
//        if( zone_box["top"] > dragged_box["bottom"] ){
//            if( zone_box["right"] > dragged_box["right"] ){
//                this.after(dragged)
//            }else{
//                parent.insertBefore(dragged, this)
//            }
//        }
        
//        if( zone_box["top"] == dragged_box["top"] ){
        if( !replace ){
            if( zone_box["right"] > dragged_box["right"] ){
                pdf.after(dragged)
            }else{
                parent.insertBefore(dragged, pdf)
            }
        }else{
            cloned = pdf.cloneNode(true);
            all_holders = document.querySelectorAll(".page-holder")
            dragged_ind = Array.from(all_holders).indexOf(dragged)
            
            pdf.replaceWith(dragged)
            parent.insertBefore(pdf, parent.children[dragged_ind])
            
        }
        
        
       
//        }
        
       
        
        dragged.classList.remove("text-dark")
        dragged.classList.remove("bg-white")
        dragged.style.borderColor = "white"
        
//       
        
    },
    _handleDragMouseDown({ movementX, movementY }){
        pdf = this
        original_rect = JSON.parse(window.localStorage.getItem("pdf-" + pdf.id ))
        parent = pdf.parentElement;
        
        pdf_rect = pdf.getBoundingClientRect();
        parent_rect = parent.getBoundingClientRect();
        
        
        if( (pdf_rect["bottom"] > parent_rect["bottom"]) 
                || (pdf_rect["top"] < parent_rect["top"]) 
                    || (pdf_rect["right"] > parent_rect["right"])
                        || (pdf_rect["left"] < parent_rect["left"]) 
                ){
            pdf.style.left = 0
            pdf.style.top = 0
            pdf.style.transition = "none"
            return false;
        }
        
        let getContainerStyle = window.getComputedStyle(pdf);
        let leftValue = parseInt(getContainerStyle.left);
        let topValue = parseInt(getContainerStyle.top);
        pdf.style.left = (leftValue + movementX) + "px"
        pdf.style.top = (topValue + movementY ) + "px";
    },
    
    _handlePDFStart(e, pdf){

        window.localStorage.setItem("dragged", pdf.id)
        pdf.style.borderColor = "red"
        pdf.classList.add("text-dark", "bg-white")

    },
    
    _handlePDFDragleave(e, pdf){
        if( pdf.getAttribute("draggable") == "false") {
            pdf.classList.remove("border-danger")
            pdf.classList.remove("bg-white")
            pdf.classList.remove("text-dark")
        }
    },
    
    _handlePDFDragover(e, pdf){
        e.preventDefault()
        target = e.target
     
 
        if( pdf.getAttribute("draggable") == "false") {
            pdf.classList.add("border-danger", "bg-white", "text-dark")
        }
    },
    
    closeDragElement() {
        // stop moving when mouse button is released:
        document.onmouseup = null;
        document.onmousemove = null;
    },
    
    elementDrag(e) {

        e = e || window.event;
        e.preventDefault();
        // calculate the new cursor position:
        pos1 = pos3 - e.clientX;
        pos2 = pos4 - e.clientY;
        pos3 = e.clientX;
        pos4 = e.clientY;
        // set the element's new position:
    },
    
     methodSelectHandler(elem){
        let total_span = document.querySelector(".total-pdfs");
        let manual_help = document.querySelector("#help-manual")
        let range_help = document.querySelector("#help-range")
        let all_help = document.querySelector("#help-all")

        var removed_pages_list = document.querySelector(".removed-pages-list");
        if( !elem.hasAttribute("checked")){
            radios.forEach(function(rd){
                if( rd.hasAttribute("checked")){
                    rd.removeAttribute("checked");
                }
            })
            elem.setAttribute("checked", "checked");
            pdf_display.method = elem.id
            methods = ["manual","range","all"];
            
            list = document.querySelector("." + pdf_display.method + "-list")
            
            list ? list.classList.remove("d-none") : null;
            
            pages_div = document.querySelector("#pdf-pages-" + elem.id)
            pages_div.classList.remove("d-none")
            
            if( pdf_display.method !== "range" ){
                pdf_display.add_range.classList.add("d-none")
                pdf_display.add_range.setAttribute("disabled","disabled")
            }else{
                pdf_display.add_range.classList.remove("d-none")
                pdf_display.add_range.removeAttribute("disabled")
            }
            
            methods.forEach(function(type){
                if( type !== pdf_display.method ){
                    list = document.querySelector("." + type + "-list")
                    list ? (!list.classList.contains("d-none") ? list.classList.add("d-none") : null) : null

                    page_div = document.querySelector("#pdf-pages-" + type )
                    page_div ? (!page_div.classList.contains("d-none") ? page_div.classList.add("d-none") : null) : null
                    
                    help = document.querySelector("#help-" + type);
//                    console.log(help)
                    help ? ( !help.classList.contains("d-none") ? help.classList.add("d-none") : null ) : null
                }
            })
            help = document.querySelector("#help-" + pdf_display.method);
            help ? ( help.classList.contains("d-none") ? help.classList.remove("d-none") : null ) : null

//            removed_pages_list.innerHTML = ""

        } 
        pdf_display.update_results(this.tool)

   },
   
    async  addRangeHandler(ev){

        ev.preventDefault()
        var total_ranges = document.querySelectorAll(".range-split-holder");
        holder = await pdf_renderer.create_range_inputs(total_ranges.length + 1 , 1, pdf_renderer.total_pages);
        pdf_renderer.pages_div_range.appendChild(holder)
        
        var range_pages = await pdf_renderer.create_range_page_list(total_ranges.length + 1);
        
        var pages_holder = document.createElement("div");
        pages_holder.classList.add("range-pages", "d-flex", "justify-content-center")
        
        range_pages.forEach(function(page){
            page.classList.remove("mx-3")
            page.classList.remove("my-3")
            page.classList.add("m-2")
            pages_holder.appendChild(page)
        })
        
        holder.appendChild(pages_holder)
        pdf_display.update_results(pdf_renderer.tool)
    },
    
    async rangeChangeHandler(ev, range_input){
        var old_page
        var new_page
        var range_index = parseInt(range_input.parentElement.parentElement.parentElement.id)
        
        //check if input is non-numeric
        if( !Number.isInteger(parseInt(range_input.value) )){
            if( range_input.id.includes("start")){
                range_input.value = 1;
            }else{
                range_input.value = pdf_renderer.total_pages;
            }
        //check if input is negtaive or above total files
        }else{
            if( range_input.id.includes("start") && parseInt(range_input.value) < 1 ){
                range_input.value = 1;
            }
            if( range_input.id.includes("start") && parseInt(range_input.value) > pdf_renderer.total_pages ){
                range_input.value = 1;
            }
            if( range_input.id.includes("end") && parseInt(range_input.value) > pdf_renderer.total_pages ){
                range_input.value = pdf_renderer.total_pages;
            }
            if( range_input.id.includes("end") && parseInt(range_input.value) < 1){
                range_input.value = pdf_renderer.total_pages;
            }
        }
        
        if( ev.srcElement.id.includes("start")) {
            old_page = document.querySelector("#start-page-" + range_index);
            try{
                new_page = await pdf_renderer.render_page( ev.srcElement.value, "start-page-" + range_index)

            }catch(e){console.log("yeee")}

        }else{
            old_page = document.querySelector("#end-page-" + range_index);
            new_page = await pdf_renderer.render_page( ev.srcElement.value, "end-page-" + range_index)
        }
           new_page.classList.remove("mx-3")
            new_page.classList.remove("my-3")
            new_page.classList.add("m-2")
        old_page.parentElement.replaceChild(new_page, old_page)
        pdf_display.update_results(pdf_renderer.tool)
    },
    
    toggle_menu() {
        var button = document.querySelector(".toggle-menu")
        var menu = document.querySelector(".main-menu")
        var selectors = document.querySelector("#method-selectors")
        var results = document.querySelector(".split-results");
        var removed = document.querySelector(".removed-pages")
        button.addEventListener("click",function(){
            if( button.classList.contains("fa-chevron-right") ){
                button.parentElement.parentElement.classList.add("hide-menu")
//                button.parentElement.classList.remove("close-menu-holder")
//                button.parentElement.classList.add("open-menu-holder")
                menu.classList.add("d-none")
                button.classList.remove("fa-chevron-right")
                button.classList.add("fa-chevron-left")
                document.querySelector(".help-section").classList.add("d-none");
            }else{
                menu.classList.remove("d-none")

//                button.parentElement.classList.add("close-menu-holder")
//                button.parentElement.classList.remove("open-menu-holder")
                button.parentElement.parentElement.classList.remove("hide-menu","p-3")
                button.classList.add("fa-chevron-right")
                button.classList.remove("fa-chevron-left")
            }
        })
        pdf_handlers.toggle_zip()
    },
    
    toggle_zip(){
        var inpt = document.querySelector("#zip-files")
        if( !inpt ){
            return false;
        }
        inpt.addEventListener("click", function(){
            inpt.hasAttribute("checked") ? inpt.removeAttribute("checked") : inpt.setAttribute("checked", "checked")
        })
    },
    
    removeRangeHandler(holder){
        holder.remove();
        document.querySelectorAll(".range-split-holder").forEach(function(elem,idx){
            elem.setAttribute("id", (idx + 1) )
            elem.children[1].children[0].setAttribute("id", "start-page-" + (idx + 1))
            elem.children[1].children[1].setAttribute("id", "end-page-" + (idx + 1))

            elem.children[0].children[0].children[0].setAttribute("id","start-" + (idx + 1))
            elem.children[0].children[0].children[2].setAttribute("id","end-" + (idx + 1))
        })
        pdf_display.update_results(pdf_renderer.tool);
    },
    
    pageIconHandler(icon, type){
        var icon_attribute
        var canvas_div = icon.parentElement.parentElement.parentElement.nextSibling
        
        var page_div = icon.parentElement.parentElement.parentElement.parentElement
        var removed_list = document.querySelector(".removed-pages-list")
        switch ( type ){
            case "action":
                icon_attribute = "action"
                canvas_div.classList.remove("remove-point")
                break;
            case "remove":
                icon_attribute = "remove";
                canvas_div.classList.remove("action-point")
                break;
        }
    
        if( !canvas_div.classList.contains(icon_attribute + "-point")){
            canvas_div.classList.add( icon_attribute + "-point")
           
        }else{
            canvas_div.classList.remove( icon_attribute + "-point")
            if( type == "remove"){
//                document.querySelector("#remove-page-" + page_div.id).remove()
            }

        }
        pdf_display.update_results(pdf_renderer.tool)
    }
    
}

var base_handlers = {
    _handleDragStart(e, pdf){
        window.localStorage.setItem("dragged", pdf.id)
        pdf.style.borderColor = "red"
        pdf.classList.add("text-dark", "bg-white")

    },
    
    _handleDragleave(e, pdf){
        if( pdf.getAttribute("draggable") == "false") {
            pdf.classList.remove("border-danger")
            pdf.classList.remove("bg-dark")
            pdf.classList.remove("text-dark")
        }
    },
    
    _handleDragover(e, pdf){
        e.preventDefault()
        target = e.target
 
        if( pdf.getAttribute("draggable") == "false") {
            pdf.classList.add("border-danger", "bg-dark", "text-dark")
        }
    },
    
    _handleDrop(e, pdf, replace){
        parent = pdf.parentElement
        pdf.classList.remove("bg-dark")
        pdf.classList.remove("text-dark")
        pdf.classList.remove("border-danger")
//        pdf.classList.add("border-dark")
        dragged = document.getElementById( window.localStorage.getItem("dragged"))
        zone_box = pdf.getBoundingClientRect()
        dragged_box = dragged.getBoundingClientRect()

        if( !replace ){
            if( zone_box["right"] > dragged_box["right"] ){
                pdf.after(dragged)
            }else{
                parent.insertBefore(dragged, pdf)
            }
        }else{
            cloned = pdf.cloneNode(true);
            all_holders = document.querySelectorAll(".list-image-holder")
            dragged_ind = Array.from(all_holders).indexOf(dragged)

            pdf.replaceWith(dragged)
            parent.insertBefore(pdf, parent.children[dragged_ind])
            
        }
        
        dragged.classList.remove("text-dark")
        dragged.classList.remove("bg-white")
        dragged.style.borderColor = "white"
        
        
    },
}


function add_position_events(){
    boxes = document.querySelectorAll(".position-box")
    
    boxes.forEach(function(box){
        box.addEventListener("click",_handleSelectPosition);
    })
}
function add_manual_events(){
    icons = document.querySelectorAll(".action-icon")
    icons.forEach(function(i){
        new_i = i.cloneNode(true);
        i.parentElement.appendChild(new_i);
        i.remove();
        
        new_i.addEventListener("click",_handleManualWatermark);
    })
    
    text_buttons = document.querySelectorAll(".text-decoration-input")
    text_buttons.forEach(function(btn){
       btn.addEventListener("click", _handleTextDecorationButton)
    })
    
    watermark_type_selects = document.querySelectorAll(".watermark-type-select");
    watermark_type_selects.forEach(function(elem){
        elem.addEventListener("click", _handleChangeWmType)
    })
    
    range = document.querySelector("input[name=range-size]")
    inpt = document.querySelector("input[name=size-text]");
    inpt.addEventListener("input", _handleTextSizeInput)
    range.addEventListener("input", _handleTextSizeRange);
    
    file = document.querySelector("#wm-file")
    file.addEventListener("change", _handleAddWmImage )
}

function _handleAddWmImage(){
    if ( !check_types(this, ["jpg","jpeg","png"]) ){
        this.value = "";
        set_alert("Please select a JPG, JPEG or PNG image!", "danger");
    }
}

function _handleChangeWmType(){
    if( !this.classList.contains("selected-watermark") ){
        sibling = this.nextElementSibling || this.previousElementSibling
        sibling.classList.remove("selected-watermark");
        document.querySelector("#watermark-" + this.id.split("-")[0] + "-options").classList.remove("d-none")
        document.querySelector("#watermark-" + sibling.id.split("-")[0] + "-options").classList.add("d-none")
        this.classList.add("selected-watermark")
    }
}

function _handleTextSizeRange(){
    document.querySelector("input[name=size-text]").value = this.value
}

function _handleTextSizeInput(){
    if( this.value < 0 ){
        this.value = 0;
        return false;
    }
    document.querySelector("input[name=range-size]").value = this.value
    
}

function _handleTextDecorationButton(){
    btn = this;
    if( btn.hasAttribute("checked") ){
        btn.removeAttribute("checked");
        btn.classList.remove("btn-secondary");
        btn.classList.add("btn-outline-secondary");
    }else{
        btn.classList.remove("btn-outline-secondary");
        btn.classList.add("btn-secondary");
        btn.setAttribute("checked", "checked");
        
    }
}


function _handleManualWatermark(){
    icon = this;
    element_holder = this.parentElement.parentElement.parentElement.nextSibling.children[0]
    boxes = document.querySelectorAll(".position-box")

    if( element_holder.classList.contains("watermarked")){
        element_holder.classList.remove("watermarked")
        boxes.forEach(function(box){
            mark = element_holder.querySelector("." + box.value);
            mark ? mark.remove() : null;
        })
    }else{
        element_holder.classList.add("watermarked")
        boxes.forEach(function(box){
            if( box.hasAttribute("checked")){
                display_mark(element_holder, box.value)
            }
        })
    }
     
}

function _handleSelectPosition(){
    inpt = this
    pages_container_all = document.querySelector("#pdf-pages-all")
    pages_container_manual = document.querySelector("#pdf-pages-manual")

    all_holders = pages_container_all.querySelectorAll(".canvas-holder")
    manual_holders = pages_container_manual.querySelectorAll(".watermarked")
    holders = Array.from(all_holders).concat(Array.from(manual_holders))
    if( inpt.hasAttribute("checked")){
        inpt.removeAttribute("checked")
        holders.forEach( function(holder){
            mark = holder.querySelector("." + inpt.value)
            mark ? mark.remove() : null;
        })

    }else{
        inpt.setAttribute("checked", "checked");
        
        holders.forEach( function(holder) {
           display_mark(holder, inpt.value)
           
        })
        
    }
}

function display_mark(holder, placement){
    mark = document.createElement("i");
    mark.classList.add("fa-regular","fa-circle-dot","position-absolute", placement )
    mark.style.height = '20px'
    mark.style.width = '20px'
    mark.style.color =  "red";

   copy = holder.cloneNode(true);
   copy.classList.remove("position-relative")
   copy.classList.add("position-absolute")
   copy.style.display = "block"
   copy.style.top = "-100000"
   copy.style.left = "-100000"
   copy.style.visibility = "hidden"
   document.body.appendChild(copy);
   
   c_height = parseInt(copy.offsetHeight)
   c_width  = parseInt(copy.offsetWidth)
   copy.remove();
   switch(placement){
       case "north-west":
            mark.style.top = "6px";
            mark.style.left = "6px";
            break;

       case "north":
            mark.style.top = "6px";
            mark.style.left = (( c_width / 2 ) - 10) + "px"
            break;
       case "north-east":
            mark.style.top = "6px";
            mark.style.right = "6px";
            break;

        case "west":
            mark.style.top = (( c_height / 2 ) - 15 ) + "px"
            mark.style.left = "6px";
            break;
        case "center":
            mark.style.top = (( c_height / 2 ) - 15 ) + "px"
            mark.style.left = (( c_width / 2 ) - 10) + "px"
            break;
        case "east":
            mark.style.top = (( c_height / 2 ) - 15 ) + "px"
            mark.style.right = "6px";
            break;

        case "south-west":
            mark.style.left = "6px";
            mark.style.bottom = "16px";
            break;
        case "south":
            mark.style.bottom = "16px";
            mark.style.left = (( c_width / 2 ) - 10) + "px"
            break;
        case "south-east":
            mark.style.right = "6px";
            mark.style.bottom = "16px";
            break;


   }
    holder.appendChild(mark)

}



function clear_file_info( file_counter = null, size_counter = null){
    file_counter === null ? file_counter = document.querySelector(".file-counter") : null
    size_counter === null ? size_counter = document.querySelector(".size-counter") : null
    if( file_counter){
        file_counter.innerHTML = "";
        file_counter.classList.add("d-none")
    
    }
    if( size_counter){
            size_counter.innerHTML = "";
        size_counter.classList.add("d-none")
        
    }

}    

function loading(visible, hide_after_done = false){
    var loading_box = document.getElementById("loading");
    if( loading_box !== null && loading_box !== undefined ){
        if(visible){
            loading_box.parentElement.classList.contains("hidden") ? loading_box.parentElement.classList.remove("hidden") : null
            loading_box.parentElement.parentElement.classList.contains("hidden") ? loading_box.parentElement.parentElement.classList.remove("hidden") : null
            loading_box.classList.remove("hidden");

            // document.querySelector("#upload_text").setAttribute("hidden", "true");
    
        }else{
            !loading_box.parentElement.classList.contains("hidden") ? loading_box.parentElement.classList.add("hidden") : null
            if( hide_after_done ){
                !loading_box.parentElement.parentElement.classList.contains("hidden") ? loading_box.parentElement.parentElement.classList.add   ("hidden") : null
            }
            loading_box.classList.add("hidden")
        }
    }
    
}

function processing(visible, hide_after_done = false){
    var loading_box = document.getElementById("processing");
    if(  loading_box !== null && loading_box !== undefined ){
        if(visible){
            loading_box.parentElement.classList.contains("hidden") ? loading_box.parentElement.classList.remove("hidden") : null
            loading_box.parentElement.parentElement.classList.contains("hidden") ? loading_box.parentElement.parentElement.classList.remove("hidden") : null
            loading_box.classList.remove("hidden");

            // document.querySelector("#upload_text").setAttribute("hidden", "true");
    
        }else{
            !loading_box.parentElement.classList.contains("hidden") ? loading_box.parentElement.classList.add("hidden") : null
            if( hide_after_done ){
                !loading_box.parentElement.parentElement.classList.contains("hidden") ? loading_box.parentElement.parentElement.classList.add   ("hidden") : null
            }
            loading_box.classList.add("hidden")
        }
    }
    
}


function window_close(){
    window.onbeforeunload = function () {
        return "Are you sure";
    };
}

function load_analitics(){
    var include_tag = document.createElement("script");
    include_tag.src = "https://googletagmanager.com/gtag/js?id=G-JMJ9E5GWL9";
    document.getElementsByTagName("head")[0].appendChild(include_tag);

    var script_tag = document.createElement("script");
    script_tag.setAttribute("async", "async");
    script_tag.innerHTML = 
    "window.dataLayer = window.dataLayer || [];\n function gtag(){dataLayer.push(arguments);}\n gtag('js', new Date());\n gtag('config', 'G-JMJ9E5GWL9');";
    document.getElementsByTagName("head")[0].appendChild(script_tag);
}

function load_pdfjs(){
    var pdf_min = document.createElement("script");
    var pdf_viewer = document.createElement("link");
    
    pdf_min.src = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.6.172/build/pdf.min.js";
    pdf_viewer.href = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.6.172/web/pdf_viewer.min.css";
    document.getElementsByTagName("head")[0].appendChild(pdf_min);
    document.getElementsByTagName("head")[0].appendChild(pdf_viewer);
}


function create_download_btn(url = ''){
    var button_holder = document.createElement("div");
    var main_parent = document.querySelector(".conversion-tab") || document.querySelector("#results") || document.querySelector("#download-section");
    
    if( app.conversion_type == "split-pdf" || app.conversion_type == "ocr" || app.conversion_type == "pdf-add-watermark" || app.conversion_type == "merge-pdf" || app.conversion_type == "swap-pdf-pages" ){
        main_parent = document.querySelector("#download-section")
        main_parent.classList.remove("d-none")

    }
    if(document.querySelector("div[id=button-holder]") !== null){
        document.querySelector("div[id=button-holder]").remove(); 
    }
    var btn = document.createElement("a");
    btn.setAttribute("id","download");

    var lable = document.createElement("lable");
    button_holder.setAttribute("id","button-holder");
    if( isValidUrl(url) ){
        fetch(url,{
        method: 'get',
        mode: 'no-cors',
        referrerPolicy: 'no-referrer'
        }).then( res => res.blob())
                .then (res => {
                    btn.setAttribute("download","dailyocr-file");
                    const href = URL.createObjectURL(res)
                    btn.href = href
                    btn.setAttribute("target","_blank");
    //                btn.click();
                })
    }else{
        btn.target = "_blank"
        btn.setAttribute('href', url);
    }
    

    btn.style.textDecoration = "none";
    if( app.conversion_type == "pdf-to-image" || app.conversion_type == "split-pdf"){
        button_holder.classList.add("form-group","text-center" ,"m-auto", "w-100");
        btn.classList.add("btn-sample","form-control","text-center","m-auto");
        btn.innerHTML = "Download";
    }else{
        btn.classList.add("text-center","m-auto");
        btn.innerHTML = url;
        button_holder.classList.add("text-center" ,"m-auto","text-break");
        button_holder.style.maxWidth = "100%"

    }
    button_holder.appendChild(btn);
    main_parent.appendChild(button_holder);
//    main_parent.scrollIntoView()


    processing(false);
}

async function multiple_download_links(urls){
    var button_holder = document.createElement("div");
    var main_parent = document.querySelector("#tool-wrapper") 
    button_holder.classList.add("text-center" ,"m-auto","text-break", "w-100", "mb-2");
    counter = 0;
    for( url of urls ){
        var btn = document.createElement("a");
        btn.style.fontSize = "18px";
        btn.classList.add("text-center","m-auto", "d-block");
        btn.innerHTML = url;
        await fetch(url,{
            method: 'get',
            mode: 'no-cors',
            referrerPolicy: 'no-referrer'
            }).then( res => res.blob())
                    .then (res => {
                        btn.setAttribute("download","dailyocr-file-" + counter);
                        const href = URL.createObjectURL(res)
                        btn.href = href
                        btn.setAttribute("target","_blank");
                    })
        button_holder.appendChild(btn);
        counter ++;
    }
    main_parent.appendChild(button_holder);
}

function remove_download_btn(){
    var btn = document.querySelector("#button-holder");
    if( btn !== null && btn !== undefined ){
        btn.remove();
    }
}

function enable_convert_button(){
    btn = document.querySelector(".conversion-button");
    btn.hasAttribute("hidden") ? btn.removeAttribute("hidden") : null;
    btn.removeAttribute("disabled");
}
function disable_convert_button(){
    btn = document.querySelector(".conversion-button");
    btn.setAttribute("disabled","disabled");
}

function active_link(){
    var links_elements = document.querySelectorAll(".nav-link");
    Array.from(links_elements).find( function(link){
    //                console.log(  link.href );

        if( link.href === window.location.href ){
            link.classList.add("active","fw-bold")
        }
    })
}

function isEmpty(obj) {
    return Object.keys(obj).length === 0;
}

// function user_request(){
//     let buttons = document.querySelectorAll("button");
//     buttons.forEach(function(btn){
//         btn.addEventListener("click", function(){
//             
//             var inputs = {};
//             if( this.id = "submit_log_in"){
//                 var name = document.querySelector("#user_name").value;
//                 var pwd = document.querySelector("#password").value;
//             }
//          

//             let request_type = this.id;
//             let xml = new XMLHttpRequest();
//             xml.onreadystatechange = function(){
//                 if( this.readyState == 4 && this.status == 200){
//                     if(this.response){
//                        
//                     }
//                 }
//             }
//             xml.open("POST","user_request.php?request_type=" + request_type);
//             xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//             xml.send("isus=cristos");
//         })
//     })


// }

function landing_upload(){
    var input = document.querySelector("#file");
    input.addEventListener("change", function(){
        if(check_types() ){
            var upload_span = document.querySelector(".upload-file-name");
            var btn = document.querySelector(".conversion-button");
            upload_span.innerHTML = input.files[0].name;
            var size = parseFloat((input.files[0].size/(1024*1024)).toFixed(2))
            
            btn.removeAttribute("disabled");
            if( size > app.allowed_file_size ){
                set_alert("File size must not exceed " + app.allowed_file_size + " MB!",  "danger" );
                return false;
            }
            redirect_to_ocr(btn, input.files[0].name, size);
        }else{
            set_alert("Bad file type! Make sure your file is " + app.allowed_types.join(", ").toUpperCase(), "danger" );
        }
    })
}

function _handleSitemapBoxClick(){
    clicked = this;
    clicked.setAttribute("value", "true");
    var bxs = document.querySelectorAll("input[type=checkbox]")
    bxs.forEach( function(elem){
        if( elem !== clicked ){
            elem.removeAttribute("value");
            elem.checked = false
        }
    })

}
function sitemap_check_select(){
    var boxes = document.querySelectorAll("input[type=checkbox]")
    boxes.forEach( function(box){
        box.addEventListener("click", _handleSitemapBoxClick)
    } )
}

function sitemap_home_click(){
    btn = document.querySelector(".conversion-button");
    btn.addEventListener("click", _handleSitemapHomeRedirect)
}
function _handleSitemapHomeRedirect(){
    check_type = document.querySelector("input[value=true]");
    url = document.querySelector("input[name=url]");
    if( !url.value ){
        set_alert("Please insert a valid ULR.", "danger");
        return false;
    }
    if( !check_type ){
        type = "validate"
    }else{
        type = check_type.name
    }
    localStorage.setItem("sitemap_home_url", url.value)
    localStorage.setItem("sitemap_home_type", type)
    var url
    switch(type){
        case "validate":
            url = "/tools/seo-sitemap-checker";
            break;
        case "broken-links":
            url = "/tools/sitemap-broken-links";
            break;
        case "generate":
            url = "/tools/sitemap-generator";
            break;
    }
    window.location.href = url;
//    console.log("")
}

function handle_sitemap_home_redirect(){
    type = localStorage.getItem("sitemap_home_type")
    url = localStorage.getItem("sitemap_home_url");
    if( type && url ){
        input = document.querySelector("input[name=url]")
        input.innerHTML = url;
        input.value = url
        seo_check();
    }
    
    localStorage.removeItem("sitemap_home_type")
    localStorage.removeItem("sitemap_home_url")
}

 function redirect_to_ocr(btn, file_name, size){
    btn.addEventListener("click", async function(ev){
        ev.preventDefault();
        var upload_status;
        await  upload_files(false)
        .then((data) => upload_status = data)
        .catch((reason) => console.log("Message:" + reason.message));

        if( upload_status["success"] !== null && upload_status["success"] !== undefined   ){
            localStorage.setItem("order_id", upload_status["success"]);
            localStorage.setItem("file_name", file_name);
            localStorage.setItem("size", size);

            window.location.replace("/tools/ocr");
        }
        return false;
    })
}

function  create_file_list_landing(name, size){
        document.querySelector("#tool-files").classList.remove("d-none");

        var li = document.createElement("li");
        var file_list_div = document.querySelector("#file-list-holder");
        
        var file_count = document.querySelector(".file-counter");

        var size_count = document.querySelector(".size-counter");
    
        var name_span = document.createElement("span");
        var icon = document.createElement("object");
        var remove_span = document.createElement("span");
        var right_container = document.createElement("div");
        var left_container = document.createElement("div");
        var size_span = document.createElement("span");
        var ul = document.createElement("ul");
        ul.setAttribute("id","name-list");
        ul.style.display = "block";
        size_span.innerHTML  = size + " MB"
        app.file_size = (size);
        size_span.classList.add("size-span");
        right_container.classList.add("justify-content-end","align-items-center","w-50","d-flex");
        left_container.classList.add("align-items-center","d-flex","overflow-hidden", "w-100");

        type = exploded_name(name)[1].toLowerCase();
        type == "jpeg" ? type = "jpg" : null;
        li.classList.add("text-start","name-li", "list-group-item" , "align-items-center");
        
//        app.allowed_file_size > (value.size/(1024*1024)).toFixed(2) ? li.classList.add("list-group-item-success"): li.classList.add("list-group-item-danger")
         
        icon.data = "../images/" + type +"-type.svg";
        icon.classList.add( type + "-icon" );
        icon.classList.add("file-icon", "blue");
        left_container.appendChild(icon);
        left_container.appendChild(name_span);
        li.appendChild(left_container);
        name_span.classList.add("file-name");
        name_span.innerHTML = name;
        remove_span.classList.add("remove-file","delete");
        remove_span.innerHTML = "&#x2715";
        right_container.appendChild(size_span);
        right_container.appendChild(remove_span);
        li.appendChild(right_container);
        ul.appendChild(li);
        file_count.innerHTML = "Total files: " + 1;

    if( app.file_size > 0 ){
        size_count.innerHTML = "Total size: " +     size + " MB"
        if( app.file_size > app.allowed_file_size ){
            size_count.classList.add("bg-danger");
        }
    }
 
        file_list_div.appendChild(ul);

    loading(false);
    change_convert_btn(true)
    remove_file();
}
   


async function get_landing_file(){
    let order = localStorage.getItem("order_id");
    var host = "https://" + location.hostname + "/";
    if( order && document.referrer == host ){
        let name = localStorage.getItem("file_name");
        let size = localStorage.getItem("size")
        create_file_list_landing(name, size);
        await conversion(order);
        localStorage.removeItem("size");
    }
}
async function preview_image(){
    var images = document.querySelectorAll(".image-content");
    images.forEach(async img => {
        url = img.nextElementSibling.children[0].getAttribute("href-a-data")
        await fetch(url,{ method: 'get'}).then( res => res.blob() ).then( res => {
            const src = URL.createObjectURL(res)
//        var reader = new FileReader();
//            reader.onload = function(e) {
//                img.querySelector("img").src = e.target.result;
//            }
//            reader.readAsDataURL(res);
               img.querySelector("img").src = src;

        })

        img.addEventListener("click",function(){
            var image = img.children[0];
            var modal = document.querySelector(".modal");
            modal.style.display = "block";
            modal_img = modal.children[1];
            
            modal_img.src = image.src;
            close_image(modal);
        })
    });
}

function close_image(modal){
    var close_btn = modal.querySelector(".close");
    close_btn.addEventListener("click", function(){
        modal.style.display = "none";
    })
}

function include_on_click(){
    boxes = document.querySelectorAll(".page-include");
    boxes.forEach(function(box){
        box.addEventListener("click",function(){
            if( box.value === ""){
                box.value = true;
            }else{
                box.value = "";
            }
        })
    })
}


function source_select(){
    let tabs = document.querySelector("#source-nav").querySelectorAll("span")
    let holders = document.querySelectorAll(".source-input-holder")
    holders[0].style.maxHeight  = '500px';

    tabs.forEach(function(elem){
        elem.addEventListener("click", function(ev){
            tabs.forEach(function(tb){
                if( tb.classList.contains("active")){
                    tb.classList.remove("active")
                }
            })
            
            holders.forEach(function(el){
                if( el.style.maxHeight !== '0px'){
                    el.style.maxHeight = 0;
                    el.style.overflow = "hidden";
                }
            })
            
            elem.classList.add("active")
            document.querySelector("#kw-source-" + elem.dataset.source).style.maxHeight  = "500px";
            document.querySelector("#kw-source-" + elem.dataset.source).style.overflow = "auto"
            
        })
    })
    
}

function uncheck_method(){
    boxes = document.querySelectorAll(".kw-method");
    boxes.forEach(function(box){
        box.addEventListener("click",function(){
            if( box.value === ""){
                box.value = true;
            }else{
                box.value = "";
            }
            boxes.forEach( function(elem) {
                if( elem !== box){
                    elem.checked = false;
                    elem.value = "";
                }
            })
        })
    })

}

function density_on_key(){
    window.addEventListener('keypress', function(event) {
        if (event.key === "Enter") {
            event.preventDefault();
          density();
        }
      });
}

// async function that fetches response from "find-density.php";
// bound to "Calculate Density" button;
async function density(){
    processing(true);
    // the div where the results and messages will be displayed
    let results_div = document.querySelector("#main-results");
    // create a FormData and append the url and checkboxes values;
    let form_data = new FormData();
    let method = "";
    url_selector = document.querySelector("#main-url");
    competitor_url_selector = document.querySelector("#competitor-url")
    include_boxes = document.querySelectorAll(".page-include");
    method_boxes = document.querySelector("#source-nav").querySelectorAll(".nav-link");
    method = Array.from(method_boxes).find( element => element.classList.contains("active") ) ;
    method = method.dataset.source;
    form_data.append("method", method);

    if( method == "link" ){
        if( url_selector.value == "" ){
            set_alert("Please insert the url to your webpage before proceeding!", "danger");
            return false;
        }
        form_data.append('url', url_selector.value);
        if( competitor_url_selector.value.trim()  ){
            form_data.append('competitor-url', competitor_url_selector.value);
        }
        include_boxes.forEach(function(box,i){
        if( box.value === "true"){
            form_data.append(box.name, box.value);
        }
        })
    }
    if( method == "text" ){
        text_area = document.querySelector("#kw-text")
        custom_kw = document.querySelector("#kw-input-text").value
        if( custom_kw.trim() !== "" ){
            form_data.append("custom-keywords", custom_kw);
        } 
        if( text_area.value == "" ){
            set_alert("Please insert text in the input area before proceeding!", "danger");
            return false;
        }
        form_data.append("text", text_area.value);
    }
    if( method == "file" ){
        
        var file_selector = document.querySelector("#file");
        if( file_selector.files.length == 0 ){
            set_alert("Please select a file before proceeding!", "danger");
            return false;
        }

        var upload_status;
        await  upload_files(false)
        .then((data) => upload_status = data)
        .catch((reason) => console.log("Message:" + reason.message));
        if( upload_status !== false){
            form_data.append("id", upload_status["success"]);
            custom_kw = document.querySelector("#kw-input-file").value
            if( custom_kw.trim() !== "" ){
                form_data.append("custom-keywords", custom_kw);
            } 
            
        }else{
            set_alert("We encountered some problems. Please try again or try again later!", "danger");
        }
        loading(false);
        change_convert_btn(true);

    }


    // function called when the fetch has succeeded
    // @param { json = JSON };
    function success(json){
        clear_results();
        if( json["status"] !== null && json["status"] !== undefined){
            set_alert(json["status"], "danger");
        }else{
            for ( const type in json ){
                if( method == "link" ){
                    url = document.querySelector("#" + type + "-url")
                    results_div = document.querySelector("#" + type + "-results");
                    indicator = document.createElement("span")
                    indicator.innerHTML = "Results for: " + url.value
                    hr = document.createElement("hr")
    //                hr.classList.add('mt-0')
                    results_div.appendChild(indicator)
//                results_div.appendChild(hr)
                }
                
                
                if( method == "link" && json[type]["density"]["keywords"].length === 0){
                    var alert = document.createElement("div")
                    alert.classList.add("alert", "alert-danger", "p-2", "mb-2")
                    alert.innerHTML  = "The Page does not have Meta Keywords!";
                    alert.style.fontSize = "15px"
                    results_div.appendChild(alert);
                    hr = document.createElement("hr")
    //                results_div.appendChild(hr)
                }
                create_tables(json[type]["density"], method, type);
                statistics(json[type]["statistics"], type);
            }
            

        }
        processing(false);
        results_div.removeAttribute("hidden");
    }
    function failure(e){
        console.log(e);
    }
    await fetch("/find-density",{
        method: "POST",
        body: form_data,
        success: function(data){
        }
    }).then(res => res.json())
    .then(response => success(response))
    .catch(error => failure(error));
}


// cleares the results div
function clear_results(){
    arr = ["main", "competitor"]
    arr.forEach(function(elem){
    result_div = document.querySelector("#" + elem + "-results");
        result_div.classList.remove("d-none");
        stats_div = document.querySelector(".statistics");
        density_div = document.querySelector(".density");
        if( stats_div !== null && density_div !== null){
            stats_div.innerHTML = "";
            density_div.innerHTML = "";
        }else{
            result_div.innerHTML = "";
        }
    })

   
}

function statistics(json, type){
    main_res = document.querySelector("#" + type + "-results");

    var results_div = main_res.querySelector("#phrases")
    var span_holder = document.createElement("div")
    span_holder.classList.add("p-2", "alert", "alert-primary", "mb-2")
    span_holder.style.fontSize = "15px"
    for (const [stats,vals] of Object.entries(json)) {
        var span = document.createElement("span");
        span.classList.add("me-2")
        span.innerHTML =  stats + ": " + "<span class='text-success'>" + vals + "</span>"
        span_holder.appendChild(span)
    }
    results_div.insertBefore(span_holder, results_div.children[0]); 

}

// creates tables containing the results and adds headers for each table
// @params { json = json recieved from fetch, tables = array with tables ids};
function create_tables(json, method, type){
    let tables = ['keywords','one-word','two-words','three-words', 'four-words'];

    results_div = document.querySelector("#" + type + "-results");

    if( method == "link" ){
        var table_heads = ['Keyword','Frequency','Title','Description','H-tags','Density'];
    }else{
        var table_heads = ['Keyword','Frequency','Density'];
    }
    buttons_holder = document.createElement("div")
    buttons_holder.classList.add("nav", "nav-tabs")
//    results_div.classList.add("p-3");
//    results_div.style.backgroundColor = "#FCFCFB";
    
    words_table_container = document.createElement("div")
    words_table_container.classList.add("w-100");

    tables_and_menu_holder = document.createElement("div");
    tables_and_menu_holder.setAttribute("id", "phrases")
    tables_and_menu_holder.classList.add("d-flex", "flex-column")
    tables_and_menu_holder.appendChild(buttons_holder)
    
    tables_and_menu_holder.appendChild(buttons_holder)
    tables_and_menu_holder.appendChild(words_table_container)
    results_div.appendChild(tables_and_menu_holder)
    
//    results_div.appendChild(results_div)

    tables.forEach((id,index) => {
        if( json[id].length === 0){
                return;
        }
        result_table = document.createElement('table');
        result_table.classList.add("word-density-table");
        var heading = document.createElement('h5');
        heading.innerHTML = 'Results for ' + id.replace("-", " ");
        heading.classList.add('mt-3',"kw-table-name");
        if( id == "keywords"){
            result_table.classList.add('table', 'table-success', 'table-striped' , 'm-auto')
        }else{
            result_table.classList.add('table', 'table-primary', 'table-striped' , 'm-auto')
        }
        
        let table_holder = document.createElement("div");
        table_holder.setAttribute("id",id)

        result_table.setAttribute('id', id);
        table_head = document.createElement('thead');
        th_r = document.createElement("tr");
        table_head.appendChild(th_r)
        table_heads.forEach( thead => {
            head = document.createElement('th');
            head.innerHTML = thead;
            head.classList.add("kw-table-heading");
            th_r.appendChild(head);
        })
        result_table.appendChild(table_head);
        table_body = document.createElement('tbody');
//        table_body.classList.add("custom-shadow")
        result_table.appendChild(table_body);
        // the keywords table will be the first to be desplayed in a different manner
        hr = document.createElement("hr")
        if( id === "keywords" ){
            collapse_btn = document.createElement("button")
            collapse_btn.classList.add("btn", "btn-sm", "btn-primary", "shadow-none", "border-0", "rounded-0", "d-flex", "justify-content-between", "w-100")
            collapse_btn.style.backgroundColor = "#777";
            collapse_btn.addEventListener("click", _handleKWTableDropDown)
            show_span = document.createElement('span')
            show_span.innerHTML = "Hide Keywords"
            icon = document.createElement("i")
            icon.classList.add("fa-solid", "fa-caret-down");
            collapse_btn.appendChild(show_span)
            collapse_btn.appendChild(icon)
            
            result_table.classList.add("w-100", "mb-2")
//            table_holder.appendChild(heading);
            table_holder.appendChild(collapse_btn);
            table_holder.appendChild(result_table);
//          console.log(results_div)
            if( method == "link" ){
                results_div.insertBefore(table_holder, results_div.children[1]);
            }else{
                results_div.insertBefore(table_holder, results_div.children[0]);
            }
                
//            results_div.insertBefore(hr, results_div.children[1]);

        }else{
            btn = document.createElement("span")
            btn_name = id.replace("-", " ");
            btn_name = btn_name.charAt(0).toUpperCase() + btn_name.slice(1)
            btn.innerHTML = btn_name + " phrases";
            btn.style.fontSize = "15px"
            btn.setAttribute("onclick", "_handleShowTable(this)")
            btn.setAttribute("id", id + "-toggle")
            buttons_holder.appendChild(btn)
            
            
            result_table.classList.add("w-100")
            if( id !== "one-word"){
                table_holder.classList.add("d-none")
                btn.classList.add("nav-link","flex-fill")

            }else{
                btn.classList.add("active")
                btn.classList.add("nav-link","flex-fill");

            }
//            table_holder.appendChild(heading);
//                      table_holder.classList.add("mt-3")

            table_holder.appendChild(result_table);
            words_table_container.appendChild(table_holder);
        
        }               
        populate_table(json[id], result_table);
    });
}

function _handleKWTableDropDown(){
        target = this.nextElementSibling
        if ( !target.classList.contains("d-none") ){
            target.classList.add("d-none")
            this.querySelector("i").classList.remove("fa-caret-down")
            this.querySelector("i").classList.add("fa-caret-up")
            this.querySelector("span").innerHTML = "Show Keywords"
            this.classList.add("mb-2")
        }else{
            target.classList.remove("d-none")
            this.querySelector("i").classList.remove("fa-caret-up")
            this.querySelector("i").classList.add("fa-caret-down")
            this.querySelector("span").innerHTML = "Hide Keywords"
            this.classList.remove("mb-2")
        }
    }

function _handleShowTable(target){
        current_btn = target.parentElement.parentElement.querySelector(".active")
        if( current_btn == target ){
            return false;
        }
        target.classList.remove("btn-outline-primary")
        table_name = target.id.split("-")
        table_name = table_name[0] + "-" + table_name [1];
        next_table = target.parentElement.parentElement.querySelector("#" + table_name);
        next_table.classList.remove("d-none")
        
        
       
        target.classList.add( "active")

        current_btn.classList.remove("active")
//        current_btn.classList.add("btn-outline-primary")
        
        prev_table_name = current_btn.id.split("-")
        prev_table_name = prev_table_name[0] + "-" + prev_table_name[1];
        target.parentElement.parentElement.querySelector("#" + prev_table_name).classList.add("d-none")
    }

// populates created tables with results from json
// @params { result = array of results from first JSON entry; res_table = HTML table element }
function populate_table(result, res_table){
    console.log(Object.entries(result))
    
    for (const [word,vals] of Object.entries(result)) {
        if( result.length === 0){
            return;
        }
        
        var row = res_table.querySelector("tbody").insertRow();
        var cell = row.insertCell(0);
        cell.classList.add("kw-table-cell","kw-table-cell-words");
        cell.innerHTML = word;

        Object.values(vals).forEach(function(val,index){
            if( res_table.id == "keywords" && index == 0 && val == 0){
                row.classList.add("table-danger");
            }
            var cell = row.insertCell(index + 1);
            cell.classList.add("kw-table-cell", "align-middle");
            cell.innerHTML = val;
        })

        }
}

function make_token(length) {
    let result = '';
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    const charactersLength = characters.length;
    let counter = 0;
    while (counter < length) {
      result += characters.charAt(Math.floor(Math.random() * charactersLength));
      counter += 1;
    }
    return result;
}

function set_progress_token(){
    token_inpt = document.querySelector("#token");
    if( token_inpt ){
        token_inpt.setAttribute("value", make_token(5));
    }
}

async function seo_check(){
    clear_storage();
    processing(true);
    change_convert_btn(false)
    var form_data = new FormData();
    var url = document.querySelector("#url");
    var prot = document.querySelector("#prot")

    if( prot ){
//        console.log(!isValidUrl(prot.value + "://" + url.value))
        if( !isValidUrl(prot.value + "://" + url.value) ){
            set_alert("Please insert a valid URL!","danger");
            change_convert_btn(true)
            return false;
        }
    }else{
        if( !isValidUrl(url.value) ){
            set_alert("Please insert a valid URL!","danger");
            change_convert_btn(true)
            return false;
        }
    }
    
    var to_check = document.querySelector("#to-check")
    var token = document.querySelector("#token");
        token ? token = token.value : null;
    var user_agent = document.querySelector("#user-agent")
    var country = document.querySelector("#country")
    var result_div = document.querySelector("#results");
    var result_alert = document.querySelector("#no-result");
    result_div ? result_div.remove() : null;
    result_alert ? result_alert.remove() : null;
    let update_interval = 2000;
    let request_update
    let interval_multiplier = 0
    let processed_thresh = 500 

    let update_holder = document.querySelector("#update-holder-" + to_check.value);
    if(  update_holder !== null && update_holder !== undefined ){
        update_holder.remove();
    }
    function success(json){
        clearInterval(request_update)
        processing(false, true);
        change_convert_btn(true)
        if( json["failure"] !== undefined){
            set_alert(json["failure"],"danger")
            return false;
        }
        
        if( json["status"] == "success"){
            let update_holder = document.querySelector("#update-holder-" +to_check.value);
            if(  update_holder !== null && update_holder !== undefined ){
                update_holder.remove();
            }
            if(json["results"]){
//                document.querySelector(".main").appendChild(node_from_string(parse_html_tags(json["results"])))
                document.querySelector("#results-wrapper").appendChild(node_from_string(parse_html_tags(json["results"])))
            }else{
                multiple_download_links(json["links"])
            }
        }else{
            alert = document.createElement("div")
            alert.classList.add("alert", "alert-danger", "p-2", "mb-0", "mt-2")
            alert.setAttribute("id", "no-result")
            alert.style.fontSize = "15px";
            alert.innerHTML = json["status"];
            document.querySelector("#tool-wrapper").children[1].appendChild(alert)

//            set_alert(json["status"], "danger")
        }
        
        if( json["data"] !== undefined ){
//            console.log(json["data"])
        }
    }
    
    function failure(e){
        clearInterval(request_update)

        console.log(e);
    }
    function failure_update(e){
        clearInterval(request_update)

        console.log(e);
    }
    async function success_update(data){
        switch (to_check.value){
            case "sitemap-generator":
                if( data["total-urls"] ){

                    if( parseInt( Object.values(data["total-urls"])[0] ) >= processed_thresh ){
                        
                        processed_links_string = Object.values(data["total-urls"])[0].toString();
                        interval_multiplier += 5;

                        if( interval_multiplier >= 10 ){
                            power  =  ( parseInt(processed_links_string.length) )  - parseInt((parseInt(interval_multiplier.toString().length)) - 1)
                        }else{
                            power  =  parseInt(processed_links_string.length) 
                        }
                        
                        power = 3
//                     
                        update_interval = (parseInt(interval_multiplier) *  (10**(power)))
                        
                        processed_thresh = update_interval
                     
                        clearInterval(request_update)
//                        update_interval  = 5000;
                        request_update = setInterval( await update, update_interval )
                        data["time-update"] = {"Updating every:": parseInt(update_interval) / 1000 + " seconds"}
                   }
//                }
//                debugger;
                }
                data["time-update"] = {"Updating every: ": parseInt(update_interval) / 1000 + " seconds"}
                break;
            case "broken-links":
//                console.log(data)
                break;
        }
        update_data(data, to_check.value);
    
    }

    form_data.append("url",url.value)
    form_data.append("to-check",to_check.value)
//    url = "/seo-check?url=" + url.value + "&to-check=" + to_check.value
    url = "/seo-check"
    
    if( prot ){
//        url +=  "&prot=" + prot.value
        form_data.append("prot",prot.value)

    }
    if( token ){
        form_data.append("token",token)
//        url += "&token="+token
    }
    if( user_agent ){
        form_data.append("user-agent",user_agent.value)
    }
    if( country ){
        form_data.append("country",country.value)
    }
    fetch( url,{
        async: true,
        keepalive:true,
        body:form_data,
        method: "POST",
        success: function(data){
//            console.log(data)
        }
    }).then(res => res.json())
    .then(response => success(response))
    .catch(error => failure(error));
    
      
//      var eSource = new EventSource("/progress-data");
//      eSource.onmessage = function(event) {
//		//write the received data to the page
//		console.log(event.data)
//                console.log("inside")
//	};

    async function update(){
        fetch("/progress-data?data=" + to_check.value + "&token="+token,{
            async: true,
            method: "GET",
            keepalive: true,
            success: function(data){
            }
        }).then(res => res.json())
        .then(response => success_update(response))
        .catch(error => failure_update(error))
    }
     request_update = setInterval( await update, update_interval );
     

}

function update_data(data,to_check){
//    console.log(data);
    first_update = true;

//        var result_div = document.querySelector("#results");
//            result_div.classList.remove("d-none");
        data_types = []
        main_content_holder = document.querySelector("#tool-wrapper")
       main_content_holder.querySelector("#update-holder-" + to_check) == null || 
            main_content_holder.querySelector("#update-holder-" + to_check) == undefined ? first_update = true : first_update = false;

            if( first_update ){
                update_holder = document.createElement("div");
                update_holder.setAttribute("id","update-holder-" + to_check);
                update_holder.classList.add("m-auto", "p-2", "custom-shadow", "mb-2")
                update_holder.style.backgroundColor = "#FCFCFB";
                for( type in data ){
                    
                   if(data[type] === null || data[type] === undefined){
                       continue;
                   }
                 
                    var prop_names = Object.keys(data[type]);
                  
                    data_holder = document.createElement("div");
                    
                    data_holder.classList.add("data-holder-" + to_check);
                    
                    if( type == "processed-pages"){
//                        console.log(data)
                       links = Object.values(data[type])[0]
                       h_span = document.createElement("span")
                       h_span.innerHTML = "Broken links found: "
                       data_holder.appendChild(h_span)
                       h_span.classList.add("d-block")
                       data_holder.appendChild(document.createElement("hr"))
                        for( lnk in links){
                           spn = document.createElement("span")
                          code_spn = document.createElement("span")
                           code_spn.innerHTML = " - " + links[lnk]["response_code"]
                           spn.innerHTML = lnk
                           spn.appendChild(code_spn)
                            spn.classList.add("d-block")
                           data_holder.appendChild(spn)
                           
                       }
                        update_holder.appendChild(data_holder)

                       continue;
                    }
                    
                    data_message_span = document.createElement("span");
                    data_message_span.innerHTML = prop_names[0];
                    
                    data_span = document.createElement("span");
                    data_message_span.setAttribute("id", type);
                    data_span.innerHTML = Object.values(data[type])[0]

                    data_holder.appendChild(data_message_span);
                    data_holder.appendChild(data_span);
                    update_holder.appendChild(data_holder)
                    

                }
                if( to_check == "sitemap-urls" ){
                    spinner = node_from_string(spinners["primary"]);
                    update_holder.appendChild(spinner);
                    percent =  Math.floor((parseInt(Object.values(data["total-processed"])[0]) / parseInt(Object.values(data["total-urls"])[0])) *100)
                    spinner.querySelector(".progress-bar").innerHTML = percent + "%"
                    spinner.querySelector(".progress-bar").style.width = percent + "%"
                }

            }else{
                update_holder = document.querySelector("#update-holder-" + to_check);
                count = 0;
                for( type in data ){
                    if(data[type] === null || data[type] === undefined){
                       continue;
                    }
                    var prop_names = Object.keys(data[type]);

                    data_holder = update_holder.querySelectorAll(".data-holder-" + to_check)[count]
                    if( type == "processed-pages"){
                     links = Object.values(data[type])[0]
                        for( lnk in links){
                           spn = document.createElement("span")
                           code_spn = document.createElement("span")
                           code_spn.innerHTML = " - " + links[lnk]["response_code"]
                           spn.innerHTML = lnk
                           spn.appendChild(code_spn)
                            spn.classList.add("d-block")
                           data_holder.appendChild(spn)
                           
                       }
                       continue
                       
                    }
                    data_span = data_holder.querySelector("#" + type)
                    if( data_span ){
                        data_span.nextSibling.innerHTML = Object.values(data[type])[0]
                        data_holder.children[0].innerHTML = prop_names[0]
                        count++;
                        
                    }
                }
                
                if( to_check == "sitemap-urls" ){
                    spinner = document.querySelector(".progress");
                    update_holder.appendChild(spinner);
                    if( data["total-processed"] !== undefined  && data["total-processed"] !== null ){
                        percent =  Math.floor((parseInt(Object.values(data["total-processed"])[0]) / parseInt(Object.values(data["total-urls"])[0])) *100)
                        spinner.querySelector(".progress-bar").innerHTML = percent + "%"
                        spinner.querySelector(".progress-bar").style.width = percent + "%"
                        
                    }
                }
            }
         if( first_update ){
             main_content_holder.appendChild(update_holder);
         }
        if(data["added"] !== undefined){
            span = document.createElement("span");
            span.innerHTML = data["added"];
            span.classList.add("d-block");
            main_content_holder.appendChild(span);
        }

}


function tool_link_btn(to_check){
    if(  app.seo_tags.includes(to_check)){
        var tool_link = document.createElement("a");
        tool_link.classList.add("btn", "btn-sample","btn-sm");
        tool_link.innerHTML = "Create SEO " + to_check.charAt(0).toUpperCase() + to_check.slice(1);
        tool_link.href = "/tools/write-seo-" + to_check;
    }else{
        if( to_check === "sitemap"){
            var tool_link = document.createElement("button");
            tool_link.classList.add("btn", "btn-sample","btn-sm");
            tool_link.innerHTML = "Test Sitemap URLs"
//            tool_link.href = "/tools/sitemap-url-checker"
            tool_link.addEventListener("click", sitemapToolLinkHandler(link))
        }
    }
    return tool_link;
}

function sitemapToolLinkHandler(link){
    var source = event.target || event.srcElement;
    event.preventDefault();
    localStorage.setItem("sitemap", source.parentElement.parentElement.children[0].textContent );
//    console.log(source.parentElement.children[0].textContent)
//    window.location.replace("/tools/sitemap-broken-links");
    window.open("/tools/sitemap-broken-links", "_blank")
}

function sitemap_redirect_check(){
    let storage_sitemap = localStorage.getItem("sitemap");
    var host = "https://" + location.hostname + "/tools/seo-sitemap-checker";
    if( storage_sitemap && document.referrer == host ){
        document.querySelector("#url").value = storage_sitemap;
        set_progress_token();
        seo_check()
        
        localStorage.removeItem("sitemap")
    }
}

function isValidUrl(string) {
  try {
    new URL(string);
    return true;
  } catch (err) {
    return false;
  }
}
        
function escape_html(unsafe){
    return unsafe
         .replace(/&/g, "&amp;")
         .replace(/</g, "&lt;")
         .replace(/>/g, "&gt;")
         .replace(/"/g, "&quot;")
         .replace(/'/g, "&#039;");
 }        
 
function parse_html_tags(unsafe){
    unsafe = unsafe.replaceAll("&amp;" ,"&")
    unsafe = unsafe.replaceAll("&amp;" ,"&")
    unsafe = unsafe.replaceAll("&lt;", "<")
    unsafe = unsafe.replaceAll("&gt;", ">")
//    unsafe = unsafe.replaceAll("nbsp;", " ")
    return unsafe
         
         
         
//         .replace(/"/g, "&quot;" )
//         .replace(/'/g, "&#039;");
 }        



function node_from_string(string){
    if( !string ){
        return false;
    }
    var div = document.createElement("div")
    div.innerHTML = string.trim()
    return div.firstChild;
}
function messages_rows(json, to_check){
    
    container = document.querySelector(".results-container")
    
    msg_count = Object.keys(json["Messages"]).length;
    if( json["Messages"]["failed-audits"] == null || json["Messages"]["failed-audits"] == undefined ){
        container.querySelector("#failed-audits").remove()
    }else{
        container.querySelector("#failed-audits").style.width = (100 / msg_count ) + "%"
    }
  
    if( json["Messages"]["passed-audits"] == null || json["Messages"]["passed-audits"] == undefined ){
        container.querySelector("#passed-audits").remove()
    }else{
        container.querySelector("#passed-audits").style.width = (100 / msg_count ) + "%"
    }
    
    if( json["Messages"]["warnings"] == null || json["Messages"]["warnings"] == undefined ){
        container.querySelector("#warnings").remove()
    }else{
        container.querySelector("#warnings").style.width = (100 / msg_count ) + "%"
    }
    

    for( message_type in json["Messages"] ){
        message_div = container.querySelector("#" + message_type)
        json["Messages"][message_type].forEach(function(elem){

            msg_container = document.createElement("div");
            var msg_span = document.createElement("span")
//            var mark_span = document.createElement("span")
            var mark_span = node_from_string(spans["mark-" + message_type]);
            msg_span.innerHTML = elem;
            msg_container.appendChild(mark_span);
            msg_container.appendChild(msg_span);
            message_div.appendChild(msg_container)
        })
    }
    
}

function general_row(json,to_check){
//    app.seo_tags.includes(to_check) ? table = document.querySelector("#seo-tag-table") : table = document.querySelector("#base-table")
    table = document.querySelector("." + to_check + "-table-results")

    if(json["general"] == null || json["general"] == undefined){
        table.querySelector("#general-row").remove();
        return false;
    }
    if(  app.seo_tags.includes(to_check) ){
        
            //Legnth, remaining, limit
        for( stat_type in json["general"]){
          //pixel, char
          for( stat in json["general"][stat_type]){
              table.querySelector("." + stat ).innerHTML = json["general"][stat_type][stat]
          }
          
        }
        table.querySelector("#tool-link").href = "/tools/write-seo-" + to_check;
        table.querySelector("#tool-link").innerHTML = "Create SEO " + to_check.charAt(0).toUpperCase() + to_check.slice(1);
        stats_text()
        
        
    }else{
        if( table.querySelector("#general-row") !== null ){
            cell = table.querySelector("#general-row").insertCell();
            cell.setAttribute("id", "general-message")
            
//            if( to_check == "sitemap"){
//                 if( json["total-sitemaps"] !== null &&  json["total-sitemaps"] !== undefined ){
//                    var span = node_from_string(spans.message_span);
//                    span.innerHTML = "Found sitemaps: ";
//                    span.classList.remove("p-2")
//                    cell.appendChild(span)
//                    for( sitemap of json["total-sitemaps"] ){
//                        var div = document.createElement("div");
//                        div.classList.add("d-block", "border-bottom", "border-light", "m-0", "p-1", "d-flex", "justify-content-between")
//                        var span = document.createElement("span")
//                        var link = node_from_string(links.sitemap_url_redirect)
//                        div.appendChild(span)
//                        div.appendChild(link)
////                        span.classList.add( "border-bottom", "border-light")
//                        span.classList.add("text-info")
//                        span.innerHTML = sitemap
//                        cell.appendChild(div)
//                    }
//                 }
//            }
            
            for( gen_mess in json["general"]["messages"] ){
                var msg_span = document.createElement("span");
                msg_span.innerHTML = json["general"]["messages"][gen_mess];
                msg_span.classList.add("text-info", "d-block")
                cell.appendChild(msg_span);
            }

            var to_check_indicator = document.createElement("span")
            to_check_indicator.classList.add("d-block")
            to_check_indicator.innerHTML = "Analysed " + to_check + ": "  + json[to_check]
            cell.appendChild(to_check_indicator);
            
             
        }
       
       
    }

}




function results_table(table, json,to_check){
        var result_div = document.querySelector("#results");
        json_entries = ["Messages", "Result Content"];
        json_entries.forEach(elem => {
           if( elem == "Result Content" ){
                table = document.createElement("table");
                table.classList.add("table","seo-table","table-dark");
//                result_div.appendChild(table);
           }
           for ( type in json[elem]){
                var row = table.insertRow();
                var type_cell = row.insertCell();
                var message_cell = row.insertCell();
                type_cell.setAttribute("colspan",1)
                type_cell.innerHTML = type;
                var type_class = type.replace(" ","-");
                type_class = type_class.toLowerCase();
                type_cell.classList.add("seo-table-head","p-2");
                var check_span = document.createElement("span");
                if( type == "Passed Audits" ){
                    row.classList.add("table-success");
                    check_span.classList.add("seo-check-mark");
                    check_span.innerHTML = " &#x2714;";
                }
                else if( type == "Failed Audits"){
                    row.classList.add("table-danger");
                    check_span.classList.add("seo-uncheck-mark");
                    check_span.innerHTML = " &#10008;";
                }
                else if( type == "Warnings"){
                    row.classList.add("table-warning");
                    check_span.classList.add("seo-warning-mark","text-warning");
                    check_span.innerHTML = " &#9888;"
                }else{
                    row.classList.add("table-warning")
                }
                message_cell.setAttribute("colspan",4)
                message_cell.classList.add("seo-message-cell");
                if( typeof (json[elem][type]) === "object" ){
                    Array.from(json[elem][type]).forEach( function(content){
                        var message_span = document.createElement("span");
                        message_span.innerHTML = content;
                        message_span.classList.add("d-block", "my-2");
                        if( elem == "Messages"){
                            message_span.appendChild(check_span.cloneNode(true))
                        }
                        message_cell.appendChild(message_span);
                    })
                }else{
                    var message_span = document.createElement("span");
                        message_span.innerHTML = json[elem][type];
                        message_span.classList.add("d-block", "my-2");
                        if( elem == "Messages"){
                            message_span.appendChild(check_span.cloneNode(true))
                        }
                        message_cell.appendChild(message_span);
                }
            }
           
            if( json[elem] !== undefined && parseInt(Object.keys(json[elem]).length) > 0 ){
                var header = table.createTHead();
                var h_row = header.insertRow();
                var h_desc_cell = h_row.insertCell();
                h_desc_cell.classList.add("text-center","align-middle");
                if( elem == "Messages"){
                    h_desc_cell.innerHTML = to_check.charAt(0).toUpperCase() + to_check.slice(1) + " Status";
                    h_desc_cell.setAttribute("colspan","5");

                }else{
                    var h_code_cell = h_row.insertCell(0);
                    h_code_cell.classList.add("text-center", "align-middle");
                    if( to_check === "sitemap-urls"){
                        h_desc_cell.innerHTML = "Found URLS";
                        h_code_cell.innerHTML = "HTTP Code";
                    }
                    if( to_check === "h-tag"){
                        h_code_cell.innerHTML = "Tag Type";
                        h_desc_cell.innerHTML = "Tag Text";

                    }
                }
            }
        });
        if( json["Contents"] !== undefined  && parseInt(Object.keys(json["Contents"]).length) > 0){
            var content_div = document.createElement("div");
            content_div.classList.add("mb-3");
            var content_span = document.createElement("span");
            var content_holder = document.createElement("span");
            content_holder.classList.add("border", "p-2", "border-2","seo-content","text-center");
            content_holder.innerHTML = json["Contents"];
            content_span.innerHTML = "Your " + to_check + " contents: " ;
            content_span.classList.add("text-center", "d-block")
            content_div.appendChild(content_span);
            content_div.appendChild(content_holder);
            result_div.appendChild(content_div)
        }
        
        

       

}

function stats_text(){
    var pix_length = document.querySelector(".pixel-length");
    var char_count = document.querySelector(".character-count");

//    var remaining_pix = document.querySelector(".remaining-pixels");
//    var remaining_char = document.querySelector(".remaining-characters");
//
//    if( remaining_pix.innerHTML < 0 ){
//        remaining_pix.classList.add("text-danger")
//    }else{
//        remaining_pix.classList.add("text-success")
//    }
//    if( remaining_char.innerHTML < 0 ){
//        remaining_char.classList.add("text-danger")
//    }else{
//        remaining_char.classList.add("text-success")
//    }

    var pix_lim = document.querySelector(".recomended-pixels-limit");
    var char_lim = document.querySelector(".recomended-characters-limit");

    pix_lim.classList.add("text-info");
    char_lim.classList.add("text-info");

    if( parseInt(pix_length.innerHTML) > parseInt(pix_lim.innerHTML.split(",")[0]) && parseInt(pix_length.innerHTML) < parseInt(pix_lim.innerHTML.split(",")[1])){
        pix_length.classList.add("text-success");
    }else{
        pix_length.classList.add("text-danger")
    }


    if( parseInt(char_count.innerHTML) > parseInt(char_lim.innerHTML.split(",")[0]) && parseInt(char_count.innerHTML) < parseInt(char_lim.innerHTML.split(",")[1])){
        char_count.classList.add("text-success");
    }else{
        char_count.classList.add("text-danger")
    }
}
// --- end functions for create_seo_tables

function seo_tag_create(){
    var content_input = document.querySelector("#seo-tag");
    var result_div = document.querySelector("#results");
    var char_count = document.querySelector(".char-count");
    var pix_length = document.querySelector(".pix-length");
    var result_text = document.querySelector("#result-text");
    var canvas = document.createElement('canvas');
    
    var remaining_char = document.querySelector(".remaining-char");
    var remaining_pix = document.querySelector(".remaining-pix");

    var char_limit =  document.querySelector(".char-limit").innerHTML.replaceAll(" ","").split("-");
    var pix_limit =  document.querySelector(".pix-limit").innerHTML.replaceAll(" ","").split("-");

    let f = new FontFace("fnt", "url(/arial.ttf)",{
    });
    
    f.load().then(function(font){
        document.fonts.add(font);
    }) 
    var font_size = 0;
    
    canvas.height = window.innerHeight;
    canvas.width = window.innerWidth;
    var ctx = canvas.getContext("2d");
    if (content_input.name == "title") {
        font_size = 15
        ctx.wordSpacing = "0.65px";

     }else{
        font_size = 10.5;
        ctx.wordSpacing = "-0.2px";

     } 
    ctx.font = font_size + "pt fnt";        
    content_input.addEventListener("keyup", function(){
        result_text.classList.contains("d-none") ? result_text.classList.remove("d-none") : null;

        result_text.innerHTML = " ";
        var new_content = content_input.value;
        var char_span = document.createElement("div");
        var pixel_span = document.createElement("div");    
        var duplicate_span = document.createElement("div");    
   
        // Ready to use the font in a canvas context
        // ctx.letterSpacing = "0.4px";
        var width = ctx.measureText(new_content).width;
        pixel_span.classList.add("alert", "p-2", "m-0")
        char_span.classList.add("alert","p-2", "m-0")
        duplicate_span.classList.add("alert","p-2", "m-0")

        remaining_char.innerHTML = char_limit[1] - new_content.length;
        remaining_pix.innerHTML = pix_limit[1] - Math.ceil(width);
        if( remaining_char.innerHTML < 0 ){
            remaining_char.style.color = "#dc3545";
        }else{
            remaining_char.style.color =  "#198754"
        }

        if( remaining_pix.innerHTML < 0 ){
            remaining_pix.style.color = "#dc3545";
        }else{
            remaining_pix.style.color =  "#198754"
        }

        if( duplicate_words(new_content) ) {
            duplicate_span.innerHTML = "Contains duplicate words!";
            duplicate_span.classList.add("alert-danger");
            result_text.appendChild(duplicate_span);
        }
        if( width < pix_limit[0] || width > pix_limit[1] ){
            pix_length.style.color = "#dc3545"
            pixel_span.innerHTML = "Pixel length out of limits!";
            pixel_span.classList.add("alert-danger")
        }else{
            pix_length.style.color =  "#198754"
            pixel_span.innerHTML = "Pixel length is ok!";
            pixel_span.classList.add("alert-success")

        }
        if( new_content.length < char_limit[0] || new_content.length > char_limit[1] ){
            char_span.innerHTML = "Character count out of limits!";
            char_count.style.color = "#dc3545"
            char_span.classList.add("alert-danger")

        }else{
            char_count.style.color =  "#198754"
            char_span.innerHTML = "Character count is ok!";
            char_span.classList.add("alert-success")
        }
        result_text.appendChild(char_span);
        result_text.appendChild(pixel_span);

        pix_length.innerHTML = Math.ceil(width);
        char_count.innerHTML = new_content.length;
        
        // result_div.appendChild(canvas)
        // ctx.strokeText(new_content, 100,100);
    })

  
}

function duplicate_words(string){
    var words_arr = string.toLowerCase().replace(/[^\w\s]/gi,"").split(" ");
    var filtered = words_arr.filter(function (el) {
        return el != "";
      });
    var duplicates =  filtered.filter((item, index) => filtered.indexOf(item) !== index)
   if( duplicates.length == 0 ){
    return false
   }else{
    return true;
   }
}




async function verify_pass(){
    var input_pass = document.querySelector("[name=input-pass]");
    function failure(error) {
        console.log("ERROR: " + error);
    }
    function success(response) {
        if( response === "failed"){
            remove_alert();
            set_alert("Incorect Password!", "danger");
        }
        if( response === "success" ){
            var form = document.querySelector("#details-form");
            var sbmt = document.querySelector("[name=change-details");
            var hidden = document.createElement("input");
            hidden.setAttribute("hidden", "hidden");
            hidden.name = "change-details";
            form.appendChild(hidden);
//            sbmt.click();
            form.submit();
        }
    }
    await fetch( "/verify-pass?pass=" + input_pass.value,{
    }).then(res => res.json())
    .then(response => success(response))
    .catch(error => failure(error));
}

function download_file(url, fileName) {
  fetch(url, { method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer' })
    .then(res => res.blob())
    .then(res => {
      const aElement = document.createElement('a');
      aElement.setAttribute('download', fileName);
      const href = URL.createObjectURL(res);
      aElement.href = href;
      aElement.setAttribute('target', '_blank');
      aElement.click();
      URL.revokeObjectURL(href);
    });
};



function set_transitions(){
    elements = document.querySelectorAll(".no-transition")
    
    elements.forEach(function(elem){
        elem.classList.remove("no-transition")
    })
}

function toggle_nav(){
    btn = document.querySelector(".navbar-toggler")
    nav = document.querySelector("#navbar_collapse")
    btn.addEventListener("click", function(){
        nav.classList.contains("show") ? nav.classList.remove("show") : nav.classList.add("show")
    })
}

function toggleLinkList(target){
    
    if( target.parentElement.children[target.parentElement.children.length - 1].classList.contains("d-none")) {
        target.parentElement.children[target.parentElement.children.length - 1].classList.remove("d-none")
        target.classList.remove("tree-list-arrow-right")
        target.classList.add("tree-list-arrow-down")
    }else{
        target.classList.remove("tree-list-arrow-down")
        target.classList.add("tree-list-arrow-right")
        target.parentElement.children[target.parentElement.children.length - 1].classList.add("d-none")
    }
}

function lazy_load(){
    let images = document.querySelectorAll(".lazy")
    let options = {
        root: null,
        rootMargin: '0px 0px 50px 0px',
        threshold: 0.5
    }

    
    let callback = (entries, observer) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            if(img.getAttribute("data-srcset")){
                const src = img.getAttribute("data-srcset");
                img.setAttribute("srcset", src);
                img.classList.remove("lazy")
                img.classList.add("lazy-loaded")
                observer.unobserve(img);
            }else if(img.getAttribute("data-src")){
                const src = img.getAttribute("data-src");
                img.setAttribute("src", src);
                img.classList.remove("lazy")
                img.classList.add("lazy-loaded")
                observer.unobserve(img);
            }
           
        }
        // and some other methods
        })
    }
    
    let observer  = new IntersectionObserver (callback, options);
    images.forEach((image) => {
      observer.observe(image);
    });
    
}


function call_index(){
//    landing_upload();
//subscribe();
}
function write_seo_title(){
    seo_tag_create()
}
function write_seo_description(){
    seo_tag_create()
}
function ocr(){
    clear_storage();
    check_file_upload();
}
function image_to_pdf(){
    clear_storage()
    check_file_upload();
//    swap_images();
}
function split_pdf(){
    check_file_upload();
    clear_storage()
    toggle_sm_menu();
    load_pdfjs();
    btn = document.querySelector("#toggle-pdf-list")
    btn.addEventListener("click", function () {
        list = document.querySelector(".pdf-list")
        list.parentElement.classList.contains("d-none") ? list.parentElement.classList.remove("d-none") : list.parentElement.classList.add("d-none")
        list.parentElement.parentElement.classList.contains("d-none") ? list.parentElement.parentElement.classList.remove("d-none") : list.parentElement.parentElement.classList.add("d-none")
    })

}
function pdf_add_watermark(){
    check_file_upload();
    clear_storage()
    load_pdfjs();
    add_position_events();
    toggle_sm_menu();
    pdf_watermark_menu();

}
function merge_pdf(){
    load_pdfjs();
    check_file_upload();
    toggle_help();
    clear_storage()
}
function swap_pdf_pages(){
    load_pdfjs();
    check_file_upload();
    clear_storage()
    toggle_help();
}
function pdf_to_image(){
    clear_storage()
    check_file_upload();
    
    var zip_files = document.querySelector("#zip-files")
    zip_inpt = document.querySelector("#download_type");
    zip_inpt.addEventListener("click", function(){
         if( this.checked ){
            this.checked = false;
            this.value = "link"
        }else{
            this.checked = true;
            this.value = "zip"
        }
    })
    zip_files ?  zip_files.addEventListener("click", _handleZipFiles) : null
    function _handleZipFiles(){
        inpt = this.querySelector("input");
        if( inpt.checked ){
            inpt.checked = false;
            inpt.value = "link"
        }else{
            inpt.checked = true;
            inpt.value = "zip"
        }
    }
    
}

function keyword_density(){
    source_select();
    include_on_click(); 
    density_on_key();
    uncheck_method()
    check_file_upload();
}

function seo_title_checker(){
}
function seo_description_desc(){
}
function sitemap_broken_links(){
    sitemap_redirect_check()
    set_progress_token()
    handle_sitemap_home_redirect()
}
function seo_sitemap_chekcer(){
    set_progress_token()
    handle_sitemap_home_redirect()
}
function sitemap_generator(){
    set_progress_token()
    update_connection_status();
    clear_storage()
    handle_sitemap_home_redirect()
}
function seo_robots_checker(){
}
function seo_heading_checker(){
}
function broken_links_checker(){
    set_progress_token();
    update_connection_status()
}
function check_http_header(){
    set_progress_token();
}
function domain_age_checker(){
    set_progress_token();
}

function website_tree_structure(){
    set_progress_token();
    update_connection_status()
}



window.onload  = function() {
    subscribe();
}


//calling global functions
if( app.conversion_type !== null ){
//    display_allowed_types();
    app.input_accept();
}

var loc = location.href.split("/").slice(3)
let fname = false;
if( loc[0] == "tools" ){
    loc.shift();
}
if(loc.length >= 1 ){
    fname = loc[0].replaceAll("-","_");
}
if( fname && typeof window[fname] === "function"){
    window[fname]();
}

active_link();
set_transitions();
toggle_nav();
lazy_load();
//sendToServer();
// 
// // dont call on index.php
// if( loc !== "" && loc !== " "){
//     window.onload = function (){
//    //try {
//        userOperations.verificationSetStatusByUrl();
//        //userOperations.verificationFile();
//    //} catch (e) {
//        
//    //}
//    var file_verify_button = document.querySelector("#file-verify-button");
//    if ( file_verify_button !== null ) {
//        file_verify_button.addEventListener('click', function(){
//
//            var loading = document.querySelector("#spinner-element");
//            var veirfyTableSection = document.querySelector('#file-verification');
//
//            loading = loading.cloneNode(true);
//            loading.classList.remove('d-none');
//            veirfyTableSection.innerHTML = loading.outerHTML;
//            userOperations.verificationFile();
//
//
//        });
//    }
//    
//    var cancel_verify_button = document.querySelector("#cancel-verify-button");
//    if ( cancel_verify_button !== null ) {
//        cancel_verify_button.addEventListener('click', function(){
//            userOperations.cancelValidationProcess();
//        });
//    }    
//};
//     
// }