@extends($data['layout'])

@section('title', app_name() . ' | ' . __('labels.frontend.auth.register_box_title'))
@if($data['layout'] == 'frontend.layouts.mobile')
<style>
    .search-n-filter-area { display: none !important; }
</style>
@endif
@section('content')
    <!-- customer register start -->
    <div class="customer_login">
        <div class="container">
            <div class="row">
                <!--login area start-->
                <div class="col-md-6 mx-auto register-wrapper">
                    <div class="account_form border border-light p-4 shadow">
                        <h2>Register</h2>
                        @include('includes.partials.messages')
                        {{-- @if($errors->any())
                            <div class="col-md-12 col-12">
                                <div class="alert alert-danger" role="alert">
                                    <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> {{$errors->first()}}
                                </div>
                            </div>
                        @endif --}}
                        {{ html()->form('POST', route('frontend.auth.register.post'))->id('frm_register')->open() }}
                        <p>
                            {{ html()->label(__('validation.attributes.frontend.first_name'))->for('first_name') }}

                            {{ html()->text('first_name')
                                ->class('mb-0 form-control')->id('first_name')
                                ->placeholder(__('validation.attributes.frontend.first_name'))
                                ->attribute('maxlength', 14)
                                ->attribute('minlength', 2)
                                ->value(old('first_name'))
                                ->autofocus()
                                ->required()}}
                        </p>
                        <p>
                            {{ html()->label(__('validation.attributes.frontend.last_name'))->for('last_name') }}

                            {{ html()->text('last_name')
                                ->class('mb-0 form-control')
                                ->id('last_name')
                                ->placeholder(__('validation.attributes.frontend.last_name'))
                                ->attribute('maxlength', 14)
                                ->attribute('minlength', 2)
                                ->value(old('last_name'))
                                ->autofocus()
                                ->required() }}
                        </p>
                        <p>
                            {{ html()->label(__('validation.attributes.frontend.email'))->for('email') }}
                            <input value="{{old('email')}}" id="email" type="email" pattern="^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$"  required name="email" class="form-control mb-0" placeholder="Your email address ...">
                            {{-- {{ html()->email('email')
                                ->class('mb-0 form-control')
                                ->id('email')
                                ->placeholder(__('validation.attributes.frontend.email'))
                                ->value(old('email'))
                                ->attribute('maxlength', 191)->pattern=("^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$")
                                ->required() }} --}}
                        </p>
                        <p class="password-field">
                            {{ html()->label(__('validation.attributes.frontend.password'))->for('password') }}
                            <span class="m-2 text-danger">(Minimum 8 characters)</span>
                            {{ html()->password('password')
                                ->class('mb-0 form-control')
                                ->attribute('minlength', 8)
                                ->id('password')
                                ->placeholder(__('validation.attributes.frontend.password'))
                                ->required() }}
                            <span class="password-toggle" style="cursor: pointer;" data-toggle-for="password" onclick="togglePasswordVisibility('password')">
                                <i class="fa fa-eye-slash"></i>
                            </span>
                        </p>

                        <p class="password-field">
                            {{ html()->label(__('validation.attributes.frontend.password_confirmation'))->for('password_confirmation') }}
                            {{ html()->password('password_confirmation')
                                ->class('mb-0 form-control')
                                ->attribute('minlength', 8)
                                ->id('password_confirmation')
                                ->placeholder(__('validation.attributes.frontend.password_confirmation'))
                                ->required() }}
                            <span class="password-toggle" style="cursor: pointer;" data-toggle-for="password_confirmation" onclick="togglePasswordVisibility('password_confirmation')">
                                <i class="fa fa-eye-slash"></i>
                            </span>
                        </p>

                        <div class="login_submit">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="cf-widget"></div>
                                </div>
                                <div class=" mt-1 btn-wrapper text-md-right mb-3">
                                <button class="my-1 quicky-btn-2 btn-primary rounded btn-cf-submit" disabled="disabled" type="submit" id="register_button">Register</button>
                                </div>
                                <div class="col-md-12">
                                    <div class="d-inline-flex align-items-center">
                                        <a href="{{ route('frontend.auth.login') }}" class="pass-lost">Already a Member? Login here</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{ html()->form()->close() }}
                    </div>
                </div>
                <!--login area start-->
            </div>
        </div>
    </div>
    <!-- customer register end -->

    <script>
        window.addEventListener("load", (event) => {
                turnstile.render(".cf-widget", {
                sitekey: "0x4AAAAAAA0ZprtGxWG32Orf",
                callback: function (token) {
                    $('.btn-cf-submit').removeAttr('disabled');
                },
            });
        });
    </script>

@endsection
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
@push('after-scripts')
    <script src="/js/custom.js?version=003"></script>
    @if(config('access.captcha.registration'))
        @captchaScripts
    @endif
@endpush