<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Laravel') }} - Login</title>
    
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        /* Background orbs */
        .bg-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.6;
            z-index: 0;
        }

        .orb-1 {
            width: 400px;
            height: 400px;
            background: #14b8a6;
            top: -100px;
            left: -100px;
        }

        .orb-2 {
            width: 350px;
            height: 350px;
            background: #f97316;
            top: 50%;
            right: -80px;
            transform: translateY(-50%);
        }

        .orb-3 {
            width: 300px;
            height: 300px;
            background: #8b5cf6;
            bottom: -80px;
            left: 30%;
        }

        .orb-4 {
            width: 200px;
            height: 200px;
            background: #06b6d4;
            top: 20%;
            right: 20%;
        }

        /* Glass card */
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 24px;
            padding: 48px 40px;
            width: 100%;
            max-width: 420px;
            position: relative;
            z-index: 1;
            margin: 20px;
        }

        .card-title {
            color: #ffffff;
            font-size: 28px;
            font-weight: 600;
            text-align: center;
            margin-bottom: 8px;
        }

        .card-subtitle {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
            text-align: center;
            margin-bottom: 36px;
        }

        /* Session status */
        .session-status {
            background: rgba(20, 184, 166, 0.2);
            border: 1px solid rgba(20, 184, 166, 0.4);
            color: #5eead4;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 14px;
            text-align: center;
            margin-bottom: 24px;
        }

        /* Form groups */
        .form-group {
            margin-bottom: 28px;
            position: relative;
        }

        .input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }

        .input-icon {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.5);
            width: 20px;
            height: 20px;
        }

        .glass-input {
            width: 100%;
            background: transparent;
            border: none;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
            color: #ffffff;
            font-size: 16px;
            padding: 12px 40px 12px 36px;
            outline: none;
            transition: border-color 0.3s ease;
        }

        .glass-input::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        .glass-input:focus {
            border-bottom-color: #14b8a6;
        }

        .password-toggle {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            padding: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: color 0.3s ease;
        }

        .password-toggle:hover {
            color: rgba(255, 255, 255, 0.8);
        }

        .password-toggle svg {
            width: 20px;
            height: 20px;
        }

        /* Error messages */
        .error-message {
            color: #f87171;
            font-size: 13px;
            margin-top: 8px;
            padding-left: 36px;
        }

        /* Remember me checkbox */
        .remember-wrapper {
            display: flex;
            align-items: center;
            margin-bottom: 32px;
        }

        .custom-checkbox {
            position: relative;
            width: 18px;
            height: 18px;
            margin-right: 10px;
        }

        .custom-checkbox input {
            opacity: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            cursor: pointer;
            z-index: 1;
        }

        .checkbox-visual {
            position: absolute;
            top: 0;
            left: 0;
            width: 18px;
            height: 18px;
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.4);
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .custom-checkbox input:checked + .checkbox-visual {
            background: linear-gradient(135deg, #14b8a6, #06b6d4);
            border-color: #14b8a6;
        }

        .checkbox-visual::after {
            content: '';
            position: absolute;
            display: none;
            left: 5px;
            top: 2px;
            width: 4px;
            height: 8px;
            border: solid white;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .custom-checkbox input:checked + .checkbox-visual::after {
            display: block;
        }

        .remember-label {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            cursor: pointer;
        }

        /* Gradient button */
        .gradient-btn {
            width: 100%;
            background: linear-gradient(90deg, #14b8a6, #06b6d4);
            border: none;
            border-radius: 50px;
            color: #ffffff;
            font-size: 16px;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 16px 24px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(20, 184, 166, 0.4);
        }

        .gradient-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(20, 184, 166, 0.5);
        }

        .gradient-btn:active {
            transform: translateY(0);
        }

        /* Forgot password link */
        .forgot-password {
            display: block;
            text-align: center;
            margin-top: 24px;
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: color 0.3s ease;
        }

        .forgot-password:hover {
            color: rgba(255, 255, 255, 0.9);
        }

        /* Responsive */
        @media (max-width: 480px) {
            .glass-card {
                padding: 36px 24px;
                margin: 16px;
            }

            .card-title {
                font-size: 24px;
            }

            .orb-1 {
                width: 250px;
                height: 250px;
            }

            .orb-2 {
                width: 200px;
                height: 200px;
            }

            .orb-3 {
                width: 180px;
                height: 180px;
            }

            .orb-4 {
                width: 120px;
                height: 120px;
            }
        }
    </style>
</head>
<body>
    <!-- Background orbs -->
    <div class="bg-orb orb-1"></div>
    <div class="bg-orb orb-2"></div>
    <div class="bg-orb orb-3"></div>
    <div class="bg-orb orb-4"></div>

    <!-- Glass card -->
    <div class="glass-card">
        <h1 class="card-title">Welcome Back</h1>
        <p class="card-subtitle">Sign in to your account</p>

        <!-- Session Status -->
        @if (session('status'))
            <div class="session-status">
                {{ session('status') }}
            </div>
        @endif

        <form method="POST" action="{{ route('login') }}">
            @csrf

            <!-- Email Address -->
            <div class="form-group">
                <div class="input-wrapper">
                    <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                        <polyline points="22,6 12,13 2,6"></polyline>
                    </svg>
                    <input 
                        id="email" 
                        type="email" 
                        name="email" 
                        value="{{ old('email') }}" 
                        required 
                        autofocus 
                        autocomplete="username"
                        class="glass-input"
                        placeholder="Email Address">
                </div>
                @error('email')
                    <p class="error-message">{{ $message }}</p>
                @enderror
            </div>

            <!-- Password -->
            <div class="form-group">
                <div class="input-wrapper">
                    <svg class="input-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
                        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
                    </svg>
                    <input 
                        id="password" 
                        type="password" 
                        name="password" 
                        required 
                        autocomplete="current-password"
                        class="glass-input"
                        placeholder="Password">
                    <button type="button" class="password-toggle" onclick="togglePassword()">
                        <svg id="eye-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
                            <circle cx="12" cy="12" r="3"></circle>
                        </svg>
                        <svg id="eye-off-icon" style="display: none;" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path>
                            <line x1="1" y1="1" x2="23" y2="23"></line>
                        </svg>
                    </button>
                </div>
                @error('password')
                    <p class="error-message">{{ $message }}</p>
                @enderror
            </div>

            <!-- Remember Me -->
            <div class="remember-wrapper">
                <div class="custom-checkbox">
                    <input type="checkbox" name="remember" id="remember">
                    <span class="checkbox-visual"></span>
                </div>
                <label for="remember" class="remember-label">Remember Me</label>
            </div>

            <!-- Login Button -->
            <button type="submit" class="gradient-btn">Login</button>

            <!-- Forgot Password Link -->
            @if (Route::has('password.request'))
                <a href="{{ route('password.request') }}" class="forgot-password">Forgot Your Password?</a>
            @endif
        </form>
    </div>

    <script>
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            const eyeIcon = document.getElementById('eye-icon');
            const eyeOffIcon = document.getElementById('eye-off-icon');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                eyeIcon.style.display = 'none';
                eyeOffIcon.style.display = 'block';
            } else {
                passwordInput.type = 'password';
                eyeIcon.style.display = 'block';
                eyeOffIcon.style.display = 'none';
            }
        }
    </script>
</body>
</html>