@extends('layouts/basic')

{{-- Page title --}}
@section('title')
{{ trans('auth/general.login_prompt') }}
@parent
@stop

@section('content')

<style>
    body {
        margin: 0;
        padding: 0;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    
    .login-container {
        display: flex;
        max-width: 1200px;
        width: 95%;
        max-height: 1000px;
        background: white;
        border-radius: 24px;
        box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12);
        overflow: hidden;
        margin: 30px;
    }
    
    .brand-panel {
        flex: 0 0 450px;
        background: linear-gradient(135deg, #8B1538 0%, #A91B47 50%, #C41E3A 100%);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        padding: 100px 50px;
        color: white;
        position: relative;
        overflow: hidden;
    }
    
    .brand-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23ffffff" fill-opacity="0.03"><circle cx="30" cy="30" r="1.5"/></g></svg>') repeat;
        opacity: 0.3;
    }
    
    .brand-name {
        font-size: 36px;
        font-weight: 300;
        margin-bottom: 18px;
        position: relative;
        z-index: 2;
        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        letter-spacing: -0.5px;
        line-height: 1.1;
    }
    
    .brand-subtitle {
        font-size: 18px;
        opacity: 0.85;
        margin-bottom: 60px;
        position: relative;
        z-index: 2;
        font-weight: 300;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        letter-spacing: 0.3px;
    }
    
    .brand-features {
        list-style: none;
        padding: 0;
        margin: 0;
        position: relative;
        z-index: 2;
    }
    
    .brand-features li {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        font-size: 16px;
        font-weight: 300;
        opacity: 0.9;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        letter-spacing: 0.2px;
    }
    
    .brand-features li .feature-icon {
        width: 26px;
        height: 26px;
        margin-right: 16px;
        background: rgba(255, 255, 255, 0.1);
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        border: 1px solid rgba(255, 255, 255, 0.15);
        flex-shrink: 0;
    }
    
    .login-panel {
        flex: 1;
        background: linear-gradient(135deg, #fafbfc 0%, #f8fafc 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 100px 50px;
        position: relative;
        overflow: hidden;
    }
    
    .login-panel::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-image: 
            url('data:image/svg+xml,<svg width="80" height="80" viewBox="0 0 80 80" xmlns="http://www.w3.org/2000/svg"><g stroke="%23e2e8f0" stroke-width="1" fill="none" opacity="0.3"><rect x="25" y="25" width="30" height="20" rx="2"/><circle cx="30" cy="35" r="2" fill="%23e2e8f0"/><circle cx="50" cy="35" r="2" fill="%23e2e8f0"/><line x1="32" y1="35" x2="48" y2="35"/></g></svg>'),
            url('data:image/svg+xml,<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><g stroke="%23cbd5e1" stroke-width="1.5" fill="none" opacity="0.35"><rect x="35" y="20" width="30" height="40" rx="3"/><rect x="40" y="25" width="20" height="15" fill="%23cbd5e1" opacity="0.2"/><rect x="40" y="45" width="8" height="2" fill="%23cbd5e1"/><rect x="40" y="50" width="12" height="2" fill="%23cbd5e1"/></g></svg>'),
            url('data:image/svg+xml,<svg width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg"><g stroke="%23f1f5f9" stroke-width="2" fill="none" opacity="0.4"><text x="40" y="70" font-family="monospace" font-size="24" fill="%23f1f5f9" opacity="0.4">{ }</text></g></svg>'),
            url('data:image/svg+xml,<svg width="90" height="90" viewBox="0 0 90 90" xmlns="http://www.w3.org/2000/svg"><g stroke="%23e5e7eb" stroke-width="1" fill="none" opacity="0.3"><circle cx="45" cy="30" r="3" fill="%23e5e7eb" opacity="0.2"/><circle cx="25" cy="60" r="3" fill="%23e5e7eb" opacity="0.2"/><circle cx="65" cy="60" r="3" fill="%23e5e7eb" opacity="0.2"/><line x1="45" y1="33" x2="28" y2="57"/><line x1="45" y1="33" x2="62" y2="57"/></g></svg>'),
            url('data:image/svg+xml,<svg width="110" height="110" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg"><g stroke="%23d1d5db" stroke-width="1" fill="none" opacity="0.25"><rect x="40" y="35" width="30" height="20" rx="2"/><circle cx="47" cy="45" r="2" fill="%23d1d5db" opacity="0.3"/><circle cx="63" cy="45" r="2" fill="%23d1d5db" opacity="0.3"/><rect x="45" y="25" width="20" height="8" rx="1" fill="%23d1d5db" opacity="0.2"/></g></svg>'),
            url('data:image/svg+xml,<svg width="70" height="70" viewBox="0 0 70 70" xmlns="http://www.w3.org/2000/svg"><g stroke="%23e2e8f0" stroke-width="1" fill="none" opacity="0.3"><rect x="25" y="20" width="20" height="25" rx="2"/><rect x="30" y="25" width="10" height="8" fill="%23e2e8f0" opacity="0.2"/><rect x="30" y="35" width="4" height="1" fill="%23e2e8f0"/><rect x="30" y="38" width="6" height="1" fill="%23e2e8f0"/><rect x="30" y="41" width="8" height="1" fill="%23e2e8f0"/></g></svg>');
        background-position: 
            0 0,
            50px 50px,
            100px 25px,
            25px 75px,
            150px 100px,
            75px 150px;
        background-repeat: repeat;
        z-index: 1;
        opacity: 0.8;
    }
    
    .login-panel::after {
        content: '';
        position: absolute;
        top: -80px;
        right: -80px;
        width: 300px;
        height: 300px;
        background: radial-gradient(circle at center, rgba(196, 30, 58, 0.05) 0%, rgba(196, 30, 58, 0.02) 50%, transparent 70%);
        border-radius: 50%;
        z-index: 1;
        pointer-events: none;
    }
    
    .login-form-container {
        width: 100%;
        max-width: 420px;
        position: relative;
        z-index: 2;
    }
    
    .login-header {
        text-align: left;
        margin-bottom: 60px;
    }
    
    .login-title {
        font-size: 32px;
        font-weight: 700;
        color: #1a1a1a;
        margin-bottom: 12px;
    }
    
    .login-subtitle {
        color: #6b7280;
        font-size: 16px;
        margin: 0;
    }
    
    .form-group {
        margin-bottom: 35px;
        flex-shrink: 0;
    }
    
    .input-wrapper {
        position: relative;
    }
    
    .form-input {
        width: 100%;
        padding: 22px 22px 22px 52px;
        border: 2px solid #e5e7eb;
        border-radius: 14px;
        font-size: 16px;
        background: #f9fafb;
        transition: all 0.3s ease;
        outline: none;
        box-sizing: border-box;
        position: relative;
        z-index: 1;
    }
    
    .form-input:focus {
        border-color: #C41E3A;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
    }
    
    .form-input::placeholder {
        color: #9ca3af;
    }
    
    .input-icon {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ca3af;
        font-size: 18px;
        transition: all 0.3s ease;
        z-index: 2;
        pointer-events: none;
    }
    
    .form-input:focus ~ .input-icon,
    .input-wrapper:focus-within .input-icon {
        color: #C41E3A;
    }
    
    /* Error message styling - appears above input fields */
    .field-error-message {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
        border: 1px solid rgba(239, 68, 68, 0.2);
        border-radius: 8px;
        padding: 12px 16px;
        margin-bottom: 12px;
        font-size: 13px;
        font-weight: 500;
        display: flex;
        align-items: center;
        animation: errorSlideIn 0.3s ease-out;
    }
    
    .field-error-message i {
        margin-right: 8px;
        flex-shrink: 0;
    }
    
    @keyframes errorSlideIn {
        from {
            opacity: 0;
            transform: translateY(-8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Custom Authentication Error Popup */
    .auth-error-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
        color: white;
        padding: 30px 40px;
        border-radius: 16px;
        box-shadow: 0 25px 50px rgba(220, 38, 38, 0.3);
        z-index: 9999;
        min-width: 400px;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-out;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .auth-error-popup.show {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
    }
    
    .auth-error-popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease-out;
        backdrop-filter: blur(2px);
    }
    
    .auth-error-popup-overlay.show {
        opacity: 1;
        visibility: visible;
    }
    
    .auth-error-popup-icon {
        font-size: 48px;
        margin-bottom: 20px;
        color: rgba(255, 255, 255, 0.9);
        animation: shake 0.6s ease-in-out;
    }
    
    .auth-error-popup-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 12px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .auth-error-popup-message {
        font-size: 16px;
        margin-bottom: 25px;
        opacity: 0.95;
        line-height: 1.4;
    }
    
    .auth-error-popup-close {
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.3);
        color: white;
        padding: 12px 24px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 600;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }
    
    .auth-error-popup-close:hover {
        background: rgba(255, 255, 255, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    }
    
    @keyframes shake {
        0%, 100% { transform: translateX(0); }
        25% { transform: translateX(-5px); }
        75% { transform: translateX(5px); }
    }
    
    @media (max-width: 480px) {
        .auth-error-popup {
            min-width: 300px;
            margin: 20px;
            padding: 25px 30px;
        }
        
        .auth-error-popup-icon {
            font-size: 40px;
        }
        
        .auth-error-popup-title {
            font-size: 20px;
        }
        
        .auth-error-popup-message {
            font-size: 14px;
        }
    }
    
    .forgot-password {
        text-align: right;
        margin-bottom: 40px;
    }
    
    .forgot-password a {
        color: #C41E3A;
        text-decoration: none;
        font-size: 14px;
        font-weight: 500;
    }
    
    .forgot-password a:hover {
        text-decoration: underline;
    }
    
    .sign-in-btn {
        width: 100%;
        padding: 22px;
        background: #C41E3A;
        border: none;
        border-radius: 14px;
        color: white;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
    
    .sign-in-btn:hover {
        background: #A91B47;
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(196, 30, 58, 0.3);
    }
    
    .sign-in-btn:active {
        transform: translateY(0);
    }
    
    /* Footer Styling */
    .login-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-top: 1px solid rgba(0, 0, 0, 0.05);
        padding: 20px 0;
        text-align: center;
        z-index: 100;
    }
    
    .footer-content {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 30px;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 30px;
    }
    
    .footer-text {
        color: #6b7280;
        font-size: 14px;
        font-weight: 400;
        margin: 0;
    }
    
    .footer-links {
        display: flex;
        gap: 20px;
        align-items: center;
    }
    
    .footer-links a {
        color: #9ca3af;
        text-decoration: none;
        font-size: 13px;
        font-weight: 500;
        transition: color 0.3s ease;
    }
    
    .footer-links a:hover {
        color: #C41E3A;
    }
    
    .footer-divider {
        width: 1px;
        height: 16px;
        background: #e5e7eb;
    }
    
    /* Notifications styling */
    .login-panel .col-md-12 {
        width: 100%;
        padding: 0;
        margin: 0;
        position: relative;
    }
    
    .login-panel .alert {
        padding: 18px 22px;
        border-radius: 12px;
        margin-bottom: 30px;
        border: none;
        font-size: 14px;
        position: relative;
        animation: slideInDown 0.3s ease-out;
        min-height: 60px;
        display: flex;
        align-items: center;
    }
    
    @keyframes slideInDown {
        from {
            opacity: 0;
            transform: translateY(-10px);
            max-height: 0;
        }
        to {
            opacity: 1;
            transform: translateY(0);
            max-height: 100px;
        }
    }
    
    .login-panel .alert-success {
        background: rgba(34, 197, 94, 0.1);
        color: #15803d;
        border-left: 4px solid #22c55e;
    }
    
    .login-panel .alert-danger {
        background: rgba(239, 68, 68, 0.1);
        color: #dc2626;
        border-left: 4px solid #ef4444;
    }
    
    .login-panel .alert .close {
        position: absolute;
        top: 13px;
        right: 18px;
        color: inherit;
        opacity: 0.7;
        font-size: 18px;
        font-weight: bold;
        border: none;
        background: none;
        cursor: pointer;
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .login-panel .alert .close:hover {
        opacity: 1;
        background: rgba(0, 0, 0, 0.1);
        border-radius: 50%;
    }
    
    .login-panel .alert i {
        margin-right: 10px;
        flex-shrink: 0;
    }
    
    .login-panel .alert strong {
        margin-right: 4px;
    }
    
    .btn-google {
        display: block;
        text-align: center;
        padding: 20px;
        border: 2px solid #e5e7eb;
        border-radius: 14px;
        color: #374151;
        text-decoration: none;
        margin-bottom: 26px;
        font-weight: 600;
        font-size: 15px;
        transition: all 0.3s ease;
    }
    
    .btn-google:hover {
        background: #f9fafb;
        border-color: #d1d5db;
    }
    
    /* Responsive design */
    @media (max-width: 1024px) {
        .login-container {
            max-width: 1000px;
            max-height: 850px;
        }
        
        .brand-panel {
            flex: 0 0 400px;
            padding: 70px 40px;
        }
        
        .login-panel {
            padding: 70px 40px;
        }
    }
    
    @media (max-width: 768px) {
        .login-container {
            flex-direction: column;
            max-width: 500px;
            max-height: none;
        }
        
        .brand-panel {
            flex: none;
            padding: 55px 30px 45px;
        }
        
        .brand-name {
            font-size: 28px;
        }
        
        .brand-subtitle {
            font-size: 16px;
            margin-bottom: 40px;
        }
        
        .brand-features {
            display: none;
        }
        
        .login-panel {
            padding: 45px 30px;
        }
        
        .login-title {
            font-size: 26px;
        }
        
        .login-form-container {
            max-width: 100%;
        }
        
        .footer-content {
            flex-direction: column;
            gap: 15px;
            padding: 0 20px;
        }
        
        .footer-links {
            gap: 15px;
        }
        
        .footer-divider {
            display: none;
        }
    }
    
    @media (max-width: 480px) {
        .login-container {
            margin: 15px;
            width: calc(100% - 30px);
        }
        
        .brand-panel {
            padding: 35px 20px 25px;
        }
        
        .login-panel {
            padding: 25px 20px;
        }
        
        .login-title {
            font-size: 22px;
        }
        
        .login-footer {
            padding: 15px 0;
        }
        
        .footer-content {
            padding: 0 15px;
        }
        
        .footer-text {
            font-size: 13px;
        }
        
        .footer-links a {
            font-size: 12px;
        }
    }
</style>

<div class="login-container">
    <!-- Brand Panel -->
    <div class="brand-panel">
        <h1 class="brand-name">
            <img src="{{ asset('img/octave-logo.png') }}" alt="Octave Logo" style="width: auto; height: 50px; ">
        </h1>
        <h1 class="brand-name" style="margin-top: 0; font-size: 28px; margin-bottom: 40px;">
            IT Asset Management Solutions
        </h1>
        
        <ul class="brand-features">
            <li>
                <div class="feature-icon">
                    <i class="fas fa-clipboard-list"></i>
                </div>
                Smart asset tracking
            </li>
            <li>
                <div class="feature-icon">
                    <i class="fas fa-bell"></i>
                </div>
                Automated notifications
            </li>
            <li>
                <div class="feature-icon">
                    <i class="fas fa-chart-bar"></i>
                </div>
                Advanced analytics
            </li>
        </ul>
    </div>
    
    <!-- Login Panel -->
    <div class="login-panel">
        <div class="login-form-container">
            <div class="login-header">
                <h1 class="login-title">Welcome Back!</h1>
                <p class="login-subtitle">Sign in to your asset management dashboard</p>
            </div>
            
            <!-- Notifications -->
            {{-- @include('notifications') --}}
            
        <form role="form" action="{{ url('/login') }}" method="POST" autocomplete="{{ (config('auth.login_autocomplete') === true) ? 'on' : 'off'  }}">
            <input type="hidden" name="_token" value="{{ csrf_token() }}" />
            
            <!-- Chrome autofill prevention -->
            <input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" aria-hidden="true">
            <input type="password" name="password_fake" id="password_fake" value="" style="display:none;" aria-hidden="true">
            
            @if ($snipeSettings->login_note)
                    <div class="alert alert-info" style="margin-bottom: 35px;">
                    {!! Helper::parseEscapedMarkedown($snipeSettings->login_note) !!}
                </div>
            @endif
            
            @if (($snipeSettings->google_login=='1') && ($snipeSettings->google_client_id!='') && ($snipeSettings->google_client_secret!=''))
                    <a href="{{ route('google.redirect') }}" class="btn-google">
                        <i class="fa-brands fa-google" style="margin-right: 8px;"></i>
                    {{ trans('auth/general.google_login') }}
                </a>
                
                    <div style="text-align: center; margin: 26px 0; color: #9ca3af; font-size: 14px;">
                        {{ strtoupper(trans('general.or')) }}
                </div>
            @endif
            
            @if (!config('app.require_saml'))
                    <div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                        {!! $errors->first('email', '<div class="field-error-message"><i class="fas fa-exclamation-circle"></i> :message</div>') !!}
                        <div class="input-wrapper">
                            <input class="form-input" 
                                   placeholder="Enter your email address" 
                               name="email" 
                               type="email" 
                               id="email" 
                               autocomplete="{{ (config('auth.login_autocomplete') === true) ? 'on' : 'off' }}" 
                               autofocus>
                            <i class="input-icon fas fa-envelope"></i>
                        </div>
                    </div>
                
                    <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                        {!! $errors->first('password', '<div class="field-error-message"><i class="fas fa-exclamation-circle"></i> :message</div>') !!}
                        <div class="input-wrapper">
                            <input class="form-input" 
                                   placeholder="Enter your password" 
                               name="password" 
                               type="password" 
                               id="password" 
                               autocomplete="{{ (config('auth.login_autocomplete') === true) ? 'on' : 'off' }}">
                            <i class="input-icon fas fa-lock"></i>
                        </div>
                    </div>
                
                    @if ($snipeSettings->custom_forgot_pass_url)
                        <div class="forgot-password">
                            <a href="{{ $snipeSettings->custom_forgot_pass_url }}" rel="noopener">
                                Forgot your password?
                            </a>
                        </div>
                    @elseif (!config('app.require_saml'))
                        <div class="forgot-password">
                            <a href="{{ route('password.request') }}">
                                Forgot your password?
                            </a>
                        </div>
                    @endif
                    
                    <button type="submit" class="sign-in-btn">
                        <i class="fas fa-sign-in-alt" style="margin-right: 8px;"></i>
                        Sign In
                </button>
            @endif
            
            @if (!config('app.require_saml') && $snipeSettings->saml_enabled)
                    <div style="text-align: center; margin-top: 26px;">
                        <a href="{{ route('saml.login') }}" style="color: #C41E3A; text-decoration: none; font-size: 14px;">{{ trans('auth/general.saml_login') }}</a>
                </div>
            @endif
            
            @if (config('app.require_saml'))
                    <a class="sign-in-btn" style="text-decoration: none; text-align: center; display: block;" href="{{ route('saml.login') }}">
                    {{ trans('auth/general.saml_login') }}
                    </a>
            @endif
        </form>
        </div>
    </div>
</div>

<!-- Custom Authentication Error Popup -->
<div class="auth-error-popup-overlay" id="authErrorOverlay" onclick="hideAuthErrorPopup()"></div>
<div class="auth-error-popup" id="authErrorPopup">
    <div class="auth-error-popup-icon">
        <i class="fas fa-times-circle"></i>
    </div>
    <div class="auth-error-popup-title">Authentication Failed</div>
    <div class="auth-error-popup-message">
        The email address or password you entered is incorrect. Please check your credentials and try again.
    </div>
    <button class="auth-error-popup-close" onclick="hideAuthErrorPopup()">
        Try Again
    </button>
</div>

<!-- Copyright Footer -->
<footer class="login-footer">
    <div class="footer-content">
        <p class="footer-text">© {{ date('Y') }} XOctave IT Asset Management. All rights reserved.</p>
        <div class="footer-links">
            <a href="#" onclick="return false;">Privacy Policy</a>
            <div class="footer-divider"></div>
            <a href="#" onclick="return false;">Terms of Service</a>
            <div class="footer-divider"></div>
            <a href="#" onclick="return false;">Support</a>
        </div>
    </div>
</footer>

@stop

@push('js')
<script nonce="{{ csrf_token() }}">
document.addEventListener('DOMContentLoaded', function() {
    // Auto-hide error messages after 3 seconds
    const errorMessages = document.querySelectorAll('.field-error-message');
    
    errorMessages.forEach(function(message) {
        setTimeout(function() {
            // Add fade-out class
            message.style.transition = 'opacity 0.5s ease-out, transform 0.5s ease-out';
            message.style.opacity = '0';
            message.style.transform = 'translateY(-8px)';
            
            // Remove from DOM after animation completes
            setTimeout(function() {
                if (message.parentNode) {
                    message.parentNode.removeChild(message);
                }
            }, 500);
        }, 3000); // Hide after 3 seconds
    });
    
    // Check for authentication errors
    @if(session('error'))
        // Show authentication error popup if there's a session error
        var errorMessage = "{{ session('error') }}";
        if (errorMessage.includes('credentials') || errorMessage.includes('signin') || errorMessage.includes('incorrect')) {
            showAuthErrorPopup();
        }
    @endif
    
    // Also check if login was attempted but failed (form was submitted with values)
    @if(old('email') && old('password') && !$errors->has('email') && !$errors->has('password'))
        // Valid format submitted but authentication failed
        showAuthErrorPopup();
    @endif
});

function showAuthErrorPopup() {
    const popup = document.getElementById('authErrorPopup');
    const overlay = document.getElementById('authErrorOverlay');
    
    if (popup && overlay) {
        overlay.classList.add('show');
        popup.classList.add('show');
        
        // Auto-hide after 5 seconds
        setTimeout(function() {
            hideAuthErrorPopup();
        }, 5000);
    }
}

function hideAuthErrorPopup() {
    const popup = document.getElementById('authErrorPopup');
    const overlay = document.getElementById('authErrorOverlay');
    
    if (popup && overlay) {
        popup.classList.remove('show');
        overlay.classList.remove('show');
    }
}

// Close popup on Escape key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        hideAuthErrorPopup();
    }
});
</script>
@endpush