@php
    $countries = config('member_registration.countries', []);
    $training = $training ?? null;
    if ($training) {
        $loginRedirect = route('training.register', ['slug' => $training->slug]);
        if (request()->filled('session')) {
            $loginRedirect .= (str_contains($loginRedirect, '?') ? '&' : '?').'session='.urlencode((string) request('session'));
        }
    } else {
        $loginRedirect = route('member.login.show');
    }
    $step2Email = $registerVerifyEmail ?? null;
    $registerVerifyTokenValue = $registerVerifyToken ?? null;
    $showRegisterStep2 = $step2Email && $registerVerifyTokenValue;
    $step1NeutralAck = session('member_register_step1_neutral_ack');
    $defaultCountry = old('country', 'BE');
    $defaultDial = old('phone_dial_code', $countries[$defaultCountry]['dial'] ?? '+32');
    $sessionPrefForEmail = old('session_pref', request('session'));
@endphp

<section class="account-page-area section-gap-equal">
    <div class="container position-relative">
        <div class="row g-5 justify-content-center">
            {{-- Connexion --}}
            <div class="col-lg-5" id="login-panel">
                <div class="login-form-box">
                    <h3 class="title">{{ __('member.login.title') }}</h3>
                    <p>{{ __('member.login.subtitle') }} <a href="#register-panel">{{ __('member.login.subtitle_link') }}</a></p>
                    @error('login')
                        <div class="alert alert-danger mb-3" role="alert">{{ $message }}</div>
                    @enderror
                    <form method="post" action="{{ route('member.login') }}" id="member-login-form">
                        @csrf
                        <input type="hidden" name="redirect_to" value="{{ $loginRedirect }}">
                        <div class="form-group">
                            <label for="member-log-email">{{ __('member.login.email') }}*</label>
                            <input type="email" name="email" id="member-log-email" value="{{ old('email') }}" placeholder="{{ __('member.login.email') }}" required>
                        </div>
                        <div class="form-group">
                            <label for="member-log-password">{{ __('member.login.password') }}*</label>
                            <div class="sfer-password-field">
                                <input type="password" name="password" id="member-log-password" placeholder="{{ __('member.login.password') }}" required>
                                <span class="password-show" role="button" tabindex="0" title="{{ __('member.login.toggle_password_visibility') }}" aria-label="{{ __('member.login.toggle_password_visibility') }}"><i class="icon-76" aria-hidden="true"></i></span>
                            </div>
                        </div>
                        <div class="form-group chekbox-area">
                            <div class="edu-form-check">
                                <input type="checkbox" name="remember" id="member-remember" value="1" {{ old('remember') ? 'checked' : '' }}>
                                <label for="member-remember">{{ __('member.login.remember') }}</label>
                            </div>
                            <a href="{{ route('member.password.request') }}" class="password-reset">{{ __('member.login.forgot') }}</a>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="edu-btn btn-medium d-inline-flex align-items-center justify-content-center gap-2" id="member-login-submit-btn">
                                <span id="member-login-submit-label">{{ __('member.login.submit') }} <i class="icon-4"></i></span>
                                <span id="member-login-submit-spinner" class="d-none align-items-center gap-2">
                                    <span class="spinner-border spinner-border-sm text-white" role="status" aria-label="{{ __('member.login.submit_loading') }}"></span>
                                    <span>{{ __('member.login.submit_loading') }}</span>
                                </span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>

            {{-- Inscription --}}
            <div class="col-lg-5" id="register-panel">
                <div class="login-form-box registration-form">
                    @if($step1NeutralAck)
                        <h3 class="title">{{ __('member.register.step1_neutral_title') }}</h3>
                        <div class="alert alert-info">
                            <p class="mb-2">{{ __('member.register.step1_neutral_text') }}</p>
                            <a href="{{ route('member.password.request') }}" class="edu-btn btn-medium">{{ __('member.register.email_taken_reset') }} <i class="icon-4"></i></a>
                        </div>
                        <p class="mt-3 mb-0"><a href="{{ url()->current() }}@if(request()->getQueryString())?{{ request()->getQueryString() }}@endif">{{ __('member.register.email_taken_back') }}</a></p>
                    @elseif($showRegisterStep2)
                        <h3 class="title">{{ __('member.register.step2_title') }}</h3>
                        <p class="text-muted mb-2">{{ __('member.register.step2_email_locked', ['email' => e($step2Email)]) }}</p>
                        <p class="small mb-3"><a href="{{ $loginRedirect }}">{{ __('member.register.step2_restart') }}</a></p>
                        <form method="post" action="{{ route('member.register.complete') }}" id="member-register-complete-form">
                            @csrf
                            <input type="hidden" name="register_verify_token" value="{{ e($registerVerifyTokenValue) }}">
                            <input type="hidden" name="register_email" value="{{ e($step2Email) }}">

                            <div class="form-group">
                                <label for="reg-firstname">{{ __('member.fields.firstname') }}*</label>
                                <input type="text" name="firstname" id="reg-firstname" value="{{ old('firstname') }}" required>
                            </div>
                            <div class="form-group">
                                <label for="reg-lastname">{{ __('member.fields.lastname') }}*</label>
                                <input type="text" name="lastname" id="reg-lastname" value="{{ old('lastname') }}" required>
                            </div>
                            <div class="form-group">
                                <label for="reg-birthdate">{{ __('member.fields.birthdate') }}*</label>
                                <input type="date" name="birthdate" id="reg-birthdate" value="{{ old('birthdate') }}" required>
                            </div>

                            <div class="form-group">
                                <label for="profession">{{ __('member.fields.profession') }}*</label>
                                <select name="profession" class="form-select form-select-lg" id="profession" required>
                                    <option value="">{{ __('member.select_placeholder') }}</option>
                                    @foreach(__('member.profession_options') as $val => $label)
                                        <option value="{{ $val }}" {{ old('profession') === $val ? 'selected' : '' }}>{{ $label }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="form-group" id="professionautre" style="{{ old('profession') === 'Autre' ? '' : 'display:none;' }}">
                                <label for="profautre">{{ __('member.fields.profession_other') }}*</label>
                                <input type="text" name="profession_other" id="profautre" value="{{ old('profession_other') }}" class="form-control" placeholder="{{ __('member.fields.profession_other') }}">
                            </div>

                            <div class="form-group">
                                <label for="address_line">{{ __('member.fields.address_line') }}*</label>
                                <input type="text" name="address_line" id="address_line" value="{{ old('address_line') }}" required>
                            </div>
                            <div class="row row--10">
                                <div class="form-group col-md-4">
                                    <label for="zipcode">{{ __('member.fields.zipcode') }}*</label>
                                    <input type="text" name="zipcode" id="zipcode" value="{{ old('zipcode') }}" required>
                                </div>
                                <div class="form-group col-md-8">
                                    <label for="city">{{ __('member.fields.city') }}*</label>
                                    <input type="text" name="city" id="city" value="{{ old('city') }}" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="member_country">{{ __('member.fields.country') }}*</label>
                                <select name="country" id="member_country" class="form-select form-select-lg" required>
                                    @foreach($countries as $code => $row)
                                        <option value="{{ $code }}" data-dial="{{ $row['dial'] }}" {{ old('country', 'BE') === $code ? 'selected' : '' }}>
                                            {{ __('member.countries.'.$code) }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>

                            <input type="hidden" name="phone_dial_code" id="phone_dial_code" value="{{ $defaultDial }}">
                            <div class="form-group">
                                <label>{{ __('member.fields.phone_local') }}*</label>
                                <div class="input-group">
                                    <span class="input-group-text" id="dial-display">{{ $defaultDial }}</span>
                                    <input type="text" name="phone_local" id="phone_local" value="{{ old('phone_local') }}" class="form-control" inputmode="numeric" autocomplete="tel-national" required>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="edu-form-check">
                                    <input type="checkbox" name="has_vat_number" id="has_vat_number" value="1" {{ old('has_vat_number') ? 'checked' : '' }}>
                                    <label for="has_vat_number">{{ __('member.fields.has_vat') }}</label>
                                </div>
                            </div>
                            <div id="vat-fields" class="{{ old('has_vat_number') ? '' : 'd-none' }}">
                                <div class="form-group">
                                    <label for="tva_number">{{ __('member.fields.tva_number') }}*</label>
                                    <input type="text" name="tva_number" id="tva_number" value="{{ old('tva_number') }}" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label class="d-block">{{ __('member.fields.vat_liable') }}*</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="vat_liable" id="vat_yes" value="1" @checked(old('vat_liable', '1') === '1')>
                                        <label class="form-check-label" for="vat_yes">{{ __('member.fields.vat_subject') }}</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="vat_liable" id="vat_no" value="0" @checked(old('vat_liable') === '0')>
                                        <label class="form-check-label" for="vat_no">{{ __('member.fields.vat_exempt') }}</label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="reg-password">{{ __('member.fields.password') }}*</label>
                                <div class="sfer-password-field">
                                    <input type="password" name="password" id="reg-password" autocomplete="new-password" required>
                                    <span class="password-show" role="button" tabindex="0" title="{{ __('member.login.toggle_password_visibility') }}" aria-label="{{ __('member.login.toggle_password_visibility') }}"><i class="icon-76" aria-hidden="true"></i></span>
                                </div>
                                <ul class="list-unstyled small mt-2 mb-0" id="password-rules">
                                    <li data-rule="min" class="text-muted"><i class="icon-4 me-1"></i>{{ __('member.password_rules.min') }}</li>
                                    <li data-rule="upper" class="text-muted"><i class="icon-4 me-1"></i>{{ __('member.password_rules.upper') }}</li>
                                    <li data-rule="lower" class="text-muted"><i class="icon-4 me-1"></i>{{ __('member.password_rules.lower') }}</li>
                                    <li data-rule="number" class="text-muted"><i class="icon-4 me-1"></i>{{ __('member.password_rules.number') }}</li>
                                    <li data-rule="symbol" class="text-muted"><i class="icon-4 me-1"></i>{{ __('member.password_rules.symbol') }}</li>
                                    <li data-rule="predictable" class="text-muted"><i class="icon-4 me-1"></i>{{ __('member.password_rules.predictable') }}</li>
                                </ul>
                            </div>
                            <div class="form-group">
                                <label for="reg-password-confirmation">{{ __('member.fields.password_confirmation') }}*</label>
                                <div class="sfer-password-field">
                                    <input type="password" name="password_confirmation" id="reg-password-confirmation" autocomplete="new-password" required>
                                    <span class="password-show" role="button" tabindex="0" title="{{ __('member.login.toggle_password_visibility') }}" aria-label="{{ __('member.login.toggle_password_visibility') }}"><i class="icon-76" aria-hidden="true"></i></span>
                                </div>
                            </div>

                            <div class="form-group chekbox-area">
                                <div class="edu-form-check">
                                    <input type="checkbox" name="terms" id="terms" value="1" {{ old('terms') ? 'checked' : '' }} required>
                                    <label for="terms">{!! __('member.terms_html', ['url' => route('practical_info')]) !!} *</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <input type="hidden" name="newsletter_subscribed" value="0">
                                <div class="edu-form-check">
                                    <input type="checkbox" name="newsletter_subscribed" id="newsletter_subscribed" value="1" {{ old('newsletter_subscribed', '1') === '1' ? 'checked' : '' }}>
                                    <label for="newsletter_subscribed">{{ __('member.fields.newsletter') }}</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="edu-btn btn-medium d-inline-flex align-items-center justify-content-center gap-2" id="member-register-complete-btn">
                                    <span id="member-register-complete-label">{{ __('member.register.complete_submit') }} <i class="icon-4"></i></span>
                                    <span id="member-register-complete-spinner" class="d-none align-items-center gap-2">
                                        <span class="spinner-border spinner-border-sm text-white" role="status" aria-label="{{ __('member.register.complete_submit_loading') }}"></span>
                                        <span>{{ __('member.register.complete_submit_loading') }}</span>
                                    </span>
                                </button>
                            </div>
                        </form>
                    @else
                        <h3 class="title">{{ __('member.register.title') }}</h3>
                        <p>{{ __('member.register.subtitle') }} <a href="#login-panel">{{ __('member.register.subtitle_link') }}</a></p>
                        <p class="small text-muted">{{ __('member.register.step1_help') }}</p>
                        <form method="post" action="{{ route('member.register.email') }}" id="member-register-step1-form">
                            @csrf
                            <input type="hidden" name="training_slug" value="{{ old('training_slug', $training?->slug ?? '') }}">
                            @if(filled($sessionPrefForEmail))
                            <input type="hidden" name="session_pref" value="{{ e((string) $sessionPrefForEmail) }}">
                            @endif
                            <div class="form-group">
                                <label for="reg-email-only">{{ __('member.login.email') }}*</label>
                                <input type="email" name="email" id="reg-email-only" value="{{ old('email') }}" placeholder="{{ __('member.login.email') }}" required>
                            </div>
                            <div class="form-group">
                                <button type="submit" class="edu-btn btn-medium d-inline-flex align-items-center justify-content-center gap-2" id="member-register-step1-btn">
                                    <span id="member-step1-btn-label">{{ __('member.register.step1_submit') }} <i class="icon-4"></i></span>
                                    <span id="member-step1-btn-spinner" class="d-none align-items-center gap-2">
                                        <span class="spinner-border spinner-border-sm text-white" role="status" aria-label="{{ __('member.register.step1_loading') }}"></span>
                                        <span>{{ __('member.register.step1_loading') }}</span>
                                    </span>
                                </button>
                            </div>
                        </form>
                    @endif
                </div>
            </div>
        </div>
        <ul class="shape-group" aria-hidden="true">
            <li class="shape-1 scene"><img data-depth="2" src="{{ asset('assets/images/about/shape-07.png') }}" alt=""></li>
            <li class="shape-2 scene"><img data-depth="-2" src="{{ asset('assets/images/about/shape-13.png') }}" alt=""></li>
            <li class="shape-3 scene"><img data-depth="2" src="{{ asset('assets/images/counterup/shape-02.png') }}" alt=""></li>
        </ul>
    </div>
</section>