@extends('layouts.app')
@section('content')
<div class="content-header row">
</div>
<div class="content-body">
    <section class="flexbox-container">
        <div class="col-12 d-flex align-items-center justify-content-center">
            <div class="col-md-4 col-10 box-shadow-2 p-0">
                <div class="card border-grey border-lighten-3 m-0">
                    <div class="card-header border-0">
                        <div class="card-title text-center">
                            <div class="p-1">
                                <img src="{{asset('/app-assets/images/ico/logo.png')}}" width="50" height="50" alt="branding logo"></div>
                        </div>
                        <h6 class="card-subtitle line-on-side text-muted text-center font-small-3 pt-2">
                            <span>Single panel login</span>
                        </h6>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <form class="form-horizontal form-simple" method="post" name="login_form" id="login_form" action="{{route('user-login')}}" novalidate>
                                @csrf
                                <fieldset class="form-group position-relative has-icon-left mb-0">
                                    <input type="text" class="form-control form-control-lg input-lg"
                                           id="user-name" name="username" placeholder="Your Email" required autocomplete="off">
                                    <div class="form-control-position">
                                        <i class="ft-user"></i>
                                    </div>
                                </fieldset>
                                <fieldset class="form-group position-relative has-icon-left">
                                    <input type="password" class="form-control form-control-lg input-lg"
                                           id="user-password" name="userpassword" placeholder="Enter Password" required>
                                    <div class="form-control-position">
                                        <i class="fa fa-key"></i>
                                    </div>
                                </fieldset>
                                <div class="form-group row">

                                </div>
                                <button class="btn btn-info btn-lg btn-block">
                                    <i class="ft-unlock"></i> Login
                                </button>
                            </form>
                        </div>
                    </div>
                    <div class="card-footer">
                        <div class="">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

</div>
@endsection
@section('jssection')
<script>
    jQuery("#login_form").validate({
        rules: {
            username: {
                required: true,
                email: true
            },
            userpassword: {
                required: true
            }
        },
        messages: {
            username: {
                required: "Email is required",
                email: "Enter valid email"
            },
            userpassword: {
                required: "Password is required"
            }
        },
        submitHandler: function (form) {
            form.submit();
        }
    });
</script>
@endsection