<!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="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-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" id="login-ul">
                    <li class="dropdown">
                        <a href="index">HOME</a>
                    </li>
                    <li><a href="index#product">PRODUCT</a></li>
                    <li><a href="https://www.appice.io/index.php/about-us">ABOUT US</a></li>
                    <!-- <li><a href="https://www.appice.io/index.php/blog" 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">
                    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="login" class="margin-bottom-0" data-parsley-validate="true">
                                <input type="hidden" name="_csrf" value="<%= csrfToken %>">
                                <input type="hidden" id="selectedButton" name="selectedButton" value="">
                            
                                <!-- Login Section -->
                                <div id="login-section">
                                    <div class="form-group m-b-20">
                                        <input type="email" class="form-control input-lg"
                                            placeholder="Enter Your Email Address"
                                            data-parsley-type="email" name="username" id="username"
                                            data-parsley-trigger="change"
                                            data-parsley-required="true" autocomplete="off" />
                                    </div>
                                    <input type="hidden" id="email" name="email">
                                    <div class="form-group m-b-20 position-relative">
                                        <input type="password" class="form-control input-lg" placeholder="Password"
                                            data-parsley-required="true" name="password" id="password" autocomplete="off" />
                                        <span toggle="#password" class="fa fa-fw fa-eye field-icon toggle-password"></span>
                                    </div>
                                </div>
                            
                                <!-- CAPTCHA Section -->
                                <div id="captcha-section" class="form-group m-b-20" style="display: <%= captchaEnabled ? 'block' : 'none' %>;">
                                    <label for="captcha">Enter the text from the image:</label>
                                    <br>
                                    <img src="data:image/svg+xml;base64,<%= captchaSvg %>" alt="CAPTCHA" id="captcha-image">
                                    <br>
                                    <input type="text" id="captcha" name="captcha" required class="form-control input-lg" placeholder="Enter CAPTCHA">
                                    <!-- Alert message for CAPTCHA -->
                                    <div id="captcha-alert" class="alert alert-danger" style="display: none;">CAPTCHA verification failed</div>
                                </div>
                            
                                <div class="login-buttons">
                                    <button id="onSigninSubmit" type="button" class="btn btn-success btn-block btn-lg" style="display: <%= captchaEnabled ? 'none' : 'block' %>;">Sign In</button>
                                    <button id="submitWithCaptcha" type="submit" class="btn btn-success btn-block btn-lg" style="display: <%= captchaEnabled ? 'block' : 'none' %>;">Sign In</button>
                                </div>
                            
                                <div class="m-t-20">
                                    Not a member yet? Click <a href="signup">here</a> to register. 
                                    <span style="padding-left:20px"><a id="forgetPass" href="" class="text-success">Forgot Password?</a></span>
                                </div>
                            
                                <div class="m-t-20" style="display: flex; justify-content: center;">
                                    <span><a id="login_Email" class="text-success">Login with Email</a></span>
                                    <span><a id="login_SSO" class="text-success">Login with SSO</a></span>
                                </div>
                            
                                <div id="poweredByAppICE" class="m-t-20" style="display: flex; justify-content: center; font-weight: bold;">
                                    Powered by AppICE
                                </div>
                            </form>
                            
            </div>
        </div>
        <!-- end login -->
    </div>
    <!-- end page container -->

    <style>
        .field-icon {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .position-relative {
            position: relative;
        }
        </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="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>
    <!-- ================== END PAGE LEVEL JS ================== -->
    <script nonce="<%=nonce%>">
        document.addEventListener('DOMContentLoaded', function() {
            // Variable indicating if CAPTCHA is enabled (this should be set by the server and passed to the script)
            var captchaEnabled = <%= captchaEnabled %>; // 1 if enabled, 0 if disabled
    
            // Function to handle sign-in
            function onSignin() {
                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;
                }
    
                var password = document.getElementById('password');
                var username = document.getElementById('username');
                var email = document.getElementById('email');
    
                <% if (t == 'sha256'){ %>
                    let buffPassword = sha256(password.value);
                <% }else{ %>
                    let buffPassword = getProcessedString(password.value);
                <% } %>  
    
                password.value = buffPassword;
                let buffEmail = getProcessedString(username.value);
            username.parentNode.removeChild(username);
                email.value = buffEmail;
    
                // Submit the form directly
                var form = document.querySelector('form');
                if (form) {
                    form.submit();
                }
            }
    
            if (captchaEnabled) {
                   //when login page renderes first time in case of captcha enabled
                    document.getElementById('login-section').style.display = 'block';
                    document.getElementById('captcha-section').style.display = 'none';
                    document.getElementById('onSigninSubmit').style.display = 'block';
                    document.getElementById('submitWithCaptcha').style.display = 'none';


                // When CAPTCHA is enabled
                document.getElementById('onSigninSubmit').addEventListener("click", function() {
                    // Hide the login section
                    document.getElementById('login-section').style.display = 'none';
                    // Show the CAPTCHA section
                    document.getElementById('captcha-section').style.display = 'block';
                    // Hide the first "Sign In" button
                    document.getElementById('onSigninSubmit').style.display = 'none';
                    // Show the real "Sign In" button that submits the form
                    document.getElementById('submitWithCaptcha').style.display = 'block';
                });
    
                // Add event listener to the real "Sign In" button that submits the form with CAPTCHA
                document.getElementById('submitWithCaptcha').addEventListener("click", onSignin);
            } else {
                // When CAPTCHA is disabled
                document.getElementById('login-section').style.display = 'block';
                document.getElementById('captcha-section').style.display = 'none';
                document.getElementById('onSigninSubmit').style.display = 'block'; // Show the real "Sign In" button
                document.getElementById('submitWithCaptcha').style.display = 'none'; // Hide the CAPTCHA submit button
    
                // Attach onSignin function to the real "Sign In" button
                document.getElementById('onSigninSubmit').addEventListener("click", onSignin);
            }
        });

    // 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 () {
             $('#login_Email').hide();
             $('#selectedButton').val('login_Email'); // Set the value of hidden input
            
            $('#login_Email').click(function () {
                $('#login_Email').hide();
                $('#login_SSO').show();
                $('#selectedButton').val('login_Email'); // Set the value of hidden input

                addEmailValidation();
                toggleToLogin();

            });

            $('#login_SSO').click(function () {

                const authType = '<%=adAuthType%>'
                $('#login_Email').show();
                $('#login_SSO').hide();

                if (authType == 'saml') {
                    window.location.href = '/sso-dashboard'; // Replace with your SSO dashboard URL
                }

                if (authType == 'ad' ) {
                    $('#selectedButton').val('login_SSO'); // Set the value of hidden input
                    removeEmailValidation()
                    toggleToSSO()
                }
             });
             const is_sso ='<%=is_sso%>'

            if(is_sso == 'disable'){
                $("#login_SSO").hide()
            }
            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

            }
        });
        

            localStorage.clear();
            App.init();
            LoginV2.init();
            addEmailValidation()


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

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

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

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

            function toggleToLogin() {

                $('#username').val('');
                // Enable Login button
                $('#onSigninSubmit').prop('disabled', true);
                $("SSOLoginDiv").show();
                // Update placeholder text
                let placeholderText = 'Enter Your Email Address';
                $("#username").attr("placeholder", placeholderText);
            }

            <% if (message) { %>
                $('#msgbox').show();
                //$('#messagebox').text('Wrong Username or Password !');
                $('#messagebox').text('<%=message%>');
            <% } %>

		});
    </script>



    <script nonce="<%=nonce%>">
        const forgotPasswordLink = document.querySelector('#forgetPass');
        forgotPasswordLink.addEventListener('click', function (event) {
            event.preventDefault(); // Prevent the link from navigating to another 
            if ('<%=forgetPassType%>' === 'false') {
                $('#msgbox').show();
                $('#messagebox').text('Please contact portal administrator to reset your password.');
            } else {
                window.location.href = "/forgot"; // Redirects the user to the /forgot route
            }
        });

        window.onload = function() {
            if ('<%=homePageNav%>' === 'false') {
                $('#login-ul').hide();
            }
            // Hide forgot password Div in case of AD authentication
            if ('<%=adAuthType%>' === 'ad') {
                $('#forgetPass').hide();
            }
           };

    </script>
</body>

</html>