<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Al Rahma Sunday School</title>
    <!-- Favicon -->
    <link href="<?= base_url('assets/images/favicon.ico') ?>" rel="icon">
    <link rel="stylesheet" href="<?= base_url('assets/css/custom.css') ?>">
    <!-- In <head> -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />

</head>

<body>
    <?php
    // Check if session is already started
    if (session_status() == PHP_SESSION_NONE) {
        session_start();
    }

    if (!isset($_SESSION['user_id'])) {
        echo "<p>User not logged in</p>";
        exit;
    }

    $userId = $_SESSION['user_id'];

    // Include the shared database connection file
    $file = __DIR__ . '/../../db_connection.php';  // Adjust the relative path as needed

    if (file_exists($file)) {
        require_once $file;
    } else {
        die("Error: Could not find the required file '$file'.");
    }

    // Check if the connection is established
    if (!isset($conn)) {
        die("Error: Database connection not established.");
    }

    // Fetch user data from the database
    $sql = "SELECT firstname, lastname FROM users WHERE id = ?";
    $stmt = $conn->prepare($sql);

    if (!$stmt) {
        die('Failed to prepare statement: ' . $conn->error);
    }

    $stmt->bind_param("i", $userId);
    $stmt->execute();
    $result = $stmt->get_result();
    $user = $result->fetch_assoc();

    if ($user) {
        $userName = $user['firstname'] . ' ' . $user['lastname'];
        $userInitials = $user['firstname'][0] . $user['lastname'][0];
    } else {
        $userName = 'User not found';
        $userInitials = '??';
    }

    $stmt->close();
    $conn->close();
    ?>

    <header class="navbar navbar-dark sticky-top flex-md-nowrap shadow" style="background-color: #2c9b09;">
        <div class="top-right">
            <div class="dropdown dropdown-hover">
                <div class="profile-picture" id="profile-picture">
                    <span id="userInitials">
                        <?php echo htmlspecialchars($userInitials); ?>
                    </span>
                </div>
                <div class="dropdown-menu dropdown-menu-right">
                    <div class="profile-details">
                        <div id="user-name">
                            <?php echo htmlspecialchars($userName); ?>
                        </div>
                        <div><a class="dropdown-item"
                                href="<?= base_url('/profile/' . session()->get('user_id')) ?>">Profile</a>
                        </div>
                        <div><a class="dropdown-item"
                                href="<?= base_url('/preferences/' . session()->get('user_id')) ?>">Preferences</a>
                        </div>
                        <div class="dropdown-divider"></div>
                        <button class="btn btn-outline-dark sign-out-btn"
                            onclick="window.location.href='<?= base_url('/logout'); ?>'">Log Out</button>
                    </div>
                </div>
            </div>
        </div>
        <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">
            Al Rahma Sunday School </a>
    </header>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
</body>

</html>