$('.vote-btn').click(function (e) {
    e.preventDefault();

    $('.vote-btn i').removeClass('fa').addClass('far');
    $('i', $(this)).removeClass('far').addClass('fa');

    let voteType;
    if ($(this).hasClass('upvote')) {
        voteType = 1;
    } else {
        voteType = -1;
    }

    const voteCount = $('.vote-container span');
    voteCount.text(parseInt(voteCount.text()) + voteType);
    const container = $('body > section.container');

    voteCount.parent().append('<i class="fa fa-sync fa-spin" style="position:absolute;top:36%;color:#ccc;z-index:-1;display:none;"></i>');
    $('.vote-container .fa-sync').fadeIn();

    $.ajax({
        url: '/projects/addVote/index',
        method: 'POST',
        data: {
            id: $('.vote-container').data('id'),
            type: voteType
        },
        success: function (result) {
            if (result['type'] === 'success') {
                voteCount.text(result['voteCount']);
                container.prepend('<div class="alert alert-success" id="voteMsg" role="dialog" style="position:fixed;bottom:-80px;left:50%;transform:translateX(-50%);z-index:100;"><b>' + result['msg'] + '</b></div>');
            } else {
                voteCount.text(parseInt(voteCount.text()) - voteType);
                container.prepend('<div class="alert alert-danger" id="voteMsg" role="dialog" style="position:fixed;bottom:-80px;left:50%;transform:translateX(-50%);z-index:100;"><b>' + result['msg'] + '</b></div>')
            }

            $('.vote-container .fa-sync').fadeOut();
            $('#voteMsg').animate({
                bottom: 10
            }, 100)
                .delay(5000)
                .animate({
                    bottom: -80
                }, 100);
            setTimeout(() => {
                $('#voteMsg').remove();
                $('.vote-container .fa-sync').remove();
            }, 6000);
        }
    });
});