<!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>Change Password | 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">
                    <span class="jel-entry-kicker">Set New Password</span>
                    <h2>Ab new password choose kijiye.</h2>
                    <p>Verified mobile ke liye secure password set karke login flow complete kijiye.</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="{{ route('admin.passwordsave') }}" method="post">
                    @csrf

                    <label class="jel-entry-field">
                        <span>New Password</span>
                        <div class="jel-password-field">
                            <input type="password" name="password" id="password" maxlength="50" minlength="6" placeholder="Enter new 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>

                    <label class="jel-entry-field">
                        <span>Confirm Password</span>
                        <input type="password" name="confirmpassword" id="confirmpassword" maxlength="50" minlength="6" placeholder="Confirm new password" required>
                        @error('confirmpassword')
                            <small class="jel-entry-error">{{ $message }}</small>
                        @enderror
                    </label>

                    <input type="hidden" name="varifymobile" id="varifymobile" value="{{ $mobile }}">

                    <button class="jel-entry-button jel-entry-button-primary jel-entry-button-block" type="submit">
                        Update Password
                    </button>
                </form>
            </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>
