<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>biiproject - Login</title>
    <link rel="icon" type="image/png"
        href="{{ asset($app_favicon) }}?v={{ file_exists(public_path($app_favicon ?? '')) ? filemtime(public_path($app_favicon ?? '')) : time() }}">

    {{-- Font --}}
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Outfit:wght@600&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css" rel="stylesheet">
    @stack('styles')
    <link href="{{ asset('assets/css/app.css') }}" rel="stylesheet">
    <script defer src="{{ asset('assets/js/app.js') }}"></script>
    <style>
        :root {
            --adminuiux-content-font: "Open Sans", sans-serif;
            --adminuiux-title-font: "Outfit", sans-serif;
        }
    </style>
    <style>
        .pageloader {
            background: #262e38 !important;
            backdrop-filter: blur(0.5px);
        }

        /* Modern Pill Design System */
        .swal2-popup.modern-pill-popup {
            border-radius: 30px !important;
            font-family: 'Outfit', sans-serif !important;
            padding: 2rem !important;
        }

        .swal2-title {
            font-weight: 600 !important;
        }

        .swal2-html-container {
            font-size: 0.95rem !important;
            opacity: 0.8;
        }

        .btn-pill-primary {
            background-color: #1e1e1e !important;
            color: white !important;
            border-radius: 50px !important;
            padding: 10px 30px !important;
            font-weight: 600 !important;
            border: none !important;
            margin: 0 5px !important;
        }

        .btn-pill-danger {
            background-color: #dc3545 !important;
            color: white !important;
            border-radius: 50px !important;
            padding: 10px 30px !important;
            font-weight: 600 !important;
            border: none !important;
            margin: 0 5px !important;
        }

        .btn-pill-cancel {
            background-color: white !important;
            color: #1e1e1e !important;
            border: 2px solid #1e1e1e !important;
            border-radius: 50px !important;
            padding: 8px 28px !important;
            font-weight: 600 !important;
            margin: 0 5px !important;
        }

        .btn-primary {
            --bs-btn-color: #fff !important;
            --bs-btn-bg: #1e1e1e !important;
            --bs-btn-border-color: #1e1e1e !important;
            --bs-btn-hover-color: #fff !important;
            --bs-btn-hover-bg: #000 !important;
            --bs-btn-hover-border-color: #000 !important;
            --bs-btn-focus-shadow-rgb: 30, 30, 30 !important;
            --bs-btn-active-color: #fff !important;
            --bs-btn-active-bg: #000 !important;
            --bs-btn-active-border-color: #000 !important;
            --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125) !important;
            --bs-btn-disabled-color: #fff !important;
            --bs-btn-disabled-bg: #1e1e1e !important;
            --bs-btn-disabled-border-color: #1e1e1e !important;
        }

        .text-primary {
            color: #1e1e1e !important;
        }

        .bg-primary {
            background-color: #1e1e1e !important;
        }

        .border-primary {
            border-color: #1e1e1e !important;
        }

        .btn-outline-primary {
            --bs-btn-color: #1e1e1e !important;
            --bs-btn-border-color: #1e1e1e !important;
            --bs-btn-hover-color: #fff !important;
            --bs-btn-hover-bg: #1e1e1e !important;
            --bs-btn-hover-border-color: #1e1e1e !important;
            --bs-btn-focus-shadow-rgb: 30, 30, 30 !important;
            --bs-btn-active-color: #fff !important;
            --bs-btn-active-bg: #1e1e1e !important;
            --bs-btn-active-border-color: #1e1e1e !important;
        }

        /* Standardized Modern Pill Buttons */
        .btn-pill-standard-primary {
            background-color: #ffffff !important;
            color: #212529 !important;
            border: 1px solid #212529 !important;
            border-radius: 50rem !important;
            padding: 8px 24px !important;
            font-weight: 500 !important;
            font-family: var(--adminuiux-title-font) !important;
            min-width: 110px !important;
            transition: all 0.2s ease !important;
        }

        .btn-pill-standard-primary:hover {
            background-color: #f8f9fa !important;
            border-color: #000000 !important;
        }

        /* Global Zoom */
        /* html {
        zoom: 0.8;
    } */

        /* Global 100% Fade-In Policy - Without Exception */
        .adminuiux-wrap,
        .card,
        .adminuiux-content,
        .login-box {
            animation: fadeIn 0.6s ease-out both !important;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    </style>
</head>

<body
    class="main-bg main-bg-opac roundedui adminuiux-header-boxed adminuiux-header-transparent adminuiux-sidebar-fill-white adminuiux-sidebar-boxed theme-black bg-gradient-1 scrollup"
    data-theme="theme-black">
    {{-- page loader --}}
    <div class="pageloader">
        <div class="container h-100">
            <div class="row justify-content-center align-items-center text-center h-100">
                <div class="col-12 mb-auto pt-4"></div>
                <div class="col-auto">
                    <div class="loader5 mb-2 mx-auto"></div>
                </div>
                <div class="col-12 mt-auto pb-4">
                    <p class="text-secondary">Please wait for awesome things...</p>
                </div>
            </div>
        </div>
    </div>

    <div class="adminuiux-wrap z-index-0 position-relative bg-theme-1 ">
        <figure class="position-absolute top-0 start-0 w-100 h-100 coverimg z-index-0">
            <img style="-webkit-filter: invert(1);filter: invert(1);"
                src="{{ asset('assets/img/background-image/bg1.png') }}" alt="">
        </figure>
        <main class="adminuiux-content z-index-1 position-relative animate__animated animate__fadeIn">
            <div class="container-fluid">
                <div class="row align-items-center justify-content-center mt-auto z-index-1 height-dynamic"
                    style="--h-dynamic: calc(100vh - 60px)">
                    <div class="col login-box {{ $attributes->get('maxWidthClass', 'maxwidth-400') }} text-dark pb-ios">

                        {{ $slot }}

                    </div>
                </div>
            </div>
        </main>
    </div>

    @stack('modals')

    {{-- page js --}}
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    <script src="{{ asset('assets/js/mobileux/mobileux-auth.js') }}"></script>
    <script src="{{ asset('assets/js/password-toggle.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11" crossorigin="anonymous"></script>

    <script>
        // Global Modern Pill Mixin for Guest Layout
        window.StandardSwal = Swal.mixin({
            customClass: {
                popup: 'modern-pill-popup',
                confirmButton: 'btn-pill-primary',
                cancelButton: 'btn-pill-cancel'
            },
            buttonsStyling: false,
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            showClass: { popup: 'animate__animated animate__fadeIn animate__faster' },
            hideClass: { popup: 'animate__animated animate__fadeOutDown animate__faster' }
        });
    </script>
    @if (session('success'))
        <script>
            StandardSwal.fire({
                icon: 'success',
                title: 'Success!',
                text: "{{ session('success') }}",
                timer: 2500,
                showConfirmButton: false,
                timerProgressBar: true
            });
        </script>
    @endif

    @if (session('info'))
        <script>
            StandardSwal.fire({
                icon: 'info',
                title: 'Information',
                text: "{{ session('info') }}",
                timer: 3000,
                showConfirmButton: false,
                timerProgressBar: true
            });
        </script>
    @endif

    @if (session('error'))
        <script>
            StandardSwal.fire({
                icon: 'error',
                title: 'System Notice',
                text: "{{ session('error') }}",
                confirmButtonText: 'OK'
            });
        </script>
    @endif

    @stack('scripts')

    {{-- Cookie Consent Banner --}}
    @include('layouts.partials.cookie-banner')
</body>

</html>