// Initialize Firebase
var config = {
    apiKey: "AIzaSyCuvwf78cmSDoZ2yS4XxHZhnjUn7yIHYfw",
    authDomain: "test-667ca.firebaseapp.com",
    databaseURL: "https://test-667ca.firebaseio.com",
    projectId: "test-667ca",
    storageBucket: "test-667ca.appspot.com",
    messagingSenderId: "221332577314"
};


firebase.initializeApp(config);



$(document).ready(function () {
    firebase.auth().onAuthStateChanged(async function (user) {
        if (user) {
            firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
                console.log("/shoppinglistx idtoken:", idtoken);
                var url = "/dash/" + idtoken
                console.log("URL: ", url)
                $('#dashurl').attr("href", url);

            }).catch((error) => console.error("/shoppinglist Get id token client error: ", error));
        } else {
            console.log("Check Auth error", user)
        }
    });

    eigeneEinkaufslisten();
    geteilteEinkaufslisten();

    $(".detailcardausgabe").hide();

    $(".logout").click(function () {
        console.log("click logout")
        firebase.auth().signOut().then(function () {
            document.location.replace('/');
        }).catch(function (error) {
            console.error("Logout Error: ", error)
        });
    });

    $('.add').click(function () {
        console.log("click add");
        // let name = $("#einkaufslistenname").val();

        firebase.auth().onAuthStateChanged(async function (user) {
            if (user) {
                firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
                    console.log("/shoppinglistx idtoken:", idtoken);
                    $.ajax({
                        type: "POST",
                        url: "/shoppinglist",
                        data: {
                            name: $("#einkaufslistenname").val(),
                            description: $("#einkaufslistenbeschreibung").val(),
                            color: $("input:checked").val(),
                            idtoken: idtoken
                        },
                        success(res) {
                            console.log("add funktioniert");
                            $(".listen-ausgabe").html("");
                            $(".shared-cards").html("");
                            eigeneEinkaufslisten();
                            geteilteEinkaufslisten();
                            $(".EigeneListeAdd").modal("hide");
                        },
                        error(err) {
                            console.log("/shoppinglist error", err);
                        }
                    });
                }).catch((error) => console.error("/shoppinglist Get id token client error: ", error));
            } else {
                console.log("Check Auth error", user)
            }
        });

    });

    $(".sl_add").click(function () {
        $('#EigeneListeAdd').modal('show');
    });

});

var globaleAddZwischenID = "";
var globalegraddid = "";
// var globaleGetZwischenID = "";

function eigeneEinkaufslisten() {
    // $(".listen-ausgabe").remove();
    firebase.auth().onAuthStateChanged(async function (user) {
        if (user) {
            firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
                console.log("/myshoppinglists idtoke: ", idtoken);
                $.ajax({
                    type: "GET",
                    url: "/myshoppinglists",
                    data: {
                        idtoken: idtoken
                    },
                    success(res) {
                        firebase.auth().onAuthStateChanged(async function (user) {
                            if (user) {
                                firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
                                    console.log("/userinfo_json idtoken: ", idtoken)
                                    $.ajax({
                                        type: "GET",
                                        url: "/userinfo_json",
                                        data: {
                                            idtoken: idtoken
                                        },
                                        success(data) {
                                            const userinfo = data.name;
                                            const picture = data.picture;
                                            console.log(res)
                                            for (let i = 0; i < res.length; i++) {
                                                const el = res[i];

                                                $('body').attr('name',`${idtoken}`);

                                                $(".listen-ausgabe").append(`<div class="col-md-12 karten">
                                <div class="card border-light mb-3 shadow-sm" style="max-width: 18rem;min-width: 14rem;" id="${el.sl_id}">
                                    <div class="card-header" style="background-color: #${el.color};">
                                    <span>
                                    <img src="${picture}" alt="Avatar" style="width:10%; border-radius: 50%;">
                                        ${userinfo}</span>
                                        <button class="btn edit"><i class="fas fa-pencil-alt "></i></button>
                                        <button class="btn trash"><i class="far fa-trash-alt"></i></button>
                                        <button class="btn sledit"><i class="far fa-edit"></i></button>
                                        <button class="btn postshare"><i class="fas fa-share-alt"></i></button>
                                    </div>
                                    
                                    <div class="card-body">
                                        <h5 class="card-title">${el.name}</h5>
                                        <p class="card-text">${el.description}</p>
                                    </div>
                                </div></div>`)
                                            }
                                            console.log("Eigene Einkaufslisten");
                                            slbearbeiten();
                                            loeschen();
                                            Detail();
                                            shareinvite();
                                            // groupHinzufügen()
                                        },
                                        error(err) {
                                            console.error("userinfo_json error: ", err)
                                        }
                                    })
                                }).catch((error) => console.error("Get id token client error: ", error));
                            } else {
                                console.log("Check Auth error", user)
                            }
                        });
                    },
                    error(err) {
                        console.error("/myshoppinglists ajax error: ", err);
                    }
                });
            }).catch((error) => console.error("Get id token client error: ", error));
        } else {
            console.log("Check Auth error", user)
        }
    });
};

function geteilteEinkaufslisten() {
    firebase.auth().onAuthStateChanged(async function (user) {
        if (user) {
            firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
                // console.log("/sharedshoppinglists idtoke: ", idtoken)
                $.ajax({
                    data: "GET",
                    url: "/sharedshoppinglists",
                    data: {
                        idtoken: idtoken
                    },
                    success(res) {
                        console.log(res);
                        for (let i = 0; i < res.length; i++) {
                            const el = res[i];
                        $.ajax({
                            type: "GET",
                            url: "/shoppinglist_json/" + res[i].sl_id,
                            data: {
                                idtoken: idtoken
                            },
                            success(result){
                                console.log(result);
                                
                                $(".shared-cards").append(`<div class="col-md-12 karten">
                                <div class="card border-light mb-3 shadow-sm" style="max-width: 18rem;min-width: 14rem;" id="${result.sl_id}">
                                    <div class="card-header" style="background-color: #${result.color};">
                                    <span>
                                    <img src="${result.admin.picture}" alt="Avatar" style="width:10%; border-radius: 50%;">
                                        ${result.admin.name}</span>
                                        <button class="btn shareedit"><i class="fas fa-pencil-alt "></i></button>
                                        <button class="btn sharetrash"><i class="far fa-trash-alt"></i></button>
                                        <button class="btn sledit"><i class="far fa-edit"></i></button>
                                    </div>
                                    
                                    <div class="card-body">
                                        <h5 class="card-title">${result.name}</h5>
                                        <p class="card-text">${result.description}</p>
                                    </div>
                                </div></div>`);
                                slbearbeiten();
                                loeschen();
                                sharedtail();
                            },error(err){
                                console.log(err);
                            }
                        })}
                    },
                    error(err) {
                        console.error("/sharedshoppinglists error:", err);
                    }
                });
            }).catch((error) => console.error("Get id token client error: ", error));
        } else {
            console.log("Check Auth error", user)
        }
    });
};

function selfexinvite(){
$(".sharetrash").click(function(){
    let card = $(this).closest(".card");
        let id = card.attr("id");

        firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
        $.ajax({
            type: "DELETE",
            url: "/exitinvite",
            data: {
                sl_id: id,
                idtoken: idtoken
            },
            success(res) {
                console.log("card gelöscht");
                card.remove();
            },
            error(err) {
                console.log("error");
            }
        });
    }).catch((error) => console.error("Get id token client error: ", error));
});
}

function sharedtail (){
    $(".shareedit").click(function(){
        $(".cardausgabe").hide();
        $(".sharecards").hide();
        $(".strich").hide();
        $(".detailcardausgabe").show();

        let card = $(this).closest(".card");
        let sl_id = card.attr("id");
        firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
        $.ajax({
            type: "GET",
            url: "/shoppinglist_json/" + sl_id,
            data: {
                idtoken: idtoken
            },
            success(result){
                Members = result.members
                var link = "/dash/" + idtoken;
                $(".kopf").attr("style", `background-color:#${result.color}`);

                                            console.log(result);

                                            $(".card-header").append(`<div class="shoplistid" id="${sl_id}">
                                        <a href="${link}" style="left: 5px; margin-top: -50px;color: black;">
                                            <i class="fas fa-caret-left"></i>
                                        </a>
                                        <button class="btn groupadd" data-toggle="modal" data-target=".ListenDetailAdd"><i class="fas fa-plus"></i></button>
                                        <h1 class="text-center">
                                            ${result.name}
                                        </h1><center><button class="btn btn-outline-lighht btn-xs showMembers">Alle Mitglieder</button></center></div>
                                    `);
                                            for (let i = 0; i < result.groups.length; i++) {
                                                const el = result.groups[i];
                                                $(".gruppeninhalt").append(`<div class="col-md-6 col-lg-4 shoplisteid" id="${result.sl_id}">
                                        <div class="card mb-3 groupid ${el.group_id}" id="${el.group_id}" style="max-width: 18rem;background-color:#${el.color};">

                                            <div class="card-header">
                                                <h5 class="card-title title">${el.name}</h5>
                                                <button class="btn gredit"><i class="far fa-edit"></i></button>
                                                <button class="btn itemadd"><i class="fas fa-plus"></i></button>
                                                <button class="btn trashgroup"><i class="far fa-trash-alt"></i></button>
                                                <button class="btn seemore" type="button" data-toggle="collapse" data-target="#${el.name}" aria-expanded="false" aria-controls="${el.name}"><i class="fas fa-caret-down"></i></button>
                                                <div class="${el.name}">
                                                </div>
                                            </div>

                                        </div></div>
                                        `);
                                                for (let x = 0; x < el.content.length; x++) {
                                                    const el2 = el.content[x]
                                                    $(`.${el.name}`).append(`<div class="collapse" id="${el.name}">
                                                    <div class="card itemcard" style="background-color: transparent; ">
                                                    <div class="card-body">
                                                    ${el2.name}${el2.count}
                                                  </div>
                                                    </div>`);
                                                }
                                            }
                                            $(".alleMem").append(`
                                                <center><span><img src="${result.admin.picture}" alt="Avatar" style="width:10%; border-radius: 50%;">
                                                &nbsp;
                                                ${result.admin.name}</span></center>
                                                <hr>
                                            `);
                                            for (let i = 0; i < result.members.length; i++) {
                                                const el = result.members[i];
                                                $(".alleMem").append(`
                                                <center><span><img src="${el.picture}" alt="Avatar" style="width:10%; border-radius: 50%;">
                                                &nbsp;
                                                ${el.name}</span></center>
                                            `);
                                            }
                                            lala();
                                            gruppenhinzu();
                                            ItemAdden();
                                            groupdelete();
                                            groupbearbeiten();
                                            MemberAnzeigen();

            },error(err){
                console.log(err);
            }
        })
    }).catch((error) => console.error("Get id token client error: ", error));
    })
}

function MemberAnzeigen(){
    $(".showMembers").click(function(){
        $(".Mem").modal('show');
    });
}

function loeschen() {
    $(".trash").click(function () {

        let card = $(this).closest(".card");
        let id = card.attr("id");

        // console.log(id);
        firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
        $.ajax({
            type: "DELETE",
            url: "/shoppinglist",
            data: {
                sl_id: id,
                idtoken: idtoken
            },
            success(res) {
                console.log("card gelöscht");
                card.remove();
            },
            error(err) {
                console.log("error");
            }
        });
    }).catch((error) => console.error("Get id token client error: ", error));
    });
};

function lala() {
    $(".groupadd").click(function () {
        let getid = $(this).closest('.shoplistid');
        let id = getid.attr('id');
        console.log(id);
        globaleAddZwischenID = id;  
    });
}

function gruppenhinzu() {
    $(".gruppenadd").click(function () {

        let name = $("#groupname").val();
        let color = $("input:checked").val();
        
        console.log(globaleAddZwischenID);

        firebase.auth().onAuthStateChanged(async function (user) {
            if (user) {
                firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {

                    $.ajax({
                        type: "POST",
                        url: "/group",
                        data: {
                            idtoken:idtoken,
                            sl_id: globaleAddZwischenID,
                            name: $("#groupname").val(),
                            color: $("input:checked").val(),
                            hidden: false
                        },
                        success(res) {
                            $("#groupname").val("");
                            $("input:checked").val("");
                            $(".ListenDetailAdd").modal("hide");
                            refreshDetailsl(globaleAddZwischenID);
                        },
                        error(err) {
                            console.log("error");
                        }
                    });

                }).catch((error) => console.error("Get id token client error: ", error));
            } else {
                console.log("Check Auth error", user)
            }
        });
    });
}

function Detail() {
    $(".edit").click(function () {

        $(".cardausgabe").hide();
        $(".sharecards").hide();
        $(".strich").hide();
        $(".detailcardausgabe").show();

        let card = $(this).closest(".card");
        let id = card.attr("id");
        firebase.auth().onAuthStateChanged(async function (user) {
            if (user) {
                firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
                    $.ajax({
                        type: "GET",
                        url: "/shoppinglist_json/" + id,
                        data: {
                            idtoken: idtoken
                        },
                        success(res) {
                            console.log(res)
                            console.log("/myshoppinglists inside idtoken: ", idtoken)
                            $.ajax({
                                type: "GET",
                                url: "/myshoppinglists",
                                data: {
                                    idtoken: idtoken
                                },
                                success(result) {
                                    // var idtoken = getIdTokenGoogle()
                                    $.ajax({
                                        type: "GET",
                                        url: "/userinfo_json",
                                        data: {
                                            idtoken: idtoken
                                        },
                                        success(data) {
                                            let userinfo = "some info"
                                            console.log(userinfo);

                                            const neu = result.filter(obj => obj.sl_id === id);

                                            var link = "/dash/" + idtoken;

                                            $(".kopf").attr("style", `background-color:#${neu[0].color}`);

                                            console.log(res);

                                            if (res.invitelink != null) {
                                                $(".card-header").append(`<div class="shoplistid" id="${id}">
                                                <a href="${link}" style="left: 5px; margin-top: -50px;color: black;">
                                                    <i class="fas fa-caret-left"></i>
                                                </a>
                                                <button class="btn groupadd" data-toggle="modal" data-target=".ListenDetailAdd"><i class="fas fa-plus"></i></button>
                                                <h1 class="text-center">
                                                    ${neu[0].name}
                                                </h1><center><button class="btn btn-outline-lighht btn-xs showMembers">Alle Mitglieder</button></center></div>
                                            `); 
                                            }
                                            else{
                                                $(".card-header").append(`<div class="shoplistid" id="${id}">
                                                <a href="${link}" style="left: 5px; margin-top: -50px;color: black;">
                                                    <i class="fas fa-caret-left"></i>
                                                </a>
                                                <button class="btn groupadd" data-toggle="modal" data-target=".ListenDetailAdd"><i class="fas fa-plus"></i></button>
                                                <h1 class="text-center">
                                                    ${neu[0].name}
                                                </h1></div>
                                            `);
                                            }

                                            for (let i = 0; i < res.groups.length; i++) {
                                                const el = res.groups[i];
                                                $(".gruppeninhalt").append(`<div class="col-md-6 col-lg-4 shoplisteid" id="${res.sl_id}">
                                        <div class="card mb-3 groupid ${el.group_id}" id="${el.group_id}" style="max-width: 18rem;background-color:#${el.color};">

                                            <div class="card-header">
                                                <h5 class="card-title title">${el.name}</h5>
                                                <button class="btn gredit"><i class="far fa-edit"></i></button>
                                                <button class="btn itemadd"><i class="fas fa-plus"></i></button>
                                                <button class="btn trashgroup"><i class="far fa-trash-alt"></i></button>
                                                <button class="btn seemore" type="button" data-toggle="collapse" data-target="#${el.name}" aria-expanded="false" aria-controls="${el.name}"><i class="fas fa-caret-down"></i></button>
                                                <div class="${el.name}">
                                                </div>
                                            </div>

                                        </div></div>
                                        `);
                                                for (let x = 0; x < el.content.length; x++) {
                                                    const el2 = el.content[x]
                                                    $(`.${el.name}`).append(`<div class="collapse mb-1" id="${el.name}">
                                                    <div style="background-color: transparent; border: 1px solid #303133; border-radius: 15px;">
                                                    <div class="checkbox" id="${el2.item_id}">
                                                    <input style="margin-left: 5%;margin-right: 1%;" type="checkbox" value=""><span class="ed" id="ed">${el2.name}</span><button class="btn itemedit"><i class="far fa-edit"></i></button><span class="ed2" id="ed2" style="float: right;margin-right: 5%;">${el2.count}x</span>
                                                    </div>
                                                  </div>`);
                                                }
                                            }
                                        
                                            $(".alleMem").append(`
                                            <center><span><img src="${res.admin.picture}" alt="Avatar" style="width:10%; border-radius: 50%;">
                                            &nbsp;
                                            ${res.admin.name}</span></center>
                                            <hr>
                                        `);

                                        if (res.members.length == "0") {
                                            $(".alleMem").append("<center><span>Noch keine Mitglieder vorhanden</span></center>");
                                        }
                                        else{
                                            for (let i = 0; i < res.members.length; i++) {
                                            const el = res.members[i];
                                            $(".alleMem").append(`
                                            <center class="uid" id="${el.username}"><span class="slid" id="${id}"><img src="${el.picture}" alt="Avatar" style="width:10%; border-radius: 50%;">
                                            &nbsp;
                                            ${el.name}
                                            
                                            <button class="btn exinvitemembersssss"><i class="fas fa-user-times"></i></button>
                                            </span></center>
                                        `);
                                        }
                                        
                                        }
                                            lala();
                                            gruppenhinzu();
                                            ItemAdden();
                                            groupdelete();
                                            groupbearbeiten();
                                            MemberAnzeigen();
                                            delMember();
                                            itembearbeiten();
                                            donepurchase();
                                        },
                                        error(err) {
                                            console.log("Detail error userinfo_json: ", err);
                                        }
                                    })
                                },
                                error(err) {
                                    console.log("Detail error myshoppinglists: ", err);
                                }
                            });
                        },
                        error(err) {
                            console.log("Detail error shoppinglist_json: ", err);
                        }
                    });
                }).catch((error) => console.error("Get id token client error: ", error));
            } else {
                console.log("Check Auth error", user)
            }
        });
    });
};
var glitemid = "";
function itembearbeiten() {
    $(".itemedit").click(function(){
        let getitemid = $(this).closest('.checkbox');
        let itemid = getitemid.attr('id');
        let getgroupid = $(this).closest('.groupid');
        let groupid = getgroupid.attr('id');
        let getslid = $(this).closest('.shoplisteid');
        let slid = getslid.attr('id');
        glitemid = itemid;

        console.log(itemid, groupid, slid);
        
        let name = $(this).closest('div').find('span.ed').text();
        let anz = $(this).closest('div').find('span.ed2').text();
        let anzperfekt = anz.split("x")[0];

        console.log(name, anzperfekt);

        $(".eh").prop("id",`${slid}`);
        $(".eh2").prop("id",`${groupid}`);
        $(".eh3").prop("id",`${itemid}`);


        $(".GroupItemedit").modal('show');
        $("#itemnameb").val(name);
        $("#inputGroupSelect02").val(anzperfekt);
    });
}

$(".itemhinzub").click(function(){
    let slid = $(this).closest(".eh").attr('id');
    let groupid = $(this).closest(".eh2").attr('id');
    

    let name = $("#itemnameb").val();
    let anz = $("#inputGroupSelect02").val();

    console.log(glitemid);

    $.ajax({
        type: "PUT",
        url: "/item",
        data: {
            sl_id: slid,
            group_id: groupid,
            item_id: glitemid,
            name: name,
            count: anz
        },
        success(res) {
            console.log("item verändert");
            refreshDetailsl(slid);
        },
        error(err) {
            console.log("error");
        }
    });

});

function delMember(){
    $(".exinvitemembersssss").click(function(){
        let getid = $(this).closest('.slid');
        let shoplistid = getid.attr('id');
        let getid2 = $(this).closest('.uid');
        let username = getid2.attr('id');

        $.ajax({
            type: "DELETE",
            url: "/member",
            data: {
                sl_id: shoplistid,
                uid: username
            },
            success(res) {
                console.log("user entfernt");
                refreshDetailsl(shoplistid);
            },
            error(err) {
                console.log("error");
            }
        });
    });
}

function ItemAdden() {
    $(".itemadd").click(function () {

        let getslid = $(this).closest('.shoplisteid');
        let slid = getslid.attr('id');
        console.log(slid);
        let getgrid = $(this).closest('.groupid');
        let grid = getgrid.attr('id');
        globalegraddid = grid;
        globaleAddZwischenID = slid;
        $('.GroupItemAdd').modal('show');
    });
}

$(".itemhinzu").click(function () {

    var name = $('#itemname').val();
    var zahl = $('#inputGroupSelect01').val();
    console.log(name);
    console.log(zahl);


    firebase.auth().onAuthStateChanged(async function (user) {
        if (user) {
            firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
                $.ajax({
                    type: "POST",
                    url: "/item",
                    data: {
                        group_id: globalegraddid,
                        sl_id: globaleAddZwischenID,
                        name: $('#itemname').val(),
                        count: $('#inputGroupSelect01').val()
                    },
                    success(result) {
                        $('.GroupItemAdd').modal('hide');
                        console.log("post item");
                        refreshDetailsl(globaleAddZwischenID);
                    },
                    error(err) {

                    }
                });
            }).catch((error) => console.error("Get id token client error: ", error));
        } else {
            console.log("Check Auth error", user)
        }
    });

    Detail();

});

function groupdelete() {
    $('.trashgroup').click(function () {

        let getid = $(this).closest('.shoplisteid');
        let shoplistid = getid.attr('id');
        let getid2 = $(this).closest('.groupid');
        let groupid = getid2.attr('id');

        console.log(shoplistid);
        console.log(groupid);

        $.ajax({
            type: "DELETE",
            url: "/group",
            data: {
                sl_id: shoplistid,
                group_id: groupid
            },
            success(res) {
                console.log("card gelöscht");
                refreshDetailsl(shoplistid);
            },
            error(err) {
                console.log("error");
            }
        });

    });
};

function slbearbeiten(){
$(".sledit").click(function(){
    $('#editsl').modal('show');
    let slid = $(this).closest(".card").attr('id');
    let desc = $(this).closest('div').siblings().find('p.card-text').text();
    let name = $(this).closest('div').siblings().find('h5.card-title').text();
    let color = $(this).closest('.card-header').css("background-color");
    $(".editmodal").prop("id",`${slid}`);
    $("#editname").val(name);
    $("#editbeschreibung").val(desc);
    var rgb = color.split("(")[1].split(")")[0];
    
    var r = rgb.split(", ")[0];
    var g = rgb.split(", ")[1];
    var b = rgb.split(", ")[2];

    function rgbToHex (r,g,b){
        var bin = r << 16 | g << 8 | b;
        return (function(h){
            return new Array(7-h.length).join("0")+h
        })(bin.toString(16).toUpperCase())
    }

    $(".aktuelleFarbe").css("color", "#"+rgbToHex(r,g,b));
});   
};

$(".update").click(function(){
    let name = $("#editname").val();
    let desc = $("#editbeschreibung").val();
    let id = $(this).closest(".editmodal").attr('id');
    let color = "";
    if($("input:checked").val()==null){
        color = $('.aktuelleFarbe').css("color");
    }
    else{
        color = $("input:checked").val();
    }
    firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
    $.ajax({
        type: "PUT",
        url: "/shoppinglist",
        data: {
            sl_id: id,
            name: name,
            description: desc,
            color: color,
            idtoken: idtoken
        },
        success(res){
            $(".karten").remove();
            $("#editname").val("");
            $("#editbeschreibung").val("");
            $('#editsl').modal('hide');
            eigeneEinkaufslisten()
        },
        error(err){

        }
    });}).catch((error) => console.error("Get id token client error: ", error));
});

function groupbearbeiten(){
$(".gredit").click(function(){
    $('#Listengroupbearbeiten').modal('show');
    let grid = $(this).closest(".groupid").attr('id');
    let slid = $(this).closest(".shoplisteid").attr('id');
    let name = $(this).closest('div').find('h5.title').text();
    let color = $(this).closest(".groupid").css("background-color");
    
    $(".editgroudmodal").prop("id",`${slid}`);
    $(".grouid").prop("id",`${grid}`);
    $("#groupb").val(name);
    var rgb = color.split("(")[1].split(")")[0];
    
    var r = rgb.split(", ")[0];
    var g = rgb.split(", ")[1];
    var b = rgb.split(", ")[2];

    function rgbToHex (r,g,b){
        var bin = r << 16 | g << 8 | b;
        return (function(h){
            return new Array(7-h.length).join("0")+h
        })(bin.toString(16).toUpperCase())
    }
    $(".aktuelleFarbe2").css("color", "#"+rgbToHex(r,g,b));
})}

$(".gruppbea").click(function(){
    let name = $("#groupb").val();
    let slid = $(this).closest(".editgroudmodal").attr('id');
    let grid = $(this).closest(".grouid").attr('id');
    let color = "";
    if($("input:checked").val()==null){
        color = $('.aktuelleFarbe2').css("color");
    }
    else{
        color = $("input:checked").val();
    }
    firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
    $.ajax({
        type: "PUT",
        url: "/group",
        data: {
            sl_id: slid,
            group_id: grid,
            name: name,
            color: color,
            idtoken: idtoken
        },
        success(res){
            $("#groupb").val("");
            $('#gredit').modal('hide');
            refreshDetailsl(slid);
        },
        error(err){

        }
    })}).catch((error) => console.error("Get id token client error: ", error));
});

function refreshDetailsl(slid){
    // $(".shoplisteid").remove();
    $(".shoplistid").remove();
    // $(".card-header").empty();
    $(".gruppeninhalt").empty();
            firebase.auth().onAuthStateChanged(async function (user) {
            if (user) {
                firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
                    $.ajax({
                        type: "GET",
                        url: "/shoppinglist_json/" + slid,
                        data: {
                            idtoken: idtoken
                        },
                        success(res) {

                            var link = "/dash/" + idtoken;

                                            $(".kopf").attr("style", `background-color:#${res.color}`);

                                            $(".card-header").append(`<div class="shoplistid" id="${res.sl_id}">
                                        <a href="${link}" style="left: 5px; margin-top: -50px;color: black;">
                                            <i class="fas fa-caret-left"></i>
                                        </a>
                                        <button class="btn groupadd" data-toggle="modal" data-target=".ListenDetailAdd"><i class="fas fa-plus"></i></button>
                                        <h1 class="text-center">
                                            ${res.name}
                                        </h1></div>
                                    `);
                                            for (let i = 0; i < res.groups.length; i++) {
                                                const el = res.groups[i];
                                                $(".gruppeninhalt").append(`<div class="col-md-6 col-lg-4 shoplisteid" id="${res.sl_id}">
                                        <div class="card mb-3 groupid ${el.group_id}" id="${el.group_id}" style="max-width: 18rem;background-color:#${el.color};">

                                            <div class="card-header">
                                                <h5 class="card-title title">${el.name}</h5>
                                                <button class="btn gredit"><i class="far fa-edit"></i></button>
                                                <button class="btn itemadd"><i class="fas fa-plus"></i></button>
                                                <button class="btn trashgroup"><i class="far fa-trash-alt"></i></button>
                                                <button class="btn seemore" type="button" data-toggle="collapse" data-target="#${el.name}" aria-expanded="false" aria-controls="${el.name}"><i class="fas fa-caret-down"></i></button>
                                                <div class="${el.name}">
                                                </div>
                                            </div>

                                        </div></div>
                                        `);
                                                for (let x = 0; x < el.content.length; x++) {
                                                    const el2 = el.content[x]
                                                    $(`.${el.name}`).append(`<div class="collapse mb-1" id="${el.name}">
                                                    <div style="background-color: transparent; border: 1px solid #303133; border-radius: 15px;">
                                                    <div class="checkbox" id="${el2.item_id}">
                                                    <input class="check" style="margin-left: 5%;margin-right: 1%;" type="checkbox" value=""><span class="ed" id="ed">${el2.name}</span><button class="btn itemedit"><i class="far fa-edit"></i></button><span class="ed2" id="ed2" style="float: right;margin-right: 5%;">${el2.count}x</span>
                                                    </div>
                                                  </div>`) 
                                                }
                                            }
                                            lala();
                                            // gruppenhinzu();
                                            ItemAdden();
                                            groupdelete();
                                            groupbearbeiten();
                                            itembearbeiten();
                                            donepurchase();

                        },
                        error(err) {
                            console.log(err);
                        }
                    });
                }).catch((error) => console.error("Get id token client error: ", error));
            } else {
                console.log("Check Auth error", user)
            }
        });
}

$(".linkinfo").click(function(){
    firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
        $.ajax({
            type: "GET",
            url: "/group",
            data: {
                idtoken: idtoken
            },
            success(res){
                $("#groupb").val("");
                $('#gredit').modal('hide');
                refreshDetailsl(slid);
            },
            error(err){
    
            }
    })}).catch((error) => console.error("Get id token client error: ", error));
})

function shareinvite(){
   $(".postshare").click(function(){
    let slid = $(this).closest(".card").attr('id');
    firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
        $.ajax({
            type: "POST",
            url: "/invite",
            data: {
                sl_id: slid,
            },
            success(res){
                firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
                    $.ajax({
                        type: "GET",
                        url: "/shoppinglist_json/"+slid,
                        data: {
                            idtoken: idtoken
                        },
                        success(res){
                           $(".InviteLinkAnzeigen").modal('show');
                           console.log(res);
                           $("#InviteLink").val(res.invitelink);
                           copy();
                           
                        },
                        error(err){
                
                        }
                })}).catch((error) => console.error("Get id token client error: ", error));
            },
            error(err){
    
            }
    })}).catch((error) => console.error("Get id token client error: ", error));
}) 
}

function copy(){
    $(".copy").click(function(){
        var copyText = document.getElementById("InviteLink");
        copyText.select();
        document.execCommand("copy");
    })
}

$(".beitreten").click(function(){
    let invitelink = $("#slbeitreten").val();
    console.log(invitelink);
        $.ajax({
            type: "GET",
            url: "/invite/:" + invitelink,
            success(res){
                console.log("funktioniert");
                // geteilteEinkaufslisten();
                // $(".beiLink").modal('hide');
                // $("html").empty();
                // $("html").append(`${res}`);
                // console.log(res);
            },
            error(err){
                console.log(err);
            }
    });
});

$(".Modalbeitreten").click(function(){
    $(".beiLink").modal('show');
});

$(".purchased-items").click(function(){
    $(".cardausgabe").hide();
    $(".sharecards").hide();
    $(".strich").hide();
    firebase.auth().currentUser.getIdToken( /* forceRefresh */ true).then(function (idtoken) {
    $.ajax({
        type:"GET",
        url: "/donepurchases",
        success(res){
            // refreshDetailsl(slid);
            console.log(res);
        },
        error(err){
            console.log(error);
        }
    });}).catch((error) => console.error("Get id token client error: ", error));
});


function donepurchase(){
$(".check").click(function(){
    if($("input:checked")==true){
        alert("ja");
    }
// $.ajax({
//     type:"POST",
//     url: "/movedoneitem",
//     success(res){
//         // refreshDetailsl(slid);
//         console.log(yay);
//     },
//     error(err){
//         console.log(error);
//     }
// })
});    
}