@extends('layouts.app')

@section('title', 'Individual Taxpayer Login - EIRS')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6 col-lg-4">
            <div class="card shadow">
                <div class="card-header bg-primary text-white text-center">
                    <h4 class="mb-0">
                        <i class="fas fa-user me-2"></i>
                        Individual Taxpayer Login
                    </h4>
                </div>
                <div class="card-body p-4">
                    @if(session('message'))
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <i class="fas fa-exclamation-circle me-1"></i>
                            {{ session('message') }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                    @endif

                    <form method="POST" action="{{ route('login.individual.post') }}">
                        @csrf
                        
                        <input type="hidden" name="returnUrl" value="{{ $loginViewModel->returnUrl ?? '' }}">
                        
                        <div class="mb-3">
                            <label for="RIN" class="form-label">
                                <i class="fas fa-id-card me-1"></i>
                                RIN (Revenue Identification Number)
                            </label>
                            <input type="text" 
                                   class="form-control @error('RIN') is-invalid @enderror" 
                                   id="RIN" 
                                   name="RIN" 
                                   value="{{ old('RIN', $loginViewModel->RIN ?? '') }}"
                                   placeholder="Enter your RIN"
                                   required 
                                   autofocus>
                            @error('RIN')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

                        <div class="mb-3">
                            <label for="Password" class="form-label">
                                <i class="fas fa-lock me-1"></i>
                                Password
                            </label>
                            <div class="input-group">
                                <input type="password" 
                                       class="form-control @error('Password') is-invalid @enderror" 
                                       id="Password" 
                                       name="Password" 
                                       placeholder="Enter your password"
                                       required>
                                <button class="btn btn-outline-secondary" 
                                        type="button" 
                                        id="togglePassword">
                                    <i class="fas fa-eye" id="toggleIcon"></i>
                                </button>
                            </div>
                            @error('Password')
                                <div class="invalid-feedback">
                                    {{ $message }}
                                </div>
                            @enderror
                        </div>

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

                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-sign-in-alt me-1"></i>
                                Login
                            </button>
                        </div>
                    </form>

                    <hr class="my-4">

                    <div class="text-center">
                        <a href="{{ route('login.company') }}" class="btn btn-outline-success btn-sm me-2">
                            <i class="fas fa-building me-1"></i>
                            Company Login
                        </a>
                        <a href="{{ route('login.government') }}" class="btn btn-outline-info btn-sm">
                            <i class="fas fa-landmark me-1"></i>
                            Government Login
                        </a>
                    </div>

                    <hr class="my-3">

                    <div class="text-center">
                        <small class="text-muted">
                            <a href="#" class="text-decoration-none">
                                <i class="fas fa-question-circle me-1"></i>
                                Forgot Password?
                            </a>
                        </small>
                        <br>
                        <small class="text-muted">
                            <a href="#" class="text-decoration-none">
                                <i class="fas fa-user-plus me-1"></i>
                                New Registration
                            </a>
                        </small>
                    </div>
                </div>
            </div>

            <!-- Help Information -->
            <div class="card mt-3">
                <div class="card-body">
                    <h6 class="card-title">
                        <i class="fas fa-info-circle me-1"></i>
                        Need Help?
                    </h6>
                    <p class="card-text small">
                        If you're having trouble logging in, please contact our support team:
                    </p>
                    <ul class="list-unstyled small">
                        <li><i class="fas fa-phone me-1"></i> Support: +234 XXX XXX XXXX</li>
                        <li><i class="fas fa-envelope me-1"></i> Email: support@eirs.gov.ng</li>
                        <li><i class="fas fa-clock me-1"></i> Hours: Mon-Fri 8:00 AM - 5:00 PM</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Toggle password visibility
    const togglePassword = document.getElementById('togglePassword');
    const passwordInput = document.getElementById('Password');
    const toggleIcon = document.getElementById('toggleIcon');

    togglePassword.addEventListener('click', function() {
        const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
        passwordInput.setAttribute('type', type);
        
        const icon = type === 'password' ? 'fa-eye' : 'fa-eye-slash';
        toggleIcon.className = `fas ${icon}`;
    });

    // Auto-focus on RIN field
    const rinInput = document.getElementById('RIN');
    if (rinInput && !rinInput.value) {
        rinInput.focus();
    }

    // Form validation
    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
        const rin = document.getElementById('RIN').value.trim();
        const password = document.getElementById('Password').value.trim();

        if (!rin) {
            e.preventDefault();
            alert('Please enter your RIN');
            document.getElementById('RIN').focus();
            return false;
        }

        if (!password) {
            e.preventDefault();
            alert('Please enter your password');
            document.getElementById('Password').focus();
            return false;
        }
    });
});
</script>
@endsection