portal-api/resources/views/admin/user/login.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Đăng nhập quản trị hệ thống</title>

    <!-- Google Font: Source Sans Pro -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{{ asset('lib/fontawesome/css/all.min.css') }}">
    <!-- Theme style -->
    <link rel="stylesheet" href="{{ asset('lib/adminlte/adminlte.min.css') }}">
    <!-- Toast -->
    <link rel="stylesheet" type="text/css" href="{{ asset('lib/fui-toast/fuiToast.min.css') }}">
</head>
<body class="hold-transition login-page">
    <!-- FUI Toast Container - Required for FuiToast to work -->
    <div id="fui-toast"></div>
    
<div class="login-box">
    <!-- login-logo -->
    <div class="card card-outline card-primary">
        <div class="card-header text-center">
            <img src="{{ setting('setting.logo') }}" alt="{{ setting('setting.company') }}" width="200px">
        </div>
        <div class="card-body">
            <p class="login-box-msg">Đăng nhập để quản lý dịch vụ</p>

            <form action="{{ route('login.store') }}" method="post">
                @csrf
                <div class="input-group mb-3">
                    <input type="text" class="form-control" name="username" placeholder="username">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-envelope"></span>
                        </div>
                    </div>
                </div>
                <div class="input-group mb-3">
                    <input type="password" class="form-control" name="password" placeholder="Password">
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-8">
                        <div class="icheck-primary">
                            <input type="checkbox" name="remember" id="remember">
                            <label for="remember">
                                Remember Me
                            </label>
                        </div>
                    </div>
                    <!-- /.col -->
                    <div class="col-4">
                        <button type="submit" class="btn btn-primary btn-block">Login</button>
                    </div>
                    <!-- /.col -->
                </div>
            </form>
        </div>
        <!-- /.card-body -->
    </div>
    <!-- /.card -->
</div>
<!-- /.login-box -->

<!-- jQuery -->
<script src="{{ asset('lib/jquery/jquery.min.js') }}"></script>
<!-- Bootstrap 4 -->
<script src="{{ asset('lib/jquery/bootstrap.bundle.min.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('lib/adminlte/adminlte.min.js') }}"></script>
<!-- Toast js -->
<script type="text/javascript" src="{{ asset('lib/fui-toast/fuiToast.min.js') }}"></script>

<script type="text/javascript">
    // Function to safely show toast notifications
    function showToast(message, type = 'error', title = '') {
        // Check if FuiToast is available and container exists
        if (typeof FuiToast !== 'undefined' && document.getElementById('fui-toast')) {
            try {
                if (type === 'success') {
                    FuiToast.success(message, title || 'Success!');
                } else {
                    FuiToast.error(message, title || 'Error!');
                }
                return true;
            } catch (e) {
                console.error('FuiToast failed:', e);
                return false;
            }
        }
        return false;
    }

    // Function to show alerts with fallback
    function showAlerts() {
        @if ($errors->any() || session()->has('success'))
            @foreach ($errors->all() as $item)
                if (!showToast('{{ addslashes($item) }}', 'error', 'Opp!')) {
                    alert('{{ addslashes($item) }}');
                }
            @endforeach
            @if (session()->has('success'))
                if (!showToast('{{ addslashes(session()->get('success')) }}', 'success', 'Success!')) {
                    alert('{{ addslashes(session()->get('success')) }}');
                }
            @endif
        @endif
    }

    // Wait for all scripts to load and DOM to be ready
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize FuiToast configuration
        if (typeof FuiToast !== 'undefined' && FuiToast.config) {
            try {
                FuiToast.config({
                    position: "top-center",
                });
            } catch (e) {
                console.warn('FuiToast config failed:', e);
            }
        }

        // Add a small delay to ensure everything is fully initialized
        setTimeout(function() {
            showAlerts();
        }, 100);
    });
</script>
</body>
</html>