@extends('layouts.public')
@section('content')
    @include('includes.corano-breadcrumb', [
        'crumbs' => [
            ['label' => __('public.auth.register')],
        ],
    ])

    <section class="auth-area section-padding">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8">
                    <div class="auth-card">
                        <p class="section-kicker">{{ __('public.menu.sign_up') }}</p>
                        <h1 class="auth-title">{{ __('public.auth.create_account_title') }}</h1>
                        <p class="auth-lead">
                            {{ __('public.auth.have_account') }}
                            <a href="{{ __url('/login') }}">{{ __('public.auth.sign_in_here') }}</a>
                        </p>

                        <form action="{{ __url('/register') }}" method="POST" id="register-form" class="auth-form r-form" data-action="showVerification" novalidate>
                            @csrf
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="auth-field">
                                        <label for="first_name" class="form-label">{{ __('public.auth.p_first_name') }}</label>
                                        <input class="form-control"
                                            type="text"
                                            id="first_name"
                                            name="first_name"
                                            autocomplete="given-name"
                                            placeholder="{{ __('public.auth.p_first_name') }}"
                                            value="{{ old('first_name') }}">
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="auth-field">
                                        <label for="last_name" class="form-label">{{ __('public.auth.p_last_name') }}</label>
                                        <input class="form-control"
                                            type="text"
                                            id="last_name"
                                            name="last_name"
                                            autocomplete="family-name"
                                            placeholder="{{ __('public.auth.p_last_name') }}"
                                            value="{{ old('last_name') }}">
                                        <div class="invalid-feedback"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="auth-field">
                                <label for="email" class="form-label">{{ __('public.auth.p_email') }}</label>
                                <input class="form-control"
                                    type="email"
                                    id="email"
                                    name="email"
                                    autocomplete="email"
                                    placeholder="{{ __('public.auth.p_email') }}"
                                    value="{{ old('email') }}">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="auth-field">
                                <label for="phone" class="form-label">{{ __('public.auth.p_phone') }}</label>
                                <input class="form-control telephone"
                                    type="tel"
                                    id="phone"
                                    name="phone"
                                    autocomplete="tel"
                                    maxlength="20"
                                    placeholder="{{ __('public.auth.p_phone') }}"
                                    value="{{ old('phone') }}">
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="auth-field">
                                <label for="password" class="form-label">{{ __('public.auth.p_password') }}</label>
                                <div class="password-toggle">
                                    <input class="form-control success-protected"
                                        type="password"
                                        id="password"
                                        name="password"
                                        autocomplete="new-password"
                                        placeholder="{{ __('public.auth.p_password') }}">
                                    <label class="password-toggle-btn" aria-label="{{ __('public.auth.show_hide_password') }}">
                                        <input class="password-toggle-check" type="checkbox">
                                        <span><i class="fas fa-eye"></i></span>
                                    </label>
                                </div>
                                <div class="invalid-feedback"></div>
                            </div>

                            <div class="auth-field">
                                <div class="form-check">
                                    <input class="form-check-input @error('terms') is-invalid @enderror"
                                        type="checkbox"
                                        id="terms"
                                        name="terms"
                                        value="1"
                                        {{ old('terms') ? 'checked' : '' }}
                                        required>
                                    <label class="form-check-label" for="terms">
                                        {!! __('public.auth.agree_terms') !!}
                                    </label>
                                    @error('terms')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <button class="g-recaptcha btn btn-hero"
                                type="button"
                                data-sitekey="{{ config('services.recaptcha.key') }}"
                                data-callback="onSubmitRegistrationForm"
                                data-action="submit">
                                {{ __('public.auth.register') }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection