safekat/ci4/app/Views/themes/_commonPartialsBs/_alertBoxes.php

<?php
$errorMessage = $errorMessage ?? session('errorMessage');
$warningMessage = session('warningMessage');

if (session()->has('message')) {
    $successMessage = session('message');
}
if (session()->has('error')) {
    $errorMessage = is_array(session('error')) ? implode(session('error')) : session('error');
} /* // Uncomment this block if you want the errors listed line by line in the alert
    elseif (session()->has('errors')) {
        $errorMessage = '<ul class="text-start">';
        foreach (session('errors') as $error) :
            $errorMessage .= '<li>' . $error . '</li>';
        endforeach;
        $errorMessage .= '</ul>';
    }
    */
?>

<div id="sk-alert">
</div>

<div id="sk-alert-2">
</div>


<?= $this->section('globalJsFunctions') ?>

function popAlert(message, alertClass, alertIcon, containerId = 'sk-alert', fade = true){
    var htmlString = `
        <div class="alert ${alertClass} d-flex align-items-baseline" role="alert">
            <span class="alert-icon alert-icon-lg text-primary me-2">
                <i class="ti ${alertIcon} ti-sm"></i>
            </span>
            <div class="d-flex flex-column ps-1">
                <h5 class="alert-heading mb-2">${message}</h5>
            </div>
        </div>`;
    if(containerId == 'sk-alert'){
        $(window).scrollTop(0);
    }
    if(fade){
        $('#' + containerId).hide().empty().html(htmlString).fadeIn("slow", function(){
            setTimeout(function(){
                $('#' + containerId).fadeOut("slow");
            }, 5000);
        });
    }
    else{
        $('#' + containerId).hide().empty().html(htmlString).fadeIn("slow");
        $('html, body').animate({ scrollTop: 0 }, 500);
    }
}

function popSuccessAlert(successMsg, containerId = 'sk-alert', fade = true){
    popAlert(successMsg, "alert-success", "ti-check", containerId, fade);
}

function popWarningAlert(warningMsg, containerId = 'sk-alert', fade = true){
    popAlert(warningMsg, "alert-warning", "ti-bell", containerId, fade);
}

function popErrorAlert(errorMsg, containerId = 'sk-alert', fade = true){
    popAlert(errorMsg, "alert-danger", "ti-ban", containerId, fade);
}

function popAlert2Hide(containerId = 'sk-alert-2'){
    $('#' + containerId).hide().empty().fadeIn("slow", function(){
        setTimeout(function(){
            $('#' + containerId).fadeOut("slow");
        }, 2000);
    });
}

<?php if (isset($successMessage) && $successMessage){ ?>
    popSuccessAlert(`<?= $successMessage ?>`);
<?php } ?>

<?php if (isset($warningMessage) && $warningMessage){ ?>
    popWarningAlert(`<?= $warningMessage ?>`);
<?php } ?>

<?php if (isset($errorMessage) && $errorMessage){ ?>
    popErrorAlert(`<?= $errorMessage ?>`);
<?php } ?>

<?= $this->endSection() ?>