@extends('layouts.app')
@section('title', 'Inscrition')
@section('content')
<script src="https://www.google.com/recaptcha/enterprise.js?render={{env('RECAPTCHA_SITE_KEY')}}"></script>
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card my-5">
                <div class="card-header px-5">
                    <h3>Créer un compte</h3>
                </div>
                <div class="card-body px-5 pt-3 pb-4">
                    <form method="POST" id ="form-register" action="{{ route('register') }}">
                        @csrf
                        <input type="hidden" name="g-recaptcha-response">
                        <!-- Name -->
                        <div class="mb-3">
                            <p for="name" class="form-label">{{ __('Nom') }}
                            <input id="name" class="form-control" type="text" name="name" :value="old('name')" required autofocus autocomplete="name">
                            </p>
                            @if ($errors->has('name'))
                            <div class="mt-2 text-danger">
                                {{ $errors->first('name') }}
                            </div>
                            @endif
                        </div>

                        <!-- Email Address -->
                        <div class="mb-3">
                            <p for="email" class="form-label">{{ __('Email') }}
                            <input id="email" class="form-control" type="email" name="email" :value="old('email')" required autocomplete="username">
                            </p>
                            @if ($errors->has('email'))
                            <div class="mt-2 text-danger">
                                {{ $errors->first('email') }}
                            </div>
                            @endif
                        </div>

                        <!-- Password -->
                        <div class="mb-3">
                            <p for="password" class="form-label">{{ __('Mot de passe') }}
                            <input id="password" class="form-control" type="password" name="password" required autocomplete="new-password">
                            </p>
                            @if ($errors->has('password'))
                            <div class="mt-2 text-danger">
                                {{ $errors->first('password') }}
                            </div>
                            @endif
                        </div>

                        <!-- Confirm Password -->
                        <div class="mb-3">
                            <p for="password_confirmation" class="form-label">{{ __('Confirm Password') }}
                            <input id="password_confirmation" class="form-control" type="password" name="password_confirmation" required autocomplete="new-password">
                            </p>
                            @if ($errors->has('password_confirmation'))
                            <div class="mt-2 text-danger">
                                {{ $errors->first('password_confirmation') }}
                            </div>
                            @endif
                        </div>

                        <div class="d-flex justify-content-end mt-4">
                            <a class="text-decoration-none me-4" href="{{ route('login') }}">
                                {{ __('Déjà inscrit?') }}
                            </a>
                            <button type="submit" class="g-recaptcha btn btn-primary" data-sitekey="{{ env('RECAPTCHA_SITE_KEY') }}" data-callback='onSubmit' data-action='register'>{{ __('inscription') }}</button>
                            <script>
                            function onSubmit(token) {
                                document.getElementById("form-register").submit();
                            }
                        </script>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection