<!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>Institute 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="{{ $brandImageUrl }}" alt="Just Exam League">
                    <span>Just Exam League</span>
                </a>

                <span class="jel-entry-kicker">Institute Registration</span>
                <h1>Institute account create karke admin access ke liye ready ho jaiye.</h1>
                <p class="jel-entry-lead">
                    Registration ke baad institute profile onboarding aur panel verification process easily continue kiya ja sakta hai.
                </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>

                <div class="jel-auth-support">
                    <article class="jel-auth-step">
                        <strong>Quick registration</strong>
                        <span>Institute name aur mobile number se account create hoga. Email automatically system pattern se generate hota hai.</span>
                    </article>
                    <article class="jel-auth-step">
                        <strong>Future-ready access</strong>
                        <span>Is account se aage school setup, student tracking aur exam management modules connect honge.</span>
                    </article>
                </div>
            </div>

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

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

                    <label class="jel-entry-field">
                        <span>Institute Mobile Number</span>
                        <input
                            type="text"
                            name="mobilenumber"
                            id="mobilenumber"
                            maxlength="10"
                            minlength="10"
                            value="{{ old('mobilenumber') }}"
                            placeholder="Enter 10 digit 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>

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

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