@extends('layouts.app')

@section('content')
<div class="ht__bradcaump__area" style="background: rgba(0, 0, 0, 0) url({{ asset('assets/images/bg/2.jpg') }}) no-repeat scroll center center / cover ;">
    <div class="ht__bradcaump__wrap_small">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="bradcaump__inner text-center">
                        <h2 class="bradcaump-title">{{ __('member.register') }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

@if (session('verifyemail'))
<div class="container mb-7 mt-5 d-flex justify-content-center">
    <div class="card p-4 shadow-sm" style="width: 100%;">
        <div class="card-body text-center">
            <h2 class="card-title mb-4 text-success">{{ __('auth.verifyemail_title') }}</h2>
            <p class="card-text">{{ __('auth.verifyemail_text') }}</p>
            <p class="card-text">{{ __('auth.verifyemail_text2') }}</p>
            <p class="card-text"><strong>{{ __('member.welcome') }} !</strong></p>
        </div>
    </div>
</div>
@else
<div class="container mb-7">
    <div class="row d-flex justify-content-center align-items-center">
        <div class="py-3 py-md-5 py-xl-8">
            <div class="row">
                <div class="col-12">
                    <div class="mb-5">

                    </div>
                </div>
            </div>
            <div class="row justify-content-center">
                @if ($errors->any())
                <div class="col-md-12 ms-auto me-auto">
                    <div class="alert alert-danger">
                        {{ __('validation.please_fill_required_fields') }}.
                        <ul>
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
                @endif

                <div class="col-12 col-lg-10 col-xl-12">
                    <div class="row gy-5 justify-content-center">
                        <!-- Formulaire d'inscription -->
                        <div class="col-12 col-lg-6">

                            <form class="registrationForm needs-validation" method="POST" action="{{ route('register.submit') }}" novalidate id="register-form">
                                @csrf

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control @error('firstname') is-invalid @enderror" id="firstname" name="firstname" placeholder="" value="{{ old('firstname') }}" required>
                                            <label for="firstname" class="form-label">{{ __('member.firstname') }} *</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control @error('lastname') is-invalid @enderror" id="lastname" name="lastname" placeholder="" value="{{ old('lastname') }}" required>
                                            <label for="lastname" class="form-label">{{ __('member.lastname') }} *</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control @error('phone') is-invalid @enderror" id="phone" name="phone" placeholder="" value="{{ old('phone') }}" required>
                                            <label for="phone" class="form-label">{{ __('member.phone') }} *</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <input type="email" class="form-control @error('email') is-invalid @enderror" id="email" name="email" placeholder="" value="{{ old('email') }}" required>
                                            <label for="email" class="form-label">{{ __('member.email') }} *</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control @error('address_line1') is-invalid @enderror" id="address_line1" name="address_line1" placeholder="" value="{{ old('address_line1') }}" required>
                                            <label for="address_line1" class="form-label">{{ __('member.address.address_line1') }} *</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control @error('postal_code') is-invalid @enderror" id="postal_code" name="postal_code" placeholder="" value="{{ old('postal_code') }}" required>
                                            <label for="postal_code" class="form-label">{{ __('member.postal_code') }} *</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <input type="text" class="form-control @error('city') is-invalid @enderror" id="city" name="city" placeholder="" value="{{ old('city') }}" required>
                                            <label for="city" class="form-label">{{ __('member.city') }} *</label>
                                        </div>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <select name="country" id="country" class="form-select @error('country') is-invalid @enderror" required>
                                                <option value="">{{ __('member.select') }}</option>
                                                @foreach( __('member.country_list') as $country)
                                                <option value="{{ $country }}" {{ old('country') == $country ? 'selected' : '' }}>{{ $country }}</option>
                                                @endforeach
                                            </select>
                                            <label for="country" class="form-label">{{ __('member.country') }} *</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <select name="gender" id="gender" class="form-select @error('gender') is-invalid @enderror" required>
                                                <option value="">{{ __('member.select') }}</option>
                                                <option value="female" {{ old('gender') == 'female' ? 'selected' : '' }}>{{ __('member.gender_female') }}</option>
                                                <option value="male" {{ old('gender') == 'male' ? 'selected' : '' }}>{{ __('member.gender_male') }}</option>
                                                <option value="non-binary" {{ old('gender') == 'non-binary' ? 'selected' : '' }}>{{ __('member.gender_non_binary') }}</option>
                                                <option value="gender-fluid" {{ old('gender') == 'gender-fluid' ? 'selected' : '' }}>{{ __('member.gender_fluid') }}</option>
                                                <option value="agender" {{ old('gender') == 'agender' ? 'selected' : '' }}>{{ __('member.gender_agender') }}</option>
                                                <option value="bigender" {{ old('gender') == 'bigender' ? 'selected' : '' }}>{{ __('member.gender_bigender') }}</option>
                                                <option value="transgender" {{ old('gender') == 'transgender' ? 'selected' : '' }}>{{ __('member.gender_transgender') }}</option>
                                                <option value="intersex" {{ old('gender') == 'intersex' ? 'selected' : '' }}>{{ __('member.gender_intersex') }}</option>
                                                <option value="other" {{ old('gender') == 'other' ? 'selected' : '' }}>{{ __('member.gender_other') }}</option>
                                                <option value="prefer_not_to_answer" {{ old('gender') == 'prefer_not_to_answer' ? 'selected' : '' }}>{{ __('member.gender_prefer_not_to_answer') }}</option>

                                            </select>
                                            <label for="gender" class="form-label">{{ __('member.gender') }} *</label>
                                        </div>
                                    </div>

                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <input type="date" class="form-control @error('birthdate') is-invalid @enderror" id="birthdate" name="birthdate" placeholder="" value="{{ old('birthdate') }}" required>
                                            <label for="birthdate" class="form-label">{{ __('member.birthdate') }} *</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <input type="password" class="form-control @error('password') is-invalid @enderror" id="password" name="password" placeholder="" minlength="12" required>
                                            <label for="password" class="form-label">{{ __('member.password') }} *</label>
                                        </div>
                                        <small class="form-text text-muted d-block">{{ __('member.password_requirements') }}</small>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <div class="form-floating mb-3">
                                            <input type="password" class="form-control @error('password_confirmation') is-invalid @enderror" id="password_confirmation" name="password_confirmation" placeholder="" required>
                                            <label for="password_confirmation" class="form-label">{{ __('member.password_confirmation') }} *</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-12 mb-3">
                                        <div class="form-check">
                                            <input type="checkbox" class="form-check-input" id="newsletter" name="newsletter" value="1" checked>
                                            <label for="newsletter" class="form-label">{{ __('member.newsletter') }}</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="text-center mt-4">
                                    <div class="contact-btn text-center d-grid">
                                        <button type="submit" class="fv-btn btn btn-lg w-100 rounded-2">
                                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true" id="spinner"></span>
                                            {{ __('member.register') }}
                                        </button>
                                    </div>
                                </div>

                            </form>
                        </div>

                        <!-- Séparateur -->
                        <div class="col-12 col-lg-2 d-flex align-items-center justify-content-center gap-3 flex-lg-column">
                            <div class="bg-dark h-100 d-none d-lg-block" style="width: 1px; --bs-bg-opacity: .1;"></div>
                            <div class="bg-dark w-100 d-lg-none" style="height: 1px; --bs-bg-opacity: .1;"></div>
                            <div>{{ __('member.or') }}</div>
                            <div class="bg-dark h-100 d-none d-lg-block" style="width: 1px; --bs-bg-opacity: .1;"></div>
                            <div class="bg-dark w-100 d-lg-none" style="height: 1px; --bs-bg-opacity: .1;"></div>
                        </div>

                        <!-- Section de connexion -->
                        <div class="col-12 col-lg-4 d-flex align-items-center">
                            <div class="d-flex gap-3 flex-column w-100">
                                <div>
                                    <h2 class="mb_8">{{ __('member.already_have_account') }}</h2>
                                    <p class="text-secondary mt-3">{{ __('member.already_customer_subtitle') }}</p>
                                    <div class="contact-btn mt-3 d-grid">
                                        <a href="{{ route('login') }}" class="fv-btn btn btn-lg">{{ __('member.login') }}</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endif
@endsection

@section('scripts')
<script>
    // Initialisation du spinner de soumission
    initSubmitSpinner('register-form', "{{ __('member.loading') }}...");
</script>
@endsection