@extends('layouts.app')

@section('title', 'Register | '.config('app.name'))

@section('content')
    <section class="screen active" id="register">
        <div class="wrap">
            <div class="auth-layout">
                <div class="auth-art register-art">
                    <div class="auth-art-copy">
                        <span class="eyebrow">The first step</span>
                        <h2>Create your <span class="gold">legend.</span></h2>
                        <p>Join thousands of warriors and begin your journey.</p>
                    </div>
                </div>

                <div class="auth-form">
                    <span class="eyebrow">New warrior registration</span>
                    <h2>Take your <span class="gold">place.</span></h2>

                    @if ($errors->any())
                        <div class="form-alert">
                            <strong>Please check the registration details.</strong>
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if (session('form_status'))
                        <div class="form-alert success">
                            <strong>Success.</strong>
                            <span>{{ session('form_status') }}</span>
                        </div>
                    @endif

                    <form class="form" id="registerForm" method="POST" action="{{ route('register.store') }}">
                        @csrf

                        <div class="form-grid">
                            <label>
                                Username
                                <input name="Username" value="{{ old('Username') }}" required placeholder="Choose your name">
                            </label>

                            <label>
                                Email address
                                <input name="Email" value="{{ old('Email') }}" required type="email" placeholder="Real email for activation">
                            </label>
                        </div>

                        <p class="field-hint">Use a real email because your activation link will be sent there.</p>

                        <div class="form-grid">
                            <label>
                                Password
                                <input name="Password" required id="registerPassword" type="password" placeholder="Create a password">
                            </label>

                            <label>
                                Confirm password
                                <input name="Password_confirmation" required type="password" placeholder="Repeat your password">
                            </label>
                        </div>

                        <div class="strength" id="strength"><i></i><i></i><i></i><i></i><i></i></div>

                        <label>
                            Security question
                            <select name="Question" required>
                                <option @selected(old('Question') === 'What was your first guild?')>What was your first guild?</option>
                                <option @selected(old('Question') === 'What is your favorite class?')>What is your favorite class?</option>
                                <option @selected(old('Question') === 'What city were you born in?')>What city were you born in?</option>
                            </select>
                        </label>

                        <label>
                            Security answer
                            <input name="answer" value="{{ old('answer') }}" required placeholder="Your answer">
                        </label>

                        @if (config('services.recaptcha.site_key'))
                            <div class="captcha-wrap">
                                <div class="g-recaptcha" data-sitekey="{{ config('services.recaptcha.site_key') }}"></div>
                            </div>
                        @else
                            <div class="form-alert">
                                <strong>Google reCAPTCHA needs keys.</strong>
                                <span>Add RECAPTCHA_SITE_KEY and RECAPTCHA_SECRET_KEY to your .env file.</span>
                            </div>
                        @endif

                        <label class="check">
                            <input type="checkbox" required>
                            I agree to the Terms &amp; Rules.
                        </label>

                        <button class="btn" type="submit">Create account ↗</button>
                    </form>

                    <div class="auth-links">
                        <a href="#home" data-modal="login">Already have an account?</a>
                        <a href="#support" data-route="support">Need help?</a>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@push('scripts')
    @if (config('services.recaptcha.site_key'))
        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    @endif
@endpush