$(document).ready(function() {

    bekommen();
    // loeschen();

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

        // let name = $("#einkaufslistenname").val();
        // let beschreibung = $("#einkaufslistenbeschreibung").val();

        $.ajax({
            type: "POST",
            url: "/shoppinglist",
            data: {
                name: $("#einkaufslistenname").val(),
                description: $("#einkaufslistenbeschreibung").val()
            },
            success(res){
                console.log("add funktioniert");
                $("#mySmallModalLabel").modal("hide");
                // $(".listen-ausgabe").append(`<div class="col-md-12 karten">
                // <div class="card border-light mb-3" style="max-width: 18rem;">
                //     <div class="card-header"><span>Username...</span><button class="btn trash r"><i class="far fa-trash-alt"></i></button></div>
                //     <div class="card-body">
                //         <h5 class="card-title">`+ $("#einkaufslistenname").val() +`</h5>
                //         <p class="card-text">`+ $("#einkaufslistenbeschreibung").val() +`</p>
                //     </div>
                // </div></div>`
                // )
            },
            error(err){ 
                console.log("error");
            }

        });    
    });
    
});

function bekommen(){

    $.ajax({
        type: "GET",
        url: "/myshoppinglists",
        success(data){
            console.log("get funktioniert");
            for(let i = 0; i < data.length; i++){
                const el = data[i];

                $(".listen-ausgabe").append(`<div class="col-md-12 karten">
                <div class="card border-light mb-3" style="max-width: 18rem;" id="${el.sl_id}">
                    <div class="card-header"><span>Username...</span><button class="btn trash r"><i class="far fa-trash-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>`
                )
            }
            loeschen();
        },
        error(err){
            console.log("error");
        }
    });
}

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

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

        // console.log(id);

        $.ajax({
            type: "DELETE",
            url: "/shoppinglist",
            data: {
                sl_id: id},
            success(res){
                console.log("card gelöscht");
                // bekommen();
                card.remove();
            },
            error(err){

            }
        });

    });
}