<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
    <title>DO-ERP CII</title>
    <link rel="shortcut icon" href="assets/images/cutlogo.png">
    <link rel="stylesheet" type="text/css" href="<?=getJeasyui()?>themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<?=getJeasyui()?>themes/icon.css">
    <!-- Bootstrap core CSS -->
    <link href="<?= getBootstrap() ?>css/bootstrap.min.css" rel="stylesheet">
    <link href="<?= getBootstrap() ?>css/bootstrap-theme.css" rel="stylesheet">
    <link href="<?= getBootstrap() ?>css/baseformlogin.css" rel="stylesheet">

    <script type="text/javascript" src="<?=getJquery()?>jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="<?=getJeasyui()?>jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<?=getJS()?>global.format.js"></script>
    <!-- main bootstrap js -->
    <script src="<?= getBootstrap() ?>js/bootstrap.min.js"></script>
    <script>
        function wopen() {
            window.open('<?=site_url()?>', '_self');
        }

        $(function() {
            // Ensure the loading indicator is initially hidden
            $('#loadingIndicator').fadeOut();
            
            $("h2").fadeIn(3000);

            $('#frm').form({
                url: '<?=site_url('login/loginpass')?>',
                onSubmit: function() {
                    // Only show loading if the form passes validation
                    if ($(this).form('validate')) {
                        // Show the loading indicator before submitting the form
                        $('#loadingIndicator').fadeIn();
                        return true; // Allow form submission
                    } else {
                        return false; // Prevent form submission if validation fails
                    }
                },
                success: function(result) {
                    // Hide the loading indicator once the form is processed
                    $('#loadingIndicator').fadeOut();

                    var result = eval('(' + result + ')');
                    if (result.success) {
                        setTimeout(wopen(), 5000);  // Open new page after 5 seconds
                    } else {
                        $.messager.show({
                            title: 'Error',
                            msg: result.msg
                        });
                    }
                }
            });

            // Focus on the username input field when the page loads
            $("#nama_user").textbox('textbox').focus();
        });
    </script>
    <style>

    /* Remove default EasyUI panel styles */
.easyui-panel {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Customize EasyUI input fields */
.easyui-textbox input,
.easyui-passwordbox input {
    font-size: 16px !important;
    padding: 10px !important;
    border: 2px solid #ddd !important; /* Light gray border */
    border-radius: 4px !important;
    width: 100% !important;
    transition: border 0.3s ease-in-out !important;
}

.easyui-textbox input:focus,
.easyui-passwordbox input:focus {
    border-color: #007bff !important; /* Blue focus border */
    outline: none !important;
}

/* Flat design for EasyUI buttons */
.easyui-linkbutton {
    background-color: #007bff !important;
    border: none !important;
    color: white !important;
    padding: 12px !important;
    width: 100% !important;
    font-size: 16px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background-color 0.3s ease, box-shadow 0.3s ease !important;
}

.easyui-linkbutton:hover {
    background-color: #0056b3 !important; /* Darker blue on hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important; /* Light shadow on hover */
}

.easyui-linkbutton:focus {
    outline: none !important;
}


        body {
            margin: 0;
            padding: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url('../../../../../do-erp-core/assets/images/bg.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position-y: center;
        }

        

        .access-main {
            background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background */
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            padding: 30px;
            width: 100%;
            max-width: 400px;
            position: relative;
            z-index: 10;
            border-radius: 20px;
        }

        h2, .form-group {
            text-align: center;
        }

        button.btn {
            width: 100%;
            margin-top: 10px;
        }

        input::placeholder {
            color: #000; /* Black or any desired color */
            opacity: 1; /* Ensures full opacity */
        }

        input:-ms-input-placeholder { /* For Internet Explorer */
            color: #000;
        }

        input::-ms-input-placeholder { /* For Microsoft Edge */
            color: #000;
        }

        /* Loading Indicator Styles */
        #loadingIndicator {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7); /* Black background with opacity */
            z-index: 1000;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
            font-weight: bold;
        }

        /* Spinner Animation */
        #loadingIndicator .spinner {
            border: 4px solid transparent;
            border-top: 4px solid white;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
        }

        /* Keyframes for the spinner animation */
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        #floatingElement {
            position: fixed;
             top: 10px; 
            right: 1%;
            /* background-color: rgba(255, 255, 255, 0.9);
            padding: 10px;
            border: 1px solid #ccc;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
            z-index: 1000;
        }
    </style>
</head>
<body oncontextmenu="return false;">
    <main class="access-main">
        <div align="center">
            <img height="60" src="<?= getAssets()?>images/logo.png" alt="Logo">
            <h2 class="str-21 outer-spaced-top-30">Welcome Back.</h2>
        </div>
        <form id="frm" method="post" target="_blank">
            <div class="form-group">
                <input type="text" data-options="iconCls:'icon-man'" id="nama_user" name="nama_user" class="form-control" placeholder="Username">
            </div>
            <div class="form-group">
                <input type="password" class="form-control" name="pass" id="pass" size="23" data-options="iconCls:'icon-lock'" placeholder="Password">
            </div>
            <div class="form-group">
                <button type="submit" class="btn primary btn-block" iconCls="icon-key" href="<?=site_url('login/loginpass')?>">Login</button>
            </div>
        </form>
        <div class="outer-spaced-bottom-10 outer-spaced-top-30">
           <!-- <a e2e="forgot_password" href="<?=site_url('login/forgotpassword')?>">Lupa kata sandi</a> -->
        </div>
        <div id="floatingElement">
        <script type="text/javascript"> 
            var tlJsHost = ((window.location.protocol == "https:") ? "https://secure.trust-provider.com/" : "http://www.trustlogo.com/");
            document.write(unescape("%3Cscript src='" + tlJsHost + "trustlogo/javascript/trustlogo.js' type='text/javascript'%3E%3C/script%3E"));
        </script>
        <script language="JavaScript" type="text/javascript">
            TrustLogo("https://www.positivessl.com/images/seals/positivessl_trust_seal_lg_222x54.png", "POSDV", "none");
        </script>
    </div>
    
        <!-- Loading Indicator -->
        <div id="loadingIndicator">
            <div class="spinner"></div>
            <span>Loading...</span>
        </div>
    </main>
        
</body>

</html>
