<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>{{ config('app.name', 'Laravel') }}</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
    <meta name="keywords" content="">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <meta name="author" content="{{ config('app.name', 'Laravel') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/bootstrap.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/bootstrap-grid.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/bootstrap-reboot.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/style.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ asset('assets/css/responsive.css') }}">
</head>

<body id="body">
    <style>
        .error {
            color: red;
        }
    </style>
    <section class="container">
        <div class="row">
            <div class="col-md-12 col-sm-12" align="center">
                <img src="{{ asset('assets/images/logo.png') }}" class="logo" width="50%">
            </div>
            <div class="col-md-12 col-sm-12" align="center">
                <!-- <h2>Akshar Ganesh Campaign</h2> -->
                <p class="blue paddin-20">Enter Details to login</p>
                @if (Session::has('errors'))
                    <div class="alert alert-danger alert-dismissible fade show" role="alert">
                        {{-- <strong>{{ Session::get('errors') }}</strong> --}}
                        <strong>Details you provide is invalid!</strong>
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                @endif

                <form action="{{ route('employee-login') }}" id="empLogin_form" method="post">
                    @csrf
                    <input type="text" class="form-control blueinput @error('employee_id') is-invalid @enderror"
                        name="employee_id" placeholder="Employee ID" autocomplete="off">
                    @error('employee_id')
                        <span class="invalid-feedback" role="alert">
                            <strong class="text-danger">{{ $message }}</strong>
                        </span>
                    @enderror
                    <input type="password" class="form-control blueinput mt-4 @error('password') is-invalid @enderror"
                        name="password" placeholder="Password" autocomplete="off">
                    @error('password')
                        <span class="invalid-feedback" role="alert">
                            <strong class="text-danger">{{ $message }}</strong>
                        </span>
                    @enderror
                    <input type="submit" class="form-control redbutton mt-4" name="" value="Next">
                </form>
                <!-- <div class="form-group checkgroup">
                    @if (Route::has('password.request'))
                        <a href="{{ route('password.request') }}" class="forget-pass">Forget Password</a>
                    @endif
                </div> -->
            </div>
        </div>
    </section>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
</script>
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>


<script type="text/javascript" src="{{ asset('assets/js/bootstrap.bundle.js') }}"></script>
<script type="text/javascript" src="{{ asset('assets/js/bootstrap.js') }}"></script>
<script>
    $(function() {
        $(document).ready(function() {
            // alert();
            $.validator.methods.isJSON = function(value, element) {
                if (typeof(value) !== 'string') {
                    return false;
                }
                try {
                    JSON.parse(value);
                    return true;
                } catch (e) {
                    return false;
                }
            }
            $("#empLogin_form").validate({
                rules: {
                    employee_id: {
                        required: true,

                    },
                    password: {
                        required: true,
                    },

                },
                messages: {
                    employee_id: {
                        required: "Please Enter employee ID"
                    },
                    password: {
                        required: "Please Enter Your Password"
                    },
                },
                errorElement: "em",
                errorPlacement: function(error, element) {
                    // Add the `help-block` class to the error element
                    error.addClass("help-block");

                    if (element.prop("type") === "checkbox") {
                        error.insertAfter(element.parent("label"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-error").removeClass(
                        "has-success");
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-success").removeClass(
                        "has-error");
                }
            });
        });
    });
</script>

</html>
