<?php
declare(strict_types=1);

$postsDir = __DIR__ . '/posts/';
$posts = [];

// scan markdown files
foreach (glob($postsDir . '*.md') as $file) {
    $filename = basename($file, '.md');
    $content = file_get_contents($file);

    // extract first markdown H1
    if (preg_match('/^#\s+(.+)$/m', $content, $matches)) {
        $title = trim($matches[1]);
    } else {
        $title = $filename;
    }

    $posts[] = [
        'slug' => $filename,
        'title' => $title,
        'time' => filemtime($file),
    ];
}

// sort newest first
usort($posts, fn($a, $b) => $b['time'] <=> $a['time']);
?>
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Blog</title>
    <link rel="stylesheet" href="../style.css">
<script src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>

<script>
window.addEventListener("load", (event) => {
  new cursoreffects.ghostCursor();
});
</script>

</head>
<body>
<div class="container bio">
  <h1>Video Game list</h1>
<p>I have a SQLite database where I store games that I have played. This database contains title of the game, platform on which I have played or emulated the game, my grade and short description of what do I think of the game. Grading system works like this: 5 means mixed feelings, 1 worst games, 10 best games. Happy reading :3</p>
    <form method="POST" action="">
        <input type="text" name="search" placeholder="Search by game name" style="margin-bottom: 10px; padding: 8px; width: calc(100% - 16px);"/>
        
        <select name="sort" style="padding: 8px; margin-bottom: 10px;">
            <option value="">Sort By</option>
            <option value="name_asc">Name (A-Z)</option>
            <option value="name_desc">Name (Z-A)</option>
            <option value="grade_asc">Grade (Lowest to Highest)</option>
            <option value="grade_desc">Grade (Highest to Lowest)</option>
        </select>

        <input type="submit" value="Apply" style="padding: 8px;"/>
    </form>

    <table border="1" style="width: 100%; border-collapse: collapse;" id="gameTable">
        <thead>
            <tr>
                <th>Game Name</th>
                <th>Platform</th>
                <th>Grade</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
        <?php
        // Establish a database connection
        $db = new SQLite3('games.db');

        // Initialize variables for search and sorting
        $search = isset($_POST['search']) ? $_POST['search'] : '';
        $sort = isset($_POST['sort']) ? $_POST['sort'] : '';

        // Building query based on search and sort
        $query = "SELECT * FROM games WHERE name LIKE :search";

        if ($sort === 'name_asc') {
            $query .= " ORDER BY name ASC";
        } elseif ($sort === 'name_desc') {
            $query .= " ORDER BY name DESC";
        } elseif ($sort === 'grade_asc') {
            $query .= " ORDER BY grade ASC";
        } elseif ($sort === 'grade_desc') {
            $query .= " ORDER BY grade DESC";
        }
        
        $stmt = $db->prepare($query);
        $stmt->bindValue(':search', '%' . $search . '%', SQLITE3_TEXT);

        // Execute the query
        $results = $stmt->execute();

        // Loop through the results and display them in the table
        while ($row = $results->fetchArray(SQLITE3_ASSOC)) {
            echo "<tr>";
            echo "<td>{$row['name']}</td>";
            echo "<td>{$row['platform']}</td>";
            echo "<td>{$row['grade']}</td>";
            echo "<td>{$row['description']}</td>";
            echo "</tr>";
        }
        ?>
        </tbody>
    </table>

</div>
</main>

    <footer>
        <p class="center"><img src="../favicon.ico">(c) computer_glamour</p>
    
    <img src="../buttons/-18.gif" class="footer-button">
    <img src="../buttons/xmpp.gif" class="footer-button">
    <img src="../buttons/notread.gif" class="footer-button">
    <img src="../buttons/right2repair.gif" class="footer-button">

    </footer>

</body>
</html>
