@extends('auth.layouts.master')

@section('title', 'Register')

@section('content')
<div class="card-inner">
    <div class="nk-block-head text-center">
        <div class="nk-block-head-content">
            <div style="margin-bottom: 16px;">
                <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
                    <rect x="8" y="16" width="36" height="32" rx="4" stroke="#0047ba" stroke-width="2.2" fill="none"/>
                    <path d="M8 24h36" stroke="#0047ba" stroke-width="1.8"/>
                    <rect x="12" y="19" width="5" height="3" rx="1" stroke="#0047ba" stroke-width="1.2"/>
                    <circle cx="22" cy="36" r="5" stroke="#0047ba" stroke-width="1.8" fill="none"/>
                    <path d="M14 48c0-4.418 3.582-8 8-8s8 3.582 8 8" stroke="#0047ba" stroke-width="1.8" stroke-linecap="round" fill="none"/>
                    <path d="M36 28h8M36 32h6" stroke="#0047ba" stroke-width="1.5" stroke-linecap="round" opacity="0.5"/>
                    <circle cx="50" cy="20" r="10" stroke="#0047ba" stroke-width="2" fill="rgba(0,71,186,0.06)"/>
                    <line x1="50" y1="15" x2="50" y2="25" stroke="#0047ba" stroke-width="2.2" stroke-linecap="round"/>
                    <line x1="45" y1="20" x2="55" y2="20" stroke="#0047ba" stroke-width="2.2" stroke-linecap="round"/>
                </svg>
            </div>
            <h4 class="nk-block-title">{{ __('Create an Account') }}</h4>
            <div class="nk-block-des mt-2">
                @if($user_counts!=0)
                <p>{{ __('Sign up and get started with your free account') }}</p>
                @endif
            </div>
            @if($user_counts==0)
            <div class="alert alert-fill alert-primary alert-icon mt-3">
                <em class="icon ni ni-user"></em> {{ __("Register a regular admin account first.") }}
            </div>
            @endif
        </div>
    </div>
    @include('auth.partials.error')
    <form action="{{ route('auth.register') }}" autocomplete="off" method="POST" id="registerForm" class="form-validate is-alter" autocomplete="off">
        <div class="form-group">
            <label class="form-label" for="full-name">{{ __('Full Name') }}</label>
            <div class="form-control-wrap">
                <div class="form-icon form-icon-left">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="color:#8094ae"><circle cx="12" cy="8" r="4.5" stroke="currentColor" stroke-width="1.8" fill="none"/><path d="M4 21c0-4.418 3.582-8 8-8s8 3.582 8 8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" fill="none"/></svg>
                </div>
                <input type="text" id="full-name" name="name" value="{{ old('name') }}" class="form-control form-control-lg{{ ($errors->has('name')) ? ' error' : '' }}" style="padding-left: 44px;" placeholder="{{ __('Enter your full name') }}" minlength="3" data-msg-required="{{ __('Required.') }}" data-msg-minlength="{{ __('At least :num chars.', ['num' => 3]) }}" required>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label" for="email-address">{{ __('Email Address') }}</label>
            <div class="form-control-wrap">
                <div class="form-icon form-icon-left">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="color:#8094ae"><rect x="2" y="4" width="20" height="16" rx="3" stroke="currentColor" stroke-width="1.8" fill="none"/><path d="M2 7l10 6 10-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
                </div>
                <input type="email" id="email-address" name="email" value="{{ old('email') }}" class="form-control form-control-lg{{ ($errors->has('email')) ? ' error' : '' }}" style="padding-left: 44px;" placeholder="{{ __('Enter your email address') }}" autocomplete="off" data-msg-email="{{ __('Enter a valid email.') }}" data-msg-required="{{ __('Required.') }}" required>
            </div>
        </div>
        <div class="form-group">
            <label class="form-label" for="passcode">{{ __('Password') }}</label>
            <div class="form-control-wrap">
                <div class="form-icon form-icon-left">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" style="color:#8094ae"><rect x="5" y="11" width="14" height="10" rx="2.5" stroke="currentColor" stroke-width="1.8" fill="none"/><path d="M8 11V8a4 4 0 018 0v3" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" fill="none"/><circle cx="12" cy="16" r="1.5" fill="currentColor"/></svg>
                </div>
                <a tabindex="-1" href="#" class="form-icon form-icon-right passcode-switch" data-target="passcode">
                    <em class="passcode-icon icon-show icon ni ni-eye-off"></em>
                    <em class="passcode-icon icon-hide icon ni ni-eye"></em>
                </a>
                <input name="password" id="passcode" type="password" autocomplete="new-password" class="form-control form-control-lg" style="padding-left: 44px;" placeholder="{{ __('Create a password') }}" minlength="6" data-msg-required="{{ __('Required.') }}" data-msg-minlength="{{ __('At least :num chars.', ['num' => 6]) }}" required>
            </div>
        </div>
        @if($user_counts!=0)
        <div class="form-group">
            <div class="custom-control custom-control-xs custom-checkbox">
                <input type="checkbox" name="confirmation" class="custom-control-input{{ $errors->has('confirmation') ? ' error' : ''}}" id="checkbox" data-msg-required=" {{ __("You should accept our terms.") }}" required>
                <label class="custom-control-label" for="checkbox">{!! __('I have agree to the :terms', ['terms' => get_page_link('terms', __("Terms & Condition"), true)]) !!}</label>
            </div>
        </div>
        @endif

        @if(has_restriction())
        <div class="text-danger text-center font-italic small mb-2">
            {!! 'You are about to register into demo application to see the platform.' !!}
        </div>
        @endif

        <div class="form-group">
            @csrf
            @if(has_recaptcha())
                <input type="hidden" id="recaptcha" value="" name="recaptcha">
            @endif
            @if($user_counts==0)
            <input type="hidden" name="confirmation" value="on">
            @endif
            <button class="btn btn-lg btn-primary btn-block">{{ __('Create Account') }}</button>
        </div>
    </form>
    @if($user_counts > 0)
    <div class="form-note-s2 text-center pt-4">
        {{ __('Already have an account?') }} <a href="{{ route('auth.login.form') }}"><strong>{{ __('Sign in instead') }}</strong></a>
    </div>
    @endif
    @include('auth.partials.socials')
</div>
@endsection

@if (has_recaptcha())
@push('scripts')
<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('{{recaptcha_key("site")}}', {action: 'register'}).then(function(token) {
            document.getElementById('recaptcha').value=token;
        });
    });
</script>
@endpush
@endif