@extends('layouts.appApplicant')
@section('content')


<style type="text/css">
.login-page .login-form {
    padding: 20px;
}
.login-form h3 {
    font-family: 'Cabin', sans-serif;
    font-weight: bold;
    margin: 0;
}
.login-form,
.login-form p {
    font-family: 'Cabin', sans-serif;
    font-weight: normal;
}
.copyright-info p {
    margin: 0;
    font-family: 'Cabin', sans-serif;
    font-weight: normal;
    font-size: 12px;
}

    /*.login-page.login-light {
        font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
        }*/

        .login-page.login-light {
            background: #778899;
        }
        .login-page .login-form {
            /*padding: 10px;*/
        }
        .login-page .login-form .form-group .control-label {
            position: relative;
            color: #333;
            font-size: 14px;
            font-weight: bold;
        }
        .login-page .login-form .form-group .btn {
            /*padding-left: 20px;*/
        }

        .login-page.login-light .login-form {
            border-radius: 10px;
            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
            border: none!important;
        }
        .login-page .login-form .form-group .form-control:-webkit-autofill {
         -webkit-text-fill-color: black;
     }
     .form-control {
        font-size: 14px;
        color: black;
        border: 1px solid #ccc;
        border-radius: 5px;
    }

    .login-page {
        padding-top: 0px;
    }
    .login-container {
        max-width: 60%;
        margin: 0px auto;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    .login-page .login-form .form-group {
        margin-bottom: 10px;
    }

    .row {
        margin-left: 0px;
        margin-right: 0px;
    }

    #imgTag {
        width: 80%;
        margin: 25px 0 0 0
    }
    .login-page.login-light .login-form {
      overflow: hidden;
  }

</style>
<div class="login-container">
    <div class="row">
        {{-- <div class="col-md-8 col-md-offset-2"> --}}

            <form method="post" role="form" id="login" class="login-form  form-horizontal form-groups" action="{{ url('./applicant/login') }}">
                <div class="col-md-12">
                    <div class="row">
                        <div class="kom col-md-12 animated fadeInDown" align="center" id="heading">
                            <h3>SHIKKHA PLUS LOGIN</h3>
                        </div>
                    </div>
                    <hr style="width:80%">
                    <div class="row">
                        <div class="col-md-1"></div>
                   {{--  <div class="col-md-4">
                        <div class="row animated fadeInLeft" id="imgdiv">
                         
                                @php
                                    $companyImageName=DB::table('gnr_company')->where('id',1)->value('image');
                                @endphp
                        
                        </div>
                    </div> --}}

                    <div class="col-md-4">
                        <div class="row animated fadeInLeft" id="imgdiv">
                            <h4 style="color: green;margin-top: 50px;text-align: center;">Not a Student?</h4>
                            <a target="__blank" class="btn btn-agile btn-block w-100" style="background:#0971B2;color:white;margin-top: 8px;" href="{{ url('applicant/apply/') }}">Apply For Admission</a>
                        </div>
                    </div>

                    <div class="col-md-7 animated fadeInRight" style="border-left:1px solid #CCC; border-left-style:dotted;">
                        <div class="row">
                            <div class="errors-container">
                                @if ($errors->has('error_message'))
                                <span class="help-block" style="color: red; text-align: center;">
                                    <strong>{{ $errors->first('error_message') }}</strong>
                                </span>
                                @endif
                                @if(Session::has('successMessage'))
                                <div class="alert alert-info msgDiv">
                                    <button type="button" class="close" data-dismiss="alert">x</button>
                                    {{Session::get('successMessage')}}
                                </div>
                                @endif
                            </div><!-- Errors container -->

                            <!-- Add class "fade-in-effect" for login form effect -->
                            {{-- <form method="post" role="form" id="login" class="login-form animated fadeInDown form-horizontal form-groups" action="{{ url('/login') }}"> --}}
                                {{ csrf_field() }}
                                <div class="form-group{{ $errors->has('username') ? ' has-error' : '' }}" id="hasError">
                                    <label class="control-label col-md-4" for="username">User Name:</label>
                                    <div class="col-md-8">
                                        <input id="username" type="text" class="form-control" name="username" value="{{ old('username') }}" autocomplete="off" />
                                        <span class="help-block hidden" id="usernameErros">
                                           <strong  id="usernameErrorText"></strong>
                                       </span>
                                       @if ($errors->has('username'))
                                       <span class="help-block">
                                        <strong>{{ $errors->first('username') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group{{ $errors->has('password') ? ' has-error' : '' }}">
                                <label class="control-label  col-md-4" for="passwd">Password:</label>
                                <div class="col-md-8">
                                    <input id="password" type="password" class="form-control" name="password" autocomplete="off" />
                                    @if ($errors->has('password'))
                                    <span class="help-block">
                                        <strong>{{ $errors->first('password') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-md-8"></div>
                                <div class="col-md-4">
                                    <button type="submit" class="col-md-8 btn btn-primary btn btn-block text-left pull-right" style="width: 100px; font-size: 14px; padding: 8px 0 8px 20px">
                                        <i class="fa-lock"></i>
                                        Log In
                                    </button>
                                </div>

                            </div>
                            <div style="margin-top:0;text-align:right;" class="login-footer">
                                {{-- <a href="{{ url('/register') }}">Register</a> | --}}
                                <a href="{{ url('/password/reset') }}">Forgot your password?</a>
                            </div>

                        {{-- </form> --}}

                    </div>          {{-- row --}}
                </div>          {{-- col-md-6 --}}
                <div class="col-md-1"></div>
            </div>          {{-- row --}}
            <div class="row copyright-info animated fadeInUp" style="text-align:center;font-size:12px;" class="login-footer">
                <hr  style="width:40%;">
                <span style="font-size:12px; vertical-align: bottom;">Developed and Maintenance by &nbsp;<a href="http://www.ambalait.com/" target="_blank">
                    <img src="{{ asset('images/ambalait.png') }}" height="25px" width="80px"/></a>
                </span>
            </div>
        </div>

    </form>

</div>
</div>

{{-- <script src="{{asset('js/jquery-1.11.1.min.js')}}"></script> --}}
<script type="text/javascript">
    $(function() {
        $('form').submit(function( event ) {
            // var userId = $("#userId").val().replace(/[^A-Z0-9]/ig, "");
            //     $("#userId").val(userId);
            if ($('#username').val().match(/[ !$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/)) {
                $("#usernameErros").removeClass('hidden');
                $("#hasError").addClass('has-error');
                $("#usernameErros #usernameErrorText").text('Special characters and White Space not allowed');
                return false;
            }
        });
    })
</script>


<script type="text/javascript">
    $(".msgDiv").fadeTo(5000, 500).slideUp(500, function(){
        $(".msgDiv").slideUp(500);
    });
</script>

@endsection