@extends("layouts.app")
@section("title", ucfirst(trans('lang.login')))
@section("content")
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg fixed-top navbar-transparent">
        <div class="container"></div>
    </nav>
    <!-- End Navbar -->
    <div class="page-header">
        <div class="page-header-image"></div>
        <div class="container">
            <div class="col-md-12 content-center">
                <div class="card-plain">
                    <form class="form" method="POST" action="{{ url('login') }}">
                        @csrf
                        <div class="header">
                            <div class="logo-container">
                                <img src="{{ asset('assets/images/logo.svg') }}">
                            </div>
                            <h5>Log in</h5>
                        </div>
                        <div class="content">
                            <div class="input-group input-lg">
                                <input type="text"
                                       name="username"
                                       class="form-control"
                                       placeholder="@lang('lang.username')">
                                <span class="input-group-addon">
                                    <i class="zmdi zmdi-account-circle"></i>
                                </span>
                            </div>
                            @if ($errors->has('username'))
                                <span class="text-danger">
                                    <strong>{{ $errors->first('username') }}</strong>
                                </span>
                            @endif

                            <div class="input-group input-lg">
                                <input type="password"
                                       name="password"
                                       placeholder="@lang('lang.password')"
                                       class="form-control"/>
                                <span class="input-group-addon">
                                    <i class="zmdi zmdi-lock"></i>
                                </span>
                            </div>
                            @if ($errors->has('password'))
                                <span class="text-danger">
                                    <strong>{{ $errors->first('password') }}</strong>
                                </span>
                            @endif
                        </div>
                        <div class="footer text-center">
                            <button type="submit"
                                    class="btn l-cyan btn-round btn-lg btn-block waves-effect waves-light">SIGN
                                IN
                            </button>
                            <!-- <h6 class="m-t-20"><a href="forgot-password.html" class="link">Forgot Password?</a></h6> -->
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <footer class="footer">
            <div class="container">
                <div class="copyright"></div>
            </div>
        </footer>
    </div>
    <style type="text/css">
        .authentication .card-plain .logo-container { width: 150px; }
    </style>
@stop

@section('script')
<script>
$('.form-control').on("focus", function () {
    $(this).parent('.input-group').addClass("input-group-focus");
}).on("blur", function () {
    $(this).parent(".input-group").removeClass("input-group-focus");
});
$(".page-header-image").css('background-image', 'url({{ asset('assets/images/login.jpg') }})');
</script>
@stop