@extends('template.website.auth')
@section('content')
<!-- Section -->
<section class="pt-5 pb-5">
    <div class="container-fluid d-flex flex-column">
        <div class="row align-items-center min-vh-100">
            <div class="col-md-6 col-lg-4 col-xl-3 mx-auto">
                <div class="card">
                    <div class="card-body py-5 px-sm-5">
                        <div class="mb-5 text-center">
                            <h6 class="h3 mb-1">Login Administrator</h6>
                            <p class="text-muted mb-0">Gunakan kredensial admin untuk login.</p>
                        </div><span class="clearfix"></span>

                        @if (session('error'))
                        <div role="alert" class="alert alert-danger alert-dismissible">
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"> </button>
                            <strong><i class="fa fa-exclamation-circle"></i> {{ session('error') }}</strong> 
                        </div>
                        @endif
                        <form id="formLogin" class="form-validate" action="{{ route('admin.auth.authenticate') }}" method="POST">
                            @csrf
                            <div class="form-group">
                                <label for="username">Username</label>
                                <div class="input-group">
                                <input type="text" class="form-control" name="username">
                                <span class="input-group-text"><i class="icon-user"></i></span>
                            </div>
                            </div>
                            <div class="form-group ">
                                <label for="password">Password</label>
                                <div class="input-group show-hide-password">
                                    <input class="form-control" name="password" type="password" >
                                    <span class="input-group-text"><i class="icon-eye-off" aria-hidden="true" style="cursor: pointer;"></i></span>
                                </div>
                            </div>
                            <div class="mt-4"><button type="submit" class="btn btn-primary btn-block btn-primary">Login</button></div>
                        </form>

                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- end: Section -->
@endsection

@push('js')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.21.0/jquery.validate.min.js" 
    integrity="sha512-KFHXdr2oObHKI9w4Hv1XPKc898mE4kgYx58oqsc/JqqdLMDI4YjOLzom+EMlW8HFUd0QfjfAvxSL6sEq/a42fQ==" 
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    $(function () {
        $('#formLogin').validate({
            rules: {
                username: {
                    required: true,
                },
                password: {
                    required: true,
                },
            },
            messages: {
                username: 'Username wajib diisi',
                password: 'Password wajib diisi',
            },
            errorClass: 'is-invalid',
            validClass: 'is-valid',
            errorElement: "div",
            errorPlacement: function (error, element) {
                element.parent().append(error);
            },
            invalidHandler: function (elem, validator) {
                $('html, body').stop(true, false).animate({
                scrollTop: $(validator.errorList[0].element).offset().top - 200
                }, 1500, 'easeInOutExpo');
            }
        });
    });
</script>
@endpush