<!doctype html>
<html lang="en" data-layout="vertical" data-topbar="light" data-sidebar="dark" data-sidebar-size="lg" data-sidebar-image="none">

<head>
    <meta charset="utf-8" />
    <title>Sign In | True Icon - Admin Panel</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta content="Premium Multipurpose Admin & Dashboard Template" name="description" />
    <meta content="Themesbrand" name="author" />
    <!-- App favicon -->
    <link rel="shortcut icon" href="<%=admin_asset_url%>images/favicon.ico">

    <!-- Layout config Js -->
    <script src="<%=admin_asset_url%>js/layout.js"></script>
    <!-- Bootstrap Css -->
    <link href="<%=admin_asset_url%>css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <!-- Icons Css -->
    <link href="<%=admin_asset_url%>css/icons.min.css" rel="stylesheet" type="text/css" />
    <!-- App Css-->
    <link href="<%=admin_asset_url%>css/app.min.css" rel="stylesheet" type="text/css" />
    <!-- custom Css-->
    <!-- <link href="<%=admin_asset_url%>css/custom.min.css" rel="stylesheet" type="text/css" /> -->
    <link href="<%=admin_asset_url%>css/dark.css" rel="stylesheet">
    <!-- custom Css-->
    <link href="<%=baseurl%>custom/custom.css" rel="stylesheet" type="text/css" />

    <style>
        .cust-login-header {
            color: #fff !important;
            font-size: 25px !important;
        }
        .login-error {
            padding: 0px !important;
            margin: 0px !important;
            text-align: center;
            color: red;
        }
    </style>

</head>
<% if(messages!='') {%>
    <div class="alert alert-secondary alert-dismissible alert-solid alert-label-icon fade show alert_customize" role="alert" id="succ_msg">
        <i class="ri-check-double-line label-icon"></i><strong>Success</strong> - <%=messages%>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
<%}%>                
<% if(errors!='') {%>
    <div class="alert alert-danger alert-dismissible alert-solid alert-label-icon fade show alert_customize" role="alert" id="err_msg">
        <i class="ri-error-warning-line label-icon"></i><strong>Error</strong> - <%=errors%>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
<% }%> 
<body>

    <div class="auth-page-wrapper pt-5">
        <!-- auth page bg -->
        <div class="auth-one-bg-position auth-one-bg" id="auth-particles">
            <div class="bg-overlay"></div>

            <div class="shape">
                <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1440 120">
                    <path d="M 0,36 C 144,53.6 432,123.2 720,124 C 1008,124.8 1296,56.8 1440,40L1440 140L0 140z"></path>
                </svg>
            </div>
        </div>

        <!-- auth page content -->
        <div class="auth-page-content">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center mt-sm-5 mb-4 text-white-50">
                            <div>
                                <a href="index.html" class="d-inline-block auth-logo cust-login-header">
                                    <!-- <img src="<%=admin_asset_url%>images/logo-light.png" alt="" height="20"> -->
                                    True Icon
                                </a>
                            </div>
                            <p class=" fs-15 fw-medium">Signin Portal</p>
                        </div>
                    </div>
                </div>
                <!-- end row -->

                <div class="row justify-content-center">
                    <div class="col-md-8 col-lg-6 col-xl-5">
                        <div class="card mt-4">

                            <div class="card-body p-4">
                                <div class="text-center mt-2">
                                    <!-- <h5 class="text-primary">Welcome Back !</h5> -->
                                    <p class="text-muted">Sign in to continue</p>
                                </div>
                                <div class="p-2 mt-4">
                                    <form class="row g-3 needs-validation" method="post" action="" novalidate>
                                        <div class="mb-3">
                                            <label for="username" class="form-label">Username</label>
                                            <input type="text" class="form-control" id="username" placeholder="Enter username" name="username"  required>
                                            <div class="invalid-feedback">This field is required.</div>
                                        </div>

                                        <div class="">
                                            <!-- <div class="float-end">
                                              <a href="auth-pass-reset-basic.html" class="text-muted">Forgot password?</a>
                                            </div> -->
                                            <label class="form-label" for="password-input">Password</label>
                                            <div class="position-relative auth-pass-inputgroup" style="position: relative">
                                              <input type="password" class="form-control pe-5" placeholder="Enter password" id="password-input" name="password" required>
                                              <div class="invalid-feedback">This field is required.</div>
                                              <button class="btn btn-link position-absolute end-0 top-0 text-decoration-none text-muted" type="button" id="password-addon"><i class="ri-eye-fill align-middle" id="password-icon"></i></button>
                                            </div>
                                          </div>
                                          
                                          <script>
                                            const passwordInput = document.getElementById('password-input');
                                            const passwordIcon = document.getElementById('password-icon');
                                            const passwordAddon = document.getElementById('password-addon');
                                          
                                            passwordAddon.addEventListener('click', function() {
                                              if (passwordInput.type === 'password') {
                                                passwordInput.type = 'text';
                                                passwordIcon.classList.remove('ri-eye-fill');
                                                passwordIcon.classList.add('ri-eye-off-fill');
                                              } else {
                                                passwordInput.type = 'password';
                                                passwordIcon.classList.remove('ri-eye-off-fill');
                                                passwordIcon.classList.add('ri-eye-fill');
                                              }
                                            });
                                          </script>
                                          
                                        

                                        <div class="form-check text-center">
                                            <% if(errors!='') {%>
                                                <label class="login-error"><%=errors%></label>
                                            <% } %>
                                        </div>

                                        <div class="">
                                            <button class="btn btn-success w-100" type="submit">Sign In</button>
                                        </div>
                                        
                                        <div class="text-center p-t-45 p-b-4">
                                            <!-- <span class="txt1">
                                                Forgot
                                            </span>
                    
                                            <a href="<%= baseurl %>login/#" class="txt2 hov1">
                                                Username / Password?
                                            </a> -->
                                        </div>
                                        <div class="text-center">
                                            <a href="<%= baseurl %>auth/forgot-password" class="txt2 hov1">
                                                Forgot Password?
                                            </a>
                                        </div>
                                        <div class="text-center">
                                            <span class="txt1">
                                                Create an account?
                                            </span>
                    
                                            <a href="<%= baseurl %>auth/signup" class="txt2 hov1">
                                                Sign up
                                            </a>
                                        </div>
                                    </form>
                                </div>
                            </div>
                            <!-- end card body -->
                        </div>
                        <!-- end card -->

                    </div>
                </div>
                <!-- end row -->
            </div>
            <!-- end container -->
        </div>
        <!-- end auth page content -->

        <!-- Forgot password modal -->
        <!-- <div class="modal fade" id="forgotPasswordModal" tabindex="-1" aria-labelledby="forgotPasswordModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="forgotPasswordModalLabel">Forgot Password</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <form id="forgotPasswordForm">
                            <div class="mb-3">
                                <label for="email" class="form-label">Email address</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
        </div> -->


        <!-- footer -->
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="text-center">
                            <p class="mb-0 text-muted">&copy;
                                <script>document.write(new Date().getFullYear())</script> Departmental ERP | True Icon Team. Developed by Kumaresh Sasmal
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </footer>
        <!-- end Footer -->
    </div>
    <!-- end auth-page-wrapper -->

    <!-- JAVASCRIPT -->
    <script src="<%=admin_asset_url%>libs/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="<%=admin_asset_url%>libs/simplebar/simplebar.min.js"></script>
    <script src="<%=admin_asset_url%>libs/node-waves/waves.min.js"></script>
    <script src="<%=admin_asset_url%>libs/feather-icons/feather.min.js"></script>
    <script src="<%=admin_asset_url%>js/pages/plugins/lord-icon-2.1.0.js"></script>
    <script src="<%=admin_asset_url%>js/plugins.js"></script>

    <!-- particles js -->
    <script src="<%=admin_asset_url%>libs/particles.js/particles.js"></script>
    <!-- particles app js -->
    <script src="<%=admin_asset_url%>js/pages/particles.app.js"></script>
    <!-- password-addon init -->
    <script src="<%=admin_asset_url%>js/pages/password-addon.init.js"></script>
    <script src="<%=admin_asset_url%>js/pages/form-validation.init.js"></script>
    <script src="<%=admin_asset_url%>js/sweetalert2.min.js"></script>
    <!-- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -->
<script>
  $(document).ready(function() {
    $('#forgotPasswordForm').on('submit', function(event) {
        event.preventDefault(); // Prevents the default form submission

        const email = $('#email').val();

        $.ajax({
            url: '<%=baseurl%>auth/otp-send', // Update with your server URL
            method: 'POST',
            data: { email: email },
            success: function(response) {
                if (response.success) {
                    Swal.fire({
                        title: 'Success!',
                        text: 'Password reset link has been sent to your email.',
                        icon: 'success'
                    });
                    $('#forgotPasswordModal').modal('hide');
                } else {
                    Swal.fire({
                        title: 'Error!',
                        text: response.message,
                        icon: 'error'
                    });
                }
            },
            error: function() {
                Swal.fire({
                    title: 'Error!',
                    text: 'An error occurred. Please try again later.',
                    icon: 'error'
                });
            }
        });
    });
});

</script>
</body>

</html>