function show_beacons(){
    $.ajax({
        url: "/api/user_project/" + project_id + "/all/",
        type: 'GET',
        success: function(result) {
            var beacon_managers = result.beacon_managers
            html = []
            for(var i=0; i< beacon_managers.length; i++){
                beacon = beacon_managers[i].beacon;
                html.push(['<div class="box shadow">',
                '<table class="table borderless">',
                    '<tbody>',
                      '<tr>',
                        '<td class="col-md-2">', beacon.name, '</td>',
                        '<td>'].join(""));
                            for(var j=0; j<beacon_managers[i].sites.length; j++){
                                html.push(['<p> <a href="', beacon_managers[i].sites[j].link_url, '">', beacon_managers[i].sites[j].link_url, '</a>',
                                '<button style="float: right;" onclick="removeLink(\'', beacon_managers[i].url, '\', \'', beacon_managers[i].sites[j].url,'\')" class="btn btn-danger btn-sm" >Usun</button></p>'].join(""))
                            }
                        html.push(['<p> <button class="btn btn-success" onclick="dodajLink(\'',beacon_managers[i].url, '\')">Dodaj link</button></p>',
                        '</td>',
                      '</tr>',
                    '</tbody>',
                  '</table>',
                '</div>'].join(""))
            }
            $("#container__").html(html.join(""));
        }
    });
}


function show_beacons_list(){
    $.ajax({
        url: "/api/beacon_managers/1/all/",
        type: 'GET',
        success: function(result) {
            var beacon_managers = result
            html = []
            for(var i=0; i< beacon_managers.length; i++){
                beacon = beacon_managers[i].beacon;
                html.push(['<div class="box">',
                '<table class="table borderless">',
                    '<tbody>',
                      '<tr>',
                        '<td class="col-md-2">', beacon.name, '</td>',
                        '<td>'].join(""));
                            for(var j=0; j<beacon_managers[i].sites.length; j++){
                                html.push(['<p> <a href="', beacon_managers[i].sites[j].link_url, '">', beacon_managers[i].sites[j].link_url, '</a>',
                                 ,'<button <button style="float: right;" onclick="removeLink(\'', beacon_managers[i].url, '\', \'', beacon_managers[i].sites[j].url,'\')" class="btn btn-danger btn-sm" >Usun</button></p>'].join(""))
                            }
                        html.push(['<p> <button class="btn btn-success" onclick="dodajLink(\'',beacon_managers[i].url, '\')">Dodaj link</button></p>',
                        '</td>',
                      '</tr>',
                    '</tbody>',
                  '</table>',
                '</div>'].join(""))
            }
            $("#container2__").html(html.join(""));
        }
    });
}

function removeProject(event, project_id){
    event.stopPropagation();
    $.ajax({
        url: "/api/user_project/" + project_id,
        type: 'DELETE',
        success: function(result) {
            document.location.reload()
        }
    });
}

function removeLink(beacon_manager, link){
    event.stopPropagation();
    $.ajax({
        url: beacon_manager,
        type: 'GET',
        success: function(result) {
            var index = result.sites.indexOf(link);
            result.sites = result.sites.slice(index, -1);
            $.ajax({
                url: beacon_manager,
                type: 'PUT',
                data: JSON.stringify(result),
                contentType: "application/json",
                success: function(result) {
                    document.location.reload();
                }
            });

        }
    });
}

function dodajLink(beacon_manager, beacon){

    $("#myModal").modal("show");
    $("#modal-content").html('<form action="/login/" method="post" class="form-signin">\
                <p><input id="url" type="text" class="form-control" placeholder="Link url" required autofocus name="name"></p>\
                <p><input id="desc" type="text" class="form-control" placeholder="Description" required autofocus name="desc"></p>\
    </form>');

    $("#modal-footer").html('<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>\
        <button type="button" class="btn btn-primary" id="addProjectBtn">Add beacon</button>');

    $("#addProjectBtn").off("click");
    $("#addProjectBtn").on("click", function(){
    var link_url = $("#url").val();
    var desc = $("#desc").val();
    var data = {
        "link_url": link_url,
        "description": desc,
        "categories": [],
        "author": user_id,
    };

        $.ajax({
            url: "/api/sites/",
            type: 'POST',
            data: JSON.stringify(data),
            contentType: "application/json",
            success: function(beacon_manager){ return function(result) {
                $.ajax({
                    url: beacon_manager,
                    type: 'GET',
                    data: JSON.stringify(data),
                    contentType: "application/json",
                    success: function(site_data){return function(result) {
                        result['sites'].push(site_data.url);
                        $.ajax({
                            url: result.url,
                            type: "PUT",
                            data: JSON.stringify(result),
                            contentType: "application/json",
                            success: function(){
                                document.location.reload()
                            }
                        })
                    }}(result)
                });
            }}(beacon_manager)
        });
    });
}