$(function(){
    loadBoards();
});

function loadBoards(){
    $.blockUI();
    $.ajax({
        type: "GET",
        url: "/BoardsLinks/Index/?handler=Boards",
        data: {
        },
        success: function (data) {
            if (data.successful){
                let boardContent = $('.boards-content');
                boardContent.empty();

                if (data.boards){
                    data.boards.forEach((board) => {
                        console.log(board);
                        boardContent.append(`<div class="div-board">
                        <h5>${board.name}</h5>
                    </div>
                    <div class="div-pages" ondrop="dropPage(event, this)" ondragover="allowDropPage(event, this)" data-idboard="${board.idBulletinBoard}">
                        
                    </div>
                    <hr/>`);
                        if (board.links){
                            board.links.forEach((link) => {
                                addPageToBoard(board.idBulletinBoard, link);
                            });
                        }
                    });
                }
                
            } else {
                Swal.fire('Napaka', data.error, 'error');
                console.log(data);
            }
            $.unblockUI();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr);
            alert(xhr.responseText);
            $.unblockUI();
        }
    });
}

function allowDropPage(ev) {
    console.log('allowDrop');
    if (ev.dataTransfer.getData("idPage")){
        ev.preventDefault();
    }
  }
  
  function dragPage(ev, el) {
    console.log('drag');
    ev.dataTransfer.setData("idPage", $(el).attr('data-id'));
    
  }
  
  function dropPage(ev, el) {
    console.log('drop');
    ev.preventDefault();
    let idPage = parseInt(ev.dataTransfer.getData("idPage"));
    let idBoard = parseInt($(el).attr('data-idboard'));
    $.blockUI();
    $.ajax({
        type: "POST",
        beforeSend: function(xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        url: "/BoardsLinks/Index/?handler=AddLink",
        data: { 
            idBoard,
            idPage
        },
        success: function(data) {
            if (data.successful){
                addPageToBoard(idBoard, data.link);
            } else {
                Swal.fire('Napaka', data.error, 'error');
                console.log(data);
            }
            $.unblockUI();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log({xhr, ajaxOptions, thrownError});
            alert(xhr.responseText);
            $.unblockUI();
        }
    });   
  }

  function addPageToBoard(idBoard, link){
    let div = $('.div-pages[data-idboard="' + idBoard +  '"]');

    div.append(`<div class="div-page" data-id="${link.idLink}" data-idPage='${link.bulletinBoardPage.idBulletinBoardPage}'>
    <img class="img-thumbnail rounded" src="/bulletin-board-images/pages/${link.bulletinBoardPage.image}" alt="page image" />
    <small>${link.bulletinBoardPage.name}</small>
    <div class="tools">
        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless"><i class="fas fa-chevron-left"></i></a>
        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-secondary borderless"><i class="far fa-clock"></i></a>
        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-danger borderless"><i class="fas fa-trash-alt"></i></a>
        <a href="javascript:;" class="btn btn-xs icon-btn btn-outline-primary borderless"><i class="fas fa-chevron-right"></i></a>
    </div>
</div>`);
  }