<?php
require 'config.php';
session_start();
if (empty($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
require 'header.php';
?>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<div class="container mt-5 animate__animated animate__fadeIn">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card shadow-lg">
                <div class="card-header bg-primary text-white text-center py-4">
                    <h2 class="animate__animated animate__bounceInDown">Login</h2>
                    <p class="mb-0 animate__animated animate__fadeIn">Please enter your credentials to access the dashboard</p>
                </div>
                <div class="card-body p-5">
                    <form id="loginForm">
                        <input type="hidden" name="csrf_token" value="<?php echo $_SESSION['csrf_token']; ?>">
                        <div class="mb-4">
                            <label for="username" class="form-label">Username</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-user"></i></span>
                                <input type="text" class="form-control" id="username" name="username" required>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label for="password" class="form-label">Password</label>
                            <div class="input-group">
                                <span class="input-group-text"><i class="fas fa-lock"></i></span>
                                <input type="password" class="form-control" id="password" name="password" required>
                            </div>
                        </div>

                        <div class="mb-4 text-center">
                            <div class="g-recaptcha" data-sitekey="<?php echo RECAPTCHA_SITE_KEY; ?>" style="display: inline-block;"></div>
                        </div>

                        <div class="text-center">
                            <button type="submit" class="btn btn-primary btn-lg animate__animated animate__pulse animate__infinite">
                                <i class="fas fa-sign-in-alt me-2"></i> Login
                            </button>
                        </div>

                        <div id="loginMessage" class="mt-3 text-center"></div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('#loginForm').on('submit', function(e) {
            e.preventDefault();
            $.ajax({
                url: 'login_process.php',
                type: 'POST',
                data: $(this).serialize(),
                success: function(response) {
                    if (response === 'success') {
                        window.location.href = 'dashboard.php';
                    } else if (response.includes('reCAPTCHA') || response.includes('CSRF')) {
                        $('#loginMessage').html('<div class="alert alert-danger animate__animated animate__shakeX">' + response + '</div>');
                    } else {
                        $('#loginMessage').html('<div class="alert alert-danger animate__animated animate__shakeX">Invalid username or password</div>');
                    }
                }
            });
        });
    });
</script>

<?php require 'footer.php'; ?>