// create a bs toast in the status_container
// can reuse any that are hidden, OR, create a new one by appending as needed (so we can have 2+ toasts on screen)
function StatusMsg(st)
{
    console.log( 'StatusMsg() -> ' + st.alert + ': ' + st.message )
    // look for any '.hide' and '.toast' 
    if( $('.toast.hide').length !== 0 )
    {
        // as there may be more than 1 and as bs toast deals with ordering on screen, so just grab first()
        tid=$('.toast.hide').first().attr('id')
        // reset body, and the text-* and bg-* class for success, danger, etc.
        $('#'+tid ).find( '.toast-body').html(st.message)
        $('#'+tid ).removeClass( function( index, className ) { return (className.match( /(^|\s)(bg-|text-)\S+/g) || []).join(' ') } )
        $('#'+tid ).addClass( 'bg-' + st.alert )
        // get rid of white on button (if its there)
        $('#'+tid ).find( 'button' ).removeClass('btn-close-white')
        if( st.alert == "success" || st.alert == "danger" )
        {
            $('#'+tid ).addClass( 'text-white' )
            $('#'+tid ).find( 'button' ).addClass('btn-close-white')
        }
        // show the popup (by default it fades)
        $('#'+tid ).toast("show")
    }
    else
    {
        // find the id of the 'last' toast (either there are none, or they are all visible [note: we are in the else already])
        tmp=$('.toast').last().attr('id')
        // if none, there are no toasts at all, so make '#1'
        if( tmp== '' )
            tid=1
        else
        {
            // skip 'st' at front of DOM id, and then increment to get id for new one
            tid=tmp.substr(2)
            tid++
        }
        // make new div, include st.alert as background colour, and st.message as toast body
        div='<div id="st' + tid + '" class="toast hide align-items-center border-0'
        if( st.alert == "success" || st.alert == "danger" )
            div += ' text-white'
        div += ' bg-' + st.alert
        div += `" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="d-flex">
                    <div class="toast-body">
                    `
        div += st.message
        div += `
                    </div>
                    <button type="button" class="btn-close me-2 m-auto
                `
        if( st.alert == "success" || st.alert == "danger" )
                    div =+ ' btn-close-white'
        div += `
                    " data-bs-dismiss="toast" aria-label="Close"></button>
                </div>
            </div>
            `
        // can be appended straight after st1 as the .toast("show") deals with display ordering
        $('#st1').append(div)
        // show the popup (by default it fades)
        $('#st' + tid ).toast("show")
    } 
}

// this will make the active jobs badge red with a > 0 value, or navbar colours
// if 0 (effectively hiding it, but leaving the same width)
function SetActiveJobsBadge(num_jobs)
{
    if( num_jobs > 0 ) 
        $('#num_active_jobs').removeClass("invisible")
    else 
        $('#num_active_jobs').addClass("invisible")
    $('#num_active_jobs').html(num_jobs)
}

// this function is called either when we load and PA page and active jobs > 0
// OR, when a new job is created in the F/E and therefore active jobs > 0
// it keeps looking to see if the pa_job_manager has sent a response (via the DB)
// if so, it handles the response(s) with toast()s and updates the active job
// badge in the navbar.   If all jobs are complete it stops calling itself
// after a 1 second timeout
function CheckForJobs()
{
    $.ajax(
        {
            type: 'POST', url: '/checkforjobs', 
            success: function(data) { 
                data.sts.forEach( 
                    function(el)
                    {
                        StatusMsg(el)
                    }
                )
                SetActiveJobsBadge(data.num_active_jobs)
                if( data.num_active_jobs > 0 )
                {
                    setTimeout( function() { CheckForJobCompletion() }, 1000 );
                }
            }, 
        } )
    return false;
}