<!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="#0a8f86">
    <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>Student 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">
    @php($studentLoginAction = $loginActionUrl ?? route('login.studentpostLogin'))
    <main class="jel-entry-shell jel-auth-shell">
        <section class="jel-auth-grid">
            <div class="jel-auth-copy">
                <a class="jel-auth-brand" href="{{ route('welcome') }}">
                    <img src="{{ $brandImageUrl }}" alt="Just Exam League">
                    <span>Just Exam League</span>
                </a>

                <span class="jel-entry-kicker">Student Access</span>
                <h1>Login karke competition dashboard open kijiye.</h1>
                <p class="jel-entry-lead">
                    Mobile number ya email se sign in kijiye, wallet, competition join status, answer sheet aur result sab ek jagah milega.
                </p>

                <div class="jel-entry-stats jel-entry-stats-compact">
                    @foreach ($loginStats as $stat)
                        <article class="jel-entry-stat-card">
                            <strong>{{ number_format((int) $stat['value']) }}</strong>
                            <span>{{ $stat['label'] }}</span>
                        </article>
                    @endforeach
                </div>

                @if (!empty($secureEntryMode))
                    <div class="jel-auth-support">
                        <article class="jel-auth-step">
                            <strong>Temporary secure URL</strong>
                            <span>Yeh student login URL roughly {{ $tokenTtlMinutes ?? 5 }} minute ke liye valid rahega aur refresh/back par naya URL generate hoga.</span>
                        </article>
                        <article class="jel-auth-step">
                            <strong>One active browser entry</strong>
                            <span>Ek browser ke liye sirf ek active secure student login URL valid rahega.</span>
                        </article>
                    </div>
                @endif
            </div>

            <section class="jel-auth-card">
                <div class="jel-auth-card-header">
                    <h2>Student Login</h2>
                    <p>
                        Secure access for exam participation and result tracking.
                        @if (!empty($secureEntryMode))
                            Temporary protected student access active hai.
                        @endif
                    </p>
                </div>

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

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

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

                    <label class="jel-entry-field">
                        <span>Mobile Number or Email</span>
                        <input
                            type="text"
                            name="email"
                            maxlength="190"
                            value="{{ old('email') }}"
                            placeholder="Enter your mobile number or email"
                            required
                        >
                        @error('email')
                            <small class="jel-entry-error">{{ $message }}</small>
                        @enderror
                    </label>

                    <label class="jel-entry-field">
                        <span>Password</span>
                        <div class="jel-password-field">
                            <input
                                type="password"
                                name="password"
                                id="password"
                                maxlength="50"
                                placeholder="Enter your password"
                                required
                            >
                            <button class="jel-password-toggle" id="passwordToggle" type="button" aria-label="Show password">
                                Show
                            </button>
                        </div>
                        @error('password')
                            <small class="jel-entry-error">{{ $message }}</small>
                        @enderror
                    </label>

                    <div class="jel-auth-meta">
                        <label class="jel-remember-check">
                            <input type="checkbox" name="remember" value="1" @checked((string) old('remember', '1') === '1')>
                            <span>Remember me</span>
                        </label>

                        <a class="jel-auth-link" href="{{ route('admin.forgotpassword') }}">Forgot password?</a>
                    </div>

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

                <div class="jel-auth-footer">
                    <span>New student?</span>
                    <a href="{{ route('admin.registration') }}">Create account</a>
                </div>

                @if (!empty($secureEntryMode) && !empty($tokenRefreshUrl))
                    <div class="jel-auth-footer">
                        <span>URL expire ho gaya?</span>
                        <a href="{{ $tokenRefreshUrl }}">Generate fresh secure login URL</a>
                    </div>
                @endif
            </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>
