<!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 | App Authentication 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 ================== -->
    <style>
        .resend-btn{
            color: gray; 
            text-decoration: none;
        }
    </style>
</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>
    <div class="alert alert-success fade in m-b-15" style="position:relative;z-index:1021;display:none;" id='sucbox'>
        <strong id="successbox"></strong>
        <span class="close" data-dismiss="alert">&times;</span>
    </div>
	<!-- begin #page-loader -->
	
	<!-- 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 method="POST" action="authentication" class="margin-bottom-0" data-parsley-validate="true">
                        <input type="hidden" name="_csrf" value="<%=csrfToken%>">
                        <div class="form-group m-b-15">
                            <input type="text" maxlength="6"  class="form-control input-lg" placeholder="Enter One Time Password" name="otp" data-parsley-type="number" data-parsley-required="true" />
                        </div>
                        
                        <div class="login-buttons">
                            <button type="submit" class="btn btn-success btn-block btn-lg">Submit OTP</button>
                        </div>
                        <br>
                        <div style="float: right;" class="resend-buttons">
                            <a class="initResendOtp"  class="resend-btn">Resend OTP</a>
                        </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) {

            const 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


            }
        });
 
        })									
	</script>
    <script nonce="<%=nonce%>">
          <% if (locals.message){ %>
                showMessage("<%= message %>");              
            <% } %>         
                    //OTP Send
           <%  if(locals.otpsent) { %>
               $('#msgbox').hide();
                $('#sucbox').show();
                $('#successbox').text('OTP Sent to Registered Email');
                setTimeout(()=>{
                     $('#sucbox').hide();
                },2000)                    
            <%}%>
                        // OTP already Sent In Last Minute 
            <%  if(locals.alreadysent){ %>
                $('#sucbox').hide();
                $('#msgbox').show();
                $('#messagebox').text('OTP Already Sent to Registered Email, Please try again after 1 minute');
                setTimeout(()=>{
                         $('#msgbox').hide();
                },2000)           
            
            <% } %>

            //OTP Matched
            <%  if(locals.auth) { %>
                $('#msgbox').hide();
                $('#sucbox').show();
                $('#successbox').text('Success.. Redirecting to dashboard');
                    window.location = `/dashboard`   
            <%}%>

            //OTP Expired
            <%  if(locals.expired) { %> 
                $('#msgbox').show();
                $('#sucbox').hide();
                $('#messagebox').text('OTP Expired, Please try again');
            // show msg after 2 seconds 
                setTimeout(()=>{
                 $('#msgbox').hide();
                $('#sucbox').show();
                $('#successbox').text('CLick On Resend To Generate New OTP ');
                },2000)
        //  Hide the popup msg after three seconds
                setTimeout(()=>{
                $('#sucbox').hide();
                },3000)
            <%}%>

            //Account Blocked
            <%  if(locals.blocked) { %> 
                $('#msgbox').show();
                $('#sucbox').hide();
                $('#messagebox').text('You have exceeded the limits, Your account has been blocked');
                setTimeout(()=>{
                    window.location = `/logout`;
                },2000)
                    
            <%}%>
            
           
        function showMessage(key) {  
            $('#msgbox').show();       
            $('#messagebox').text(key);
            $("#msgbox").delay(3000).fadeOut(300);
        }
                $(".initResendOtp").click(function() { 
                    window.location = `/login`;
                });
    </script>
</body>
</html>
