<?php 
session_start();
include '../connection.php';

if (isset($_SESSION['user_id'])) {
   header("Location: index.php");
   exit();
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login - Barangay Management System</title>
    <!-- Bootstrap 4.6.2 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/login.css">
</head>
<body>
    <div class="login-container">
        <div class="login-header">
            <img src="../images/logo.jfif" class="rounded-circle" style="width: 100px; height: 100px;">
            <h1>Barangay Management System</h1>
            <p>Enter your credentials to access the dashboard </p>
        </div>
        
        <div class="login-body">
            <!-- Error Alert (hidden by default) -->
            <div class="alert alert-danger d-none" id="errorAlert">
                <i class="fas fa-exclamation-circle mr-2"></i>
                <span id="errorMessage">Invalid username or password</span>
            </div>
            
            <form id="loginForm">
                <div class="form-group">
                    <label for="username">Username</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-user"></i></span>
                        </div>
                        <input type="text" class="form-control" id="username" placeholder="Enter your username" required>
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="password">Password</label>
                    <div class="input-group">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fas fa-lock"></i></span>
                        </div>
                        <input type="password" class="form-control" id="password" placeholder="Enter your password" required>
                        <div class="input-group-append">
                            <span class="input-group-text password-toggle" id="passwordToggle">
                                <i class="fas fa-eye"></i>
                            </span>
                        </div>
                    </div>
                </div>
                
                <div class="form-group form-check">
                    <input type="checkbox" class="form-check-input" id="rememberMe">
                    <label class="form-check-label" for="rememberMe" value="1">Remember me</label>
                </div>
                
                <button type="submit" class="btn btn-login" id="loginButton">
                    <i class="fas fa-sign-in-alt mr-2"></i> Login
                </button>
            </form>
        </div>
        
        <div class="login-footer">
            <a href="#" id="forgotPassword">Forgot your password?</a>
        </div>
    </div>

    <!-- Bootstrap & jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        $(document).ready(function() {
            // Toggle password visibility
            $('#passwordToggle').click(function() {
                const passwordInput = $('#password');
                const icon = $(this).find('i');
                
                if (passwordInput.attr('type') === 'password') {
                    passwordInput.attr('type', 'text');
                    icon.removeClass('fa-eye').addClass('fa-eye-slash');
                } else {
                    passwordInput.attr('type', 'password');
                    icon.removeClass('fa-eye-slash').addClass('fa-eye');
                }
            });
            
            // Form submission
            $('#loginForm').submit(function(e) {
                e.preventDefault();
                
                const username = $('#username').val();
                const password = $('#password').val();
                const rememberMe = $('#rememberMe').is(':checked');
                
                // Simple validation
                if (!username || !password) {
                    showError('Please enter both username and password');
                    return;
                }
                
                $.ajax({
                  method: 'post',
                  url: 'query.php',
                  data:{
                    "loggin": 1,
                    "username": username,
                    "password": password,
                    "rememberMe": rememberMe
                  },
                  success: function(res){
                        if (res.trim() === "success") {
                        // Show loading state
                      const loginButton = $('#loginButton');
                      loginButton.html('<i class="fas fa-spinner fa-spin mr-2"></i> Logging in...');
                      loginButton.prop('disabled', true);
                      
                      // Simulate API call (replace with actual authentication)
                      setTimeout(function() {
                          // For demo purposes, accept any non-empty credentials
                          if (username && password) {
                              // Successful login
                              hideError();
                              
                              // In a real application, you would redirect to the dashboard
                              window.location.href = 'index.php';
                              
                              // For demo, show success message
                              // alert('Login successful! Redirecting to dashboard...');
                              
                              // Reset form
                              $('#loginForm')[0].reset();
                          } else {
                              // Failed login
                              showError('Invalid username or password');
                          }
                          
                          // Reset button
                          loginButton.html('<i class="fas fa-sign-in-alt mr-2"></i> Login');
                          loginButton.prop('disabled', false);
                      }, 1500);
                  }

                  }
                });
            
            });
            
            // Forgot password link
            $('#forgotPassword').click(function(e) {
                e.preventDefault();
                alert('Password reset functionality would be implemented here.');
            });
            
            // Helper functions
            function showError(message) {
                $('#errorMessage').text(message);
                $('#errorAlert').removeClass('d-none');
            }
            
            function hideError() {
                $('#errorAlert').addClass('d-none');
            }
            
            // Auto-focus on username field
            $('#username').focus();
        });
    </script>
</body>
</html>