@extends('Dashboard.auth_master_page')




@section('meta_title')
    {{ 'Create myLEAP Account - AryanIct.com' }}
@endsection


@section('title')
    <span>Create myLEAP Account</span>
@endsection


@section('description')
    <p>
        Please ensure that you complete the form carefully, as a One-Time PIN (OTP) will be sent to the email address you provide for account verification.
    </p>
@endsection



@section('content')
    <div class="row g-0 justify-content-center">
        <div class="col-sm-8 col-xl-8">

            @if (Session::has('success_message'))
                <div style="color:green;font-size: .875rem;margin-top: .375rem;width:100%">
                    {{ Session::get('success_message') }}</div>
            @endif

            @if (Session::has('error_message'))
                <div style="color:#dc2626;font-size: .875rem;margin-top: .375rem;width:100%">
                    {{ Session::get('error_message') }}</div>
            @endif
            <br>
            <br>
            <form  action="{{ route('register.store') }}" method="post" id="sinup_form">
                @csrf


                <div class="row">
                    <div class="mb-4 col-6">
                        <input type="text"
                            class="form-control form-control-lg form-control-alt py-3 @error('name') is-invalid @enderror"
                            value="{{ old('name') }}" name="name" placeholder="First Name">
                        @error('name')
                            <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                        @enderror
                    </div>
    
                    <div class="mb-4 col-6">
                        <input type="text"
                            class="form-control form-control-lg form-control-alt py-3 @error('lastname') is-invalid @enderror"
                            value="{{ old('lastname') }}" name="lastname" placeholder="Last Name">
                        @error('lastname')
                            <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

             

              <div class="row">
                <div class="mb-4 col-6">
                    <input type="text"
                        class="form-control form-control-lg form-control-alt py-3 @error('email') is-invalid @enderror"
                        value="{{ old('email') }}" name="email" placeholder="Email Address">
                    @error('email')
                        <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4 col-6">
                    <select name="country"
                        class="form-control form-control-lg form-control-alt py-3 @error('country') is-invalid @enderror"
                        required>
                        @foreach ($countries as $key => $country)
                            <option value="{{ $key }}">{{ $country }}</option>
                        @endforeach
                    </select>
                    @error('country')
                        <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                    @enderror
                </div>
              </div>

               <div class="row">
                <div class="mb-4 col-6">
                    <input type="text"
                        class="form-control form-control-lg form-control-alt py-3 @error('address') is-invalid @enderror"
                        value="{{ old('address') }}" name="address" placeholder="Address">
                    @error('address')
                        <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4 col-6">
                    <input type="text"
                        class="form-control form-control-lg form-control-alt py-3 @error('city') is-invalid @enderror"
                        value="{{ old('city') }}" name="city" placeholder="City">
                    @error('city')
                        <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                    @enderror
                </div>
               </div>

                <div class="row">
                    <div class="mb-4 col-6">
                        <input type="text"
                            class="form-control form-control-lg form-control-alt py-3 @error('state') is-invalid @enderror"
                            value="{{ old('state') }}" name="state" placeholder="State">
                        @error('state')
                            <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                        @enderror
                    </div>
    
    
                    <div class="mb-4 col-6">
                        <input type="text"
                            class="form-control form-control-lg form-control-alt py-3 @error('post_code') is-invalid @enderror"
                            value="{{ old('post_code') }}" name="post_code" placeholder="Post Code">
                        @error('post_code')
                            <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                        @enderror
                    </div>
                </div>

            <div class="row">
                <div class="mb-4 col-6">
                    <input type="text"
                        class="form-control form-control-lg form-control-alt py-3 @error('phone') is-invalid @enderror"
                        value="{{ old('phone') }}" name="phone" placeholder="Phone Number: 0799888799">
                    @error('phone')
                        <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                    @enderror
                </div>

                <div class="mb-4 col-6">
                    <input type="text"
                        class="form-control form-control-lg form-control-alt py-3 @error('company') is-invalid @enderror"
                        value="{{ old('company') }}" name="company" placeholder="Company">
                    @error('company')
                        <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                    @enderror
                </div>
            </div>

                <div class="mb-4">
                    <input type="password"
                        class="form-control form-control-lg form-control-alt py-3 @error('password') is-invalid @enderror"
                        value="{{ old('password') }}" name="password" placeholder="Password" id="password">
                    @error('password')
                        <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                    @enderror

                   

                    <div style="color:#dc2626;font-size: .875rem;margin-top: .375rem;width:100%" class="passwordText"></div>

                    <i class="fas fa-eye-slash toggle-password" toggle="form-confirm"
                    style="float: right;margin-right: 10px;margin-top: -43px;position: relative;z-index: 10;"></i>
                   
                </div>
                

                <div class="mb-4">
                    <input type="password"
                        class="form-control form-control-lg form-control-alt py-3 @error('confirm') is-invalid @enderror"
                        value="{{ old('confirm') }}" name="confirm" placeholder="Password Confirmation" id="form-confirm">
                    @error('confirm')
                        <div class="invalid-feedback animated fadeIn">{{ $message }}</div>
                    @enderror

                    <i class="fas fa-eye-slash toggle-confirm" toggle="form-confirm"
                        style="float: right;margin-right: 10px;margin-top: -35px;position: relative;z-index: 10;"></i>
                        <br>
                        <ul  >
                            <li class="pro1" id="pro1">Password must contain uppercase and lowercase letters</li>
                            <li class="pro2" id="pro2">Password must contain number</li>
                            <li class="pro3" id="pro3">Password must contain special character</li>
                            <li class="pro4" id="pro4">Password must be at least 8 character</li>
                        </ul>
                </div>
                


                <div class="mb-4 justify-content-center d-flex">
                    {!! RecaptchaV3::field('verify_registration') !!}

                    @error('g-recaptcha-response')
                        <div style="color:#dc2626;font-size: .875rem;margin-top: .375rem;width:100%">{{ $message }}</div>
                    @enderror

 
                </div>
                <br>
                <div class="text-center">
                    <a href="/" style="margin-right: 10px">Back to Login Page</a>

                    <button type="submit" class="btn btn-lg btn-alt-primary" id="Register">
                        <i class="fa fa-fw fa-envelope me-1 opacity-50"></i> Register
                    </button>

                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        $(document).ready(function() {


            // $('#Register').attr('disabled', true);

            $('#password').keyup(function() {
                var password = $('#password').val();
                if (checkStrength(password) == false) {

                    $('#Register').attr('disabled', true);
                } else {
                    $('#Register').attr('disabled', false);
                }
            });



            function checkStrength(password) {
                var strength = 0;

                var flag = true;


                //If password contains both lower and uppercase characters, increase strength value.
                if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) {
                    strength += 1;
                    $('#pro1').removeClass('red').addClass('green');
                    flag = true;
                } else {
                    $('#pro1').removeClass('green').addClass('red');
                    
                    flag = false;
                }

                //If it has numbers and characters, increase strength value.
                if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)) {
                    strength += 1;
                    $('#pro2').removeClass('red').addClass('green');
                    flag = true;

                } else {
                    $('#pro2').removeClass('green').addClass('red');
                    
                    flag = false;
                }

                //If it has one special character, increase strength value.
                if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) {
                    strength += 1;
                    $('#pro3').removeClass('red').addClass('green');
                    flag = true;

                } else {
                    $('#pro3').removeClass('green').addClass('red');
                    
                    flag = false;
                }


                if (password.length > 7) {
                    strength += 1;
                    $('#pro4').removeClass('red').addClass('green');
                    flag = true;

                } else {
                    $('#pro4').removeClass('green').addClass('red');
                   
                    flag = false;
                }

                return flag;



            }

        });

        $(function() {
            $('#sinup_form').submit(function(event) {
                var verified = grecaptcha.getResponse();
                if (verified.length === 0) {
                    event.preventDefault();
                }
            });
        });


        $(".toggle-password").click(function() {

            $(this).toggleClass("fa-eye fa-eye-slash");
            var input = $('#password');

            if (input.attr("type") == "password") {
                input.attr("type", "text");
            } else {
                input.attr("type", "password");
            }
        });

        $(".toggle-confirm").click(function() {

            $(this).toggleClass("fa-eye fa-eye-slash");
            var input = $('#form-confirm');

            if (input.attr("type") == "password") {
                input.attr("type", "text");
            } else {
                input.attr("type", "password");
            }
        });
    </script>
@endsection
