@extends('layouts.app')

@section('content')

    <section style="overflow-x: hidden;">
        <div class="container-fluid">
            <div class="row text-center justify-content-center">
                <h1 class="text-center welcome-2 pt-5 pb-3">15 minutes, montre en main, pour passer à l'investissement augmenté</h1>
            </div>
            <div class="row text-center justify-content-center m-2">
                <svg width="3em" height="3em" viewBox="0 0 16 16" class="bi bi-people" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M15 14s1 0 1-1-1-4-5-4-5 3-5 4 1 1 1 1h8zm-7.978-1h7.956a.274.274 0 0 0 .014-.002l.008-.002c-.002-.264-.167-1.03-.76-1.72C13.688 10.629 12.718 10 11 10c-1.717 0-2.687.63-3.24 1.276-.593.69-.759 1.457-.76 1.72a1.05 1.05 0 0 0 .022.004zM11 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm3-2a3 3 0 1 1-6 0 3 3 0 0 1 6 0zM6.936 9.28a5.88 5.88 0 0 0-1.23-.247A7.35 7.35 0 0 0 5 9c-4 0-5 3-5 4 0 .667.333 1 1 1h4.216A2.238 2.238 0 0 1 5 13c0-1.01.377-2.042 1.09-2.904.243-.294.526-.569.846-.816zM4.92 10c-1.668.02-2.615.64-3.16 1.276C1.163 11.97 1 12.739 1 13h3c0-1.045.323-2.086.92-3zM1.5 5.5a3 3 0 1 1 6 0 3 3 0 0 1-6 0zm3-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/></svg>
            </div>
            <div class="row text-center justify-content-center pb-5">
                <div class="container-fluid">
                    <div class="col-8 justify-content-center mx-auto">
                        <form class="mx-auto" method="POST" action="{{ route('register') }}" style="max-width:50%; padding-top: 30px">
                            @csrf

                            <div class="form-group row">
                                <label for="firstname" class="col-md-4 col-form-label text-md-right fts-14 font-weight-bold">Prénom</label>

                                <div class="col-md-8 align-self-center">
                                    <input id="firstname" type="text" placeholder="Prénom" class="form-control @error('firstname') is-invalid @enderror" name="firstname" value="{{ old('firstname') }}" required autocomplete="firstname" autofocus>
                                    @error('firstname')
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $message }}</strong>
                                        </span>
                                    @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="lastname" class="col-md-4 col-form-label text-md-right fts-14 font-weight-bold">Nom</label>

                                <div class="col-md-8 align-self-center">
                                    <input id="lastname" type="text" placeholder="Nom" class="form-control @error('lastname') is-invalid @enderror" name="lastname" value="{{ old('lastname') }}" required autocomplete="lastname">

                                        @error('lastname')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                </div>
                            </div>

                            <div class="form-group row" >
                                <label for="email" class="col-md-4 col-form-label text-md-right fts-14 font-weight-bold">Adresse e-mail</label>

                                <div class="col-md-8 align-self-center">
                                    <input id="email" type="email" placeholder="Email" class="form-control @error('email') is-invalid @enderror" name="email" value="{{ old('email') }}" required autocomplete="email">

                                        @error('email')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                </div>
                            </div>

                            <div class="form-group row align-self-center">
                                <label for="phone" class="col-md-4 col-form-label text-md-right fts-14 font-weight-bold">Téléphone</label>

                                <div class="col-md-8 align-self-center">
                                    <input id="phone" type="tel" placeholder="Téléphone" class="form-control @error('phone') is-invalid @enderror" name="phone" value="{{ old('phone') }}" required autocomplete="phone">

                                        @error('phone')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                </div>
                            </div>

                            <div class="form-group row">
                                <label for="password" class="col-md-4 col-form-label text-md-right fts-14 font-weight-bold">Mot de passe</label>

                                <div class="col-md-8 align-self-center">
                                    <input id="password" type="password" placeholder="Mot de passe" class="form-control @error('password') is-invalid @enderror" name="password" required autocomplete="new-password">

                                        @error('password')
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $message }}</strong>
                                            </span>
                                        @enderror
                                </div>
                            </div>

                            <div class="form-group row align-self-center">
                                <label for="password-confirm align-self-center" class="col-md-4 col-form-label text-md-right fts-14 font-weight-bold">Confirmation du mot de passe</label>

                                <div class="col-md-8 align-self-center">
                                    <input id="password-confirm" type="password" placeholder="Confirmer mot de passe" class="form-control" name="password_confirmation" required autocomplete="new-password">
                                </div>
                            </div>


                            {{-- <div class="form-group row align-self-center">
                                <input type="hidden" class="form-control @error('g-recaptcha-response') is-invalid @enderror " name="captcha">
                                <div class="@error('g-recaptcha-response') border border-danger rounded @enderror ">
                                    {!! htmlFormSnippet() !!}
                                </div>
                                <div class="invalid-feedback">
                                    {{ $errors->first('g-recaptcha-response') }}
                                </div>
                            </div> --}}

                            <div class="col-6 mx-auto">
                                <button type="submit" class="btn-myfo-blue m-4">
                                    C'est parti !
                                </button>
                            </div>


                            <input id="user_type" type="hidden" name="user_type" value="mass_market">
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

@endsection

{{-- <script src='https://www.google.com/recaptcha/api.js?render={{ env('RECAPTCHA_SITE_KEY') }}&onload=onloadCallback&render=explicit'></script>
   	<script>
        function onloadCallback() {
	      grecaptcha.ready(function() {
	        grecaptcha.execute('{{ env('RECAPTCHA_SITE_KEY') }}', {
	          action: 'homepage'
	        }).then(function (token) {
	        	var recaptchaResponse = document.getElementById('recaptchaResponse');
	        	recaptchaResponse.value = token;
	        });
	      });
	    }
</script> --}}