<x-guest-layout>
    <form class="login100-form validate-form" method="POST" action="{{ route('login') }}">
        @csrf

        <span class="login100-form-title pb-5">
            Login
        </span>

        @if (session('status'))
            <div class="alert alert-success mb-4" role="alert">
                {{ session('status') }}
            </div>
        @endif

        <div class="panel panel-primary">
            <div class="panel-body tabs-menu-body p-0">
                <div class="tab-content">
                    <div class="tab-pane active" id="tab5">
                        
                        <!-- Email Address -->
                        <div class="wrap-input100 validate-input input-group mb-4" data-bs-validate="Valid email is required: ex@abc.xyz">
                            <a href="javascript:void(0)" class="input-group-text bg-white text-muted @error('email') border-danger @enderror">
                                <i class="zmdi zmdi-email text-muted" aria-hidden="true"></i>
                            </a>
                            <input class="input100 border-start-0 form-control ms-0 @error('email') is-invalid @enderror" 
                                   type="email" 
                                   name="email" 
                                   id="email" 
                                   value="{{ old('email') }}" 
                                   placeholder="Email" 
                                   required 
                                   autofocus 
                                   autocomplete="username">
                        </div>

                        <!-- Password -->
                        <div class="wrap-input100 validate-input input-group mb-4" id="Password-toggle">
                            <a href="javascript:void(0)" class="input-group-text bg-white text-muted @error('password') border-danger @enderror">
                                <i class="zmdi zmdi-eye text-muted" aria-hidden="true"></i>
                            </a>
                            <input class="input100 border-start-0 form-control ms-0 @error('password') is-invalid @enderror" 
                                   type="password" 
                                   name="password" 
                                   id="password" 
                                   placeholder="Password" 
                                   required 
                                   autocomplete="current-password">
                        </div>

                        <!-- Remember Me & Forgot Password -->
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <div class="form-check">
                                <input id="remember_me" type="checkbox" class="form-check-input" name="remember">
                                <label for="remember_me" class="form-check-label text-muted text-sm">
                                    {{ __('Remember me') }}
                                </label>
                            </div>
                            @if (Route::has('password.request'))
                                <a class="text-sm text-primary hover:underline" href="{{ route('password.request') }}">
                                    {{ __('Forgot password?') }}
                                </a>
                            @endif
                        </div>

                        <!-- Submit Button -->
                        <div class="container-login100-form-btn">
                            <button type="submit" class="login100-form-btn btn-primary w-100">
                                {{ __('Log in') }}
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
</x-guest-layout>
