@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">

                    @error('recaptcha')
                    <p class="alert alert-danger">{{ $errors->first('recaptcha') }}</p>
                    @enderror

                    <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">
                                    <div class="col-12 col-lg-6">
                                        @include('account::user.form.fname', compact('user'))
                                    </div>
                                    <div class="col-12 col-lg-6">
                                        @include('account::user.form.lname', compact('user'))
                                    </div>
                                </div>

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

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

                                <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"/>

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

                            </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>
                        </div>

                    </form>

                    @push('inline-scripts')
                        <script>
                            function onSubmit(token) {

                                let $form = $('#user-register-form');

                                $form.find('input[name="recaptcha"]').val(token);

                                $form.first().submit()
                            }
                        </script>
                    @endpush

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

                </div>
            </div>
        </div>
    </section>
@endsection