<!doctype html>
<html lang="fa" dir="rtl">
<head>
    <title>ورود به سامانه غربالگری AMD</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <!-- Fonts -->
    <link href="{{ asset('static/my_auth/font.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('static/my_auth/font-awesome.min.css') }}">
    <link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" 
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <!-- Styles -->
    <link rel="stylesheet" href="{{ asset('static/my_auth/style.css') }}">
    
    <style>
        :root {
            --primary-color: #0d6efd;
            --secondary-color: #6c757d;
            --success-color: #198754;
            --danger-color: #dc3545;
            --warning-color: #ffc107;
            --info-color: #0dcaf0;
            --light-color: #f8f9fa;
            --dark-color: #212529;
        }
        
        * {
            font-family: 'Vazirmatn', sans-serif;
                        direction: rtl;

        }
        html{            direction: rtl;

        }
        
        body {
            
            

            irection: rtl;
/* لایه اول: گرادینت، لایه دوم: تصویر */
background: 
    linear-gradient(2.3562rad, #002eff 0%, hwb(233.3 27.8% 29.8% / 0) 100%), url('/media/1.png');
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
        }
        
        .login-container {
            background: white;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            max-width: 1000px;
            width: 100%;
        }
        
        .login-left {
            background: linear-gradient(135deg, #0d6efd 0%, #6610f2 100%);
            color: white;
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .login-left::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: rgba(255, 255, 255, 0.1);
            transform: rotate(45deg);
        }
        
        .login-right {
            padding: 40px;
        }
        
        .app-logo {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .app-logo h1 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .app-logo p {
            opacity: 0.9;
            font-size: 0.9rem;
        }
        
        .login-image {
            width: 100%;
            max-width: 300px;
            margin: 30px auto;
            display: block;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        
        .login-features {
            margin-top: 30px;
        }
        
        .feature-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }
        
        .feature-icon {
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 15px;
            color: var(--primary-color);
            font-size: 1.2rem;
        }
        
        .login-form-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .login-form-header h2 {
            color: var(--dark-color);
            font-weight: 700;
            margin-bottom: 10px;
        }
        
        .login-form-header p {
            color: var(--secondary-color);
            font-size: 0.9rem;
        }
        
        .form-group {
            margin-bottom: 25px;
            position: relative;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--dark-color);
        }
        
        .form-control {
            width: 100%;
            padding: 12px 45px 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 10px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }
        
        .form-control:focus {
            border-color: var(--primary-color);
            box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
            outline: none;
        }
        
        .form-control.with-icon {
            padding-left: 45px;
        }
        
        .input-icon {
            position: absolute;
            left: 15px;
            top: 38px;
            color: var(--secondary-color);
            font-size: 1.2rem;
        }
        
        .password-toggle {
            position: absolute;
            left: 15px;
            top: 38px;
            background: none;
            border: none;
            color: var(--secondary-color);
            cursor: pointer;
            font-size: 1.2rem;
            padding: 0;
        }
        
        .password-toggle:hover {
            color: var(--primary-color);
        }
        
        .login-btn {
            width: 100%;
            padding: 14px;
            background: linear-gradient(135deg, var(--primary-color) 0%, #6610f2 100%);
            color: white;
            border: none;
            border-radius: 10px;
            font-size: 1.1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .login-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
        }
        
        .login-btn:active {
            transform: translateY(-1px);
        }
        
        .login-btn.loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            margin: -10px 0 0 -10px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top-color: white;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        .login-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
        }
        
        .remember-me {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
        }
        
        .remember-me input {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        
        .forgot-password {
            color: var(--primary-color);
            text-decoration: none;
            font-size: 0.9rem;
            transition: color 0.3s ease;
        }
        
        .forgot-password:hover {
            color: #6610f2;
            text-decoration: underline;
        }
        
        .login-footer {
            text-align: center;
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #e0e0e0;
            color: var(--secondary-color);
            font-size: 0.9rem;
        }
        
        .login-footer a {
            color: var(--primary-color);
            text-decoration: none;
            margin: 0 5px;
        }
        
        .login-footer a:hover {
            text-decoration: underline;
        }
        
        .alert-message {
            padding: 15px;
            border-radius: 10px;
            margin-bottom: 20px;
            animation: slideIn 0.5s ease;
        }
        
        .alert-success {
            background-color: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
        }
        
        .alert-danger {
            background-color: #f8d7da;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        
        .alert-warning {
            background-color: #fff3cd;
            border: 1px solid #ffeaa7;
            color: #856404;
        }
        
        .alert-info {
            background-color: #d1ecf1;
            border: 1px solid #bee5eb;
            color: #0c5460;
        }
        
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .system-info {
            background-color: var(--light-color);
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
            font-size: 0.8rem;
            color: var(--secondary-color);
            border-right: 3px solid var(--primary-color);
        }
        
        .system-info p {
            margin: 5px 0;
        }
        
        .demo-credentials {
            background-color: #fff3cd;
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
            font-size: 0.85rem;
            color: #856404;
            border: 1px dashed #ffc107;
        }
        
        .demo-credentials h6 {
            margin-bottom: 10px;
            color: #856404;
        }
        
        .demo-credentials code {
            background: rgba(255, 193, 7, 0.2);
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        @media (max-width: 768px) {
            .login-container {
                flex-direction: column;
            }
            
            .login-left {
                padding: 30px;
            }
            
            .login-right {
                padding: 30px;
            }
        }
        
        .language-switcher {
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 100;
        }
        
        .language-btn {
            background: rgba(255, 255, 255, 0.2);
            border: none;
            color: white;
            padding: 5px 15px;
            border-radius: 20px;
            cursor: pointer;
            backdrop-filter: blur(10px);
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }
        
        .language-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        
        .copyright {
            text-align: center;
            margin-top: 30px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 0.8rem;
        }
        
        .error-message {
            color: var(--danger-color);
            font-size: 0.85rem;
            margin-top: 5px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .error-message i {
            font-size: 1rem;
        }
    </style>
</head>
<body>
    <!-- Language Switcher -->
    <div class="language-switcher">
        <button class="language-btn">
            <i class="fa fa-globe"></i> فارسی
        </button>
    </div>

    <div class="login-container d-md-flex">
        <!-- Left Side - Welcome Section -->
        <div class="login-left col-md-6">
            <div class="app-logo">
                <h1>سامانه غربالگری هوشمند بیماری AMD</h1>

            </div>
            
            <img src="{{ asset('media/log.jpeg') }}" alt="AMD Screening System" class="login-image">
            
            <div class="login-features">
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fa fa-stethoscope"></i>
                    </div>
                    <div>
                        <h6>تشخیص با داده های بالینی </h6>

                    </div>
                </div>
                
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fa fa-camera"></i>
                    </div>
                    <div>
                        <h6>تشخیص با تصاویر فوندوس</h6>

                    </div>
                </div>
                
                <div class="feature-item">
                    <div class="feature-icon">
                        <i class="fa fa-chart-line"></i>
                    </div>
                    <div>
                        <h6>گزارش‌های آماری</h6>
                        <p>نمایش نتایج به صورت نمودار و آمار</p>
                    </div>
                </div>
            </div>
            
            <div class="copyright">
                © ۲۰۲۴ سامانه غربالگری AMD. تمامی حقوق محفوظ است.
            </div>
        </div>

        <!-- Right Side - Login Form -->
        <div class="login-right col-md-6">
            <div class="login-form-header">
                <h2>ورود به پنل مدیریت</h2>
                <p>لطفا اطلاعات حساب کاربری خود را وارد کنید</p>
            </div>

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

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

            @if($errors->any())
                <div class="alert-message alert-danger">
                    <i class="fa fa-exclamation-triangle"></i>
                    <strong>خطا در ورود:</strong>
                    <ul class="mb-0 mt-2">
                        @foreach($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif

            <!-- Login Form -->
            <form method="POST" action="{{ route('login') }}" id="loginForm" class="signin-form">
                @csrf

                <!-- Email Field -->
                <div class="form-group">
                    <label class="form-label" for="email">
                        <i class="fa fa-envelope mr-1"></i> آدرس ایمیل
                    </label>
                    <div class="position-relative">
                        <input type="email" 
                               name="email" 
                               id="email" 
                               class="form-control with-icon" 
                               placeholder="example@domain.com" 
                               value="{{ old('email') }}"
                               required
                               autofocus>
                        {{-- <span class="input-icon">
                            <i class="fa fa-user"></i>
                        </span> --}}
                    </div>
                    @error('email')
                        <div class="error-message">
                            <i class="fa fa-exclamation-circle"></i> {{ $message }}
                        </div>
                    @enderror
                </div>

                <!-- Password Field -->
                <div class="form-group">
                    <label class="form-label" for="password">
                        <i class="fa fa-lock mr-1"></i> کلمه عبور
                    </label>
                    <div class="position-relative">
                        <input type="password" 
                               name="password" 
                               id="password" 
                               class="form-control with-icon" 
                               placeholder="••••••••" 
                               required>
                        <span class="input-icon">
                            <i class="fa fa-key"></i>
                        </span>
                        {{-- <button type="button" class="password-toggle" id="togglePassword">
                            <i class="fa fa-eye"></i>
                        </button> --}}
                    </div>
                    @error('password')
                        <div class="error-message">
                            <i class="fa fa-exclamation-circle"></i> {{ $message }}
                        </div>
                    @enderror
                </div>

                <!-- Remember Me & Forgot Password -->
                <div class="login-options">
                    <label class="remember-me">
                        <input type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                        <span>مرا به خاطر بسپار</span>
                    </label>
                    
                    <a href="#" class="forgot-password" id="forgotPassword">
                        <i class="fa fa-question-circle"></i> فراموشی رمز عبور؟
                    </a>
                </div>

                <!-- Submit Button -->
                <div class="form-group">
                    <button type="submit" class="login-btn" id="loginButton">
                        <span id="buttonText">ورود به سیستم</span>
                    </button>
                </div>
            </form>

            <!-- Demo Credentials (for development) -->
            @if(env('APP_DEBUG', false))
                <div class="demo-credentials">
                    <h6><i class="fa fa-info-circle"></i> اطلاعات تست (فقط محیط توسعه):</h6>
                    <p><strong>ایمیل:</strong> <code>admin@example.ir</code></p>
                    <p><strong>رمز عبور:</strong> <code>password</code></p>
                    <p class="mt-2 mb-0">
                        <small><i class="fa fa-exclamation-triangle"></i> این اطلاعات فقط برای محیط آزمایشی می‌باشد.</small>
                    </p>
                </div>
            @endif

            <!-- System Info -->
            <div class="system-info">
                <p><i class="fa fa-shield-alt"></i> سیستم با بالاترین استانداردهای امنیتی محافظت می‌شود.</p>

                <p class="mb-0"><i class="fa fa-clock"></i> آخرین به‌روزرسانی: {{ now()->format('Y/m/d') }}</p>
            </div>

            <!-- Footer -->
            <div class="login-footer">
                <p>
                    در صورت بروز مشکل با 
                    <a href="mailto:support@amd.ir">
                        <i class="fa fa-envelope"></i> پشتیبانی
                    </a> 
                    تماس بگیرید.
                </p>
                <p class="mb-0">
                    نسخه: {{ app()->version() }} | 
                    محیط: <span class="badge {{ env('APP_ENV') == 'production' ? 'badge-success' : 'badge-warning' }}">
                        {{ env('APP_ENV', 'local') }}
                    </span>
                </p>
            </div>
        </div>
    </div>

    <!-- Forgot Password Modal -->
    <div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">بازیابی رمز عبور</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>لطفا آدرس ایمیل خود را وارد کنید. لینک بازیابی رمز عبور برای شما ارسال خواهد شد.</p>
                    <div class="form-group">
                        <input type="email" class="form-control" id="recoveryEmail" placeholder="ایمیل خود را وارد کنید">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">انصراف</button>
                    <button type="button" class="btn btn-primary" id="sendRecovery">ارسال لینک بازیابی</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Toggle password visibility
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');
        
        togglePassword.addEventListener('click', function() {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            this.innerHTML = type === 'password' ? '<i class="fa fa-eye"></i>' : '<i class="fa fa-eye-slash"></i>';
        });
        
        // Form submission with loading state
        const loginForm = document.getElementById('loginForm');
        const loginButton = document.getElementById('loginButton');
        const buttonText = document.getElementById('buttonText');
        
        loginForm.addEventListener('submit', function(e) {
            // Basic validation
            const email = document.getElementById('email').value.trim();
            const password = document.getElementById('password').value.trim();
            
            if (!email || !password) {
                e.preventDefault();
                alert('لطفا تمام فیلدهای ضروری را پر کنید.');
                return;
            }
            
            // Email validation
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                e.preventDefault();
                alert('لطفا یک آدرس ایمیل معتبر وارد کنید.');
                return;
            }
            
            // Show loading state
            loginButton.classList.add('loading');
            buttonText.textContent = 'در حال ورود...';
            loginButton.disabled = true;
        });
        
        // Forgot password modal
        const forgotPasswordLink = document.getElementById('forgotPassword');
        forgotPasswordLink.addEventListener('click', function(e) {
            e.preventDefault();
            $('#forgotPasswordModal').modal('show');
        });
        
        // Send recovery email
        document.getElementById('sendRecovery').addEventListener('click', function() {
            const email = document.getElementById('recoveryEmail').value.trim();
            
            if (!email) {
                alert('لطفا آدرس ایمیل خود را وارد کنید.');
                return;
            }
            
            // Here you would typically send an AJAX request
            alert(`لینک بازیابی رمز عبور به آدرس ${email} ارسال شد.`);
            $('#forgotPasswordModal').modal('hide');
        });
        
        // Auto-focus email field on page load
        document.addEventListener('DOMContentLoaded', function() {
            const emailField = document.getElementById('email');
            if (emailField && !emailField.value) {
                emailField.focus();
            }
            
            // Check if there's a stored email in localStorage
            const savedEmail = localStorage.getItem('lastLoginEmail');
            if (savedEmail && !emailField.value) {
                emailField.value = savedEmail;
            }
            
            // Save email on successful login
            loginForm.addEventListener('submit', function() {
                const email = document.getElementById('email').value;
                localStorage.setItem('lastLoginEmail', email);
            });
            
            // Keyboard shortcuts
            document.addEventListener('keydown', function(e) {
                // Ctrl+Enter to submit form
                if (e.ctrlKey && e.key === 'Enter') {
                    e.preventDefault();
                    loginForm.submit();
                }
                
                // Escape to clear form
                if (e.key === 'Escape') {
                    document.getElementById('email').value = '';
                    document.getElementById('password').value = '';
                }
            });
            
            // Auto-fill demo credentials in development
            if (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
                const emailField = document.getElementById('email');
                const passwordField = document.getElementById('password');
                
                if (!emailField.value && !passwordField.value) {
                    // Uncomment to auto-fill demo credentials
                    // emailField.value = 'admin@amd.ir';
                    // passwordField.value = 'password';
                }
            }
        });
        
        // Input validation on blur
        document.getElementById('email').addEventListener('blur', function() {
            const email = this.value.trim();
            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            
            if (email && !emailRegex.test(email)) {
                this.style.borderColor = 'var(--danger-color)';
            } else {
                this.style.borderColor = '';
            }
        });
        
        // Check if browser supports modern features
        function checkBrowserSupport() {
            const supports = {
                flexbox: 'flex' in document.documentElement.style,
                grid: 'grid' in document.documentElement.style,
                backdropFilter: 'backdropFilter' in document.documentElement.style || 
                               'webkitBackdropFilter' in document.documentElement.style
            };
            
            if (!supports.flexbox || !supports.grid) {
                console.warn('مرورگر شما قدیمی است. لطفا آن را به‌روزرسانی کنید.');
            }
        }
        
        checkBrowserSupport();
        
        // Session timeout warning
        let warningTimeout;
        function startSessionTimer() {
            // Clear existing timeout
            clearTimeout(warningTimeout);
            
            // Set new timeout (5 minutes)
            warningTimeout = setTimeout(() => {
                alert('جلسه کاری شما به زودی منقضی می‌شود. لطفا مجددا وارد شوید.');
            }, 5 * 60 * 1000);
        }
        
        // Reset timer on user activity
        document.addEventListener('click', startSessionTimer);
        document.addEventListener('keypress', startSessionTimer);
        
        // Start timer initially
        startSessionTimer();
    </script>

    <!-- Include jQuery and Bootstrap -->
    <script src="{{ asset('static/my_auth/jquery.min.js') }}"></script>
    <script src="{{ asset('static/my_auth/popper.js') }}"></script>
    <script src="{{ asset('static/my_auth/bootstrap.min.js') }}"></script>
    <script src="{{ asset('static/my_auth/main.js') }}"></script>

</body>
</html>