@extends('layouts.master')
@section('background-image', '/assets/images/register.jpg')
@section('content')
    <div class="container">
        <div class="nk-gap-2"></div>
        <div class="row no-gutters" dir="ltr">
            <div class="col-12 col-lg-6 offset-lg-3 bg-dark-1 p-20 block-border block-shadow rounded">
                <div class="text-center">
                    <h2 class="nk-title">{{ __("auth.RegisterBattle") }}</h2>
                    <div class="nk-title-sep-icon" style="margin: 5px auto;">
                        <span class="icon"><span class="ion-person-add text-warning"></span></span>
                    </div>
                </div>
                @if (Session::has('success'))
                    <div class="alert alert-success a-fix">{!! Session::get('success') !!}</div>
                @endif
                @if (Session::has('error'))
                    <div class="alert alert-warning a-fix">{{ Session::get('error') }}</div>
                @endif
                @if (Session::has('fatal'))
                    <div class="alert alert-danger a-fix">{{ Session::get('error') }}</div>
                @endif
                <form method="post" enctype="multipart/form-data" action="{{ route('auth.doRegister') }}" id="register_form">
                    @csrf
                    <fieldset>
                        <h4 data-tippy="{{ __("auth.InformationExplain") }}" data-tippy-arrow="true" class="bg-dark-2 block-border block-shadow rounded p-10">
                            {{ __("auth.Start") }} ...
                        </h4>
                        @include('components.form-group', [
                            "label" => "User",
                            "name" => "username",
                            "placeholder" => "Your User ID",
                            "value" => old('username'),
                            "max" => 12,
                            "helper" => "This will be your user in the game, website, and forum. <hr> <ul class = 'text-left list-unstyled'> <li> <strong> Rules: </strong> </li> <li> Letters allowed and numbers only. </li> <li> Maximum 12 characters. </li> </ul>"
                        ])
                        {{--@include('components.form-group', [
                            "label" => "Forum Nick",
                            "name" => "forum",
                            "placeholder" => "What is your Forum Nick?",
                            "value" => old('forum'),
                            "max" => 12,
                            "helper" => "This will be the NICK OF THE FORUM, this one will be shown in the topics. <hr> <ul class = 'text-left list-unstyled'> <li> Letters, numbers and the characters are allowed:!~._- </li> <li> Maximum 12 characters. </li> </ul>"
                        ])--}}
                        @include('components.form-group', [
                            "label" => "E-Mail",
                            "name" => "email",
                            "placeholder" => "What is your E-Mail?",
                            "value" => old('email'),
                            "helper" => "This will be your email address on the website and forum."
                        ])
                        <div class="form-group">
                            <div class="row">
                                <div class="col-lg-6 col-12">
                                    @include('components.form-group', [
                                        "label" => "In-Game Password",
                                        "name" => "password",
                                        "placeholder" => "What Is Your Game Password?",
                                        "type" => "password",
                                        "value" => old('password'),
                                        "helper" => "This will be your password in the game."
                                    ])
                                </div>
                                <div class="col-lg-6 col-12">
                                    @include('components.form-group', [
                                        "label" => "Repeat Your Game Password",
                                        "name" => "password_confirmation",
                                        "type" => "password",
                                        "placeholder" => "Repeat Your Game Password",
                                        "value" => old('password_confirmation')
                                    ])
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-lg-6 col-12">
                                    @include('components.form-group', [
                                        "label" => "Web Password",
                                        "name" => "web_password",
                                        "placeholder" => "What Is Your Web Password?",
                                        "type" => "password",
                                        "value" => old('web_password'),
                                        "helper" => "This will be your password in website and forum."
                                    ])
                                </div>
                                <div class="col-lg-6 col-12">
                                    @include('components.form-group', [
                                        "label" => "Repeat Your Web Password",
                                        "name" => "web_password_confirm",
                                        "type" => "password",
                                        "placeholder" => "Repeat Your Web Password",
                                        "value" => old('web_password_confirm')
                                    ])
                                </div>
                            </div>
                        </div>
                    </fieldset>
                    <fieldset>
                        <h4 data-tippy="{{ __("auth.RecoveryInformationExplain") }}" data-tippy-arrow="true" class="bg-dark-2 block-border block-shadow rounded p-10">
                            {{ __("auth.RecoveryInformation") }}
                        </h4>
                        <div class="form-group">
                            <div class="row">
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="name">{{ __("auth.Name") }}</label>
                                        <input type="text" name="name" id="name" class="form-control @error('name') is-invalid @enderror" placeholder="Your Name?" value="{{ old('name') }}" />
                                        @error('name')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="form-group">
                                        <label for="last_name">{{ __("auth.SurName") }}</label>
                                        <input type="text" name="last_name" id="last_name" class="form-control @error('last_name') is-invalid @enderror" placeholder="Your Surname?" value="{{ old('last_name') }}" />
                                        @error('last_name')
                                            <div class="invalid-feedback">
                                                {{ $message }}
                                            </div>
                                        @enderror
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="phone">{{ __("auth.Telephone") }} <i class="fal fa-fw fa-question-circle" data-tippy="{{ __("auth.TelephoneRequire") }}" data-tippy-arrow="true"></i></label>
                            <input type="text" class="form-control @error('phone') is-invalid @enderror" name="phone" id="phone" placeholder="{{ __("auth.TelephoneRequirement") }} ..." maxlength="15" autocomplete="off" value="{{ old("phone") }}" />
                            @error('phone')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label for="sec">{{ __("auth.SecretQuestion") }}</label>
                            <select id="sec" name="sec" class="form-control @error('sec') is-invalid @enderror">
                                <option value="-1">{{ __("auth.SecretQuestionSelect") }}</option>
                                @foreach ($questions as $question)
                                    <option value="{{ $question["QST_ID"] }}"{{ old('sec') == $question["QST_ID"] ? " selected" : "" }}>{{ $question["QST_TEXT"] }}</option>
                                @endforeach
                            </select>
                            @error('sec')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>
                        @include('components.form-group', [
                            "label" => "Secret Answer",
                            "name" => "sec_ans",
                            "placeholder" => "Secret Answer ...",
                            "value" => old('sec_ans')
                        ])
                    </fieldset>
                    <button type="submit" class="nk-btn nk-btn-block nk-btn-bg-dark-2 nk-btn-color-success g-recaptcha" data-sitekey="6LfpksgZAAAAALzGVwu-LH9Zubat0bx--z6WyWIV" data-callback='onSubmit' data-action='submit'>Register</button>
                </form>
            </div>
        </div>
        <div class="nk-gap-2"></div>
    </div>
@endsection
@section('js')
    <script src="https://www.google.com/recaptcha/api.js"></script>
    <script>
        function onSubmit(token) {
            document.getElementById("register_form").submit();
        }
    </script>
@endsection