@extends('layouts.auth')

@section('content')
<h1 class="qm-auth-title">{{ t_raw('auth.register_title') }}</h1>
<p class="qm-auth-sub">{{ t_raw('auth.register_sub') }}</p>

<form method="post" action="{{ route('register') }}" class="qm-auth-form" data-validate novalidate>
    @csrf
    <div class="mb-3">
        <label for="first_name" class="form-label">{{ t_raw('auth.first_name') }}</label>
        <input type="text" id="first_name" name="first_name" class="form-control" value="{{ old('first_name') }}" data-label="{{ t_raw('auth.first_name') }}" autocomplete="given-name" maxlength="60" required autofocus placeholder="{{ t_raw('auth.first_name_placeholder') }}">
    </div>
    <div class="mb-3">
        <label for="last_name" class="form-label">{{ t_raw('auth.last_name') }}</label>
        <input type="text" id="last_name" name="last_name" class="form-control" value="{{ old('last_name') }}" data-label="{{ t_raw('auth.last_name') }}" autocomplete="family-name" maxlength="60" required placeholder="{{ t_raw('auth.last_name_placeholder') }}">
    </div>
    <div class="mb-3">
        <label for="email" class="form-label">{{ t_raw('auth.email') }}</label>
        <input type="email" id="email" name="email" class="form-control" value="{{ old('email') }}" data-label="{{ t_raw('auth.email') }}" autocomplete="email" required placeholder="{{ t_raw('auth.email_placeholder') }}">
    </div>
    <div class="mb-3">
        <label for="phone" class="form-label">{{ t_raw('auth.phone') }} <span class="text-muted">{{ t_raw('common.optional') }}</span></label>
        <input type="tel" id="phone" name="phone" class="form-control" maxlength="30" pattern="[0-9 ()+\-]{6,}" inputmode="tel" value="{{ old('phone') }}" autocomplete="tel" placeholder="{{ t_raw('auth.phone_placeholder') }}">
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">{{ t_raw('auth.password') }}</label>
        <div class="qm-pw-wrap">
            <input type="password" id="password" name="password" class="form-control" minlength="12" pattern="(?!.*\s)(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9]).{12,}" data-label="{{ t_raw('auth.password') }}" autocomplete="new-password" required aria-describedby="password-hint" placeholder="{{ t_raw('auth.password_placeholder') }}">
            <button type="button" class="qm-pw-toggle" data-toggle-password="password" aria-pressed="false" aria-label="{{ t_raw('common.show_password') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
        </div>
        @partial('password-rules', ['for' => 'password', 'id' => 'password-hint'])
    </div>
    <div class="mb-3">
        <label for="password_confirm" class="form-label">{{ t_raw('auth.confirm_password') }}</label>
        <div class="qm-pw-wrap">
            <input type="password" id="password_confirm" name="password_confirm" class="form-control" minlength="12" data-label="{{ t_raw('auth.confirm_password') }}" autocomplete="new-password" data-confirm-for="password" required placeholder="{{ t_raw('auth.password_placeholder') }}">
            <button type="button" class="qm-pw-toggle" data-toggle-password="password_confirm" aria-pressed="false" aria-label="{{ t_raw('common.show_password') }}"><i class="fas fa-eye" aria-hidden="true"></i></button>
        </div>
    </div>
    {!! \App\Services\Recaptcha::widget('register') !!}
    <button type="submit" class="qm-btn w-100">{{ t_raw('auth.create_account') }}</button>
</form>
@if (!empty($googleAuth))
<div class="qm-auth-or" role="separator"><span>{{ t_raw('auth.or_separator') }}</span></div>
<a href="{{ route('auth.google') }}" class="qm-btn qm-btn-outline qm-btn-google w-100">{!! google_mark(18, 'me-2') !!} {{ t_raw('auth.continue_with_google') }}</a>
@endif

<p class="qm-auth-foot">{{ t_raw('auth.have_account') }} <a href="{{ route('login') }}">{{ t_raw('common.sign_in') }}</a></p>
@endsection