@include('./util/auth_header')

<div class="auth-page">
    <div class="container-fluid p-0">
        <div class="row g-0 justify-content-center">
            <div class="col-xxl-4 col-lg-4 col-md-4">
                <div class="auth-full-page-content d-flex p-sm-5 p-4">
                    <div class="w-100">
                        <div class="d-flex flex-column h-100">
                            <div class="mb-4 mb-md-5 text-center">
                                <a href="/account" class="d-block auth-logo">
                                    <img src="{{ asset('assets/images/logo.png') }}" alt="CLI Logo" height="28">
                                    <span class="logo-txt">Connective Leadership Institute</span>
                                </a>
                            </div>

                            @if($errors->any() || session('error') || session('message'))
                                <div class="alert alert-{{ ($errors->any() || session('error')) ? 'danger' : 'info' }}">
                                    @if($errors->any())
                                        @foreach($errors->all() as $error)
                                            {{ $error }}<br>
                                        @endforeach
                                    @else
                                        {{ session('error') ?? session('message') }}
                                    @endif
                                </div>
                            @endif

                            <div class="auth-content my-auto">
                                <div class="text-center">
                                    <h5 class="mb-0">Welcome Back!</h5>
                                    <p class="text-muted mt-2">CLI Certified Associates' Resource Center<br>Secure Login</p>
                                </div>

                                <form class="mt-4 pt-2 needs-validation" method="POST" action="{{ route('login') }}" novalidate>
                                    @csrf
                                    <div class="mb-3">
                                        <label for="username" class="form-label">Email Address</label>
                                        <input type="email" 
                                               class="form-control @error('userName') is-invalid @enderror" 
                                               id="username" 
                                               name="userName" 
                                               value="{{ old('userName') }}"
                                               required 
                                               autocomplete="email">
                                        @error('userName')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3">
                                        <div class="d-flex align-items-start justify-content-between">
                                            <label for="password" class="form-label">Password</label>
                                            <a href="{{ route('forget-password') }}" class="text-muted">Forgot password?</a>
                                        </div>
                                        <div class="input-group">
                                            <input type="password" 
                                                   class="form-control @error('passWord') is-invalid @enderror" 
                                                   id="password"
                                                   name="passWord" 
                                                   required>
                                            <button class="btn btn-light" type="button" onclick="togglePassword()">
                                                <i class="mdi mdi-eye-outline"></i>
                                            </button>
                                        </div>
                                        @error('passWord')
                                            <div class="invalid-feedback">{{ $message }}</div>
                                        @enderror
                                    </div>

                                    <div class="mb-3">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" name="remember" id="remember">
                                            <label class="form-check-label" for="remember">Remember me</label>
                                        </div>
                                    </div>

                                    <div class="mb-3">
                                        <button class="btn btn-primary w-100" type="submit">
                                            Sign in
                                        </button>
                                    </div>
                                </form>
                            </div>

                            <div class="mt-4 mt-md-5 text-center">
                                <p class="mb-0">&copy; {{ date('Y') }} Jean Lipman-Blumen | All rights reserved</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function togglePassword() {
    const passwordInput = document.getElementById('password');
    passwordInput.type = passwordInput.type === 'password' ? 'text' : 'password';
}
</script>

@include('../util/auth_footer')