<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Account - Golf Evolution</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php include 'member_layout/analyticscode.php' ?>
    <link rel="icon" href="<?= base_url()."/public"; ?>/assets/member_images/favicon.png" sizes="192x192" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="<?= base_url()."/public"; ?>/assets/member_css/front-style.css">        
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>   
    <!-- Plugin js-->
    <script src="<?= base_url()."/public"; ?>/assets/libs/parsleyjs/parsley.min.js"></script>
    <!-- Validation init js-->
    <script src="<?= base_url()."/public"; ?>/assets/js/pages/form-validation.init.js"></script>
    
    <!-- Internatinal Mobile Number -->
    <link rel="stylesheet" href="<?= base_url()."/public/"; ?>assets/member_css/intlTelInput.css">
    <script src="<?= base_url()."/public/"; ?>assets/member_js/intlTelInput.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script>  

    <script>

        function check_if_exists() {



        var email = $("#email").val();

        $.ajax({

            type:"post",

            url: "<?php echo base_url(); ?>/check_if_mail_exists",

            data:{ email:email , table : 'member'},

            success:function(response)

            {

                if (response == true) 

                {

                    $('#already_err').html("An account with this mail id already exist, please use sign in to login or forgot password to reset password");

                    $("#email").val('');

                }

            }

        }); 

        }

        $(document).ready(function(){
            $('#email').on('keyup', function () {
                if($('#email').val().length != 0)
                {
                    $('#already_err').html("");
                }
            });
        });

        $(document).ready(function(){
            $('#cemail').on('keyup', function () {
                if ($('#email').val() != $('#cemail').val()) 
                { 
                    $(".signup-btn").prop("disabled", true);
                    $('#email_match').html("Your email and Confrim email do not match.").css('color' , 'red');
                }
                else
                {
                    $(".signup-btn").removeAttr('disabled');
                    $('#email_match').html("");
                }
            });
        });

        function disablePaste(event) {
          event.preventDefault();
        }

    </script>
<style>
    .field-icon {
    float: right;
    margin-left: -35px;
    margin-top: 12px;
    margin-right: 12px;
    position: relative;
    z-index: 3;
}
</style>
</head>

<body>



<?php include 'member_layout/header.php' ?>



<section class="login pt-5 pb-5">
    <div class="container">
    <div class="account-width mb-4" id="myaccount">
        <div class="form-container sign-up-container">
        <form method="post" action="<?= base_url()."register"; ?>" role="form" class="parsley-examples">
                <h1>Create Account</h1> 
                <div class="row">
                    <div class="col-12 col-lg-6 mb-3">
                        <label for="username">First Name</label>
                        <input type="text" class="form-control" required parsley-type="text" name="name" placeholder="First Name" id="username"/> 
                    </div>
                    <div class="col-12 col-lg-6 mb-3">
                        <label for="username">Last Name</label>
                        <input type="text" class="form-control" required parsley-type="text" name="last_name" placeholder="Last Name" id="lastname"/> 
                    </div>
                    <div class="col-12 mb-3">
                        <label for="loginemail">Email Id</label>
                        <input type="email" class="form-control" required name="email" placeholder="Enter your email id" onchange="check_if_exists();" id="email"/> 
                        <span id="already_err"></span>
                    </div>
                    <div class="col-12 mb-3">
                        <label for="loginemail">Confirm Email</label>
                        <input type="email" class="form-control" required name="confirm_email" onpaste="disablePaste(event)" placeholder="Enter your email id" id="cemail"/> 
                        <span id="email_match"></span>
                    </div>
                     <div class="col-12 mb-3">
                        <label for="mobile">Mobile Number</label>
                        <input type="tel" class="form-control" name="mobile" placeholder="Enter your mobile number" id="mobile" required/> 
                    </div>
                    <!-- <div class="col-12 mb-3">
                        <label for="mobile">Address</label>
                        <input type="text" class="form-control" data-parsley-type="text" name="address" placeholder="Enter your address" id="hori-pass1"/> 
                    </div> -->
                    <div class="col-12 mb-3 show-password1 login-pwd">
                        <label for="hori-pass">Password</label>
                        <span toggle="#hori-pass" id="toggle-password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                        <input required type="password" class="form-control" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}"  name="password" placeholder="Password" id="hori-pass"/> 
                        <div id="pswd_info">
                            <h4>Password requirements</h4>
                            <ul>
                                <li id="letter" class="invalid">At least <strong>one letter</strong></li>
                                <li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
                                <li id="number" class="invalid">At least <strong>one number</strong></li>
                                <li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
                                <li id="space" class="invalid">use any one<strong> [~,!,@,#,$,%,^,&,*,-,=,.,;,']</strong></li>
                            </ul>
				        </div> 
                    </div>
                    <div class="col-12 mb-3 show-password1 login-pwd">
                        <label for="cpassword">Confirm Password</label>
                        <span toggle="#cpassword" id="toggle-password1" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                        <input required type="password" class="form-control" data-parsley-equalto="#hori-pass" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}"  name="cpassword" placeholder="Password" id="cpassword"/> 
                    </div> 
                </div>                                                   
                <button class="signup-btn" type="submit">Register</button>
            </form>
            <button class="login-btn mobile-logintbn" id="signIn1">Sign In</button>
        </div>

        <div class="form-container sign-in-container">

        <form method="post" action="<?= base_url(); ?>">

                <div class="col-12">
                    <h1>Sign in</h1>
                </div>
                

                <?php if(session()->getTempdata('mail_success')):?>

                    <div class="alert alert-success" >

                    <?= session()->getTempdata('mail_success'); ?>

                    </div>

                    <?php endif;?>
                                        

                    <?php if(session()->getTempdata('error')):?>

                    <div class="alert alert-danger" >

                    <?= session()->getTempdata('error'); ?>

                    </div>

                <?php endif;?>





                <div class="row w-100">

                    <div class="col-12 mb-3 p-0">

                        <label for="regemail">Email or Username</label>             

                        <input type="email" name="email" id="emailaddress" required="" 
                        value="<?php if(session()->getTempdata('l_email')) { echo session()->getTempdata('l_email'); }?>" placeholder="Email" />

                    </div>

                    <div class="col-12 mb-3 pwd p-0">

                        <label for="newpassword">Password</label>          

                        <input type="password" id="passwordview" name="password" 
                        value="<?php if(session()->getTempdata('l_password')) { echo session()->getTempdata('l_password'); }?>" placeholder="Password" />
                        <span toggle="#passwordview" id="toggle-password2"  class="fa fa-fw fa-eye field-icon toggle-password"></span>    

                    </div>

                </div>                                    

                <button class="signin-btn" type="submit">Login</button>

                <a href="<?=  base_url()."forgot_password"; ?>" class="forget-pwd mt-2">Forgot your password?</a>

            </form>

            <button class="login-btn mobile-signupbtn" id="signUp1">Sign Up</button>

        </div>

        <div class="overlay-container">

            <div class="login-overlay">

                <div class="overlay-panel overlay-left">

                    <h1>Welcome Back!</h1>

                    <p>If you already have an account click sign in into access member area</p>

                    <button class="login-btn" id="signIn">Sign In</button>

                </div>

                <div class="overlay-panel overlay-right">

                    <h1>Hello, Golfer!</h1>

                    <p>If you dont't have a Golf evo account click sign up to create an account</p>

                    <button class="login-btn" id="signUp">Sign Up</button>

                </div>

            </div>

        </div>

     </div>

    </div>

</section>

     

<?php include 'member_layout/footer.php' ?>



<script>

const signUpButton = document.getElementById('signUp');

const signUpButton1 = document.getElementById('signUp1');

const signInButton = document.getElementById('signIn');

const signInButton1 = document.getElementById('signIn1');

const container = document.getElementById('myaccount');



signUpButton.addEventListener('click', () => {

	container.classList.add("right-panel-active");

});

signUpButton1.addEventListener('click', () => {

container.classList.add("right-panel-active");

});

signInButton.addEventListener('click', () => {

	container.classList.remove("right-panel-active");

});

signInButton1.addEventListener('click', () => {

container.classList.remove("right-panel-active");

});

</script>
<script>
    var country_code = $('#country_code').val();
     var input = document.querySelector("#mobile");
     window.intlTelInput(input, {
        // allowDropdown: false,
         autoInsertDialCode: true,
       // autoPlaceholder: "on",
        dropdownContainer: document.body,
        // excludeCountries: ["us"],
       // formatOnDisplay: true,
        // geoIpLookup: function(callback) {
        //   fetch("https://ipapi.co/json")
        //     .then(function(res) { return res.json(); })
        //     .then(function(data) { callback(data.country_code); })
        //     .catch(function() { callback("us"); });
        // },
        // hiddenInput: "full_number",
        initialCountry: country_code || "ca",
        // localizedCountries: { 'de': 'Deutschland' },
        // nationalMode: false,
        // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
        // placeholderNumberType: "MOBILE",
        // preferredCountries: ['cn', 'jp'],
        //separateDialCode: true,
        showFlags: true,
        utilsScript: "<?= base_url()."/public/"; ?>assets/member_js/utils.js"
      });
    $('#mobile').inputmask('(999)-999-9999'); 

    $("#toggle-password").click(function() {
    $(this).toggleClass("fa-eye fa-eye-slash");
    var input = $($(this).attr("toggle"));
    if (input.attr("type") == "password") {
        input.attr("type", "text");
    } 
    else {
        input.attr("type", "password");
    }
    });
    $("#toggle-password1").click(function() {
    $(this).toggleClass("fa-eye fa-eye-slash");
    if ($('#cpassword').attr("type") == "password") {
        $('#cpassword').attr("type", "text");
    } 
    else {
        $('#cpassword').attr("type", "password");
    }
    });
    $("#toggle-password2").click(function() {
    $(this).toggleClass("fa-eye fa-eye-slash");
    if ($('#passwordview').attr("type") == "password") {
        $('#passwordview').attr("type", "text");
    } 
    else {
        $('#passwordview').attr("type", "password");
    }
    });
</script>

<script>
$(document).ready(function(){
	
	$('#hori-pass').keyup(function() {
		var pswd = $(this).val();
		
		//validate the length
		if ( pswd.length < 8 ) {
			$('#length').removeClass('valid').addClass('invalid');
		} else {
			$('#length').removeClass('invalid').addClass('valid');
		}
		
		//validate letter
		if ( pswd.match(/[A-z]/) ) {
			$('#letter').removeClass('invalid').addClass('valid');
		} else {
			$('#letter').removeClass('valid').addClass('invalid');
		}

		//validate capital letter
		if ( pswd.match(/[A-Z]/) ) {
			$('#capital').removeClass('invalid').addClass('valid');
		} else {
			$('#capital').removeClass('valid').addClass('invalid');
		}

		//validate number
		if ( pswd.match(/\d/) ) {
			$('#number').removeClass('invalid').addClass('valid');
		} else {
			$('#number').removeClass('valid').addClass('invalid');
		}
		
		//validate space
		if ( pswd.match(/[^a-zA-Z0-9\-\/]/) ) {
			$('#space').removeClass('invalid').addClass('valid');
		} else {
			$('#space').removeClass('valid').addClass('invalid');
		}
		
	}).focus(function() {
		$('#pswd_info').show();
	}).blur(function() {
		$('#pswd_info').hide();
	});
	
});
</script> 


</body>

</html>