<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CreateUser.aspx.cs" Inherits="CheckSheet.CreateUser" %>
<!DOCTYPE html>
<html lang="en" class="no-js">

    <head>

        <meta charset="utf-8">
        <title>Create User Check Sheet Application</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- CSS -->
        <link rel="stylesheet" href="fonts/stylesheet.css?v=002" type="text/css" charset="utf-8" />

        <script src="../Scripts/jquery-1.7.2.min.js"></script>
        <script src="CreateUser.js?v=123"></script>
        <script src="../Scripts/jquery-1.7.2.min.js"></script>
        <script src="../Scripts/inputlogin.js?v=001"></script>
        <script type="text/javascript" src="../Script/crypto.js?v=01112023"></script> 
        <script src="../Scripts/sweetalert2.all.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/sweetalert2.min.css"/> 
        <link rel="stylesheet" href="../fonts/stylesheet.css?v=002" type="text/css" charset="utf-8" />
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
          <script>
              $(document).ready(function () {


                  let userid = getCookie("userid");
                  let username = getCookie("fullname");
                  let position = getCookie("position");
                  $("#lbluserid").html(userid);
                  $("#lblfullname").html(username);
                  $("#lblposition").html(position);
              });

            </script>
        <script type="text/javascript">




            function linkother() {
                window.location.assign("https://www.vecteezy.com/")


            }
            function cleartxt() {

                $("#lblError").html("");
                $("#lblError").hide();
                $("#lblError").removeClass("cssalert");

            }

            function checktxt() {
                var username = $("#txtUserName").val();
                var password = $("#txtPassword").val();
                if (username == "") {
                    alert('กรุณาระบุ Username');
                    $("#txtUserName").focus();


                } else if (password == "") {
                    alert('กรุณาระบุ Password');
                    $("#txtPassword").focus();
                }



            }

            $(document).ready(function () {
                //$(function () {
                //    $(this).bind("contextmenu", function (e) {
                //        e.preventDefault();
                //    });
                //});




                $("input").not($(":button")).keypress(function (evt) {
                    if (evt.keyCode == 13) {
                        evt.preventDefault();
                        iname = $(this).val();
                        if (iname !== 'Submit') {
                            var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
                            var index = fields.index(this);
                            if (index > -1 && (index + 1) < fields.length) {
                                fields.eq(index + 1).focus();
                            }
                            return false;
                        }
                    }
                });
                $("select").not($(":button")).keypress(function (evt) {
                    if (evt.keyCode == 13) {
                        evt.preventDefault();
                        iname = $(this).val();
                        if (iname !== 'Submit') {
                            var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
                            var index = fields.index(this);
                            if (index > -1 && (index + 1) < fields.length) {
                                fields.eq(index + 1).focus();
                            }
                            return false;
                        }
                    }
                });
                $("textarea").not($(":button")).keypress(function (evt) {
                    if (evt.keyCode == 13) {
                        evt.preventDefault();
                        iname = $(this).val();
                        if (iname !== 'Submit') {
                            var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
                            var index = fields.index(this);
                            if (index > -1 && (index + 1) < fields.length) {
                                fields.eq(index + 1).focus();
                            }
                            return false;
                        }
                    }
                });
                $("button").not($(":button")).keypress(function (evt) {
                    if (evt.keyCode == 13) {
                        evt.preventDefault();
                        iname = $(this).val();
                        if (iname !== 'Submit') {
                            var fields = $(this).parents('form:eq(0),body').find('button,input,textarea,select');
                            var index = fields.index(this);
                            if (index > -1 && (index + 1) < fields.length) {
                                fields.eq(index + 1).focus();
                            }
                            return false;
                        }
                    }
                });

                $("#txtUserName").keypress(function (evt) {
                    $("#lblError").html("");
                    $("#lblError").removeClass("cssalert");
                });


                $("#txtPassword").keypress(function (evt) {
                    $("#lblError").html("");
                    $("#lblError").removeClass("cssalert");
                });



            });




    </script>


        <style type="text/css" media="screen, tv, projection">

            * {
     font-family: 'fc_paragraphregular';
	 font-weight: 300;
	 margin: 0;
}
 html, body {
	 height: 100vh;
	 width: 100vw;
	 margin: 0 0;
	 display: flex;
	 align-items: flex-start;
	 justify-content: flex-start;
	 background: #f3f2f2;
}
 h4 {
	 font-size: 24px;
	 font-weight: 600;
	 color: #000;
	 opacity: 0.85;
}
 label {
	 font-size: 12.5px;
	 color: #000;
	 opacity: 0.8;
	 font-weight: 400;
}
 form {
	 padding: 40px 30px;
	 background: #fefefe;
	 display: flex;
	 flex-direction: column;
	 align-items: flex-start;
	 padding-bottom: 20px;
	 width: 300px;
}
 form h4 {
	 margin-bottom: 20px;
	 color: rgba(0, 0, 0, .5);
}
 form h4 span {
	 color: rgba(0, 0, 0, 1);
	 font-weight: 700;
}
 form p {
	 line-height: 155%;
	 margin-bottom: 5px;
	 font-size: 14px;
	 color: #000;
	 opacity: 0.65;
	 font-weight: 400;
	 max-width: 300px;
	 margin-bottom: 40px;
}
 a.discrete {
	 color: rgba(0, 0, 0, .4);
	 font-size: 14px;
	 border-bottom: solid 1px rgba(0, 0, 0, .0);
	 padding-bottom: 4px;
	 margin-left: auto;
	 font-weight: 300;
	 transition: all 0.3s ease;
	 margin-top: 40px;
}
 a.discrete:hover {
	 border-bottom: solid 1px rgba(0, 0, 0, .2);
}
 .button {
	 -webkit-appearance: none;
	 width: auto;
	 min-width: 100px;
	 border-radius: 24px;
	 text-align: center;
	 padding: 15px 40px;
	 margin-top: 5px;
	 background-color: #b08bf8;
	 color: #fff;
	 font-size: 14px;
	 margin-left: auto;
	 font-weight: 500;
	 box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, .13);
	 border: none;
	 transition: all 0.3s ease;
	 outline: 0;
     cursor:pointer;
}
 .button:hover {
	 transform: translateY(-3px);
	 box-shadow: 0 2px 6px -1px rgba(182, 157, 230, .65);
}
 .button:hover:active {
	 transform: scale(0.99);
}
 input {
	 font-size: 16px;
	 padding: 20px 0px;
	 height: 56px;
	 border: none;
	 border-bottom: solid 1px rgba(0, 0, 0, .1);
	 background: #fff;
	 width: 280px;
	 box-sizing: border-box;
	 transition: all 0.3s linear;
	 color: #000;
	 font-weight: 400;
	 -webkit-appearance: none;
}
 input:focus {
	 border-bottom: solid 1px #b69de6;
	 outline: 0;
	 box-shadow: 0 2px 6px -8px rgba(182, 157, 230, .45);
}
 .floating-label {
	 position: relative;
	 margin-bottom: 10px;
	 width: 100%;
}
 .floating-label label {
	 position: absolute;
	 top: calc(50% - 7px);
	 left: 0;
	 opacity: 0;
	 transition: all 0.3s ease;
	 padding-left: 44px;
}
 .floating-label input {
	 width: calc(100% - 44px);
	 margin-left: auto;
	 display: flex;
}
 .floating-label .icon {
	 position: absolute;
	 top: 0;
	 left: 0;
	 height: 56px;
	 width: 44px;
	 display: flex;
}
 .floating-label .icon svg {
	 height: 30px;
	 width: 31px;
	 margin: auto;
	 opacity: 0.15;
	 transition: all 0.3s ease;
}
 .floating-label .icon svg path {
	 transition: all 0.3s ease;
}
 .floating-label input:not(:placeholder-shown) {
	 padding: 28px 0px 12px 0px;
}
 .floating-label input:not(:placeholder-shown) + label {
	 transform: translateY(-10px);
	 opacity: 0.7;
}
 .floating-label input:valid:not(:placeholder-shown) + label + .icon svg {
	 opacity: 1;
}
 .floating-label input:valid:not(:placeholder-shown) + label + .icon svg path {
	 fill: #b69de6;
}
 .floating-label input:not(:valid):not(:focus) + label + .icon {
	 animation-name: shake-shake;
	 animation-duration: 0.3s;
}
 @keyframes shake-shake {
	 0% {
		 transform: translateX(-3px);
	}
	 20% {
		 transform: translateX(3px);
	}
	 40% {
		 transform: translateX(-3px);
	}
	 60% {
		 transform: translateX(3px);
	}
	 80% {
		 transform: translateX(-3px);
	}
	 100% {
		 transform: translateX(0px);
	}
}
 .session {
	 display: flex;
	 flex-direction: row;
	 width: auto;
	 height: auto;
	 margin: auto auto;
	 background: #fff;
	 border-radius: 4px;
	 box-shadow: 0px 2px 6px -1px rgba(0, 0, 0, .12);
}
 .left {
	 width: 220px;
	 height: auto;
	 min-height: 100%;
	 position: relative;
	 background-image: url("../image/userregister.png");
     background-color:whitesmoke;
     background-repeat:no-repeat;
     background-position-y:center; 
	 background-size:contain;
	 border-top-left-radius: 4px;
	 border-bottom-left-radius: 4px;
}
 .left svg {
	 height: 40px;
	 width: auto;
	 margin: 20px;
}

            .cssalert {
                /*border: 1px solid;
                border-color:gray;*/
                padding: 10px;
                box-shadow: 0px 0px 5px 5px #DDD7D6;
                background-image:url("../image/warning.png");
                background-color:#FA725B;        
                opacity:0.8;      
                background-repeat:no-repeat;           
                background-position-y:center;
                color:white;
                padding-left:40px;
                border-radius: 20px;


            }


            
.checkbox.style-e {
  display: inline-block;
  position: relative;
  padding-left: 50px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.checkbox.style-e input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.checkbox.style-e input:checked ~ .checkbox__checkmark {
  background-color: #b08bf8;
}
.checkbox.style-e input:checked ~ .checkbox__checkmark:after {
  left: 21px;
}
.checkbox.style-e:hover input ~ .checkbox__checkmark {
  background-color: #eee;
}
.checkbox.style-e:hover input:checked ~ .checkbox__checkmark {
  background-color: #b08bf8;
}
.checkbox.style-e .checkbox__checkmark {
  position: absolute;
  top: 1px;
  left: 0;
  height: 22px;
  width: 40px;
  background-color: #eee;
  transition: background-color 0.25s ease;
  border-radius: 11px;
}
.checkbox.style-e .checkbox__checkmark:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  display: block;
  background-color: #fff;
  border-radius: 50%;
  transition: left 0.25s ease;
}
.checkbox.style-e .checkbox__body {
  color: #333;
  line-height: 1.4;
  font-size: 16px;
  transition: color 0.25s ease;
}


        </style>


    </head>

    <body>

  <div class="session">
    <div class="left">
      <?xml version="1.0" encoding="UTF-8"?>
      <svg enable-background="new 0 0 300 302.5" version="1.1" viewBox="0 0 300 302.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.st01{fill:#fff;}
</style>
				
</svg>  
        
           <div class="form-row">
                <div class="frmrow">
                    <span>
                    <label>
                    <img src="../image/userid.png" width="30">
                    </label>
                    <label style="margin-top:-1px;position:absolute;width:100%;font-size:10px;font-weight:900">User ID:
                    <asp:Label ID="lbluserid" style="display:inline-block;font-size:10px;" Font-Bold="true" runat="server" Text="xxxx"></asp:Label><br />
                     
                    <asp:Label ID="lblfullname" Style ="display:inline-block;font-size:10px;"  Font-Bold="true" runat="server" Text="xxxx  xxxxx"></asp:Label><br />
                    Position:
                    <asp:Label ID="lblposition" style="display:inline-block;font-size:10px;" Font-Bold="true"   runat="server" Text="xxxxxxxxx"></asp:Label>
                    </label>

                    </span>

                    
                </div>
             </div>
   
    
    </div>
    <form runat="server" class="log-in" autocomplete="off" style="margin-top:-10px;"> 

      <p><span style="color:dodgerblue;font-weight:900;">CREATE USER</span></p>

        <div class="floating-label">
         <span style='color:red;font-weight:900;font-size:20px;position:absolute;'> *</span> <asp:TextBox ID="txtCode" runat="server"  style="font-size:16px;font-weight:900;"   placeholder="Employee Code" onclick="clear();" oninput="javascript:getdata();return false;" autocomplate="off"></asp:TextBox>
        <label for="Employee Code">Employee Code :</label>
        <div class="icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.st0{fill:none;}
</style>
<img src="../image/username.png" style="height:80%;padding-right:5px;opacity:0.4;"></img>
<rect class="st0" width="100" height="100"/>
</svg>

        </div>
      </div>
      <div class="floating-label">
         <span style='color:red;font-weight:900;font-size:20px;position:absolute;'> *</span> <asp:TextBox ID="txtUserName" runat="server"  style="font-size:16px;font-weight:900;"   placeholder="Username" onclick="clear();" autocomplate="off"></asp:TextBox>
        <label for="username">Username:</label>
        <div class="icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.st0{fill:none;}
</style>
<img src="../image/userlogin.png" style="height:80%;padding-right:5px;opacity:0.4;"></img>
<rect class="st0" width="100" height="100"/>
</svg>

        </div>
      </div>
      <div class="floating-label">
        <span style='color:red;font-weight:900;font-size:20px;position:absolute;'> *</span><asp:TextBox ID="txtPassword" TextMode="Password" runat="server" style="font-size:16px;font-weight:900;" placeholder="Password"  autocomplete="off" ></asp:TextBox>
        <label for="password">Password:</label>
        <div class="icon">
          
          <?xml version="1.0" encoding="UTF-8"?>
          <svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xml:space="preserve"              xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.st0{fill:none;}
	.st1{fill:#010101;}
</style>
	<img src="../image/lock.png" style="height:80%;padding-right:5px;opacity:0.4;"></img>
</svg>
        </div>
        
      </div>

          <div class="floating-label">
        <span style='color:red;font-weight:900;font-size:20px;position:absolute;'> *</span><asp:TextBox ID="txtRePassword" TextMode="Password" runat="server" style="font-size:16px;font-weight:900;" placeholder="Confirm-Password"  autocomplete="off" ></asp:TextBox>
        <label for="repassword">Confirm-Password:</label>
        <div class="icon">
          
          <?xml version="1.0" encoding="UTF-8"?>
          <svg enable-background="new 0 0 24 24" version="1.1" viewBox="0 0 24 24" xml:space="preserve"              xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.st0{fill:none;}
	.st1{fill:#010101;}
</style>
	<img src="../image/approve.png" style="height:80%;padding-right:5px;opacity:0.4;"></img>
</svg>
        </div>
        
      </div>

         

         <div class="floating-label">
         <asp:TextBox ID="txtName" runat="server"  style="font-size:16px;font-weight:900;"   placeholder="Name" onclick="clear();" autocomplate="off"></asp:TextBox>
        <label for="Name">Name:</label>
        <div class="icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.st0{fill:none;}
</style>
<img src="../image/username.png" style="height:80%;padding-right:5px;opacity:0.4;"></img>
<rect class="st0" width="100" height="100"/>
</svg>

        </div>
      </div>


         <div class="floating-label">
         <asp:TextBox ID="txtSurname" runat="server"  style="font-size:16px;font-weight:900;"   placeholder="Surname" onclick="clear();" autocomplate="off"></asp:TextBox>
        <label for="Surname">Surname:</label>
        <div class="icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.st0{fill:none;}
</style>
<img src="../image/username.png" style="height:80%;padding-right:5px;opacity:0.4;"></img>
<rect class="st0" width="100" height="100"/>
</svg>

        </div>
      </div>


         <div class="floating-label">
         <asp:TextBox ID="txtPosition" runat="server"  style="font-size:16px;font-weight:900;"   placeholder="Position" onclick="clear();" autocomplate="off"></asp:TextBox>
        <label for="Position">Position:</label>
        <div class="icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.st0{fill:none;}
</style>
<img src="../image/username.png" style="height:80%;padding-right:5px;opacity:0.4;"></img>
<rect class="st0" width="100" height="100"/>
</svg>

        </div>
      </div>

         <div class="floating-label">
         <asp:TextBox ID="txtEmail" runat="server"  style="font-size:16px;font-weight:900;"   placeholder="Email" onclick="clear();" autocomplate="off"></asp:TextBox>
        <label for="Email">Email:</label>
        <div class="icon">
<?xml version="1.0" encoding="UTF-8"?>
<svg enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
	.st0{fill:none;}
</style>
<img src="../image/email.png" style="height:80%;padding-right:5px;opacity:0.4;"></img>
<rect class="st0" width="100" height="100"/>
</svg>

        </div>
      </div>
        <div style="display:inline-table;">
             <span style="display:inline-block;"><asp:Button ID="btnOK" runat="server" Text="Create" Width="100" style="padding:1em;"  OnClientClick="javascript:createuser(0);return false;" CssClass="button"/></span>
             <span style="display:inline-block;"><asp:Button ID="btnReject" runat="server" Text="Cancel" Width="100" style="padding:1em;"  CssClass="button" OnClientClick="javascript:createuser(1);return false;"/></span>
             <span style="display:inline-block;"><asp:Button ID="btnback" runat="server" Text="Back" Width="100" style="background-color:red;color:white;padding:1em;"  CssClass="button" OnClick="btnback_Click"/></span>
             

        </div>
     
      
      

       
                    <br />
         <asp:Label ID="lblError" runat="server" style="font-size:12px;"></asp:Label>
        <br />
        <br />
       
    </form>
  </div>
        
</body>

   

</html>

