<?php
    session_start();
?>
<!DOCTYPE html>
<html>
    <head>
        <?php include("library/head.php");?>
        <title>Admin Login | <?php echo $_SESSION["systemName"]; ?></title>
        <style>
            .logo-section {
                width: 75%;
                margin-top: -50px;
                background: cyan;
                border-radius: 20px;
                position: relative;
                left: 12%;
            }
        </style>
    </head>
    <body onload="getcookiedata()">
        <section class="material-half-bg">
            <div class="admin-login-cover"></div>
        </section>
        <section class="login-content">

            
            <div class="login-box rounded shadow">
                <div class="logo-section shadow p-2">
                    <h1 class="text-center mt-3"><img src="img/african-logo.png" width="80%"></h1>
                </div>
                <form class="login-form" action="#" method="POST" id="loginForm">
                    <div class="form-group mt-5">
                        <label class="control-label"><i class="fa fa-user"></i> USERNAME</label>
                        <input class="form-control"  type="text" name="user_Name" id="user_Name" placeholder="Enter username..." required autofocus>
                    </div>
                    <div class="form-group">
                        <label class="control-label"><i class="fa fa-key"></i> PASSWORD</label>
                        <input class="form-control" type="password" name="pass_Word" id="pass_Word" placeholder="Enter password..." required>
                    </div>
                    <div class="form-group">
                        <div class="utility">
                            <div class="animated-checkbox">
                                <label>
                                    <input type="checkbox" onclick="setcookie();" id="keepme" name="keepme"><span class="label-text" >Stay Signed</span>
                                </label>
                            </div>
                            <p style="color:#015a5e" class="semibold-text mb-2"><a href="#" data-toggle="flip">Forgot Password</a></p>
                        </div>
                    </div>
                    <div class="form-group btn-container">
                        <button type="submit" name="loginNow" id="loginNow" class="btn btn-primary btn-block"><i class="fa fa-sign-in fa-lg fa-fw"></i>SIGN IN</button>
                    </div>
                </form>
                <form class="forget-form" action="index.html">
                    <h3 class="login-head mt-4"><i class="fa fa-lg fa-fw fa-lock"></i>FORGOT PASSWORD</h3>
                    <div class="form-group">
                        <label class="control-label">EMAIL</label>
                        <input class="form-control" type="text" placeholder="Email">
                    </div>
                    <div class="form-group btn-container">
                        <button class="btn btn-primary btn-block"><i class="fa fa-unlock fa-lg fa-fw"></i>RESET</button>
                    </div>
                    <div class="form-group mt-3">
                        <p class="semibold-text mb-0"><a href="#" data-toggle="flip"><i class="fa fa-angle-left fa-fw"></i> Back to Login</a></p>
                    </div>
                </form>
            </div>
            <script>
                function setcookie(){
                    var u = document.getElementById("user_Name").value;
                    var p = document.getElementById("pass_Word").value;
                    document.cookie = "myusrname="+u+";path=http://al-yasser.dugsify.com/index/";
                    document.cookie = "mypswrd="+p+";path=http://al-yasser.dugsify.com/index/";
                }
                
                function getcookiedata(){
                    console.log(document.cookie)
                    var username = getCookie('myusrname');
                    var pss = getCookie('mypswrd');
                    document.getElementById("user_Name").value = username;
                    document.getElementById("pass_Word").value = pss;
                }
                
                function getCookie(cname){
                    var name=cname+"=";
                    var decodedCookie=decodeURIComponent(document.cookie);
                    var ca = decodedCookie.split(";");
                    for(var i=0;i<ca.length;i++){
                        var c=ca[i];
                        while(c.charAt(0)==' '){
                            c=c.substring(1);
                        }
                        if(c.indexOf(name)==0){
                            return c.substring(name.length,c.length);
                        }
                    }
                    return "";
                }
            </script>
        </section>
        
        <!-- Essential javascripts for application to work-->
        <?php include("library/scripts.php"); ?>
        <script type="text/javascript">
            // Login Page Flipbox control
            $('.login-content [data-toggle="flip"]').click(function() {
          	    $('.login-box').toggleClass('flipped');
          	    return false;
            });
        </script>
    </body>
</html>