Laravel: cascading model login and registration using bootstrap - laravel

Question

I am trying to make a cascaded login and registration model using bootstrap.
when I click on sign in button the model pop up which is fine but login field is not working. Registration button is working. Again click on Login button the fields appear. Here is the screenshots and code
<a href="#" class="nav-link" data-toggle="modal" data-target="#exampleModal">
<img src="public/img/sign-in-icon.png" class="img-sign-in img-responsive"></a></li>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<!-- Nav tabs -->
<ul class="nav nav-tabs md-tabs tabs-2">
<li class="active">
<a class="nav-link active" data-toggle="tab" href="#login-form" role="tab"><i class="fas fa-user mr-1"></i>
Login</a>
</li>
<li>
<a class="nav-link" data-toggle="tab" href="#registration-form" role="tab"><i class="fas fa-user-plus mr-1"></i>
Register</a>
</li>
</ul>
<!--
<li class="nav-item">
Register
</li> -->
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="tab-content">
<div id="login-form" class="tab-pane fade in active">
<form method="POST" action="{{ route('login') }}">
#csrf
<div class="form-group row">
<label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
<div class="col-md-6">
<input id="email" type="email" class="form-control #error('email') is-invalid #enderror" name="email" value="{{ old('email') }}" required autocomplete="email" autofocus>
#error('email')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
<div class="col-md-6">
<input id="password" type="password" class="form-control #error('password') is-invalid #enderror" name="password" required autocomplete="current-password">
#error('password')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
</div>
<div class="form-group row">
<div class="col-md-6 offset-md-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
<label class="form-check-label" for="remember">
{{ __('Remember Me') }}
</label>
</div>
</div>
</div>
<div class="form-group row mb-0">
<div class="col-md-8 offset-md-4">
<button type="submit" class="btn btn-primary">
{{ __('Login') }}
</button>
#if (Route::has('password.request'))
<a class="btn btn-link" href="{{ route('password.request') }}">
{{ __('Forgot Your Password?') }}
</a>
#endif
</div>
</div>
</form>
</div>
<div id="registration-form" class="tab-pane fade">
<form action="/">
<div class="form-group">
<label for="name">Your Name:</label>
<input type="text" class="form-control" id="name" placeholder="Enter your name" name="name">
</div>
<div class="form-group">
<label for="newemail">Email:</label>
<input type="email" class="form-control" id="newemail" placeholder="Enter new email" name="newemail">
</div>
<div class="form-group">
<label for="newpwd">Password:</label>
<input type="password" class="form-control" id="newpwd" placeholder="New password" name="newpwd">
</div>
<button type="submit" class="btn btn-default">Register</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Does anybody please know, what is wrong with the code?