Login limit counter not showing

I’m new with programming language and currently doing a laravel project. What I’m trying to do is create a login time limit, if a user mistype a password of an user account they will be given 5 trial to re type the password until reach the limit.

I modified the LoginController.php to create a custom login function and when I call the function the code was running perfectly.

$validate = Validator::make($request->all(), [
            'email' => ['required', 'string'],
            'password' => ['required', 'string'],
        ]);

        // If Validator Fail
        if ($validate->fails()) {
            $is_limit = 0;
            $refresh_time = 0;
            return redirect('/login')->with([$is_limit, $refresh_time])->withErrors($validate)->withInput();
        }

        if (Auth::attempt(['email' => $request->email, 'password' => $request->password])) {
            // Trying to log in
            Session::put('working_area', null);
            return redirect($this->redirectTo);
        }

        $data = $this->limit_check($request->email);
        $is_limit = $data[0];
        $refresh_time = $data[1];
        $email = $request->email;
        // return $data;
        return view('auth.login', compact('is_limit', 'refresh_time', 'email'));

But when the limit was reach the counter didn’t show in the page, here is my login.blade.php

@extends('layouts.auth')

@section('content')

<div class="logo">
    <img src="{{ asset('public/images/authentication/sign-in-logo.svg') }}" alt="">
</div>
<div class="whitebox">
    <img src="{{ asset('public/images/authentication/sign-in-whitebox.svg') }}" alt="">
</div>
<div class="whitebox-text">
    <div class="subtitle"><span>&#62;&#46;&nbsp;</span><span id="typewritter">SIGN IN</span></div>
    <div class="form-group">
        <form action="{{ route('login') }}" method="POST">
        @method('POST')
        @csrf
        <div class="field-holder">
            <input class="form-input @error('email') is-invalid @enderror" type="email" id="email" name="email" value="{{ $email }}" required>
            <label for="email">email</label>
            @error('email')
                <div class="alert alert-danger">{{ $message }}</div>
            @enderror
        </div>
        <div class="field-holder">
            <input class="form-input" type="password" id="password" name="password" required>
            <label for="password">password</label>
        </div>
        <div class="field-link">
            <a href="{{ route('password.email') }}" id="forgot">FORGOT PASSWORD</a>
        </div>
        <div class="field-holder">
            <div id="refreshTime">
                <span id="title"></span>
                <span id="time"></span>
            </div>
            <button class="btn" id="submit">SIGN IN</button>
        </div>
    </div>
    <div class="title">ASSET MANAGEMENT SYSTEM</div>
</div>
<script>
    let is_limit = @json($is_limit);
    let refresh_time = @json($refresh_time);
    let email = @json($email);
    if (is_limit == 1) {
        document.getElementById('title').innerHtml = 'refresh time : ';
        setInterval(() => {
            document.getElementById('time').innerHtml = refresh_time; 
        }, refresh_time);
    }
</script>
@endsection

I had tried test inserting javascript code to show a text by doing this

document.getElementBy('time').innerHTML = "refresh in :"

and checked the script src

<script src="{{asset('public/dist/bootstrap-5.1.3/js/bootstrap.js')}}"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

from the test above the “refresh in :” text also not showing

In my thought the code logic was clear, but when I tested it it doesn’t work.
I don’t have any idea why my code won’t work…
Any idea about how to make my code work