<!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 | Login</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="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="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>

    <div class="login-cover">
        <div class="login-cover-image"><img src="assets/img/login-bg/bg-8.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">
                    <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="coming-soon" 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="">
        <!-- begin login -->
        <div class="login login-v2 reset-container" data-pageload-addclass="animated fadeIn">
            <!-- begin brand -->
            <div class="login-header">
                <div class="brand">
                    Welcome 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>
                        <% }) %>
                            <% } %>
                            <form autocomplete="off" method="POST" action="reset" data-parsley-required="true" class="margin-bottom-0">
                                <input type="hidden" name="_csrf" value="<%=csrfToken%>">
                            
                                <!-- First Password Field (New Password) -->
                                <div class="form-group m-b-15 position-relative">
                                    <input type="password" class="form-control input-lg" placeholder="Your New Password" name="password" data-parsley-required="true" id="pass1" autocomplete="off" />
                                    <span toggle="#pass1" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                </div>
                            
                                <!-- Second Password Field (Confirm Password) -->
                                <div class="form-group m-b-15 position-relative">
                                    <input type="password" class="form-control input-lg" placeholder="Confirm Password" name="again" data-parsley-required="true" id="pass2" autocomplete="off" />
                                    <span toggle="#pass2" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                </div>
                            
                                <!-- Hidden Fields and Buttons -->
                                <input type="hidden" value="<%= prid %>" name="prid" />
                                <div class="login-buttons">
                                    <button id="onSignupSubmit" type="submit" class="btn btn-success btn-block btn-lg">Reset My Password</button>
                                </div>
                                <hr />
                                <p id="poweredByAppICE" class="text-center text-inverse" style="font-weight: bold;">
                                    Powered by AppICE
                                </p>            
                                <p class="text-center">
                                    &copy; Appice. All Rights Reserved 2015-2030
                                </p>
                            </form>
            </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="v3/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="v3/assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <script nonce="<%=nonce%>" src="v3/assets/plugins/jquery-cookie/jquery.cookie.js"></script>
    <!-- ================== END BASE JS ================== -->

    <!-- ================== BEGIN PAGE LEVEL JS ================== -->
    <!-- <script src="v3/assets/plugins/parsley/dist/parsley.js"></script> -->
    <script nonce="<%=nonce%>" src="assets/js/login-v2.demo.min.js"></script>
    <script nonce="<%=nonce%>" src="assets/js/apps.home.js"></script>
    <script nonce="<%=nonce%>" src="assets/plugins/jquery/sha256.min.js"></script>

    
    <style>
        .field-icon {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .position-relative {
            position: relative;
        }
        </style>

    <script nonce="<%=nonce%>">

// 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");
    }
});

    $(document).ready(function() {
        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;
            }
            const logofileName ='<%=logo_name%>'

            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
            } 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
            }
        });
    })
        let password = document.getElementById('pass1');
        let confirmPassword = document.getElementById('pass2');
        var input = document.getElementById('pass1');
        input.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;
                $('#passregex-error').show();
            } else {
                document.getElementById("onSignupSubmit").disabled = false;
                $('#passregex-error').hide();
            }
        });

        document.getElementById('onSignupSubmit').addEventListener("click", onSignup);
        function onSignup() {
                <% 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;
                <%}%>
            }
    </script>
</body>

</html>