
@{
    ViewBag.Title = "Login";
    Layout = null;
}

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--Style-->
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,700,800,900" rel="stylesheet">
    <link href="../css/component.css" rel="stylesheet" />
    <link href="../css/main.css" rel="stylesheet" />
    <link href="../css/ApplicationTemplate.css" rel="stylesheet" />
    <!--Custom Css-->
    <title>UPES | Application Form</title>

    <style>
        .se-pre-con {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 9999;
            background: #fff url(../img/application/loader.gif) center no-repeat;
        }
    </style>
    <script>
        function myFunction() {
            //  alert("Page is loaded");

            $(".se-pre-con").fadeOut("slow");
        }
    </script>

</head>

<body onload="myFunction();" class="LoginModule">
    <!--Application Template-->
    <div class="se-pre-con"></div>
    <header class="position-relative">
        <section class="HeaderPanel HeaderBanner">
            <div class="plr70">
                <div class="headerInner">
                    <a href="/">
                        <img src="../img/application/upes logo.png" class="img-fluid" alt="Logo" />
                    </a>
                </div>
            </div>
            <!--Helpline Chat-->
            <div class="helplineChatPanel ">
                <div class="plr70">
                    <div class="helplineChatInner fontBold ">
                        <a href="tel:18001028737">
                            <img src="../img/application/helpline.png" class="img-fluid" alt="helpline" />
                            <span>Helpline</span>
                        </a>
                        <a href="javascript:void(0);" onclick="openChat();">
                            <img src="../img/application/chat.png" class="img-fluid" alt="helpline" />
                            <span>Chat</span>
                        </a>
                    </div>
                </div>
            </div>
        </section>

    </header>
    @using (Html.BeginForm("Index", "Login", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <main role="main" class="ApplicationTemplate LoginTEmplate">
            <section class="FormTemplate formBlkStyle">
                <div class="FormPosition">
                    <div class="text-center">
                        <h1 class="fontExBold ApplicationTitle">LOGIN</h1>
                    </div>
                    <!--Form Panel-->
                    <div class="FormPanel">
                        <!--PanelOne-->
                        <div class="FormPanelInner" id="FormPanelOne">
                            <p class="fontMedium form-text">Email</p>
                            <div class="form-group">
                                <input type="text" class="form-control FormStyle" id="txtEmail" placeholder="Enter your Email ID" name="email" />
                            </div>
                            <p class="fontMedium form-text">Password</p>
                            <div class="form-group">
                                <input type="password" class="form-control FormStyle" id="txtPassword" name="password" placeholder="Enter your Password" />
                            </div>
                            <p style="color:red">@ViewBag.msglogin</p>
                            <p class="fontMedium form-text"><a href="/login/forgotpassword">Forgot Password?</a></p>
                            <div class="clearfix"></div>
                            <div class="text-center">
                                <button class="btn btn-primary BtnStyle" type="submit" onclick="return loginValidate();">SUBMIT</button>
                                <button class="btn btn-primary BtnStyle" type="button" onclick="loginRest();">RESET</button>
                            </div>
                            <hr />
                            <p class="fontMedium form-text">Don't have an account? <a href="/apply" style="color:#EF3F3F">Register now with UPES</a></p>
                            <p>&nbsp;</p>
                        </div>
                    </div>
                </div>
            </section>
        </main>
    }
        <!--Footer-->
        <footer>
            <section class="FooterPanel">
                <div class="foot_Btm foot_Btm_Height nobg">
                    <div class="plr70">
                        <div class="footBtmRow foot_Btm_Height row align-items-center no-gutters">
                            <div class="col-sm-6 copyRights">
                                <h5 style="display:inline;" class="text-uppercase fontBold">
                                    &copy; @DateTime.Now.Year UPES. All Rights Reserved.
                                </h5>
                                <span> <a style="color:#000;text-decoration:underline;" class="text-uppercase fontBold" href="javascript:void(0)">Terms and Conditions</a></span>
                            </div>
                            <div class="col-sm-6 SocialIcon d-flex justify-content-end align-items-center">
                                <p class="text-uppercase fontBold">Follow Us On:</p>
                                <div class="social_icon_menus">
                                    <a href="https://www.facebook.com/UniversityofPetroleumandEnergyStudies" target="_blank">
                                        <img src="../img/application/facebook-black.png" class="img-fluid" />
                                    </a>
                                    <a href="https://twitter.com/UPESDehradun" target="_blank">
                                        <img src="../img/application/twitter-black.png" class="img-fluid" />
                                    </a>
                                    <a href="https://www.instagram.com/upes_dehradun/" target="_blank">
                                        <img src="../img/application/insta-black.png" class="img-fluid" />
                                    </a>
                                    <a href="https://www.youtube.com/user/UPESUniversity/featured" target="_blank">
                                        <img src="../img/application/youtube-black.png" class="img-fluid" />
                                    </a>
                                    <a href="https://www.linkedin.com/school/university-of-petroleum-and-energy-studies/" target="_blank">
                                        <img src="../img/application/linkedin-black.png" class="img-fluid" />
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </footer>


        <script type="text/javascript" src="../scripts/component.js"></script>
        <script type="text/javascript" src="../scripts/loader-min.js"></script>
        <script type="text/javascript" src="../scripts/upes-appliaction.js"></script>
        <script type="text/javascript">
            function loginValidate() {
                var email = $('#txtEmail').val();
                var password = $('#txtPassword').val();

                $(".validation").remove();
                if (email == "") {
                    $(".validation").remove();
                    $("#txtEmail").focus();
                    $("#txtEmail").after("<p class='validation' style='color:red;margin-bottom:0px;'>Please enter your Email ID</p>");
                    return false;
                }
                if (!(isValidEmailAddress(email))) {
                    $(".validation").remove();
                    $('#txtEmail').focus();
                    $('#txtEmail').after("<p class='validation' style='color:red;margin-bottom:0px;'>Please enter your valid Email ID</p>");
                    return false;
                }
                if (password == "") {
                    $(".validation").remove();
                    $("#txtPassword").focus();
                    $("#txtPassword").after("<p class='validation' style='color:red;margin-bottom:0px;'>Please enter your Password</p>");
                    return false;
                }

                $.ajax({
                    url: "/Login/validateLogin",
                    type: "GET",
                    data: {
                        email: email, password: password
                    },
                    success: function (response) {
                        if (response == 'success') {
                            console.log('login success');
                        }
                    },
                    error: function (jqXHR) {

                    }
                });
            }

            function loginRest() {
                $('#txtEmail').val('');
                $('#txtPassword').val('');
                $(".validation").remove();
            }

            function openChat() {
                window.open("http://ameyo.delhi.upes.ac.in:8888/ameyochatjs/defaultChat/chatOfflinePage.html", "popupWindow", "width=600, height=720, scrollbars=yes");
            }
        </script>
    </body>

</html>