<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>SMrtnxt - Lead Management System</title>
        <link rel="apple-touch-icon" sizes="180x180" href="<?php echo base_url() ?>assets/newimages/smrtnxt-logo-new.png">
        <link rel="icon" type="image/png" sizes="32x32" href="<?php echo base_url() ?>assets/newimages/smrtnxt-logo-new.png">
        <link rel="icon" type="image/png" sizes="16x16" href="<?php echo base_url() ?>assets/newimages/smrtnxt-logo-new.png">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/core.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/icon-font.min.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/src/plugins/datatables/css/dataTables.bootstrap4.min.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/src/plugins/datatables/css/responsive.bootstrap4.min.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/style.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/custom.css">
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-119386393-1"></script>
        <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', 'UA-119386393-1');
        </script>
    </head>
    <body>
        <div class="wrapper loginBackground">
            <div class="container">
                <div class="col-12 pl-0 pr-0">
                    <div class="d-flex align-items-center min-vh-100">
                        <div class="w-100 d-block bg-white shadow-lg rounded my-5">
                            <div class="row">
                                <div class="col-lg-8 d-none d-lg-block rounded-left pr-0">
                                    <img src="<?php echo base_url() ?>assets/newimages/7015971.jpg" class="loginBannerImg">
                                </div>
                                <div class="col-lg-4 pl-0">
                                    <div class="p-5">
                                        <div class="text-center">
                                            <img src="<?php echo base_url() ?>assets/newimages/smrtnxt-logo-new.png" class="loginLogo">
                                        </div>
                                        <h5 class="loginTxt mb-2">Welcome Back!</h5>
                                        <p class="loginSubTxt text-muted mb-4">Enter your username and password to access admin panel.</p>
                                        <form id="login-form" action="<?php echo base_url('Homecontroller/loginProcess') ?>" method="post" novalidate>
                                            <div class="form-group pd-0">
                                                <input type="text" class="form-control form-control-user" id="user_name" name="user_name" placeholder="Email ID" oninput="this.value = this.value.trimStart().replace(/\s+/g, ' ')">
                                            </div>
                                            <div class="form-group pd-0">
                                                <input type="password" class="form-control form-control-user" id="password" name="password" placeholder="Password">
                                            </div>
                                            <div class="form-group d-flex align-items-center pd-0">
                                                <span class="input-group-addon">
                                                    <i class="fa fa-calculator" aria-hidden="true"></i>
                                                    <?php 
                                                        $a = rand(1,9);
                                                        $b = rand(1,9);
                                                    ?>
                                                    <span><?php echo $a; ?> + <?php echo $b; ?> = </span>
                                                </span>
                                                <div class="ml-5">
                                                    <input type="text" name="captcha" id="captcha" class="form-control" placeholder="Solve This">
                                                    <input type="hidden" name="captchaa" id="captchaa" class="form-control" value="<?php echo $a; ?>">
                                                    <input type="hidden" name="captchab" id="captchab" class="form-control" value="<?php echo $b; ?>">
                                                </div>
                                            </div>
                                            <button type="submit" class="btn btn-block w-100 btnLoginColor mt-20">Log In</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src="<?php echo base_url(); ?>assets/js/core.js"></script>
        <script src="<?php echo base_url(); ?>assets/js/script.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/js/process.js"></script>
        <script src="<?php echo base_url(); ?>assets/js/layout-settings.js"></script>
        <script src="<?php echo base_url(); ?>assets/src/plugins/datatables/js/jquery.dataTables.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/src/plugins/datatables/js/dataTables.bootstrap4.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/src/plugins/datatables/js/dataTables.responsive.min.js"></script>
        <script src="<?php echo base_url(); ?>assets/src/plugins/datatables/js/responsive.bootstrap4.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function () {
                const form = document.getElementById('login-form');
                const userBranch = document.getElementById('user_branch');
                const userName = document.getElementById('user_name');
                const userPassword = document.getElementById('password');
                const userCaptcha = document.getElementById('captcha');
                function showError(input, message) {
                    let error = input.parentNode.querySelector('.error-message');
                    if (!error) {
                        error = document.createElement('div');
                        error.className = 'error-message';
                        error.style.color = 'red';
                        error.style.fontSize = '12px';
                        input.parentNode.appendChild(error);
                    }
                    error.textContent = message;
                }
                function clearError(input) {
                    let error = input.parentNode.querySelector('.error-message');
                    if (error) {
                        error.remove();
                    }
                }
                function validateUserName() {
                    if (userName.value === '') {
                        showError(userName, 'This field is required.');
                        return false;
                    }
                    clearError(userName);
                    return true;
                }
                function validateUserPassword() {
                    if (userPassword.value === '') {
                        showError(userPassword, 'This field is required.');
                        return false;
                    }
                    clearError(userPassword);
                    return true;
                }
                function validateUserCaptch() {
                    if (userCaptcha.value === '') {
                        showError(userCaptcha, 'This field is required.');
                        return false;
                    }
                    clearError(userCaptcha);
                    return true;
                }
                userName.addEventListener('blur', validateUserName);
                userPassword.addEventListener('blur', validateUserPassword);
                userCaptcha.addEventListener('blur', validateUserCaptch);
                form.addEventListener('submit', function (e) {
                    e.preventDefault();
                    const validUser = validateUserName();
                    const validPassword = validateUserPassword();
                    const validCaptch = validateUserCaptch();
                    if (validUser && validPassword && validCaptch) {
                        const formData = new FormData(form);
                        fetch(form.action, {
                            method: 'POST',
                            body: formData
                        })
                        .then(response => response.json())
                        .then(data => {
                            if (data.status === 'success') {
                                alert('Login Successful');
                                window.location.href = data.redirect;
                            } else {
                                alert(data.message); // Replace with custom error handling
                            }
                        })
                        .catch(() => {
                            alert('Something went wrong. Please try again.');
                        })
                        .finally(() => {
                            submitBtn.disabled = false;
                            submitBtn.textContent = 'Submit';
                        });
                    }
                });
            });
        </script>
    </body>
</html>