@extends('adminlte::auth.auth-page', ['auth_type' => 'login'])
@section('adminlte_css_pre')
@stop
@section('auth_header', __('adminlte::adminlte.login_message'))
@section('auth_body')

    {!! html()->form('POST', route('auth.login'))->id('loginForm')->class('validate-form')->open() !!}
    {!! html()->token() !!}

    {{-- Username field --}}
    <div class="input-group mb-3">
        {!! html()->text('username', old('username') ?? '')->class('form-control' . ($errors->has('username') ? ' is-invalid' : ''))->placeholder(__('adminlte::adminlte.username'))->required()->autofocus() !!}

        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-envelope {{ config('adminlte.classes_auth_icon', '') }}"></span>
            </div>
        </div>

        @error('username')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    {{-- Password field --}}
    <div class="input-group mb-3">
        {!! html()->password('password')->class('form-control' . ($errors->has('password') ? ' is-invalid' : ''))->placeholder(__('adminlte::adminlte.password'))->attribute('autocomplete', 'password')->required() !!}

        <div class="input-group-append">
            <div class="input-group-text">
                <span class="fas fa-lock {{ config('adminlte.classes_auth_icon', '') }}"></span>
            </div>
        </div>

        @error('password')
            <span class="invalid-feedback" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    {{-- Submit button --}}
    <div class="row">
        <div class="col-12">
            {!! html()->button()->type('submit')->class('btn btn-block ' . config('adminlte.classes_auth_btn', 'btn-flat btn-primary'))->html('<span class="fas fa-sign-in-alt"></span> ' . __('adminlte::adminlte.sign_in')) !!}
        </div>
    </div>

    {!! html()->form()->close() !!}

@stop
@push('js')
    <script src="{{ asset('vendor/jquery/jquery.validate.js') }}"></script>
    <script>
        $(document).ready(function() {
            $('form.validate-form').each(function() {
                $(this).validate({
                    errorElement: 'span',
                    errorClass: 'invalid-feedback d-block',
                    highlight: function(element) {
                        $(element).addClass('is-invalid');
                    },
                    unhighlight: function(element) {
                        $(element).removeClass('is-invalid');
                    },
                    errorPlacement: function(error, element) {
                        var $inputGroup = element.closest('.input-group');
                        var $inputGroupAppend = $inputGroup.find('.input-group-append');

                        if ($inputGroupAppend.length) {
                            error.insertAfter($inputGroupAppend.last());
                        } else if ($inputGroup.length) {
                            error.insertAfter($inputGroup);
                        } else {
                            error.insertAfter(element);
                        }
                    }
                });
            });
        });
    </script>
@endpush
@section('auth_footer')
    {{-- Password reset link --}}
    <p class="my-0">
        <a href="{{ route('forgot.password') }}">
            {{ __('adminlte::adminlte.i_forgot_my_password') }}
        </a>
    </p>
@stop