@extends('layouts.auth')

@section('title', 'Register')

@section('content')
    <form method="POST" action="{{ route('registerUser') }}" class="form-detail" oninput='password_confirmation.setCustomValidity(password_confirmation.value !== password.value ? "Passwords do not match." : "")'>
        <br><span style="color: #fff; font-size: 15pt; font-weight: 500">Register New Account</span>
        @csrf
        <div class="form-group" id="email-form">
            @if(session('error'))
            <p style="color: indianred;" id="warning">
                <i class="fa fa-times-circle"></i> {{ session('error') }}
            </p>
            @endif
            <p style="color: indianred; display: none;" id="email-warning">
                Please enter a valid email address
            </p>
            <p style="color: indianred; display: none;" id="empty-warning">
                Please enter your email address
            </p>
            <br>
            <label class="form-control-label" for="InputPassword" style="color: white">Email address</label>
            <div class="input-group input-group-merge">
                <input type="email" name="email"
                       value=""
                       class="input-text "
                       id="email"
                       placeholder=""
                       required
                style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
            </div>
        </div>
        <div class="form-group" style="display: none">
            <label class="form-control-label" for="InputEmail">Referral</label>
            <div class="input-group input-group-merge">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="mail"></i>
                    </span>
                </div>
                <input type="hidden" name="ref_code"
                       value="@php if(isset($_GET['ref']) && !empty($_GET['ref'])){ echo $_GET['ref']; }else{ echo ''; } @endphp"
                       class="input-text "
                       id="InputEmail"
                       placeholder=""
                       required>
            </div>
        </div>
        <div class="form-group" id="password-form" style="display: none;">
            <br><br><label class="form-control-label" for="InputPassword" style="color: white">Password</label>
            <div class="input-group input-group-merge">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="lock"></i>
                    </span>
                </div>
                <input type="password"
                       value=""
                       name="password"
                       class="input-text "
                       id="InputPassword"
                       placeholder=""
                       required
                       style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
            </div>
        </div>
        <div class="form-group mb-4" id="cpassword-form" style="display: none;">
            <label class="form-control-label" for="InputPassword" style="color: white">Confirm Password</label>
            <div class="input-group input-group-merge">
                <div class="input-group-prepend">
                    <span class="input-group-text">
                        <i class="icon-dual" data-feather="lock"></i>
                    </span>
                </div>
                <input type="password"
                       value=""
                       name="password_confirmation"
                       class="input-text "
                       id="InputPassword"
                       placeholder=""
                       required
                style="width: 100%; height: 40px; font-size: 10pt; font-family: Verdana;">
            </div>
        </div>

        <div class="form-group mb-0 text-center">
            <button class="register btn-block" id="submit-btn" type="submit" style="padding:10px; background-color: rgb(0 71 103); color: #fff; display: none;">Next</button>
            <button class="register btn-block" id="next-btn" type="button" style="padding:10px; background-color: rgb(0 71 103); color: #fff;" onclick="showPassword()">Next</button>
            <br>
            <p style="color: #fff">Already have an Account? <a href="{{ route('login') }}" style="color: rgb(0 71 103);">Login</a> </p>
        </div>
    </form>

    <script>
        function showPassword(){

            var email = $("input#email").val();
            $("#warning").css('display','none'); //error message

            if (email !== "") {  // If something was entered
                $("#empty-warning").css('display','none'); //error message

                if (!isValidEmailAddress(email)) {
                    $("#email-warning").css('display','block'); //error message
                    return false;
                }else{
                    $("#email-warning").css('display','none'); //error message

                    $("#email-form" ).fadeOut( "slow" );
                    $("#email-form").css('display','none');
                    $("#next-btn" ).fadeOut( "slow" );
                    $("#next-btn").css('display','none');

                    $("#password-form" ).fadeIn( "slow" );
                    $("#password-form").css('display','block');
                    $("#cpassword-form" ).fadeIn( "slow" );
                    $("#cpassword-form").css('display','block');
                    $("#submit-btn" ).fadeIn( "slow" );
                    $("#submit-btn").css('display','block');
                }
            }else{
                $("#empty-warning").css('display','block'); //error message
                $("#email-warning").css('display','none'); //error message
                return false;
            }


        }



        function isValidEmailAddress(emailAddress) {
            var pattern = new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.|[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i);
            return pattern.test(emailAddress);
        };
    </script>
@endsection