@extends('layouts.app')

@section('content')

    @include('layouts.inc.breadcrumb',['title' => 'Create an account'])

    <section class="space-ptb bg-light">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-xl-7 col-lg-8 col-sm-9 col-xs-12">

                    <x-form.error.alerts class="mb-3"/>

                    <form id="user-register-form" method="POST" action="{{ route('account.register') }}" autocomplete="off">
                        @csrf

                        <input type="hidden" name="recaptcha">

                        <div class="card">
                            <div class="card-body">
                                <h4 class="mb-3 mt-3">Profile details</h4>

                                <div class="row mb-2">
                                    <x-form.text
                                        scope="frontend"
                                        class="col-md-6 mb-3"
                                        name="fname"
                                        label="First Name"
                                        :value="old('fname',$user->fname)"
                                        required/>

                                    <x-form.text
                                        scope="frontend"
                                        class="col-md-6 mb-3"
                                        name="lname"
                                        label="Last Name"
                                        :value="old('lname',$user->lname)"
                                        required/>
                                </div>

                                <div class="row mb-2">
                                    <x-form.email
                                        scope="frontend"
                                        class="col-md-6 mb-3"
                                        name="email"
                                        label="Email"
                                        :value="old('email',$user->email)"
                                        required/>

                                    <x-form.text
                                        scope="frontend"
                                        class="col-md-6 mb-3"
                                        name="phone"
                                        label="Phone"
                                        :value="old('phone',$user->phone)"
                                        required/>
                                </div>

                                <div class="row mb-2">
                                    <x-form.password
                                        scope="frontend"
                                        class="col-md-6 mb-3"
                                        name="email"
                                        label="Password"
                                        :value="old('password',$user->password)"
                                        required/>

                                    <x-form.password
                                        scope="frontend"
                                        class="col-md-6 mb-3"
                                        name="phone"
                                        label="Confirm Password"
                                        :value="old('password_confirmation',$user->password_confirmation)"
                                        required/>
                                </div>

                                <x-form.select.country :hasLabel="true" :value="'name'" :default="$user->country"/>

                                <div class="row">
                                    <div class="col-12">
                                        @include('account::user.form.city_of_residence', compact('user'))
                                    </div>
                                </div>

                                <x-form.select.nationality :hasLabel="true" :value="'name'" :default="$user->nationality" required/>
                                <x-form.select.profession :hasLabel="true" :value="'name'" :default="$user->profession" :onRegister="1" :onBanner="0" required/>
                            </div>
                        </div>

                        @include('account::user.form.terms', compact('user'))

                        <div class="form-group text-center">
                            <button class="btn btn-primary g-recaptcha" data-badge="bottomleft" data-sitekey="{{ config('services.google_recaptcha.key') }}" data-callback="onSubmit">Register</button>
                            <button type="submit">Submit</button>
                        </div>

                    </form>

                    <p class="mt-3 text-center d-none"><a href="{{ route('account.login') }}">{{ __('Already registered?') }}</a></p>
                </div>
            </div>
        </div>
    </section>
@endsection


@push('inline-scripts')
    <script>
        const $form = $('#user-register-form');

        validate({
            target: $form,
            rules: {},
            messages: {},
        });

        function onSubmit(token) {
            $form.find('input[name="recaptcha"]').val(token);
            $form.first().submit()
        }
    </script>
@endpush