<div class="link">
    <h1>Générateur de lien</button></h1>
    </br>
    <div class="homepanel">
        <div class="row w-100">
            <div class="hbox col-lg">    
                <h1><i class="fa fa-link"></i> Liens raccourcis</h1>
                </br>
                <div id="lkcontent">

                </div>
                </br>
                <button id="lk_add" class="lk_add"><i class="fa fa-plus"></i> Ajouter</button>
            </div>
        </div>
    </div>
</div>

<dialog class="lk_adduser" id="lk_add_form">
    <h1><i class="fa fa-plus"></i> Ajouter un lien raccourci</h1>
        <p>Nom du raccourci :</p>
        <input class="inp" id="lk_add_name" type="text">
        <p>Lien à raccourcir :</p>
        <input class="inp" id="lk_add_src" type="text">
        <p>Nouveau lien (neutral.raphix.fr/link/<i>votrelien</i>):</p>
        <input class="inp" id="lk_add_dest" type="text">
        <div style="color: rgb(255, 76, 76);" id="lk_add_info"></div>
    </div>
    <button onclick="getPage('link.html')" id="lk_add_close" class="lk_add_close">Annuler</button>
    <button id="lk_add_confirm" class="lk_add_confirm">Ajouter</button>

</dialog>

<div id="lk_dialog">
    

</div>


<script>

    if(typeof lkaddform == 'undefined'){

        const lkcontent = document.getElementById("lkcontent")
        const lkdialogs = document.getElementById("lk_dialog")


        getLinks()

        function getLinks() {

            var linksContent = new Array()
            var dialogContent = new Array()

            

            fetch('/link', {
                method: 'POST',
                redirect: 'follow',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({"request":"get", "value": ""})
            })
            .then(response => response.json())
            .then(response => showLink(response))

            function showLink(response) {

                var links = response.content

                if(response.result == "failed") {
                    content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                    console.log("FAILED")
                    
                } else if(response.result == "success") {

                    for(var link of links) {

                        linksContent.push('<div class="row lk_line"> <p class="col-lg"><i class="fas fa-sticky-note"></i> Nom du raccourci : ' + link.name + '</p> <p class="col-lg"><i class="fa-sharp fa-solid fa-link"></i> Lien raccourci : <a href="http://localhost/link/' + link.dest + '">http://localhost/link/' + link.dest + '</a></p> <p class="col-lg"><i class="fa-solid fa-up-right-from-square"></i> Lien réel : <a href="' + link.src + '"><strong>Vers le lien</strong></a></p> <div class="col-lg "> <button id="' + link.name + '_edit_btn" class="lk_edit"><i class="fa fa-pen"></i></button> <button id="' + link.name + '_delete" class="lk_delete"><i class="fa fa-trash"></i></button> </div> </div>')
                        dialogContent.push('<dialog class="lk_adduser" id="' + link.name + '_dialog"> <h1><i class="fa fa-pen"></i> Editer un lien raccourci</h1> <p>Nom du raccourci :</p> <input class="inp" id="' + link.name + '_edit_name" type="text"> <p>Lien à raccourcir :</p> <input class="inp" id="' + link.name + '_edit_src" type="text"> <p>Nouveau lien (neutral.raphix.fr/link/<i>votrelien</i>):</p> <input class="inp" id="' + link.name + '_edit_dest" type="text"> <div style="color: rgb(255, 76, 76);" id="' + link.name + '_edit_info"></div> </div> <button onclick="getPage(\'link.html\')" id="lk_add_close" class="lk_add_close">Annuler</button> <button id="' + link.name + '_edit_confirm" class="lk_add_confirm">Editer</button> </dialog>')
                        
                        lkcontent.innerHTML = linksContent.join("")
                        lkdialogs.innerHTML = dialogContent.join("")

                    }

                    for(var link of links) {

                        makeAction(link)
                    }

                
                    if(links.length == 0) {
                        
                        lkcontent.innerHTML = '<span style="margin: 2vw;color: rgb(255, 76, 76);">Aucun lien raccourci n\'a été crée.</span>' // lkcontent.innerHTML = linksContent.join("")

                    } 
                }

            }


               
        }


            
        function makeAction(link) {


            const lkdelete = document.getElementById(link.name + "_delete")
            const lkedit = document.getElementById(link.name + '_edit_btn')
            const lkdialog = document.getElementById(link.name + "_dialog")
            const lkname = document.getElementById(link.name + '_edit_name')
            const lksrc = document.getElementById(link.name + "_edit_src")
            const lkdest = document.getElementById(link.name + "_edit_dest")
            const lkinfo = document.getElementById(link.name + "_edit_info")
            const lkconfirm = document.getElementById(link.name + "_edit_confirm")

       

        

            lkdelete.addEventListener("click", () => {

                
                fetch('/link', {
                    method: 'POST',
                    redirect: 'follow',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({"request":"del", "value": link.name})
                })
                
                
                getPage("link.html")

            })

            lkedit.addEventListener("click", () => {


                lkname.value = link.name
                lksrc.value = link.src
                lkdest.value = link.dest

                lkdialog.showModal()
            })

            lkconfirm.addEventListener("click", () => {

                lkinfo.innerHTML = ""

                if(lkname.value == "" | lkdest.value == "" | lksrc.value == "") {

                    lkinfo.innerHTML = "Tout les champs doivent être remplis."

                } else {
                    if(lkdest.value.includes(" ") | lksrc.value.includes(" ")) {

                        lkinfo.innerHTML = "Aucun espace n'est accepté dans les liens"

                    } else {

                        const requestData = {
                        "name":lkname.value,
                        "src":lksrc.value,
                        "dest":lkdest.value,
                        "original":link.name

                        }

                        fetch('/link', {
                        method: 'POST',
                        redirect: 'follow',
                        headers: {
                            'Accept': 'application/json',
                            'Content-Type': 'application/json'
                        },
                        body: JSON.stringify({"request":"edit", "value": requestData})
                        })
                        .then(response => response.json())
                        .then(response => afteredit(response))

                        function afteredit(response) {
                            
                           
                            if(response.result == "failed") {
                                content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                                console.log("FAILED")
                    
                            } else if(response.result == "success") {

                                if(response.content == "EDI") {
                                    getPage("link.html") 
                                    
                                }else if(response.content == "NAME_ALREADY_USED") {

                                    lkinfo.innerHTML = "Le nom du raccourci est déjà utilisé"
                                
                                }  else if(response.content == "DEST_ALREADY_USED") {

                                    lkinfo.innerHTML = "L'URL de raccourci est déjà utilisé"
                                } else {

                                    lkinfo.innerHTML = "ECHEC - Réessayez plus tard !"
                                }
                                
                                            
                            
                            }
                        }
                        
                       

                    }           

                }

            })
        }
        

        const lkaddbtn = document.getElementById("lk_add")
        const lkaddform = document.getElementById("lk_add_form")
        const lkaddname = document.getElementById("lk_add_name")
        const lkaddsrc = document.getElementById("lk_add_src")
        const lkadddest = document.getElementById("lk_add_dest")
        const lkaddconfirm = document.getElementById("lk_add_confirm")
        const lkaddinfo = document.getElementById("lk_add_info")
        

        lkaddbtn.addEventListener("click", () => {

            lkaddform.showModal()

        }) 

        lkaddconfirm.addEventListener("click", () => {

            lkaddinfo.innerHTML = ""

            if(lkaddname.value == "" | lkadddest.value == "" | lkaddsrc.value == "") {
                lkaddinfo.innerHTML = "Tout les champs doivent être remplis."

            } else {

                if(lkadddest.value.includes(" ") | lkaddsrc.value.includes(" ")) {

                    lkaddinfo.innerHTML = "Aucun espace n'est accepté dans les liens"

                } else {

                    const requestData = {
                        "name":lkaddname.value,
                        "src":lkaddsrc.value,
                        "dest":lkadddest.value

                    }

                    fetch('/link', {
                    method: 'POST',
                    redirect: 'follow',
                    headers: {
                        'Accept': 'application/json',
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({"request":"add", "value": requestData})
                    })
                    .then(response => response.json())
                    .then(response => af(response))

                    function af(response) {

                        if(response.result == "failed") {
                            content.innerHTML = ' <h1 style="color:red;"><i style="color:yellow; font-size: 2vw;" class="fa fa-warning"></i>  Erreur de chargement des données - Erreur : ' + response.content  + '</h1>'
                            console.log("FAILED")
                
                        } else if(response.result == "success") {

                            if(response.content == "ADDED") {
                                getPage("link.html") 
                                
                            } else if(response.content == "NAME_ALREADY_USED") {
                                lkaddinfo.innerHTML = "Le nom du raccourci est déjà utilisé"
                                
                            } else if(response.content == "DEST_ALREADY_USED") {

                                lkaddinfo.innerHTML = "L'URL de raccourci est déjà utilisé"
                            } else {

                                lkaddinfo.innerHTML = "ECHEC - Réessayez plus tard !"
                            }
                            
                                        
                        
                        }
                


                    }
                

                    
                }         
                

            }

        })

    }
    

</script>



<!-- Style-->
<style>



.hbox h1 {

    font-size: large;

}

table  {
    color: white;
    
}

.lk_line {
 
    padding: 0.5vw;
    text-align: center;
    align-items: center;
    vertical-align: center;
}

.lk_line a {

    color: white;
}

.hbox {
    
    margin: 1%;
    padding: 1%;
    background-color: rgb(80, 80, 80);
    border-radius: 1vw;
    box-shadow: 5px 5px 5px rgba(80, 80, 80, 0.477) ;

}

.lk_add {

    border-radius: 1vw;
    border-color: rgb(0, 174, 255);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    padding: 0.5vw;

}

.lk_add:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.lk_add:active {
    box-shadow: none;

}

.lk_edit {

    border-radius: 100%;
    border-color: rgb(0, 174, 255);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    width: 2.5vw;
    height: 2.5vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    font-size: 1vw;

}

.lk_edit:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.lk_edit:active {
    box-shadow: none;

}

.lk_delete {

    border-radius: 100%;
    border-color: rgb(255, 48, 48);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    width: 2.5vw;
    height: 2.5vw;
    margin-left: 0.5vw;
    margin-right: 0.5vw;
    font-size: 1vw;
    }

.lk_delete:hover {
    box-shadow: 1px 1px 10px rgb(255, 48, 48);
    background-color: rgb(255, 48, 48);
    color: black;
}

.lk_delete:active {
    box-shadow: none;

}

.lk_adduser {

border-radius: 1vw;
border-color: transparent;
background-color: rgb(80, 80, 80);
color: white;
text-align: center;

}

.lk_add_close {

    border-radius: 1vw;
    border-color: rgb(255, 48, 48);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    margin: 0.5vw;
    padding: 0.5vw;
    font-size: 1vw;
}

.lk_add_close:hover {
    box-shadow: 1px 1px 10px rgb(255, 48, 48);
    background-color: rgb(255, 48, 48);
    color: black;
}

.lk_add_close:active {
    box-shadow: none;

}

.lk_add_confirm {

    border-radius: 1vw;
    border-color: rgb(0, 174, 255);
    border-width: 1%;
    border-style: solid;
    color: white;
    background-color: transparent;
    transition: all 0.2s ease 0s;
    margin: 0.5vw;
    padding: 0.5vw;
    font-size: 1vw;

}

.lk_add_confirm:hover {
    box-shadow: 1px 1px 10px rgb(0, 174, 255);
    background-color: rgb(0, 174, 255);
    color: black;
}

.lk_add_confirm:active {
    box-shadow: none;

}

.inp {

    border-style: hidden;
    border-radius: 1vw;
    padding: 0.2vw;
    padding-left: 1vw;
    transition: all 0.2s ease 0s;
    margin-bottom: 0.5vw;
    width: 100%;


}



.inp:hover {

    box-shadow: 2px 2px 5px rgba(255, 255, 255, 0.477) ;

}


.inp:focus {

    box-shadow: 5px 5px 5px rgba(0, 174, 255, 0.477) ;

}



</style>