<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">


<!-- Mirrored from www.urbanui.com/melody/template/pages/samples/login-2.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 15 Sep 2018 06:08:53 GMT -->
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>PULSE</title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="../../vendors/iconfonts/font-awesome/css/all.min.css">
    <link rel="stylesheet" href="../../vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="../../vendors/css/vendor.bundle.addons.css">
    <!-- endinject -->
    <!-- plugin css for this page -->
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="../../css/style.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="../images/PulseIcon/Asset 2favicon.png" />
    <style>

                body {
                    font-family: 'Open Sans', sans-serif !important;
                    font-size: 1rem !important;
                    color: #888;
                    font-weight: 400;
                    background: #f4f7fa;
                    position: relative;
                }

                p {
                    font-size: 0.75rem !important;
                    margin-top: 0;
                    margin-bottom: 1rem;
                }


                /**  =====================
              Authentication css start
        ==========================  **/
        .auth-wrapper {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            min-width: 100%;
            min-height: 100vh;
        }
        
        /* Background with shades of #392C70 */
        .bgR {
            animation: slide 3s ease-in-out infinite alternate;
            background-image: linear-gradient(-60deg, #392C70 50%, #5f4b8b 40%); /* Dark purple to a lighter purple */
            bottom: 0;
            left: -50%;
            opacity: .2;
            position: fixed;
            right: -50%;
            top: 0;
            z-index: -1;
        }

        .bg2R {
            animation-direction: alternate-reverse;
            animation-duration: 4s;
        }

        .btn {
            background-image: linear-gradient(-135deg, #3d3582 0%, #6e5fa5 100%); /* A gradient from a deeper purple to a more lavender shade */
        }

        .bg3R {
            animation-duration: 5s;
        }

        /* Content box with a semi-transparent white background */
        .content {
            background-color: rgba(255, 255, 255, .8); /* Light transparent white */
            border-radius: .25em;
            box-shadow: 0 0 .25em rgba(0, 0, 0, .25);
            box-sizing: border-box;
            left: 50%;
            padding: 10vmin;
            position: fixed;
            text-align: center;
            top: 50%;
            transform: translate(-50%, -50%);
        }

                h1 {
                    font-family: monospace;
                }

                @keyframes slide {
                    0% {
                        transform: translateX(-25%);
                    }

                    100% {
                        transform: translateX(25%);
                    }
                }



        .card {
            margin-bottom: 0;
            border-radius: 1em;
            box-shadow: 0 0 .5em #392C70;
        }

                .auth-content {
                    position: relative;
                    width: 390px;
                    padding: 15px;
                }
    </style>
</head>

<body style="background-image: url('images/PulseIcon/GIS.jpg'); background-size: contain; background-position: center; ">

    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5);"></div>


    <!-- Login Form -->
    <!--<div class=" align-content-lg-center d-flex align-items-center justify-content-center ">
    <div class=" card ">
        <div class="card-body text-left p-6">-->
    <!-- Navbar -->
    <!--<nav class="col-lg-12 col-12 mb-4 mt-4">
                <div class="navbar-menu-wrapper d-flex align-items-stretch justify-content-center">
                    <div class="text-center d-flex">
                        <a class="navbar-brand brand-logo">
                            <img src="images/PulseIcon/updated_pulse_logo.png" style="height: 1.5rem; width:auto; padding: 5px; " alt="logo" />
                        </a>
                    </div>
                </div>
            </nav>
            <h5 class="urdu theme-color-text ">Welcome to <br> Parcel Survey Dashboard</h5>
            <form class="pt-3">
                <div class="form-group urdu">
                    <label for="exampleInputEmail"></label>
                    <div class="input-group">
                        <div class="input-group-prepend ">
                            <span class="input-group-text  border-right-0">
                                <i class="fa fa-user theme-color-text"></i>
                            </span>
                        </div>
                        <input type="text" class="form-control form-control-lg border-left-0" id="exampleInputEmail" placeholder="Enter CNIC Without Dashes">
                    </div>
                </div>
                <div class="form-group urdu">
                    <label for="exampleInputPassword"></label>
                    <div class="input-group">
                        <div class="input-group-prepend ">
                            <span class="input-group-text  text-green border-right-0">
                                <i class="fa fa-lock theme-color-text"></i>
                            </span>
                        </div>
                        <input type="password" class="form-control form-control-lg border-left-0" id="exampleInputPassword" placeholder=" Enter Password Here">
                    </div>
                </div>
                <div class="my-2 d-flex justify-content-between align-items-center">
                    <div class="form-check urdu">
                        <label class="form-check-label text-white">
                            <input type="checkbox" class="form-check-input">
                            Keep me signed in
                        </label>
                    </div>

                </div>
                <div class="my-3">
                    <a class="btn btn-block theme-color-bg btn-lg urdu" onclick="performLogin()">Sign In</a>
                </div>
            </form>
        </div>
    </div>
    </div>-->


        <!-- NOTICE: You can use the _analytics.html partial to include production code specific code & trackers -->
        <div class="auth-wrapper">
            <div class="bgR"></div>
            <div class="bgR bg2R"></div>
            <div class="bgR bg3R"></div>
            <div class="auth-content">

                <main>

                    <!-- Section -->
                    <section class="vh-lg-100 mt-0 mt-lg-0 bg-soft d-flex align-items-center">
                        <div class="container"  style="background-color: rgba(255, 255, 255, 0) !important;">

                            <div class="row justify-content-center">
                                <div class="col-12 d-flex align-items-center justify-content-center">
                                    <div class="card urdu"  style="border:none!important;background-color: rgba(255, 255, 255, 0.8) !important;">
                                        <div class="card-body text-center" style="background-color: rgba(255, 255, 255, 0) !important;">
                                            <div class="mb-2 gabriola">
                                                <img src="images/PulseIcon/updated_pulse_logo.png" style="height: 8vh; padding: 5px;" alt="logo">
                                                <h4 class="b-title mt-2  theme-color-text" style="">Door to Door Survey Dashboard</h4>
                                                <h7 class=" mb-2 text-muted">Vendor Signin</h7>
                                            </div>
                                            <div  class="mt-2">
                                                <div class="form-group mb-1 p-0 ">
                                                    <label for="exampleInputEmail"></label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend ">
                                                            <span class="input-group-text  border-right-0">
                                                                <i class="fa fa-user theme-color-text"></i>
                                                            </span>
                                                        </div>
                                                        <input type="text" class="form-control form-control-lg border-left-0" id="exampleInputEmail" placeholder="Enter CNIC Without Dashes">
                                                    </div>
                                                </div>
                                                <div class="form-group  mt-3 ">
                                                    <label for="exampleInputPassword"></label>
                                                    <div class="input-group">
                                                        <div class="input-group-prepend ">
                                                            <span class="input-group-text  text-green border-right-0">
                                                                <i class="fa fa-lock theme-color-text"></i>
                                                            </span>
                                                        </div>
                                                        <input type="password" class="form-control form-control-lg border-left-0" id="exampleInputPassword" placeholder=" Enter Password Here">
                                                    </div>
                                                </div>
                                            
                                                <div class="d-grid">
                                                    <!-- Forgot Password and Register Links -->
                                                    <p class="mb-2 text-muted">
                                                        Forgot password?
                                                        <a href="javascript:void(0)" (click)="showSweetAlert()" class="">Reset</a>
                                                    </p>
                                                    <p class="mb-0 text-muted">
                                                        Don’t have an account?
                                                        <a href="javascript:void(0)" (click)="showSweetAlert()" class="">Register</a>
                                                    </p>

                                                    <button onclick="performLogin()" class=" mt-3 btn  btn-gray-500 text-white">Sign in</button>
                                                  
                                                </div>

                                            </div>

                                        </div>
                                        <div class="mt-0 text-center">
                                            <hr>
                                            <p class="mb-2 text-muted">
                                                Powered By
                                                <a [routerLink]="['https://pulse.gop.pk']">
                                                    <img class="logo" width="55px" src="https://pulse.meetfarhan.com/wp-content/uploads/2023/09/pulse-logo-Green.png" alt="PULSE">
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </section>
                </main>
            </div>
        </div>

        <!-- JS Scripts -->
        <script src="../../vendors/js/vendor.bundle.base.js"></script>
        <script src="../../vendors/js/vendor.bundle.addons.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
        <script src="/js/off-canvas.js"></script>
        <script src="/js/hoverable-collapse.js"></script>
        <script src="/js/misc.js"></script>
        <script src="/js/settings.js"></script>
        <script src="/js/todolist.js"></script>
        <script src="/js/customeJs/main.js"></script>

    </body>
</html>
<!-- Custom JS for Login -->
<script>
    document.addEventListener("DOMContentLoaded", function () {
        // Check if the user is authenticated
        if (isUserAuthenticated()) {
            // Redirect to login page if not authenticated
            window.location.href = 'index1.html'; // Assuming login page is 'login.html'
        }
    });


    function performLogin() {
        const username = document.getElementById('exampleInputEmail').value;
        const password = document.getElementById('exampleInputPassword').value;

        fetch('/api/Account/loginUser', { // Updated endpoint
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                cnic: username,
                password: password,
            }),
        })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(errorData => {
                        throw new Error(errorData.message || 'Try Again');
                    });
                }
                return response.json();
            })
            .then(data => {
                if (data && data.error) {
                    // Handle error, show a message, etc.
                    alertResponse(data.error);
                } else if (data) {
                    // Login successful, data should contain user information and token
                    // Store the token and user info in localStorage
                    localStorage.setItem('accessToken', data.token);
                    localStorage.setItem('userName', data.name);
                    localStorage.setItem('userId', data.userId);
                    localStorage.setItem('vendorName', data.vendor.name); // Store vendor name
                    localStorage.setItem('roleName', data.roleName); // Store role name
                    localStorage.setItem('vendorLogo', data.vendor.logo); // Store vendor logo

               
                    // Usage
                    alertResponseSuccess('Logged In').then(() => {
                        return wait(1000); // Wait for 5000 milliseconds
                    }).then(() => {
                        // Redirect back to the original page or a default page
                        window.location.href = 'index1.html';
                    });


                } else {
                    console.error('Invalid response format from server');
                    // Handle unexpected response format

                    alertResponse('Try Again in Few moments');
                }
            })
            .catch(error => {
                // Handle network errors or other unexpected issues
                console.error('Error during login:', error.message);

                let errorRes = "";
                if (error.message === "Invalid username") {
                    errorRes = "You have entered the wrong Cnic.";
                } else if (error.message === "Invalid password") {
                    errorRes = "Entered password is incorrect.";
                }
               // alertResponse(errorRes);
                alertResponse(error.message);
            });
    }


    function wait(ms) {
        return new Promise((resolve) => setTimeout(resolve, ms));
    }




</script>


