<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" %>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ejada | ReconSS</title>
  <!-- Favicon -->
  <link rel="icon" type="image/x-icon" href="../dist/img/favicon.ico" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
  <!-- icheck bootstrap -->
  <link rel="stylesheet" href="../plugins/icheck-bootstrap/icheck-bootstrap.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="../dist/css/adminlte.min.css">
  <!-- Radio Button style -->
  <link rel="stylesheet" href="../css/custom_radio.css">
  
  <!-- Loading CSS -->
  <link rel="stylesheet" href="../css/loading.css">

  <script language="javascript" type="text/javascript">
      function validate() {
          var message = "";
          if (document.getElementById("<%=txtUserID.ClientID%>").value == "") {
              message += "Group Name Feild can not be blank\n";
              document.getElementById("<%=txtUserID.ClientID%>").classList.add('is-invalid');
              document.getElementById("<%=txtUserID.ClientID%>").parentNode.innerHTML = document.getElementById("<%=txtUserID.ClientID%>").parentNode.innerHTML + "<span class='error invalid-feedback'>Please enter a valid user id</span>";
          }

          if (document.getElementById("<%=txtPass1.ClientID%>").value == "") {
              message += "Group Name Feild can not be blank\n";
              document.getElementById("<%=txtPass1.ClientID%>").classList.add('is-invalid');
              document.getElementById("<%=txtPass1.ClientID%>").parentNode.innerHTML = document.getElementById("<%=txtPass1.ClientID%>").parentNode.innerHTML + "<span class='error invalid-feedback'>Please enter a valid password</span>";
          }

         


          if (message.length > 0) {
              //alert(message);
              return false;
          }
          return true;
      }
</script>
</head>
<body class="hold-transition login-page">
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
	</asp:ScriptManager>
    <div id="cover-spin"></div>
    <div class="login-box">
        <div class="login-logo">
            <%--<img src="../dist/img/logo.png" alt="AdminLTE Logo" width="100%" >--%>
            <%--<a href="../index2.html"><b>Ejada</b>ReconSS</a>--%>
            <img src="../dist/img/ReconSS.png" alt="AdminLTE Logo" width="300px" style="margin-left: -8px; margin-bottom: 5%">
        </div>
        <!-- /.login-logo -->
        <div class="card">
            <div class="card-body login-card-body">
                <p class="login-box-msg">Sign in to start your session</p>

                <div class="input-group mb-3">
                    <asp:TextBox ID="txtUserID" runat="server" class="form-control" placeholder="ID"></asp:TextBox>
                    <%--<input type="text" class="form-control" placeholder="ID">--%>
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-envelope"></span>
                        </div>
                    </div>
                </div>
                <div class="input-group mb-3">

                    <asp:TextBox ID="txtPass1" runat="server" class="form-control" placeholder="Password" TextMode="Password"></asp:TextBox>
                    <%--<input type="password" class="form-control" placeholder="Password">--%>
                    <div class="input-group-append">
                        <div class="input-group-text">
                            <span class="fas fa-lock"></span>
                        </div>
                    </div>
                </div>
                <%--<div class="input-group mb-3">
                    <asp:RadioButton ID="rdLive" Text="Live" GroupName="2" AutoPostBack="False" runat="server" Checked="True" />
                    <asp:RadioButton ID="rdArchive" Text="Archive" GroupName="2" AutoPostBack="False" runat="server" Checked="False" />
                    </div>--%>

                <div class="radio radio-primary text-center mb-3">
                    <asp:RadioButton ID="rdLive" Text="Live" GroupName="2" AutoPostBack="False" runat="server" Checked="True" />&ensp;&ensp;&ensp;&ensp;
                    <asp:RadioButton ID="rdArchive" Text="Archive" GroupName="2" AutoPostBack="False" runat="server" Checked="False" />
                </div>


                <div class="row">

                    <!-- /.col -->
                    <div class="col-12">
                        <asp:Label ID="lblError" runat="server" Text="" class=""></asp:Label>
                        <asp:Button ID="btnLogin" runat="server" Text="Sign In" OnClientClick="$('#cover-spin').show();"
                            class="btn btn-primary btn-block" OnClick="btnLogin_Click" />
                        <%--OnClientClick="return validate()"--%>
                        <%--<button type="submit" class="btn btn-primary btn-block">Sign In</button>--%>
                    </div>
                    <!-- /.col -->
                </div>
            </div>
            <!-- /.login-card-body -->
        </div>
        <div class="center" style="margin-top:2%; text-align: center">
            Powered By <img src="../dist/img/Ejada_logo.png" alt="AdminLTE Logo" style="opacity: .8; line-height: .8; padding-top: 2px; max-height: 23px; width: auto;">
        </div>
    </div>
    <!-- /.login-box -->
    <!-- jQuery -->
    <script src="../plugins/jquery/jquery.min.js"></script>
    <!-- Bootstrap 4 -->
    <script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
    <!-- AdminLTE App -->
    <script src="../dist/js/adminlte.min.js"></script>
<!-- jquery-validation -->
<script src="../plugins/jquery-validation/jquery.validate.min.js"></script>
<script src="../plugins/jquery-validation/additional-methods.min.js"></script>
</form>
<script>

  $('#form1').validate({
    rules: {
      <%=txtUserID.UniqueID%> : {
        required: true,
//        email: true,
      },
      <%=txtPass1.UniqueID%>: {
        required: true,
        minlength: 5
      },
      terms: {
        required: true
      },
    },
    messages: {
      <%=txtUserID.UniqueID%>: {
        required: "Please enter a email address",
        email: "Please enter a valid email address"
      },
      <%=txtPass1.UniqueID%>: {
        required: "Please provide a password",
        minlength: "Your password must be at least 5 characters long"
      },
      terms: "Please accept our terms"
    },
    errorElement: 'span',
    errorPlacement: function (error, element) {
      error.addClass('invalid-feedback');
      element.closest('.input-group').append(error);
    },
    highlight: function (element, errorClass, validClass) {
      $(element).addClass('is-invalid');
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
    }
  });
});
</script>
</body>
</html>
