<!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 Registration | 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">
            <div class="jel-auth-copy">
                <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>

                <span class="jel-entry-kicker">Student Registration</span>
                <h1>Competition portal join karne ke liye account banaiye.</h1>
                <p class="jel-entry-lead">
                    Registration ke baad aap login karke profile complete kar sakte hain, competition join kar sakte hain,
                    aur result aur wallet flow track kar sakte hain.
                </p>

                <div class="jel-auth-support">
                    <div class="jel-auth-step">
                        <strong>Quick Start</strong>
                        <span>Name, mobile aur password enter karke account create kijiye.</span>
                    </div>
                    <div class="jel-auth-step">
                        <strong>School Code Ready</strong>
                        <span>Default school code flow hidden field se preserve ho raha hai.</span>
                    </div>
                </div>
            </div>

            <section class="jel-auth-card">
                <div class="jel-auth-card-header">
                    <h2>Create Student Account</h2>
                    <p>Basic details fill karke secure account banaiye.</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('register.postRegistration') }}" method="post">
                    @csrf

                    <label class="jel-entry-field">
                        <span>Full Name</span>
                        <input type="text" name="username" id="username" maxlength="100" value="{{ old('username') }}" placeholder="Enter your full name" required>
                        @error('username')
                            <small class="jel-entry-error">{{ $message }}</small>
                        @enderror
                    </label>

                    <label class="jel-entry-field">
                        <span>Mobile Number</span>
                        <input type="text" name="mobilenumber" id="mobilenumber" maxlength="10" minlength="10" inputmode="numeric" value="{{ old('mobilenumber') }}" placeholder="Enter your mobile number" oninput="this.value = this.value.replace(/\\D/g, '').slice(0, 10)" required>
                        @error('mobilenumber')
                            <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="Create 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" placeholder="Confirm password" required>
                        @error('confirmpassword')
                            <small class="jel-entry-error">{{ $message }}</small>
                        @enderror
                    </label>

                    <input type="hidden" name="schoolcode" value="{{ $schoolCode }}" required>

                    <button class="jel-entry-button jel-entry-button-primary jel-entry-button-block" type="submit">
                        Create Account
                    </button>
                </form>

                <div class="jel-auth-footer">
                    <span>Already registered?</span>
                    <a href="{{ route('student.entry') }}">Back to login</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>
