@extends('web_site.auth.layout')

@section('auth_title', trans('site.auth.signup_title'))

@section('auth_form')
    <form id="RegisterForm" action="{{ route('register.store') }}" method="POST" class="form-wrap1 bg-white" novalidate>
        @csrf
        <div class="form-title-box bg-title">
            <h2 class="h4 mb-1 text-white">{{ trans('site.auth.signup_title') }}</h2>
            <p class="mb-0 text-white-light">{{ trans('site.auth.signup_subtitle') }}</p>
        </div>

        <div class="form-box">
            <div class="row">
                <div class="col-md-6 form-group">
                    <input type="text" name="name" value="{{ old('name') }}" autocomplete="name"
                           class="form-control style2 @error('name') is-invalid @enderror"
                           placeholder="{{ trans('site.auth.name') }}" aria-label="{{ trans('site.auth.name') }}" required autofocus>
                    <i class="fal small fa-user"></i>
                    @error('name')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6 form-group">
                    <input type="tel" name="phone" value="{{ old('phone') }}" autocomplete="tel-national" dir="ltr" inputmode="numeric"
                           class="form-control style2 @error('phone') is-invalid @enderror"
                           placeholder="{{ trans('site.auth.phone') }}" aria-label="{{ trans('site.auth.phone') }}" required>
                    <i class="fal small fa-phone"></i>
                    @error('phone')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 form-group">
                    <input type="email" name="email" value="{{ old('email') }}" autocomplete="email" dir="ltr"
                           class="form-control style2 @error('email') is-invalid @enderror"
                           placeholder="{{ trans('site.auth.email') }}" aria-label="{{ trans('site.auth.email') }}" required>
                    <i class="fal small fa-envelope"></i>
                    @error('email')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6">
                    @include('web_site.auth.partials.password', ['name' => 'password', 'placeholder' => trans('site.auth.password'), 'autocomplete' => 'new-password'])
                </div>
                <div class="col-md-6">
                    @include('web_site.auth.partials.password', ['name' => 'password_confirmation', 'placeholder' => trans('site.auth.password_confirmation'), 'autocomplete' => 'new-password'])
                </div>
                <div class="col-md-6 form-group">
                    <label for="birth_date" class="auth-label">{{ trans('site.auth.birth_date') }}</label>
                    <input type="date" name="birth_date" id="birth_date" value="{{ old('birth_date') }}" max="{{ now()->subDay()->toDateString() }}" autocomplete="bday"
                           class="form-control style2 @error('birth_date') is-invalid @enderror">
                    @error('birth_date')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-md-6 form-group">
                    <label for="gender" class="auth-label">{{ trans('site.auth.gender') }}</label>
                    <select name="gender" id="gender" class="form-select style2 @error('gender') is-invalid @enderror">
                        <option value="" @selected(! old('gender'))>—</option>
                        <option value="male" @selected(old('gender') === 'male')>{{ trans('site.auth.male') }}</option>
                        <option value="female" @selected(old('gender') === 'female')>{{ trans('site.auth.female') }}</option>
                    </select>
                    @error('gender')<div class="invalid-feedback">{{ $message }}</div>@enderror
                </div>
                <div class="col-12 mb-4">
                    <div class="form-check">
                        <input type="checkbox" name="terms" value="1" id="terms" class="form-check-input @error('terms') is-invalid @enderror" @checked(old('terms')) required>
                        <label class="form-check-label" for="terms">
                            {!! trans('site.auth.terms', ['link' => '<a href="'.e(route('privacy-terms')).'" target="_blank" class="text-theme1">'.e(trans('site.auth.terms_link')).'</a>']) !!}
                        </label>
                        @error('terms')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            <button type="submit" class="vs-btn style2 w-100">{{ trans('site.auth.signup_title') }} <i class="far fa-user-plus"></i></button>

            <p class="mt-4 mb-0 text-center">
                {{ trans('site.auth.have_account') }}
                <a href="{{ route('signin') }}" class="text-theme1 fw-bold">{{ trans('site.auth.signin_now') }}</a>
            </p>
        </div>
    </form>
@endsection

@section('auth_js')
    @include('partials.jsvalidation', ['request' => 'App\Http\Requests\Site\Auth\RegisterRequest', 'selector' => '#RegisterForm'])
@endsection