<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
    <meta name="theme-color" content="#10335b">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Just Exam League">
    <title>Secure Admin Login | Just Exam League</title>

    <link rel="icon" href="{{ asset('public/frontend/images/logo.png') }}">
    <link rel="apple-touch-icon" sizes="180x180" href="{{ asset('public/frontend/images/apple-touch-icon.png') }}">
    <link rel="manifest" href="{{ asset('public/site.webmanifest') }}">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{ asset('public/frontend/css/entry.css') }}">
</head>
<body class="jel-entry-page jel-student-login-page">
    <main class="jel-entry-shell jel-auth-shell">
        <section class="jel-auth-grid jel-auth-grid-single">
            <section class="jel-auth-card jel-auth-card-slim">
                <a class="jel-auth-brand" href="{{ route('welcome') }}">
                    <img src="{{ asset('public/frontend/images/logo.png') }}" alt="Just Exam League">
                    <span>Just Exam League</span>
                </a>

                <div class="jel-auth-card-header jel-auth-card-header--spaced">
                    <h2>Secure Admin Login</h2>
                    <p>
                        Yeh URL temporary hai aur roughly {{ $tokenTtlMinutes }} minute ke liye valid rahega.
                        Refresh ya back open hone par naya secure login URL generate hoga.
                    </p>
                </div>

                <div class="jel-auth-support">
                    <article class="jel-auth-step">
                        <strong>One active secure URL</strong>
                        <span>Old admin URL reuse nahin hoga. Fresh access ke liye system naya secure entry generate karega.</span>
                    </article>
                    <article class="jel-auth-step">
                        <strong>Permanent lock protection</strong>
                        <span>Wrong password 2 baar hua to account permanently lock ho jayega aur database se unlock karna padega.</span>
                    </article>
                </div>

                @if (session('message'))
                    <div class="jel-entry-alert jel-entry-alert-danger">{{ session('message') }}</div>
                @endif

                @if (session('sucmessage'))
                    <div class="jel-entry-alert jel-entry-alert-success">{{ session('sucmessage') }}</div>
                @endif

                @php($viewErrors = $errors ?? null)

                @if ($viewErrors && $viewErrors->any())
                    <div class="jel-entry-alert jel-entry-alert-danger">
                        @foreach ($viewErrors->all() as $error)
                            <div>{{ $error }}</div>
                        @endforeach
                    </div>
                @endif

                <form class="jel-auth-form" method="POST" action="{{ $submitUrl }}">
                    @csrf

                    <label class="jel-entry-field">
                        <span>Admin Email</span>
                        <input id="email" type="text" name="email" value="{{ old('email') }}" autocomplete="username" placeholder="Enter admin email" required>
                    </label>

                    <label class="jel-entry-field">
                        <span>Password</span>
                        <div class="jel-password-field">
                            <input id="password" type="password" name="password" autocomplete="current-password" placeholder="Enter password" required>
                            <button class="jel-password-toggle" id="passwordToggle" type="button" aria-label="Show password">Show</button>
                        </div>
                    </label>

                    <button class="jel-entry-button jel-entry-button-primary jel-entry-button-block" type="submit">
                        Login Securely
                    </button>
                </form>

                <div class="jel-auth-footer">
                    <span>URL expire ho gaya?</span>
                    <a href="{{ $tokenRefreshUrl }}">Generate fresh secure login URL</a>
                </div>
            </section>
        </section>
    </main>

    <script>
        const passwordField = document.getElementById('password');
        const passwordToggle = document.getElementById('passwordToggle');

        if (passwordField && passwordToggle) {
            passwordToggle.addEventListener('click', function () {
                const isPassword = passwordField.getAttribute('type') === 'password';
                passwordField.setAttribute('type', isPassword ? 'text' : 'password');
                passwordToggle.textContent = isPassword ? 'Hide' : 'Show';
                passwordToggle.setAttribute('aria-label', isPassword ? 'Hide password' : 'Show password');
            });
        }
    </script>
    @include('include.pwa-register')
</body>
</html>
