@extends('layouts.login')

@section('title', 'Login | Institution Axis')

@section('content')
<div class="container">
    <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-lg-5 col-12">
            <div class="card shadow-lg border-0 rounded-4 overflow-hidden">
                <div class="card-body p-5">
                    <!-- Logo -->
                    <div class="text-center mb-4">
                        <img src="{{ asset('assets/images/logo.png') }}" 
                             alt="Institution Axis Logo" 
                             class="img-fluid" 
                             style="max-height: 80px;">
                    </div>

                    <div class="text-center mb-5">
                        <h3 class="fw-bold text-primary">Welcome Back</h3>
                        <p class="text-muted">Sign in to your Institution Axis account</p>
                    </div>

                    <form method="POST" action="{{ route('login') }}">
                        @csrf

                        <!-- Login ID Field (as per your UI) -->
                        <div class="mb-4">
                            <label class="form-label fw-medium">Login ID</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                <input type="text" 
                                       name="login" 
                                       class="form-control form-control-lg @error('login') is-invalid @enderror" 
                                       placeholder="Email, Adm No, or Staff No" 
                                       required autofocus>
                            </div>
                            @error('login')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Password -->
                        <div class="mb-4">
                            <label class="form-label fw-medium">Password</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                <input type="password" 
                                       name="password" 
                                       id="password" 
                                       class="form-control form-control-lg @error('password') is-invalid @enderror" 
                                       placeholder="Enter your password" 
                                       required>
                                <button class="btn btn-outline-secondary" type="button" onclick="togglePassword()">
                                    <i class="fas fa-eye" id="eye-icon"></i>
                                </button>
                            </div>
                            @error('password')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <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>
                            <a href="{{ route('password.request') }}" class="text-decoration-none text-primary">Forgot password?</a>
                        </div>

                        <button type="submit" class="btn btn-primary btn-lg w-100 mb-3">
                            Sign In <i class="fas fa-arrow-right ms-2"></i>
                        </button>
                    </form>

                    <div class="text-center">
                        <a href="{{ url('/') }}" class="btn btn-link text-muted">
                            <i class="fas fa-home"></i> Back to Home
                        </a>
                    </div>
                </div>
            </div>

            <!-- Optional Register Link -->
            <div class="text-center mt-4">
                <p class="text-muted">
                    Don't have an account? 
                    <a href="{{ route('register') }}" class="text-primary fw-medium">Create Account</a>
                </p>
            </div>
        </div>
    </div>
</div>
@endsection

@section('custom-scripts')
<script>
function togglePassword() {
    const passwordField = document.getElementById('password');
    const eyeIcon = document.getElementById('eye-icon');
    if (passwordField.type === 'password') {
        passwordField.type = 'text';
        eyeIcon.classList.remove('fa-eye');
        eyeIcon.classList.add('fa-eye-slash');
    } else {
        passwordField.type = 'password';
        eyeIcon.classList.remove('fa-eye-slash');
        eyeIcon.classList.add('fa-eye');
    }
}
</script>
@endsection