@extends('layouts.app')

@section('title', 'Register')

@section('content')
    <!-- BEGIN: Content-->
    <div class="app-content content ">
        <div class="content-wrapper">
            <div class="content-body">

                <div class="auth-wrapper auth-basic px-2">
                    <div class="auth-shell my-2">
                        <aside class="auth-story" aria-label="Why join {{ brand_name() }}">
                            <a class="auth-back-link" href="{{ route('home') }}"><i data-feather="arrow-left"></i> Back to home</a>
                            <div class="auth-story-content">
                                <span class="auth-eyebrow">Free to join</span>
                                <h1>One account. More ways to earn.</h1>
                                <p>Create your account, choose an opportunity, and keep every reward organized.</p>
                                <div class="auth-benefits">
                                    <div><span><i data-feather="user-plus"></i></span><strong>Create your profile</strong><small>Registration only takes a moment.</small></div>
                                    <div><span><i data-feather="target"></i></span><strong>Choose your tasks</strong><small>Browse offers matched to your device and region.</small></div>
                                    <div><span><i data-feather="award"></i></span><strong>Build your balance</strong><small>Track progress and redeem from your wallet.</small></div>
                                </div>
                            </div>
                            <p class="auth-story-note"><i data-feather="check-circle"></i> No purchase is required to create an account.</p>
                        </aside>
                        <div class="auth-inner">
                        <!-- Register basic -->
                        <div class="card mb-0">
                            <div class="card-body">
                                <a href="{{ route('home') }}" class="brand-logo loot-auth-brand">
                                    @if(brand_logo())
                                        <img src="{{ Storage::url(brand_logo()) }}" alt="{{ brand_name() }}">
                                    @else
                                        <span class="loot-brand"><span class="loot-brand-mark">{{ brand_mark() }}</span>{{ brand_name() }}</span>
                                    @endif
                                </a>

                                <h4 class="card-title mb-1">Start earning with {{ brand_name() }}</h4>
                                <p class="card-text mb-2">{{ site_setting('tagline', config('rewards.tagline')) }}</p>

                                @if (session('error'))
                                    <div class="alert alert-danger">
                                        <div class="alert-body">
                                            <p>{{ session('error') }}</p>
                                        </div>
                                    </div>
                                @endif

                                <form action="{{ route('register') }}" method="POST" class="auth-register-form mt-2">
                                    @csrf
                                    @if(request('ref') || session('referral_code'))
                                        <input type="hidden" name="ref" value="{{ request('ref', session('referral_code')) }}">
                                    @endif
                                    <div class="mb-1">
                                        <label for="email" class="form-label">Email</label>
                                        <input type="email" class="form-control @error('email') is-invalid @enderror"
                                               id="email" name="email" value="{{ old('email', request('email')) }}" placeholder="john@example.com"
                                               autocomplete="email"
                                               @error('email') aria-invalid="true" aria-describedby="register-email-error" @enderror
                                               tabindex="4"/>

                                        @error('email')
                                        <span class="invalid-feedback" id="register-email-error" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                        @enderror
                                        <small class="form-text text-muted">Your unique username will be created automatically from your email.</small>
                                    </div>

                                    <div class="mb-1">
                                        <label for="password" class="form-label">Password</label>

                                        <div class="input-group input-group-merge form-password-toggle">
                                            <input type="password"
                                                   class="form-control @error('password') is-invalid @enderror form-control-merge"
                                                   id="password" name="password" autocomplete="new-password"
                                                   placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;"
                                                   minlength="10" aria-describedby="register-password-help @error('password') register-password-error @enderror"
                                                   @error('password') aria-invalid="true" @enderror
                                                   tabindex="5"/>


                                            <button class="input-group-text cursor-pointer" type="button" aria-label="Show password">
                                                <i data-feather="eye" aria-hidden="true"></i>
                                            </button>

                                            @error('password')
                                            <span class="invalid-feedback" id="register-password-error" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                            @enderror
                                        </div>
                                        <div class="d-flex align-items-center justify-content-between gap-1 mt-50">
                                            <small class="form-text text-muted" id="register-password-help">Use 10+ characters with upper/lowercase letters and a number.</small>
                                            <button class="btn btn-sm btn-outline-primary flex-shrink-0" id="generate-register-password" type="button">Generate password</button>
                                        </div>
                                    </div>


                                    <div class="mb-1">
                                        <div class="form-check">
                                            <input class="form-check-input @error('terms') is-invalid @enderror"
                                                   type="checkbox" id="register-privacy-policy" name="terms" value="1" required
                                                   tabindex="7"/>
                                            <label class="form-check-label" for="register-privacy-policy">
                                                I agree to the <a href="{{ route('term-condition') }}">Terms</a> and
                                                <a href="{{ route('privacy-policy') }}">Privacy Policy</a>
                                            </label>
                                        </div>
                                    </div>
                                    @if (site_bool('third_party_recaptcha_enabled'))
                                        <div class="mb-1">
                                            <div class="g-recaptcha" data-sitekey="{{ site_setting('third_party_recaptcha_site_key', config('rewards.recaptcha_site_key')) }}"></div>
                                            @error('g-recaptcha-response')
                                                <span class="text-danger"><small>{{ $message }}</small></span>
                                            @enderror
                                        </div>
                                        <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                                    @endif
                                    <button class="btn btn-success w-100" tabindex="8">Register</button>
                                </form>

                                <p class="text-center mt-2">
                                    <span>Already have an account?</span>
                                    <a href="{{ route('login') }}">
                                        <span>Sign in instead</span>
                                    </a>
                                </p>
                            </div>
                        </div>
                        <!-- /Register basic -->
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- END: Content-->
    <script>
        (function () {
            var button = document.getElementById('generate-register-password');
            var input = document.getElementById('password');
            if (!button || !input || !window.crypto) return;

            function pick(characters) {
                var random = new Uint32Array(1);
                window.crypto.getRandomValues(random);
                return characters[random[0] % characters.length];
            }

            button.addEventListener('click', function () {
                var lower = 'abcdefghijkmnopqrstuvwxyz';
                var upper = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
                var numbers = '23456789';
                var symbols = '!@#$%*-_+';
                var all = lower + upper + numbers + symbols;
                var password = [pick(lower), pick(upper), pick(numbers), pick(symbols)];
                while (password.length < 16) password.push(pick(all));
                for (var index = password.length - 1; index > 0; index--) {
                    var random = new Uint32Array(1);
                    window.crypto.getRandomValues(random);
                    var swap = random[0] % (index + 1);
                    var current = password[index];
                    password[index] = password[swap];
                    password[swap] = current;
                }
                input.value = password.join('');
                input.type = 'text';
                input.dispatchEvent(new Event('input', {bubbles: true}));
                button.textContent = 'Generated — copy it';
                input.focus();
                input.select();
            });
        })();
    </script>
@endsection
