@extends('layouts.auth')

@section('title')
    {{ __('Đăng nhập') }} - 247Pay
@endsection

@section('section')
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
            background: #0a0e27;
            min-height: 100vh;
            overflow-x: hidden;
            color: #ffffff;
        }

        /* Animated background */
        .login-page {
            position: relative;
            min-height: 100vh;
            background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1729 100%);
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .login-page::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image:
                radial-gradient(circle at 20% 30%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(236, 72, 153, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(59, 130, 246, 0.08) 0%, transparent 70%);
            z-index: 0;
        }

        /* Floating particles */
        .particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 1;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(99, 102, 241, 0.6);
            border-radius: 50%;
            animation: float 15s infinite linear;
        }

        .particle:nth-child(1) { left: 10%; animation-delay: 0s; animation-duration: 20s; }
        .particle:nth-child(2) { left: 20%; animation-delay: 2s; animation-duration: 18s; background: rgba(236, 72, 153, 0.5); }
        .particle:nth-child(3) { left: 35%; animation-delay: 4s; animation-duration: 22s; }
        .particle:nth-child(4) { left: 50%; animation-delay: 1s; animation-duration: 25s; background: rgba(59, 130, 246, 0.6); }
        .particle:nth-child(5) { left: 65%; animation-delay: 3s; animation-duration: 17s; }
        .particle:nth-child(6) { left: 80%; animation-delay: 5s; animation-duration: 20s; background: rgba(139, 92, 246, 0.5); }
        .particle:nth-child(7) { left: 90%; animation-delay: 2.5s; animation-duration: 23s; }
        .particle:nth-child(8) { left: 15%; animation-delay: 7s; animation-duration: 19s; background: rgba(34, 211, 238, 0.5); }

        @keyframes float {
            0% { transform: translateY(100vh) scale(0); opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { transform: translateY(-100vh) scale(1); opacity: 0; }
        }

        /* Main container */
        .login-container {
            position: relative;
            z-index: 2;
            width: 100%;
            max-width: 1200px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            align-items: center;
        }

        /* Left side - Branding/Features */
        .login-brand {
            padding: 40px;
            animation: slideInLeft 0.8s ease-out;
        }

        @keyframes slideInLeft {
            from { opacity: 0; transform: translateX(-50px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .brand-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 40px;
        }

        .brand-logo-icon {
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 8px 32px rgba(99, 102, 241, 0.4);
        }

        .brand-logo-icon i {
            font-size: 26px;
            color: white;
        }

        .brand-logo-text {
            font-size: 28px;
            font-weight: 800;
            background: linear-gradient(135deg, #ffffff 0%, #a5b4fc 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .brand-title {
            font-size: 48px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #ffffff 0%, #c7d2fe 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .brand-subtitle {
            font-size: 17px;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: 40px;
        }

        .features-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }

        .feature-card {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.08);
            border-radius: 14px;
            padding: 20px;
            backdrop-filter: blur(20px);
            transition: all 0.3s ease;
        }

        .feature-card:hover {
            background: rgba(255, 255, 255, 0.06);
            border-color: rgba(99, 102, 241, 0.3);
            transform: translateY(-4px);
        }

        .feature-icon {
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 12px;
            font-size: 18px;
        }

        .feature-icon.blue { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
        .feature-icon.purple { background: rgba(139, 92, 246, 0.15); color: #a78bfa; }
        .feature-icon.pink { background: rgba(236, 72, 153, 0.15); color: #f472b6; }
        .feature-icon.green { background: rgba(34, 197, 94, 0.15); color: #4ade80; }

        .feature-title {
            font-size: 14px;
            font-weight: 600;
            color: #ffffff;
            margin-bottom: 4px;
        }

        .feature-desc {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.5);
            line-height: 1.5;
        }

        /* Right side - Login form */
        .login-form-wrapper {
            animation: slideInRight 0.8s ease-out;
        }

        @keyframes slideInRight {
            from { opacity: 0; transform: translateX(50px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .login-card {
            background: rgba(255, 255, 255, 0.04);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 24px;
            padding: 48px 40px;
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
        }

        .login-card-header {
            margin-bottom: 32px;
        }

        .login-card-title {
            font-size: 32px;
            font-weight: 700;
            margin-bottom: 8px;
            color: #ffffff;
        }

        .login-card-subtitle {
            font-size: 15px;
            color: rgba(255, 255, 255, 0.5);
        }

        /* Form */
        .form-group {
            margin-bottom: 24px;
        }

        .form-label {
            display: block;
            font-size: 13px;
            font-weight: 500;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 8px;
            letter-spacing: 0.3px;
        }

        .form-input-wrapper {
            position: relative;
        }

        .form-input-icon {
            position: absolute;
            left: 18px;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.4);
            font-size: 15px;
            transition: color 0.3s ease;
        }

        .form-input {
            width: 100%;
            padding: 16px 18px 16px 48px;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            color: #ffffff;
            font-size: 15px;
            font-family: 'Inter', sans-serif;
            transition: all 0.3s ease;
            outline: none;
        }

        .form-input::placeholder {
            color: rgba(255, 255, 255, 0.3);
        }

        .form-input:focus {
            background: rgba(255, 255, 255, 0.05);
            border-color: #6366f1;
            box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
        }

        .form-input:focus + .form-input-icon,
        .form-input-wrapper:focus-within .form-input-icon {
            color: #6366f1;
        }

        .password-toggle {
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.4);
            cursor: pointer;
            font-size: 15px;
            padding: 4px;
            transition: color 0.3s ease;
        }

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

        /* Checkbox */
        .form-options {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 28px;
        }

        .custom-checkbox {
            display: flex;
            align-items: center;
            cursor: pointer;
            user-select: none;
        }

        .custom-checkbox input {
            display: none;
        }

        .checkbox-box {
            width: 20px;
            height: 20px;
            border: 1.5px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.02);
        }

        .custom-checkbox input:checked + .checkbox-box {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            border-color: #6366f1;
        }

        .custom-checkbox input:checked + .checkbox-box::after {
            content: '\f00c';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            color: white;
            font-size: 10px;
        }

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

        .forgot-link {
            font-size: 14px;
            color: #a5b4fc;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.3s ease;
        }

        .forgot-link:hover {
            color: #c7d2fe;
        }

        /* Submit button */
        .btn-login {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
            border: none;
            border-radius: 12px;
            color: white;
            font-size: 15px;
            font-weight: 600;
            font-family: 'Inter', sans-serif;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
            letter-spacing: 0.3px;
            box-shadow: 0 10px 30px rgba(99, 102, 241, 0.3);
        }

        .btn-login::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.6s ease;
        }

        .btn-login:hover {
            transform: translateY(-2px);
            box-shadow: 0 15px 40px rgba(99, 102, 241, 0.5);
        }

        .btn-login:hover::before {
            left: 100%;
        }

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

        /* Alert */
        .alert {
            padding: 14px 16px;
            border-radius: 10px;
            margin-bottom: 20px;
            font-size: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
            animation: slideDown 0.4s ease-out;
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .alert-danger {
            background: rgba(239, 68, 68, 0.1);
            border: 1px solid rgba(239, 68, 68, 0.3);
            color: #fca5a5;
        }

        .alert-success {
            background: rgba(34, 197, 94, 0.1);
            border: 1px solid rgba(34, 197, 94, 0.3);
            color: #86efac;
        }

        .text-danger {
            color: #fca5a5;
            font-size: 12px;
            margin-top: 6px;
            display: block;
        }

        /* Security badge */
        .security-badge {
            margin-top: 28px;
            padding-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.08);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: rgba(255, 255, 255, 0.4);
            font-size: 12px;
        }

        .security-badge i {
            color: #4ade80;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .login-container {
                grid-template-columns: 1fr;
                max-width: 500px;
            }

            .login-brand {
                display: none;
            }

            .login-card {
                padding: 36px 28px;
            }
        }

        @media (max-width: 480px) {
            .login-card {
                padding: 32px 24px;
            }

            .login-card-title {
                font-size: 26px;
            }
        }
    </style>

    <div class="login-page">
        <!-- Floating particles -->
        <div class="particles">
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
            <div class="particle"></div>
        </div>

        <div class="login-container">
            <!-- Left side: Branding -->
            <div class="login-brand">
                <div class="brand-logo">
                    <div class="brand-logo-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <div class="brand-logo-text">{{ config('app.name', '247Pay') }}</div>
                </div>

                <h1 class="brand-title">{{ __('Thanh toán') }}<br>{{ __('nhanh chóng & an toàn') }}</h1>
                <p class="brand-subtitle">
                    {{ __('Nền tảng thanh toán hiện đại, xử lý giao dịch tức thì với công nghệ mã hóa cao cấp. Tin cậy bởi hàng nghìn doanh nghiệp.') }}
                </p>

                <div class="features-grid">
                    <div class="feature-card">
                        <div class="feature-icon blue">
                            <i class="fas fa-shield-halved"></i>
                        </div>
                        <div class="feature-title">{{ __('Bảo mật tuyệt đối') }}</div>
                        <div class="feature-desc">{{ __('Mã hóa SSL 256-bit và xác thực 2 lớp') }}</div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon purple">
                            <i class="fas fa-bolt-lightning"></i>
                        </div>
                        <div class="feature-title">{{ __('Tốc độ vượt trội') }}</div>
                        <div class="feature-desc">{{ __('Giao dịch xử lý trong mili giây') }}</div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon pink">
                            <i class="fas fa-chart-line"></i>
                        </div>
                        <div class="feature-title">{{ __('Thống kê realtime') }}</div>
                        <div class="feature-desc">{{ __('Theo dõi giao dịch mọi lúc mọi nơi') }}</div>
                    </div>
                    <div class="feature-card">
                        <div class="feature-icon green">
                            <i class="fas fa-headset"></i>
                        </div>
                        <div class="feature-title">{{ __('Hỗ trợ 24/7') }}</div>
                        <div class="feature-desc">{{ __('Đội ngũ chuyên viên luôn sẵn sàng') }}</div>
                    </div>
                </div>
            </div>

            <!-- Right side: Login form -->
            <div class="login-form-wrapper">
                <div class="login-card">
                    <div class="login-card-header">
                        <h2 class="login-card-title">{{ __('Chào mừng trở lại') }}</h2>
                        <p class="login-card-subtitle">{{ __('Đăng nhập để truy cập hệ thống quản lý') }}</p>
                    </div>

                    @if (session('error'))
                        <div class="alert alert-danger">
                            <i class="fas fa-circle-exclamation"></i>
                            <span>{{ session('error') }}</span>
                        </div>
                    @endif

                    @if (session('success'))
                        <div id="message-alert" class="alert alert-success">
                            <i class="fas fa-circle-check"></i>
                            <span>{{ session('success') }}</span>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('auth.login.login') }}" data-toggle="validator">
                        {{ csrf_field() }}

                        <div class="form-group">
                            <label for="username" class="form-label">{{ __('Tên đăng nhập') }}</label>
                            <div class="form-input-wrapper">
                                <input type="text"
                                       name="username"
                                       id="username"
                                       value="{{ old('username') }}"
                                       class="form-input"
                                       placeholder="{{ __('Nhập tên đăng nhập') }}"
                                       required
                                       autofocus
                                       autocomplete="username">
                                <i class="fas fa-user form-input-icon"></i>
                            </div>
                            @error('username')
                                <span class="text-danger">
                                    <i class="fas fa-circle-exclamation"></i> {{ $message }}
                                </span>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="password" class="form-label">{{ __('Mật khẩu') }}</label>
                            <div class="form-input-wrapper">
                                <input type="password"
                                       name="password"
                                       id="password"
                                       class="form-input"
                                       placeholder="{{ __('Nhập mật khẩu') }}"
                                       value="{{ old('password') }}"
                                       required
                                       autocomplete="current-password">
                                <i class="fas fa-lock form-input-icon"></i>
                                <button type="button" class="password-toggle" onclick="togglePassword()">
                                    <i class="fas fa-eye" id="password-icon"></i>
                                </button>
                            </div>
                            @error('password')
                                <span class="text-danger">
                                    <i class="fas fa-circle-exclamation"></i> {{ $message }}
                                </span>
                            @enderror
                        </div>

                        <div class="form-options">
                            <label class="custom-checkbox">
                                <input type="checkbox" id="remember" name="remember">
                                <span class="checkbox-box"></span>
                                <span class="checkbox-label">{{ __('Ghi nhớ đăng nhập') }}</span>
                            </label>
                        </div>

                        <button type="submit" class="btn-login">
                            <i class="fas fa-arrow-right-to-bracket"></i>
                            &nbsp;{{ __('Đăng nhập') }}
                        </button>
                    </form>

                    <div class="security-badge">
                        <i class="fas fa-shield-halved"></i>
                        <span>{{ __('Kết nối bảo mật SSL • Dữ liệu được mã hóa') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Toggle password visibility
        function togglePassword() {
            const passwordInput = document.getElementById('password');
            const passwordIcon = document.getElementById('password-icon');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                passwordIcon.classList.remove('fa-eye');
                passwordIcon.classList.add('fa-eye-slash');
            } else {
                passwordInput.type = 'password';
                passwordIcon.classList.remove('fa-eye-slash');
                passwordIcon.classList.add('fa-eye');
            }
        }

        // Auto hide success alert after 5 seconds
        setTimeout(() => {
            const alert = document.getElementById('message-alert');
            if (alert) {
                alert.style.transition = 'opacity 0.5s';
                alert.style.opacity = '0';
                setTimeout(() => alert.remove(), 500);
            }
        }, 5000);
    </script>
@endsection