
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
	<meta charset="utf-8" />
    <link rel="shortcut icon" href="assets/img/icon-title.png" type="image/png">
	<title>appICE | Sign up</title>
	<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" />
	<meta content="" name="description" />
	<meta content="" name="author" />

	<!-- ================== BEGIN BASE CSS STYLE ================== -->
	<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
	<link href="assets/plugins/jquery-ui/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
	<link href="assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
	<link href="assets/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
	<link href="assets/css/animate.min.css" rel="stylesheet" />
	<link href="assets/css/style.login.css" rel="stylesheet" />
	<link href="assets/css/style.home.css" rel="stylesheet" />
	<link href="assets/css/style-responsive.min.css" rel="stylesheet" />
	<link href="assets/css/theme/default.new.css" rel="stylesheet" id="theme" />
	<!-- ================== END BASE CSS STYLE ================== -->

	<!-- ================== BEGIN BASE JS ================== -->
	<!-- <script src="assets/plugins/pace/pace.min.js"></script> -->
	<!-- ================== END BASE JS ================== -->
</head>
<body class="pace-top">
	<!-- begin #page-loader -->
	<!-- <div id="page-loader" class="fade in"><span class="spinner"></span></div> -->
	<!-- end #page-loader -->
    <div class="alert alert-danger fade in m-b-15" style="position:relative;z-index:1021;display:none;" id='msgbox'>
        <strong id="messagebox"></strong>
        <span class="close" data-dismiss="alert">&times;</span>
    </div>

	<div class="login-cover">
	    <div class="login-cover-image"><img src="assets/img/login-bg/bg-6.jpg" data-id="login-cover-image" alt="" /></div>
	    <div class="login-cover-bg"></div>
	</div>

	<!-- begin #header -->
    <div id="header" class="header navbar navbar-transparent navbar-fixed-top">
        <!-- begin container -->
        <div class="container">
            <!-- begin navbar-header -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="/" class="navbar-brand"   id="brandLink">
                    <span class="brand-logo"></span>
                    <span class="brand-text">
                        app<span class="text-theme">ICE</span>
                    </span>
                </a>
            </div>
            <!-- end navbar-header -->
            <!-- begin navbar-collapse -->
            <div class="collapse navbar-collapse" id="header-navbar">
                <ul class="nav navbar-nav navbar-right" id="signup-ul">
                    <li class="dropdown">
                        <a href="index">HOME</a>
                    </li>
                    <li><a href="index#product">PRODUCT</a></li>
                    <li><a href="index#about">ABOUT US</a></li>
                    <li><a href="https://blog.appice.io" target="_blank">BLOG</a></li>
                    <li class="active"><a href="login" >LOGIN</a></li>
                </ul>
            </div>
            <!-- end navbar-collapse -->
        </div>
        <!-- end container -->
    </div>
    <!-- end #header -->

	<!-- begin #page-container -->
	<div id="page-container" class="fade">
	    <!-- begin login -->
        <div class="login login-v2" data-pageload-addclass="animated fadeIn">
            <!-- begin brand -->
            <div class="login-header">
                <div class="brand">
                    Sign Up to <span id="portalName">AppICE</span>
                </div>
                <div class="icon">
                    <i class="fa fa-sign-in"></i>
                </div>
            </div>
            <!-- end brand -->
            <div class="login-content">
                <% if(alert.length > 0 && typeof alert!= 'undefined'){ %>
                    <% alert.forEach(function(error){ %>
                        <div class="alert alert-danger" role="alert">
                            <%=error.msg%>
                          </div>
                  <%  }) %>
                 <% } %>
                 <div id="checkApproved">
                    <div class="form-group m-b-20">
                        <label id="email-label">Email Address</label>
                        <input type="email" maxlength="100"  class="form-control input-lg"
                        placeholder="Enter Your Email Address"
                        data-parsley-type="email" name="email" id="useremail"
                        data-parsley-trigger="change"
                        data-parsley-required="true" autocomplete="off" />
                    </div>
                    <div class="login-buttons">
                        <button id="checkEmailExistence"  class="btn btn-success btn-block btn-lg"> Sign Up </button>
                    </div>
                </div>
                <form autocomplete="new-password" method="POST" class="margin-bottom-0" data-parsley-validate="true">
                    <input type="hidden" name="_csrf" value="<%=csrfToken%>">
                    <input type="hidden" id="selectedButton" name="selectedButton" value="">
                    <div id="approveDetails" style="display: none;">
                    <div id="formDetails">
                        <div class="form-group m-b-20">
                            <label>Email Address</label>
                            <input type="email" maxlength="100" class="form-control input-lg" placeholder="Email Address" name="email" id="user_email"  data-parsley-type="email" data-parsley-required="true" data-parsley-required-message="Please enter a valid email address." autocomplete="new-password" />
                        </div>
                        <div class="form-group m-b-20">
                            <label>Full Name <small style="margin-left: 5px;"></small></label>
                            <input type="text" maxlength="50" class="form-control input-lg" placeholder="Full Name" name="full_name" id="user_name" pattern="^[A-Za-z\s]+$" data-parsley-required="true" data-parsley-required-message="Please enter a valid full name." autocomplete="new-password" />
                            <ul class="parsley-errors-list filled" id="username-error" style="display:none">
                                <!-- <li class="parsley-required">Please enter a valid full name </li> -->
                            </ul>
                            <input type="hidden" id="h_fullname" name="h_fullname">
                        </div>
                        <input type="hidden" id="hemail" name="hemail">
                        <div class="form-group m-b-20 position-relative" id="pass1-container">
                            <label>Password</label>
                            <input type="password" class="form-control input-lg" placeholder="Password" minlength="8" maxlength="30" name="password" data-parsley-required="true" data-parsley-required-message="Please enter a password." id="pass1" autocomplete="new-password" />
                            <span toggle="#pass1" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                        </div>
                        <div class="error-container" style="margin-bottom: 30px;">
                            <ul class="parsley-errors-list filled" id="passregex-error-1" style="display:none">
                                <li class="parsley-required">Password should be minimum 8 characters and contain at least three of the following: uppercase letters, lowercase letters, numbers, or special characters.</li>
                            </ul>
                        </div>  
                        <div class="form-group m-b-20 position-relative" id="pass2-container">
                            <label>Confirm Password</label>
                            <input type="password" class="form-control input-lg" placeholder="Confirm Password" minlength="8" maxlength="30" data-parsley-required="true" data-parsley-required-message="Please confirm your password." id="pass2" autocomplete="new-password" />
                            <span toggle="#pass2" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                            <ul class="parsley-errors-list filled" id="pass-error" style="display:none">
                                <li class="parsley-required">Passwords do not match</li>
                            </ul>		
                        </div>
                        <ul class="parsley-errors-list filled" id="email-error" style="display:none">
                            <li class="parsley-required">Please enter a valid email address.</li>
                        </ul>
                        <ul class="parsley-errors-list filled" id="passregex-error" style="display:none">
                            <li class="parsley-required">Password should be minimum 8 characters and contain at least three of the following: uppercase letters, lowercase letters, numbers, or special characters.</li>
                        </ul>		
                </div>
                        <!-- CAPTCHA Section -->
                        <div id="captchaa-section" class="form-group m-b-15">
                            <label for="captcha">Enter the text from the image:</label>
                            <br>
                            <!-- Container for CAPTCHA SVG -->
                            <div id="captcha-svg-container">
                                <img src="data:image/svg+xml;base64,<%= captchaSvg %>" alt="CAPTCHA" id="captcha-image">
                            </div>
                            <br>
                            <input type="text" id="captcha" name="captcha" required class="form-control input-lg" placeholder="Enter CAPTCHA">
                        </div>
                
                        <div class="login-buttons">
                            <button id="nextBtn" type="submit" class="btn btn-success btn-block btn-lg" hidden>Next</button>
                            <button id="onSignupSubmit" type="submit" class="btn btn-success btn-block btn-lg">Sign up</button>
                        </div>
                    </div>
                    <div class="m-t-20">
                        Already a member? Click <a href="login">here</a> to login.
                    </div>
                    <div class="m-t-20" style="display: flex; justify-content: center;">
                        <span id="SignupSSODiv"> <a id="SignupSSO" href="" class="text-success">Signup with SSO </a> </span>
                        <span id="backToLoginDiv"> <a id="loginBack" href="" class="text-success">Signup with Email </a> </span>
                    </div>
                
                    <hr>
                    <div id="poweredByAppICE" class="m-t-20" style="display: flex; justify-content: center; font-weight: bold;">
                        Powered by AppICE
                    </div>
                    <p class="text-center m-t-20">
                        © Appice. All Rights Reserved 2015-2030
                        <br>
                        <a  id="appICEPrivacy" href="/privacypolicy"> AppICE Privacy Policy</a>
                    </p>
                </form>
            </div>
        </div>
        <!-- end login -->
	</div>
	<!-- end page container -->


    <style>
        .field-icon {
            position: absolute;
            top: 65%;
            right: 10px; 
            transform: translateY(-50%); 
            cursor: pointer;
            z-index: 10; 
        }
        
        .position-relative {
            position: relative;
            display: flex;
            align-items: center; 
        }
        </style>
	<!-- ================== BEGIN BASE JS ================== -->
	<script nonce="<%=nonce%>" src="assets/plugins/jquery/jquery-3.6.0.min.js"></script>
	<script nonce="<%=nonce%>" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
	<!--[if lt IE 9]>
		<script src="assets/crossbrowserjs/html5shiv.js"></script>
		<script src="assets/crossbrowserjs/respond.min.js"></script>
		<script src="assets/crossbrowserjs/excanvas.min.js"></script>
	<![endif]-->
	<script nonce="<%=nonce%>" src="assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
	<script nonce="<%=nonce%>" src="assets/plugins/jquery-cookie/jquery.cookie.js"></script>
	<!-- ================== END BASE JS ================== -->

	<!-- ================== BEGIN PAGE LEVEL JS ================== -->
	<script nonce="<%=nonce%>" src="assets/js/login-v2.demo.min.js"></script>
    <script nonce="<%=nonce%>" src="v3/assets/plugins/parsley/dist/parsley.js"></script>
	<script nonce="<%=nonce%>" src="assets/js/apps.home.js"></script>
    <script nonce="<%=nonce%>" src="assets/plugins/jquery/sha256.min.js"></script>
	<!-- ================== END PAGE LEVEL JS ================== -->
    <script nonce="<%=nonce%>">
    $('#selectedButton').val('login_Email'); // Set the value of hidden input
    document.getElementById('checkEmailExistence').addEventListener('click', function () {
            const userEmail = document.getElementById('useremail').value;
            let buffEmail = getProcessedString(userEmail);
            const selectedButton = $('#selectedButton').val()
            fetch(`/check-email-existence?buffEmail=${buffEmail}&selectedButton=${selectedButton}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
            })
                .then(response => response.json())
                .then(data => {

                    if (data.allowUser) {
                        $('#msgbox').hide();
                        $("#user_email").val(userEmail);
                        $("#user_email").attr("readonly", true);
                        $("#user_email").css("background-color", "#000000");
                        document.getElementById('approveDetails').style.display = 'block';
                        document.getElementById('checkApproved').style.display = 'none';
                    } else {
                        let dynamicContent = 'Email Address'
                        <% if (authType){ %>
                        // $('#msgbox').show();
                        let authTypeValue = '<%= authType %>';
                         dynamicContent = (authTypeValue === 'ad') ? 'SSO id' : 'Email Address';
                        <% } %>
                        $('#msgbox').show();
                        $('#messagebox').text(`${dynamicContent} is Already Registered`);
                    }



                    const pass1Container = $('#pass1-container');
                    const pass2Container = $('#pass2-container');
                    const baContainer = $('#ba_input');
                    const adContainer = $('#ad_input');
                    const emailInput = $('#user_email');

                    const selectedAuthType = $('#selectedButton').val()
                    // Toggle between div visibility based on selectedAuthType
                    if (selectedAuthType == 'login_SSO') {
                        // Hide password and confirm password divs
                        pass1Container.css('display', 'none');
                        pass2Container.css('display', 'none');

                        $('#pass1, #pass2').val(buffEmail);
                        const emailInputType = emailInput.attr('type');

                        if (emailInputType === "email") {

                            // Update the type attribute of the email input
                            emailInput.attr('type', 'text');
                            // Remove Parsley validation attributes
                            // Remove Parsley validation attributes

                            emailInput.removeAttr("data-parsley-type");
                            emailInput.removeAttr("data-parsley-required");
                            emailInput.removeAttr("data-parsley-required-message");

                        }
                    } else {
                        // Show both password and confirm password divs
                        pass1Container.css('display', 'block');
                        pass2Container.css('display', 'block');
                        baContainer.css('display', 'block');
                        adContainer.css('display', 'none');
                    }

                })
                .catch(error => {
                    console.error('Error:', error);
                });
        });
     let firstname = document.getElementById('user_name');
     let email = document.getElementById('user_email');
     let hemail = document.getElementById('hemail');
     let h_fullname = document.getElementById('h_fullname');
     let password = document.getElementById('pass1');
     let confirmPassword = document.getElementById('pass2');

     password.addEventListener('keyup',function(){
        var regularExpression = /^(?:(?=.*[a-z])(?:(?=.*[A-Z])(?=.*[\d\W])|(?=.*\W)(?=.*\d))|(?=.*\W)(?=.*[A-Z])(?=.*\d)).{8,}$/
      if(!regularExpression.test(password.value)) {
        document.getElementById("onSignupSubmit").disabled = true;
        document.getElementById("nextBtn").disabled = true;

        $('#pass-error').hide();
        $('#passregex-error-1').show();
      }else{
        document.getElementById("onSignupSubmit").disabled = false;
        document.getElementById("nextBtn").disabled = false;

        $('#passregex-error-1').hide();
      }
    });
    confirmPassword.addEventListener('keyup',function(){
        var regularExpression = /^(?:(?=.*[a-z])(?:(?=.*[A-Z])(?=.*[\d\W])|(?=.*\W)(?=.*\d))|(?=.*\W)(?=.*[A-Z])(?=.*\d)).{8,}$/
      if(!regularExpression.test(confirmPassword.value)) {
        document.getElementById("onSignupSubmit").disabled = true;
        document.getElementById("nextBtn").disabled = true;

        $('#pass-error').hide();
        $('#passregex-error').show();
      }else{
        document.getElementById("onSignupSubmit").disabled = false;
        document.getElementById("nextBtn").disabled = false;

        $('#passregex-error').hide();
      }
    });

    document.getElementById('onSignupSubmit').addEventListener("click", onSignup);
    function getProcessedString(str) {
                let enStr = '';
                for (let i = 0; i < str.length; i++) {
                    // Shift each character by a fixed number of positions
                    let charCode = str.charCodeAt(i);
                    enStr += String.fromCharCode(charCode + 2); 
                }
                return enStr;
            }
    function onSignup(event) {
            if (password.value && confirmPassword.value) {
                  let buffName = getProcessedString(firstname.value);
                   h_fullname.value = buffName
                let buffEmail = getProcessedString(email.value);
                //   email.parentNode.removeChild(email);
                hemail.value = buffEmail;

                      <% if (t == 'sha256') { %>
                    let buffPassword = sha256(password.value);
                    password.value = buffPassword;
                    let buffConfirmPassword = sha256(confirmPassword.value);
                    confirmPassword.value = buffConfirmPassword;
                         <% } else { %>
                    let buffPassword = getProcessedString(password.value);
                    password.value = buffPassword;
                    let buffConfirmPassword = getProcessedString(confirmPassword.value);
                    confirmPassword.value = buffConfirmPassword;
                         <%}%>



                   var pass1 = $('#pass1').val();
                   var pass2 = $('#pass2').val();
                   if (pass1 !== pass2) {
                    $('#pass-error').show();
                    event.preventDefault();
                    return false;
                }
                 // Submit the form directly
                 var form = document.querySelector('form');
                if (form) {
                    form.submit();
                } else {
                    console.error('Form not found.');
                }

            }

        }

           // JS to toggle password visibility (icon)
       $(".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");
           }
       });
        
    </script>
	<script nonce="<%=nonce%>">
		$(document).ready(function() {

     const captchaEnabled = <%= captchaEnabled %>;
      
      // Show or hide CAPTCHA section and reset button based on captchaEnabled
      if (!captchaEnabled) {
        $("#onSignupSubmit").show();  
          $("#captchaa-section").hide();
          $("#nextBtn").hide();  


      } else {
          $("#captchaa-section").hide();  
          $("#onSignupSubmit").hide();  
          $("#nextBtn").show();
      }


// Handle Next button click to reveal CAPTCHA section
$('#nextBtn').on('click', function() {
    const password = $('#pass1').val();
    const confirmPassword = $('#pass2').val();
    const username = $('#user_name').val();

    let validationPassed = true;

    // Reset error messages
    $("#username-error").hide();
    $("#password-error").hide();
    $("#confirm-password-error").hide();
    $("#password-match-error").hide();

    // Validate username
    if (!username) {
        validationPassed = false;
    }

    // Validate password
    if (!password) {
        validationPassed = false;
    }

    // Validate confirm password
    if (!confirmPassword) {
        validationPassed = false;
    }

    // Check if passwords match
    if (password && confirmPassword && password !== confirmPassword) {
        $("#pass-error").show().text("Passwords do not match");
        validationPassed = false;
    }

    // Proceed only if validation passes
    if (validationPassed) {
        $('#captchaa-section').show();
        $("#onSignupSubmit").show();     
        $('#formDetails').hide();
        $('#nextBtn').hide();
    }
});

            const logofileName ='<%=logo_name%>'

            const is_sso ='<%=is_sso%>'

            if(is_sso == 'disable'){
                $("#SignupSSODiv").hide()
            }
            const imageUrl = 'assets/img/'+logofileName;
            const portal_name = '<%=portal_name%>'


            if(portal_name != ''){
               $('#portalName').text(portal_name);
            }

        // Function to check if the image exists
        function imageExists(url, callback) {
            var img = new Image();
            img.onload = function() {
                callback(true);
            };
            img.onerror = function() {
                callback(false);
            };
            img.src = url;
        }

        // Check if the image exists
        imageExists(imageUrl, function(exists) {
            if (exists) {
                // If image exists, render logo image
                $('#brandLink').html('<img src="' + imageUrl + '" />');
                $('#poweredByAppICE').show(); // Show the element
                $('#appICEPrivacy').hide()


            } else {
                // If image does not exist, render text-based brand
                $('#brandLink').html('<span class="brand-logo"></span><span class="brand-text">app<span class="text-theme">ICE</span></span>');
                $('#poweredByAppICE').hide(); // Hide the element
                $('#appICEPrivacy').show()
            }
        });


			App.init();
			LoginV2.init();
            // add Email validation to the input by default 
            addEmailValidation()
               // Hide the "Back to Login" div by default
            $('#backToLoginDiv').hide();

            // Call toggleToSSO() when the "Login with SSO" link is clicked
            $('#SignupSSO').on('click', function (event) {
                event.preventDefault();             // Prevent default link behavior (page reload)
                $('#selectedButton').val('login_SSO'); // Set the value of hidden input
                // get the auth type
                const authType = '<%=authType%>'
                if (authType == 'saml') {
                    window.location.href = '/sso-dashboard'; // Replace with your SSO dashboard URL
                }
                removeEmailValidation();
                toggleToSSO();
                $('#SignupSSO').parent().hide();     // Hide the "Login with SSO" div
                $('#backToLoginDiv').show();        // Show the "Back to Login" div
            });

            // Call toggleToLogin() when the "Back to Login" link is clicked
            $('#loginBack').on('click', function (event) {
                $('#selectedButton').val('login_Email'); // Set the value of hidden input
                event.preventDefault();             // Prevent default link behavior (page reload)
                addEmailValidation();
                toggleToLogin();
                $('#backToLoginDiv').hide();            // Hide the "Back to Login" div
                $('#SignupSSO').parent().show();        // Show the "Login with SSO" div
            });

            function addEmailValidation() {
                $('#onSignupSubmit').prop('disabled', true);

                // Reinitialize Parsley on the email input
                $('#useremail').parsley();
                // Bind input event handler for the     email input
                $('#useremail').on('input', function () {
                    if ($(this).parsley().isValid()) {
                        $('#onSignupSubmit').prop('disabled', false);
                    } else {
                        $('#onSignupSubmit').prop('disabled', true);
                    }
                });
            }

            // Update the removeEmailValidation() function to disable email validation
            function removeEmailValidation() {
                // Destroy Parsley instance on the email input
                $('#useremail').parsley().destroy();
                // Remove event binding for input event on the email input
                $('#useremail').off('input');
            }

            function toggleToSSO() {
                $('#useremail').val('');                 // Clear username input
                $('#onSignupSubmit').prop('disabled', false);     // Enable Login button
                let placeholderText = 'Enter Your SSO ID';   // Update placeholder text
                $("#useremail").attr("placeholder", placeholderText);
                $('#email-label').text("SSO id")
            }

            function toggleToLogin() {
                $('#useremail').val('');
                $('#onSignupSubmit').prop('disabled', true);        // Enable Login button
                $("SignupSSODiv").show();
                let placeholderText = 'Enter Your Email Address';   // Update placeholder text
                $("#useremail").attr("placeholder", placeholderText);
            }

            <% if (message){ %>
                $('#msgbox').show();
                $('#messagebox').text('<%= message %>');
                //$('#messagebox').text('Email Already exists in the system.');
            <% } %>
		});


      window.onload = function() {
            if ('<%=homePageNav%>' === 'false') {
                $('#signup-ul').hide();
            }
           };
		
	</script>
</body>
</html>
