@extends('layouts.auth')

@section('content')
    <div class="col-md-6">
        {{-- @include('errors.all') --}}
        @if (session('success'))
            <div class="alert alert-success" role="alert">
                {{ session('success') }}
            </div>
        @endif
        <div class="login-secright">
            <div class="login-rightbody">
                <h3>Create Account</h3>
                <form method="POST" action="{{ route('register') }}">
                    @csrf
                    <div class="row">
                        <div class="col-md-6">
                            <div class="single-login">
                                <label for="first_name">First Name</label>
                                <input type="text" class="form-control @error('first_name') is-invalid @enderror"
                                    name="first_name" value="{{ old('first_name') }}" required autocomplete="first_name"
                                    autofocus id="first_name" placeholder="First Name">
                            </div>
                            @error('first_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <div class="single-login">
                                <label for="last_name">Last Name</label>
                                <input type="text" class="form-control @error('last_name') is-invalid @enderror"
                                    name="last_name" value="{{ old('last_name') }}" id="last_name" placeholder="Last Name"
                                    required autocomplete="last_name" autofocus>
                            </div>
                            @error('last_name')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <div class="single-login">
                                <label for="mobile_number">Contact Number</label>
                                <input type="number" class="form-control @error('mobile_number') is-invalid @enderror"
                                    name="mobile_number" value="{{ old('mobile_number') }}" id="mobile_number"
                                    placeholder="Contact number" required autocomplete="mobile_number" autofocus>
                            </div>
                            @error('mobile_number')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <div class="single-login">
                                <label for="">Email</label>
                                <input type="email" class="form-control @error('email') is-invalid @enderror"
                                    name="email" id="email" placeholder="Enter Your Email" value="{{ old('email') }}"
                                    required autocomplete="email" autofocus>
                            </div>
                            @error('email')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <div class="single-login">
                                <label for="">TAX Registration Number</label>
                                <input type="text" class="form-control @error('trn') is-invalid @enderror" name="trn"
                                    id="trn" placeholder="Enter TRN" value="{{ old('trn') }}" required
                                    autocomplete="trn" autofocus>
                            </div>
                            @error('trn')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <div class="single-login">
                                <label for="pickup_location">Pickup Location</label>
                                <select name="pickup_location" class="form-control" id="pickup_location">
                                    <option value="">Select Pickup Location</option>
                                    <option value="L1">Location 01</option>
                                    <option value="L2">Location 02</option>
                                    <option value="L3">Location 03</option>
                                    <option value="L4">Location 04</option>
                                </select>
                            </div>
                            @error('pickup_location')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>

                        <div class="col-md-6">
                            <div class="single-login">
                                <label for="">Enter Password</label>
                                <input type="password" id="password-eye" placeholder="************" class="form-control"
                                    name="password">
                                <span toggle="#password-eye" class="fa fa-fw fa-eye eye-icon toggle-eye"
                                    aria-hidden="true"></span>
                            </div>
                            @error('password')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <div class="single-login">
                                <label for="">Confirm Password</label>
                                <input id="password-confirm" type="password" placeholder="************"
                                    class="form-control" name="password_confirmation">
                                <span toggle="#password-confirm" class="fa fa-fw fa-eye eye-icon toggle-eye"
                                    aria-hidden="true"></span>
                            </div>
                        </div>
                    </div>

                    <div class="checkbox-inlines">
                        <input type="checkbox" class="check-input" id="tandc" required name="tandc"
                            value="1">
                        <label for="tandc"> By creating an account, you agree to our terms and
                            conditions and privacy policy.</label>
                    </div>

                    <button type="submit" class="btn btn-primary btn-effect  mt-4">
                        Register Now
                    </button>

                </form>
            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script defer>
        $(document).ready(function() {
            setRecaptchaToken();
            // Every 90 Seconds
            setInterval(function() {
                setRecaptchaToken();
            }, 90 * 1000);
        });

        function setRecaptchaToken() {
            grecaptcha.ready(function() {
                grecaptcha.execute('{{ config('captcha.sitekey') }}', {
                    action: 'register'
                }).then(function(token) {
                    if (token) {
                        document.getElementById('recaptcha').value = token;
                        $('button[type="submit"]').prop('disabled', false);
                    }
                });
            });
        }
    </script>
@endpush