@extends('layouts/basic')

{{-- Add modern login CSS - loaded after all other CSS for proper override --}}
@push('css')
<link rel="stylesheet" href="{{ asset('css/modern-login.css') }}?v={{ time() }}">
@endpush

{{-- Page content --}}
@section('content')

    <form role="form" action="{{ url('/login') }}" method="POST" autocomplete="{{ (config('auth.login_autocomplete') === true) ? 'on' : 'off'  }}" class="modern-login-form">
        <input type="hidden" name="_token" value="{{ csrf_token() }}" />

        <!-- this is a hack to prevent Chrome from trying to autocomplete fields -->
        <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">

        <div class="container">
            <div class="row">

                <div class="col-md-4 col-md-offset-4">

                    @if (($snipeSettings->google_login=='1') && ($snipeSettings->google_client_id!='') && ($snipeSettings->google_client_secret!=''))

                        <br><br>
                        <a href="{{ route('google.redirect')  }}" class="btn btn-block btn-social btn-google btn-lg">
                            <i class="fa-brands fa-google"></i>
                            {{ trans('auth/general.google_login') }}
                        </a>

                        <div class="separator">{{ strtoupper(trans('general.or')) }}</div>
                    @endif


                    <div class="box login-box">
                        <div class="box-header with-border">
                            <div style="margin-bottom: 15px;">
                                <i class="fas fa-shield-halved" style="font-size: 48px; color: rgba(255, 255, 255, 0.9);"></i>
                            </div>
                            <h1 class="box-title">
                                Asset Management System
                            </h1>
                            <hr>
                            <p style="margin: 10px 0 0; color: rgba(255, 255, 255, 0.9); font-size: 15px; text-align: center;">
                                Secure access to your asset portal
                            </p>
                        </div>

                        <div class="login-box-body">
                            <div class="row">

                                @if ($snipeSettings->login_note)
                                    <div class="col-md-12">
                                        <div class="alert alert-info">
                                            {!!  Helper::parseEscapedMarkedown($snipeSettings->login_note)  !!}
                                        </div>
                                    </div>
                                @endif

                                <!-- Notifications -->
                                @include('notifications')

                                @if (!config('app.require_saml'))
                                <div class="col-md-12">
                                    <!-- CSRF Token -->


                                    <fieldset>

                                        <div class="form-group{{ $errors->has('username') ? ' has-error' : '' }}">
                                            <label for="username" class="form-label">
                                                Username or Email
                                            </label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="fas fa-user"></i>
                                                </span>
                                                <input class="form-control" placeholder="Enter your username or email" name="username" type="text" id="username" autocomplete="{{ (config('auth.login_autocomplete') === true) ? 'on' : 'off'  }}" autofocus>
                                            </div>
                                            {!! $errors->first('username', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i> :message</span>') !!}
                                        </div>
                                        <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                                            <label for="password" class="form-label">
                                                Password
                                            </label>
                                            <div class="input-group">
                                                <span class="input-group-addon">
                                                    <i class="fas fa-lock"></i>
                                                </span>
                                                <input class="form-control" placeholder="Enter your password" name="password" type="password" id="password" autocomplete="{{ (config('auth.login_autocomplete') === true) ? 'on' : 'off'  }}">
                                                <span class="input-group-addon password-toggle" style="cursor: pointer;" onclick="togglePassword()">
                                                    <i class="fas fa-eye" id="passwordToggleIcon"></i>
                                                </span>
                                            </div>
                                            {!! $errors->first('password', '<span class="alert-msg" aria-hidden="true"><i class="fas fa-exclamation-triangle" aria-hidden="true"></i> :message</span>') !!}
                                        </div>
                                        <div class="form-group">
                                            <label class="checkbox-label">
                                                <input name="remember" type="checkbox" value="1" class="remember-checkbox">
                                                <span style="margin-left: 5px;">Keep me signed in</span>
                                            </label>
                                        </div>
                                    </fieldset>
                                </div> <!-- end col-md-12 -->
                                @endif
                            </div> <!-- end row -->

                            @if (!config('app.require_saml') && $snipeSettings->saml_enabled)
                            <div class="row">
                                <div class="text-right col-md-12">
                                    <a href="{{ route('saml.login')  }}">{{ trans('auth/general.saml_login')  }}</a>
                                </div>
                            </div>
                            @endif
                        </div>
                        <div class="box-footer">
                            @if (config('app.require_saml'))
                                <a class="btn btn-primary btn-block" href="{{ route('saml.login')  }}">
                                    <i class="fas fa-sign-in-alt" style="margin-right: 8px;"></i>
                                    {{ trans('auth/general.saml_login')  }}
                                </a>
                            @else
                                <button class="btn btn-primary btn-block" type="submit">
                                    <i class="fas fa-sign-in-alt" style="margin-right: 8px;"></i>
                                    {{ trans('auth/general.login')  }}
                                </button>
                            @endif

                            @if ($snipeSettings->custom_forgot_pass_url)
                                <div class="col-md-12 text-center" style="padding-top: 20px;">
                                    <a href="{{ $snipeSettings->custom_forgot_pass_url  }}" rel="noopener">
                                        <i class="fas fa-key" style="margin-right: 5px;"></i>
                                        {{ trans('auth/general.forgot_password')  }}
                                    </a>
                                </div>
                            @elseif (!config('app.require_saml'))
                                <div class="col-md-12 text-center" style="padding-top: 20px;">
                                    <a href="{{ route('password.request')  }}">
                                        <i class="fas fa-key" style="margin-right: 5px;"></i>
                                        {{ trans('auth/general.forgot_password')  }}
                                    </a>
                                </div>
                            @endif

                        </div>

                    </div> <!-- end login box -->


                </div> <!-- col-md-4 -->

            </div> <!-- end row -->
        </div> <!-- end container -->
    </form>

    {{-- Modern Professional Footer --}}
    <footer class="login-footer">
        <div class="container">
            <p style="margin: 0; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 8px;">
                <i class="fas fa-copyright" style="font-size: 12px;"></i>
                {{ date('Y') }} <strong>Krystal Scanning & Mobility Group</strong>
                <span style="opacity: 0.7; margin: 0 5px;">•</span>
                <span style="opacity: 0.8;">Secure Asset Management</span>
            </p>
        </div>
    </footer>
    
    {{-- Force modern login styles at the end of content to override ALL CSS --}}
    <style>
    /* FINAL OVERRIDE - These styles load last and win against all.css */
    /* Matching application color scheme: #031a31 (dark blue) and #4a90e2 (blue accent) */
    
    /* Keep the box body white for the form area */
    body.hold-transition.login-page .login-box-body,
    body.hold-transition.login-page .register-box-body {
        background: white !important;
        padding: 40px 35px !important;
        border-top: 0 !important;
        color: #2d3748 !important;
    }
    
    /* Dark blue gradient header - matching main app */
    body.hold-transition.login-page .box.login-box .box-header,
    body.hold-transition.login-page .login-box .box-header,
    body.hold-transition.login-page .box-header {
        background: linear-gradient(135deg, #031a31 0%, #0a2338 100%) !important;
        color: white !important;
        padding: 40px 30px 30px !important;
        border-radius: 24px 24px 0 0 !important;
        border: none !important;
    }
    
    /* Blue accent input icons - matching main app */
    body.hold-transition.login-page .input-group-addon {
        background: linear-gradient(135deg, #4a90e2 0%, #5ba0f2 100%) !important;
        border: none !important;
        color: white !important;
        border-radius: 12px 0 0 12px !important;
        padding: 12px 16px !important;
        min-width: 50px !important;
    }
    
    /* Modern input styling */
    body.hold-transition.login-page .input-group .form-control {
        border-radius: 0 12px 12px 0 !important;
        border: 0px solid #e2e8f0 !important;
        border-left: none !important;
        padding: 12px 16px !important;
        font-size: 15px !important;
    }
    
    body.hold-transition.login-page .input-group .form-control:focus {
        border-color: #4a90e2 !important;
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.1) !important;
        outline: none !important;
    }
    
    /* Password toggle button */
    body.hold-transition.login-page .password-toggle {
        background: #f8fafc !important;
        border: 0px solid #e2e8f0 !important;
        border-radius: 0 12px 12px 0 !important;
        border-left: none !important;
        cursor: pointer !important;
    }
    
    body.hold-transition.login-page .password-toggle:hover {
        background: #e2e8f0 !important;
        color: #4a90e2 !important;
    }
    
    /* Blue button - matching main app */
    body.hold-transition.login-page .btn-primary {
        background: linear-gradient(135deg, #4a90e2 0%, #5ba0f2 100%) !important;
        border: none !important;
        color: white !important;
        border-radius: 12px !important;
        padding: 14px 24px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        box-shadow: 0 4px 15px rgba(74, 144, 226, 0.3) !important;
        transition: all 0.3s ease !important;
    }
    
    body.hold-transition.login-page .btn-primary:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 25px rgba(74, 144, 226, 0.4) !important;
        background: linear-gradient(135deg, #5ba0f2 0%, #4a90e2 100%) !important;
    }
    
    /* Box footer */
    body.hold-transition.login-page .box-footer {
        background: white !important;
        padding: 25px 35px 35px !important;
        border-radius: 0 0 24px 24px !important;
        border-top: none !important;
    }
    
    /* Login page footer - matching dark blue theme */
    body.hold-transition.login-page .login-footer {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: rgba(3, 26, 49, 0.9) !important;
        backdrop-filter: blur(10px) !important;
        padding: 15px 0 !important;
        padding-left: 10% !important;
        border-top: 1px solid rgba(74, 144, 226, 0.3) !important;
        z-index: 10 !important;
        margin-top: 40px !important;
    }
    
    /* Ensure the login page has proper min-height for footer positioning */
    body.hold-transition.login-page {
        position: relative !important;
        min-height: 100vh !important;
        padding-bottom: 60px !important;
    }
    
    /* Add spacing to the form container to prevent overlap */
    body.hold-transition.login-page .container {
        padding-bottom: 80px !important;
    }
    
    body.hold-transition.login-page .login-footer .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    body.hold-transition.login-page .login-footer p {
        color: rgba(255, 255, 255, 0.9) !important;
        margin: 0 !important;
        font-size: 14px !important;
        text-align: center !important;
    }
    
    body.hold-transition.login-page .login-footer strong {
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    
    body.hold-transition.login-page .login-footer .fa-copyright {
        color: rgba(74, 144, 226, 0.8) !important;
    }
    </style>

@stop

{{-- Add modern login JavaScript --}}
@push('js')
<script>
// Force modern styles immediately - before DOMContentLoaded
(function() {
    // Add critical CSS inline to override all.css immediately
    const criticalStyle = document.createElement('style');
    criticalStyle.id = 'modern-login-critical';
    criticalStyle.innerHTML = `
        body.hold-transition.login-page {
            background: linear-gradient(135deg, #031a31 0%, #0a2338 100%) !important;
            min-height: 100vh !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }
    `;
    document.head.appendChild(criticalStyle);
})();

document.addEventListener('DOMContentLoaded', function() {
    // Force apply styles after DOM is ready
    setTimeout(function() {
        document.body.style.background = 'linear-gradient(135deg, #031a31 0%, #0a2338 100%)';
        document.body.style.minHeight = '100vh';
    }, 0);
    
    // Enhanced form interactions
    const form = document.querySelector('.modern-login-form');
    const inputs = document.querySelectorAll('.form-control');
    const submitBtn = document.querySelector('.btn-primary');
    
    // Add focus effects to inputs
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.classList.add('focused');
        });
        
        input.addEventListener('blur', function() {
            if (!this.value) {
                this.parentElement.classList.remove('focused');
            }
        });
        
        // Add typing animation
        input.addEventListener('input', function() {
            this.style.transform = 'scale(1.02)';
            setTimeout(() => {
                this.style.transform = 'scale(1)';
            }, 150);
        });
    });
    
    // Enhanced submit button - removed problematic loading state
    // Form will submit naturally without JavaScript interference
    
    // Add floating animation to logo
    const logo = document.getElementById('login-logo');
    if (logo) {
        logo.addEventListener('mouseenter', function() {
            this.style.animation = 'logoFloat 0.6s ease-in-out infinite';
        });
        
        logo.addEventListener('mouseleave', function() {
            this.style.animation = 'logoFloat 3s ease-in-out infinite';
        });
    }
    
    // Add ripple effect to buttons
    document.querySelectorAll('.btn').forEach(button => {
        button.addEventListener('click', function(e) {
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;
            
            ripple.style.width = ripple.style.height = size + 'px';
            ripple.style.left = x + 'px';
            ripple.style.top = y + 'px';
            ripple.classList.add('ripple');
            
            this.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        });
    });
    
    // Add keyboard navigation
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && e.target.classList.contains('form-control')) {
            const inputs = Array.from(document.querySelectorAll('.form-control'));
            const currentIndex = inputs.indexOf(e.target);
            const nextInput = inputs[currentIndex + 1];
            
            if (nextInput) {
                e.preventDefault();
                nextInput.focus();
            } else if (submitBtn) {
                e.preventDefault();
                submitBtn.click();
            }
        }
    });
});

// Password toggle function
function togglePassword() {
    const passwordInput = document.getElementById('password');
    const toggleIcon = document.getElementById('passwordToggleIcon');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        toggleIcon.classList.remove('fa-eye');
        toggleIcon.classList.add('fa-eye-slash');
    } else {
        passwordInput.type = 'password';
        toggleIcon.classList.remove('fa-eye-slash');
        toggleIcon.classList.add('fa-eye');
    }
}

// Add ripple effect CSS and enhanced interactions
const style = document.createElement('style');
style.textContent = `
    .btn {
        position: relative;
        overflow: hidden;
    }
    
    .ripple {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        transform: scale(0);
        animation: ripple 0.6s linear;
        pointer-events: none;
    }
    
    @keyframes ripple {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }
    
    .form-group.focused label {
        color: #4a90e2;
        transform: translateY(-1px);
    }
    
    .form-group.focused .input-group {
        transform: translateY(-2px);
    }
    
    .form-group.focused .form-control {
        border-color: #4a90e2;
        box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.15);
    }
    
    /* Smooth page transitions */
    .modern-login-form {
        animation: fadeIn 0.5s ease-out;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }
    
    /* Input focus glow effect */
    .input-group:focus-within .input-group-addon {
        animation: iconGlow 1.5s ease-in-out infinite;
    }
    
    @keyframes iconGlow {
        0%, 100% { box-shadow: 0 0 10px rgba(74, 144, 226, 0.3); }
        50% { box-shadow: 0 0 20px rgba(74, 144, 226, 0.5); }
    }
`;
document.head.appendChild(style);
</script>
@endpush