<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<!--<![endif]-->
<head>
	<meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>AppICE | Login Page</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 ================== -->
	<!-- ================== END BASE JS ================== -->
</head>
<body class="pace-top bg-white">
    <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>
	<!-- begin #page-loader -->
	<!-- <div id="page-loader" class="fade in"><span class="spinner"></span></div> -->
	<!-- end #page-loader -->
	
	<!-- begin #page-container -->
	<div id="page-container" class="fade">
	    <!-- begin login -->
        <div class="login login-with-news-feed">
            <!-- begin news-feed -->
            <div class="news-feed">
                <div class="news-image">
                   <img src="assets/img/login-bg/bg-8.jpg" data-id="login-cover-image" alt="">
                </div>
                <div class="news-caption" style="display:none">
                    <h4 class="caption-title"> Welcome to private beta for AppICE.</h4>
                    <p>
                        
                    </p>
                </div>
            </div>
            <!-- end news-feed -->
            <!-- begin right-content -->
            <div class="right-content">
                <div style="
                    padding-top: 10%;
                    padding-bottom: 5%;
                    text-align: center;
                    font-size: 18px;
                ">
                    <h4 class="caption-title" style="font-size:25px;"></h4>
                  </div>
                <!-- begin login-header -->
                <div class="login-header" style="padding:0px;padding-left:12%">
                    <div class="brand" id="brandLink" >
                        <span class="logo"></span> AppICE
                        <small>User life cycle management for your apps.</small>
                    </div>
                    
                </div>
                <!-- end login-header -->
                <!-- begin login-content -->
                <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>
                      <%  }) %>
                     <% } %>
                     <form autocomplete="off" method="POST" action="forgot" class="margin-bottom-0" data-parsley-validate="true" onsubmit="return validateForm();">
                        <input type="hidden" name="_csrf" value="<%=csrfToken%>">
                        <!-- Email Input -->
                        <div class="form-group m-b-15" id="email-section">
                            <input type="email" class="form-control input-lg" placeholder="Your Email Address" name="email" data-parsley-type="email" data-parsley-required="true" id="user_email" />
                        </div>

                        <ul class="parsley-errors-list filled" id="email-error" style="display:none">
                            <li class="parsley-required">Please enter a valid Email</li>
                        </ul>
                    
                        <!-- CAPTCHA Section (Initially Hidden) -->
                        <% if (captchaEnabled) { %>
                        <div class="form-group m-b-15" id="captcha-section">
                            <label for="captcha">Enter the text from the image:</label>
                            <br>
                            <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" class="form-control input-lg" placeholder="Enter CAPTCHA">
                        </div>
                        <% } %>
                    
                        <!-- Next Button Section (Initially Visible if CAPTCHA is Enabled) -->
                        <div class="login-buttons" id="next-button-section">
                            <button type="button" id="next-btn" class="btn btn-success btn-block btn-lg">Next</button>
                        </div>
                    
                        <!-- Reset Password Button (Initially Hidden) -->
                        <div class="login-buttons" id="captcha-submit-section">
                            <button type="submit" class="btn btn-success btn-block btn-lg">Send Reset Password Link</button>
                        </div>
                        <hr />
                        <p id="poweredByAppICE" class="text-center text-inverse" style="font-weight: bold;">
                            Powered by AppICE
                        </p>
                        <p class="text-center text-inverse">
                            &copy; AppICE. All Rights Reserved 2015-2030
                        </p>
                    </form>
                </div>
                <!-- end login-content -->
            </div>
            <!-- end right-container -->
        </div>
        <!-- end login -->
        
       
	</div>
	<!-- end page container -->
	
	<!-- ================== 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="v3/assets/plugins/parsley/dist/parsley.js"></script>

    <script nonce="<%=nonce%>" src="assets/js/apps.home.js"></script>
	<!-- ================== END PAGE LEVEL JS ================== -->

    <script nonce="<%=nonce%>">
        $(document).ready(function() {
            App.init();
    
            const logofileName = '<%=logo_name%>';
            const imageUrl = 'assets/img/' + logofileName;
    
            // 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


                } else {
                    // If image does not exist, render text-based brand
                    $('#brandLink').html('<span class="logo"></span> AppICE<small>User life cycle management for your apps.</small>');
                    $('#poweredByAppICE').hide(); // Hide the element
                
                
                }
            });

            <% if (message){ %>
                showMessage("<%= message %>");
            <% } %>
    
    // Get captchaEnabled flag from the server-side rendering
    const captchaEnabled = <%= captchaEnabled %>;

    // Show or hide CAPTCHA section and reset button based on captchaEnabled
    if (!captchaEnabled) {
        $("#captcha-section").hide();
        $("#captcha-submit-section").show(); // Show reset button when CAPTCHA is disabled
        $("#next-button-section").hide(); // Hide next button
    } else {
        $('#captcha-section').hide(); // Initially hide CAPTCHA section
        $('#captcha-submit-section').hide(); // Initially hide reset button
        $('#next-button-section').show(); // Show next button
    }

    // Handle Next button click to reveal CAPTCHA section
    $('#next-btn').on('click', function() {
        var user_email = $("#user_email").val();
        if (validateForm()) {  // Check email validation (already present)
            // Hide email section and next button
            $('#email-section').hide();
            $('#next-button-section').hide();

            if (captchaEnabled) {
                // Show CAPTCHA section and reset button if CAPTCHA is enabled
                $('#captcha-section').show();
                $('#captcha-submit-section').show();
            } else {
                // Directly submit the form if CAPTCHA is disabled
                $('form').submit();
            }
        }
    });

            function validateForm(){
                $('#email-error').hide();
                 //   Validating the username to contain only alphabet, number and underscore
                var user_email = $("#user_email").val()
                var re = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                if (!re.test(user_email)) {
                    $('#email-error').show();
                    return false;
                }
                return true;
            }    
            function showMessage(key) {
                $('#msgbox').show();
                $('#messagebox').text(key);
            }
        });
    </script>
</body>
</html>
