@extends('layouts.authapp')
@section('title', 'Sign in')
@section('content')
<div class="uk-section-muted uk-flex uk-flex-middle uk-animation-fade" uk-height-viewport>
    <div class="uk-width-1-1">
        <div class="uk-container">
            <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid>
                <div class="uk-width-1-1@m">
                    <div class="uk-margin uk-width-large uk-margin-auto uk-card uk-card-default uk-card-body uk-box-shadow-medium auth-form">
                        <h3 class="uk-card-title uk-text-center"><img class="auth-logo" alt="" src="{{url('images/listing-llama-logo.png')}}"></h3>
                        <p class="uk-text-center">To sign in, enter your email and password below!</p>
                        {{ Form::open(array('route' => 'login','method' => 'POST', 'class' => 'form', 'id' => 'signin_form')) }}
                        @csrf
                            @include('partials.messages')
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-user"></i></span>
                                    {{Form::email('email', old('email'),['class' => 'uk-input uk-form-large','autocomplete' => 'off', 'placeholder' => 'Email Address *'])}}
                                </div>
                                <span class="email-error"></span>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline uk-width-1-1">
                                    <span class="uk-form-icon"><i class="fas fa-lock"></i></span>
                                    <a class="uk-form-icon uk-form-icon-flip eye-icon"><i uk-tooltip="Show Password" class="fa-solid fa-eye-slash eye"></i></a>
                                      {{Form::password('password',['class' => 'uk-input password uk-form-large','autocomplete' => 'off', 'placeholder' => 'Password *'])}}
                                </div>
                                <span class="password-error"></span>
                            </div>
                            <div class="uk-margin">
                                <button type="submit" class="uk-button uk-button-primary uk-width-1-1 uk-button-large login-btn">
                                 <i class="fa-regular fa-arrow-right-from-bracket"></i> Sign in
                                </button>
                            </div>
                            <div class="uk-margin">
                                <p class="uk-text-center">Don't have an account? <a href="{{route('register')}}">Sign Up</a></p>
                            </div>
                        {{ Form::close() }}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@section('footer-script')
 <script>
    $("#signin_form").validate({
        errorClass: "uk-text-danger",
        rules:{
            email: {
				required: true,
				email:true,
			},
			password: {
				required: true,
				minlength: 6,
			},
        },
        messages: {
            email: {
                required: "Complete this required field.",
            },
            password: {
                required: "Complete this required field."
            },
        },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "email") {
                error.insertBefore('.email-error');
            }else if (element.attr("name") == "password") {
                error.insertBefore('.password-error');
            }else {
                error.insertAfter(element);
            }
        },
        submitHandler: function(form) {
            form.submit();
        }
    });
    
    $(document).on("click",".eye-icon i.eye",function() {
        var passInput = $(".password");
        if(passInput.attr('type')==='password'){
            $(this).closest('a.eye-icon').html('<i uk-tooltip="Hide Password" class="fa-solid fa-eye eye"></i>');
            passInput.attr('type','text');
        }else{
            $(this).closest('a.eye-icon').html('<i uk-tooltip="Show Password" class="fa-solid fa-eye-slash eye"></i>');
            passInput.attr('type','password');
        }
    });
 </script>
@endsection