@extends('theme::layout')

@section('title', __('Créer un compte'))
@section('description', __('Créer un compte'))

@section('content')
    <div class="container pb-5 pt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <h1 class="fw-bold text-tertiary text-uppercase text-center">
                    {{ __('S\'inscrire au club :company', ['company' => $settingsGlobal->company]) }}</h1>

                <form class="container-fluid" method="POST" action="{{ route('fo.register') }}">
                    @csrf

                    <div class="row justify-content-center mb-3">
                        <div class="col-md-8">
                            <span class="h2 d-block text-center">{{ __("Merci de renseigner les champs ci-dessous\u{00A0}:") }}</span>
                        </div>
                    </div>

                    {{-- PERSONAL INFO --}}
                    @include('theme::auth.partials.form-personal-info', [
                        'colClasses' => 'col col-md-10 col-lg-8 py-2',
                    ])

                    {{-- ADDRESS INFO --}}
                    @include('theme::auth.partials.form-address-info', [
                        'colClasses' => 'col col-md-10 col-lg-8 py-2',
                    ])

                    {{-- SECURITY INFO --}}
                    @include('theme::auth.partials.form-security-info')

                    {{-- CHECKBOXES --}}
                    <div class="row justify-content-center">
                        <div class="col col-md-8 px-0 py-2">
                            <div class="form-check text-start">
                                <input id="register-optin" name="opt_in" type="checkbox" @class([
                                    'form-check-input',
                                    'me-1',
                                    'is-invalid' => $errors->has('opt_in'),
                                ])>
                                <label class="form-check-label fw-bold w-fit" for="register-optin">
                                    {{ __('Je souhaite m\'inscrire à la newsletter') }} {{ $settingsGlobal->company }}
                                </label>
                            </div>
                            @foreach ($errors->get('opt_in') as $message)
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @endforeach
                        </div>
                    </div>
                    <div class="row justify-content-center mb-5">
                        <div class="col col-md-8 px-0 py-2">
                            <div class="form-check">
                                <input id="register-ok-cgv" name="ok_cgv" type="checkbox" @class([
                                    'form-check-input',
                                    'me-1',
                                    'is-invalid' => $errors->has('ok_cgv'),
                                ]) required />
                                <label class="form-check-label fw-bold w-fit" for="register-ok-cgv">
                                    {!! clean(
                                        __('J\'ai lu et accepte le :a règlement du jeu :enda', [
                                            'a' => '<a href="' . route('fo.reglement') . '" target="_blank">',
                                            'enda' => '</a>',
                                        ]),
                                    ) !!}
                                </label>
                            </div>
                            @foreach ($errors->get('ok_cgv') as $message)
                                <div class="invalid-feedback d-block">{{ $message }}</div>
                            @endforeach
                        </div>
                    </div>

                    <div class="row mb-2">
                        <div class="col-md-6 offset-md-4">
                            <button class="btn btn-lg btn-tertiary" type="submit">
                                {{ __('Register') }}
                            </button>
                        </div>
                    </div>

                    <div class="row mb-0">
                        <div class="col-md-6 offset-md-4">
                            <span class="fw-bold">{{ __('* champs obligatoires') }}</span>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection