<!DOCTYPE html>
<html>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Golars Tank | Golars Facility Management</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="{{url('public/assets/css/bootstrap.min.css')}}" rel="stylesheet">
    <link href="{{url('public/assets/css/animate.css')}}" rel="stylesheet">

    <link rel="stylesheet" href="{{url('assets/vendors/font-awesome/css/font-awesome.min.css')}}">
    <link href="{{url('public/assets/css/components-md.min.css')}}" rel="stylesheet" id="style_components" type="text/css" />

    <link rel="stylesheet" href="{{url('assets/vendors/bootstrap/css/bootstrap.min.css')}}">

    <!-- favicon -->
    <link rel="shortcut icon" href="{{url('assets/img/favicon/fav.png')}}"  type="image/x-icon">
    <link rel="icon" href="{{url('assets/img/favicon/fav.png')}}" type="image/x-icon">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>


    <!-- Login Golars Environment CSS -->
    <link rel="stylesheet" href="{{url('assets/css/gelogin.css')}}">

   



  <style type="text/css">
  .loginclose {
      position: absolute;
      right: -15px;
      top: 2%;
      background: #ffffff;
      color: #999999;
      padding: 8px 9px;
      width: 40px;
      height: 40px;
      margin-top: -22px;
      border: 2px solid #efefef;
      border-radius: 50%;
      transition: all linear 500ms;
      cursor:pointer;
    }
    .btn-loginhere
   {
    background: #F5A623;
    color: #002570;
    margin-right:10px;
   }
    </style>
  </head>

   <body>
      <div class="bodybg">
        <div class="container">
          <div class="col-md-12">
            <div class="row">
              <div class="col-md-6 logotopmargin">
                <div class="logobg">
                <a href="#">
                  <img src="/public/assets/img/bg/golars-logo.png" width="105" height="50">
                </a>
                </div>
              </div>
              <div class="col-md-6 toprightbutton">
                <button type="button" class="btn btn-outline-success btn-login" id="login-button">
                <i class="fa fa-user-circle-o"></i>Login
                </button>
                <button class="btn btn-outline-success btn-contact">
                <i class="fa fa-phone" aria-hidden="true"></i>Contact Us
                </button>
              </div>
            </div>
          </div>
          @include('message')
          @include('errors')
          <div class="col-md-12">
            <div class="row" >
            <form action="{{ url('/auth/login') }}" class="login-form" id="login-form" method="post" style="display:none">
              {!! csrf_field() !!}
              <div class="col-md-4 pull-right form-bg">
                      <i class="fa fa-times loginclose" style="font-size: 24px;
                      color: #00215E;" aria-hidden="true"></i>
                  <h2 style="text-align:center;font-size: 34px; color: #2B9356;" >Login Here</h2>
                    <div class="group">      
                      <input type="text"  name="email">
                      <span class="highlight"></span>
                      <span class="bar"></span>
                      <label>User ID</label>
                    </div>
                    <div class="group">      
                      <input type="text" name="password" >
                      <span class="highlight"></span>
                      <span class="bar"></span>
                      <label>Password</label>
                    </div>
                    <div class="group col-md-12">
                    <div class="form-check form-check-inline">
                    <label class="form-check-label">
                      <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> Remember Me
                    </label>

                  </div>
                </div>
                <div class="col-md-12 center block">
                  <button type="submit" class="btn btn-outline-success btn-loginhere" >Login Here</button>
                </div>
               </form>
              </div>
            </div>
          </div>
        </div>
      </div>

    <!--Jquery Validation-->
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
    <script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>

     

      <script>
      $(document).ready(function(){
         $('#login-button').on('click',function(event){
            $('#login-form').show();
            $('#login-button').hide();
         });
         $('.loginclose').on('click',function(event){
            $('#login-button').show();
            $('#login-form').hide();
         });
      });
      $( "#login-form" ).validate({
        rules: {
          email: {
            required: true,
            minlength:4
          },
           password: {
            required: true
          }
        },
        errorElement : 'div',
        errorPlacement: function(error, element) {
          var placement = $(element).data('error');
          if (placement) {
            $(placement).append(error)
          } else {
            error.insertAfter(element);
          }
        }
      });
      </script>
   </body>
</html>


