@extends('layouts.auth.layouts')

@section('title','Login')
@push('css')

@endpush
@section('content')
    <div class="d-flex col-lg-4 align-items-center auth-bg px-2 p-lg-5">
        <div class="col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto">
            <h2 class="card-title fw-bold mb-1">Welcome To {{ setting('site_title') }}</h2>
            <p class="card-text mb-2">Please sign-in to your account and start the adventure</p>
            <form class="auth-login-form mt-2" method="POST" action="#">
                @csrf
                <div class="mb-1">
                    <label class="form-label" for="email">Email</label>
                    <input id="email" type="email" class="form-control " name="email"  placeholder="Email" value="{{ old('email') }}" required  autocomplete="email" autofocus>
                </div>
                <div class="mb-1">
                    <div class="d-flex justify-content-between">
                        <label class="form-label" for="password">Password</label>
                        <a href="{{ route('password.request') }}">
                            <small>Forgot Password?</small>
                        </a>
                    </div>
                    <div class="input-group input-group-merge form-password-toggle">
                        <input id="password" type="password" class="form-control" name="password" placeholder="Password"
                               required autocomplete="password"  value="" >
                        <span class="input-group-text cursor-pointer"><i data-feather="eye"></i></span>
                    </div>
                </div>
                <div class="mb-1">
                    <div class="form-check">
                        <input class="form-check-input"  name="remember" id="remember-me" type="checkbox" tabindex="3"/>
                        <label class="form-check-label" for="remember-me"> Remember Me</label>
                    </div>
                </div>
                <button type="submit" class="btn btn-primary w-100" id="submit_btn" tabindex="4">Login</button>
            </form>
            <p class="text-center mt-2">
                <span>New on our platform?</span>
                <a href="{{ route('register') }}"><span>&nbsp;Register</span></a>
            </p>
        </div>
    </div>
@endsection

@push('js')
   <script>
        let email = $('#email');
        let password = $('#password');
        let submit_btn = $('#submit_btn');
        let remember_me = $('#remember-me');
        let form = $('.auth-login-form');
        submit_btn.on('click',function (e) {
            e.preventDefault();
            let data = {
                email:email.val(),
                password:password.val(),
                remember_me:remember_me.is(':checked'),
                _token: "{{ csrf_token() }}"
            }
            $.ajax({
                url: "{{ route('login.custom') }}",
                type: "POST",
                data: data,
                beforeSend: function () {
                    submit_btn.attr('disabled',true);
                    submit_btn.html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...');
                },
                success: function (response) {
                    if (response.status){
                        submit_btn.html('Login');
                        submit_btn.attr('disabled',false);
                        form.trigger('reset');
                        toastr.success(response.message, 'Success Alert', {
                            timeOut: 2000
                        });
                        setTimeout(function () {
                            window.location.href = response.route
                        },2000)
                    }else{
                        submit_btn.html('Login');
                        submit_btn.attr('disabled',false);
                        toastr.error(response.message);
                    }
                },
                error: function (err) {
                    if(err.status === 401)
                    {
                        toastr.error(err.responseJSON.message, 'Error Alert', {
                            timeOut: 100
                        });
                    }
                    submit_btn.html('Login');
                    submit_btn.attr('disabled',false);
                    let errors = err.responseJSON.errors;
                    if (errors){
                        $.each(errors,function (key,value) {
                            toastr.error(value, 'Error Alert', {
                                timeOut: 2000
                            });
                        })
                    }
                }
            })
        })
   </script>
@endpush