@extends('layouts.auth-master')

@section('content')


<div id="registerForm" class="mt-0"> 
    <form method="post" action="{{ route('register.perform') }}" class="d-inline ">    
        @csrf
    <div class="mb-3 col-sm-12  mx-auto">
        <input type="hidden" name="_token" value="{{ csrf_token() }}" />
                <h1 class="h3 mb-3 fw-normal">{{ __('menu.createaccount')}}</h1>
        
    </div>
    <div class="mb-3 col-sm-10 col-md-10 col-xl-8 mx-auto">
    @include('layouts.partials.messages')
    <div class="mt-4 ">
        <div class="form-group form-floating  mb-2">
            <input type="email" class="form-control item pt-4 pb-1" name="email" value="{{ old('email') }}" placeholder="name@example.com" required="required" autofocus>
            <label for="floatingEmail">{{ __('menu.email')}}</label>
            @if ($errors->has('email'))
                <span class="text-danger text-left">{{ $errors->first('email') }}</span>
            @endif
        </div>

        <!-- div class="form-group form-floating mb-3">
            <input type="text" class="form-control pt-4 pb-1" name="username" value="{{ old('username') }}" placeholder="Username" required="required" autofocus>
            <label for="floatingName">Username</label>
            @if ($errors->has('username'))
                <span class="text-danger text-left">{{ $errors->first('username') }}</span>
            @endif
        </div -->
        
        <div class="form-group form-floating mb-3">
            <input type="password" class="form-control pt-4 pb-1" name="password" value="{{ old('password') }}" placeholder="Password" required="required">
            <label for="floatingPassword">{{ __('menu.password')}}</label>
            @if ($errors->has('password'))
                <span class="text-danger text-left">{{ $errors->first('password') }}</span>
            @endif
        </div>

        <div class="form-group form-floating mb-3">
            <input type="password" class="form-control pt-4 pb-1" name="password_confirmation" value="{{ old('password_confirmation') }}" placeholder="Confirm Password" required="required">
            <label for="floatingConfirmPassword">{{ __('menu.confirmpassword')}} </label>
            @if ($errors->has('password_confirmation'))
                <span class="text-danger text-left">{{ $errors->first('password_confirmation') }}</span>
            @endif
        </div>
        <div class="form-group form-floating mb-3">
            <!-- Terms and Conditions Checkbox -->
        <div class="form mb-3">
            <input class="form-check-input p-2 me-2  @error('terms') is-invalid @enderror" 
                type="checkbox" 
                name="terms" 
                id="terms" 
                required>

            <label class="form-check-label" for="terms">
                I accept the <a href="{{ url('terms') }}" target="_blank">Terms and Conditions</a>.
            </label>

            @error('terms')
                <div class="invalid-feedback">{{ $message }}</div>
            @enderror
        </div>
        </div>
        <button class="w-100 btn btn-lg btn-primary" type="submit">{{ __('menu.createaccount')}}</button>
    </div>
  <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response">

    </form>
@endsection


@push('scripts')

<script src="https://www.google.com/recaptcha/api.js?render={{ env('RECAPTCHA_SITE_KEY') }}"></script>
<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', {action: 'register'}).then(function(token) {
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
</script>

@endpush