// Write your JavaScript code.

async function getMusicalTubeTVTube() {    
    $.ajax({
        url: '/TVTube?handler=MusicalTubeTVTube',
        type: 'GET',
        success: function () {
            var button = document.getElementById("IDMT");
            if (button.textContent == 'TV TUBE') {
                button.textContent = 'MUSICAL TUBE';
            } else {
                button.textContent = 'TV TUBE';
            }
        },
        error: function () {
            document.location.reload(true);
        }
    });
}

async function getVolume1(ID) {
    $('#idvaluerange1').text('Vol: '.concat(ID));
    $.ajax({
        data: { id: ID },
        url: '/TVTube?handler=Volume',
        type: 'GET',
        success: function () {
        },
        error: function () {
            document.location.reload(true);
        }
    });
}

async function getTVBtn(ID) {
    $.ajax({
        data: { id: ID },
        url: '/TVTube?handler=TVBtn',
        type: 'GET',
        success: function () {
        },
        error: function () {
            document.location.reload(true);
        }
    });
}

async function getPausa() {
    $.ajax({
        url: '/MusicalTube?handler=Pausa',
        type: 'GET',
        success: function () {
        },
        error: function () {
            document.location.reload(true);
        }
    });
}

async function getProximo() {
    $.ajax({
        url: '/MusicalTube?handler=Proximo',
        type: 'GET',
        success: function () {
        },
        error: function () {
            document.location.reload(true);
        }
    });
}

async function getVolume(ID) {
    $('#idvaluerange').text('Vol: '.concat(ID));
    $.ajax({
        data: { id: ID },
        url: '/MusicalTube?handler=Volume',
        type: 'GET',
        success: function () {
        },
        error: function () {
            document.location.reload(true);
        }
    });
}


async function getMensagem(MENSAGEM) {
    $.ajax({
        data: { mensagem: MENSAGEM },
        url: '/MusicalTube?handler=Mensagem',
        type: 'GET',
        success: function () {
            if (MENSAGEM === "limpar") {
                document.getElementById('idTextarea').value = "";
            }
        },
        error: function () {
            document.location.reload(true);
        }
    });
}

async function getDataBuscarVideos(ID) {
    const videoCardContainer = document.getElementById('idRow');
    const spinner = document.getElementById('spinner');    
    videoCardContainer.innerHTML = "";
    if (ID.length !== 0) {
        spinner.innerHTML = '<div class="spinner-border text-danger" style="width: 4rem; height: 4rem;" role="status"></div>';
        $.ajax({
            data: { id: ID },
            url: '/MusicalTube?handler=BuscarVideos',
            type: 'GET',
            dataType: "json",
            success: function (dados) {
                //alert(JSON.stringify(dados));            
                if (dados.length !== 0) {
                    for (var i = 0; i < dados.length; i++) {
                        videoCardContainer.innerHTML += `
                               <div class="col-6 pb-3">
                                   <div class="row px-2">
                                       <img src="${dados[i].thumbnail}" class="thumbnail" alt="">
                                   </div>
                                   <div class="row px-3">
                                       <p style="text-align:left; color: white; font-weight: bold;" class="title" maxlength="50">${dados[i].title}</p>
                                       <p style="text-align:right; color: white; font-weight: bold;" class="p-0 m-0">${dados[i].duration}</p>
                                   </div>
                                   <div class="row px-3">
                                       <button id="idADD${i}" value="${dados[i].url}" class="btn btn-lg btn-primary btn-block" type="submit" data-loading-text="Carregando..." onclick="getAdiciona(document.getElementById('idADD${i}').value, '${dados[i].title}', '${dados[i].duration}'); showAlert('ADICIONADO COM SUCESSO!', 'alert-success')">ADICIONAR</button>
                                   </div>
                               </div>
                           `;
                    }
                    spinner.innerHTML = "";
                }
            },
            error: function () {
                spinner.innerHTML = "";
                document.location.reload(true);
            }
        });
    }
}

async function getLimparPesquisa() {
    document.getElementById('Pesquisa').value = "";
    document.getElementById('idRow').innerHTML = "";
    spinner.innerHTML = "";
}

async function getAdiciona(IDVIDEO, TITULO, DURATION) {
    $.ajax({
        data: { idvideo: IDVIDEO, titulo: TITULO, Duration: DURATION },
        url: '/MusicalTube?handler=Idvideo',
        type: 'GET',
        success: function () {
        },
        error: function () {
            document.location.reload(true);
        }
    });
}

async function showAlert(message, alertType) {
    var alertDiv = $('<div class="alert ' + alertType + ' alert-dismissible fade show alert-top" role="alert">' + message + '</div>');
    $('#alert-container').append(alertDiv);
    const alerts = document.getElementById('alert-container');
    setTimeout(function () {
        alerts.innerHTML = "";
    }, 2000);
}

$(document).ready(function () {
    var $search = $('.container.text-center.search');
    if ($search.length === 0) {
        // Search element not found; skip sticky behavior
        return;
    }
    var origOffsetY = $search.offset().top;
    function scroll() {
        if ($(window).scrollTop() >= origOffsetY) {
            $search.css("position", "fixed");
            $search.css('top', '0px');
        } else {
            $search.css("position", "relative");
        }
    }
    document.onscroll = scroll;
});