<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Maktabti | Login</title>

    <link href="{{ asset ('css/bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{ asset ('font-awesome/css/font-awesome.css')}}" rel="stylesheet">
    <link href="{{ asset ('css/animate.css')}}" rel="stylesheet">
    <link href="{{ asset ('css/style.css')}}" rel="stylesheet">

    <script>
    if (localStorage.Session)
    {
        window.stop();
        window.location.replace("view_books");
    }
    </script>
    
    <style>
    body
    {
        background-color: white !important;
    }
    .container 
    {
      margin-top: 15px;
    }
	</style>
    

</head>

<body class="gray-bg">
    <div class="middle-box text-center animated fadeInDown">
        <div style="margin-bottom: 20px">
            <img width="150" src="img/logo2.png"/>
        </div>

        <div class="ibox">
            <div class="ibox-content" style="background-color: #f3f3f4; padding: 15px 20px 40px 20px">
                <div class="row">
                    <div class="col-sm-12">
                        <div class="tabbable">
                            <h1 style="font-size:25px; margin-bottom:50px; color:#3e2c42"><strong>Log in and get to work</strong></h1>
                            <form id="userLogin" action="#">
                                    <div class="form-group"> 
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-user-o"></i></span>
                                            <input type="text" id="email" name="email" class="form-control" placeholder="Email" required="">
                                        </div>
                                        
                                        <div class="input-group">
                                            <span class="input-group-addon"><i class="fa fa-lock"></i></span>
                                            <input type="password" id="passwd" name="passwd" class="form-control" placeholder="Password" required="">
                                        </div>
                                        <!--
                                            <div class="input-group">
                                                <span class="input-group-addon"><i class="fa fa-tasks"></i></span>
                                                <select class="form-control" id="role" name="role" required="">
                                                    <option value="select" selected>Select Role</option>
                                                    <option value="Admin">Admin</option>
                                                    <option value="Employee">Employee</option>
                                                    <option value="Driver">Driver</option>
                                                </select>
                                            </div>
                                        -->
                                    </div>
                                    
                                    <button type="submit" class="btn btn-warning block full-width m-b" data-style="zoom-in">Login</button>

                                   <!-- <p style="float: right;">
                                        <a href="#" style="color: #337ab7; "><small>Forgot password?</small></a>
                                    </p> -->
                            </form>
                        </div>
                    </div>
                </div><!-- row -->
                
            </div>
        </div>
         @include('footer')
    </div>

    <!-- Mainly scripts -->
    <script src="{{ asset ('js/jquery-3.1.1.min.js')}}"></script>
    <script src="{{ asset ('js/bootstrap.min.js')}}"></script>
    
    <!-- Jquery Validate -->
    <script src="js/plugins/validate/jquery.validate.min.js"></script>

    <!-- Page level scripts -->
    <script>
   
    jQuery(document).ready(function()
    {         
        // User Form Login with Validations
        $("#userLogin").validate({
            rules: 
            {
                email: {
                    required: true
                },
                passwd: {
                    required: true
                }
            },
            submitHandler: function(form) 
            {                
                var email = document.getElementById("email").value;
                var password = document.getElementById("passwd").value;
                //var role = document.getElementById("role").value;
                 if( email  == "admin" && password == "admin" )
                        {
                            localStorage.Session = "admin";
                            localStorage.languageSession = "English";
                            window.location="{{URL::to('view_books')}}"; 
                        }
                    else if(data.status == "failed" )
                        {
                            alert("Failed! Wrong Email or Password.");
                        }
                //var reg = {username:user,passwd:pass};
    

               /* $.ajax
                ({
                    url:"/DCL/api/PersonSignin",
                    type:'POST',
                    data: {"EmailAddress" : email , "Password" : password},
                    success: function(data)
                    {
                        if( data.status == "success" )
                        {
                            localStorage.Session = email;
                            localStorage.languageSession="English";
                            window.location="{{URL::to('view_customer')}}"; 
                        }
                        else if(data.status == "failed" )
                        {
                            alert("Failed! Wrong Email or Password.");
                        }
                    },
                    error: function(data) 
                    {
                        
                    }           
                   
                });
                */
                
                return false;
            }
        });      
    });
    </script>

</body>

</html>
