<?php
if (isset($_POST['backButton'])) {
    header('Location: ../../main.html');
}
?>

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

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>

    <title>News</title>
</head>

<body>
    <div class="container text-center">
        <h3>Welcome</h3>
        <div class='dropdown'>
            <button class='btn btn-secondary dropdown-toggle' type='button' id='dropdownMenuButton'
                data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>
                Filter
            </button>
            <div class='dropdown-menu' aria-labelledby='dropdownMenuButton'>

                <input class='dropdown-item' type="date" id="dateField" class="form-control" required>
                <input class='dropdown-item' placeholder="Category" type="text" id="categoryField" class="form-control"
                    required>
                <input class='dropdown-item' type="button" class="btn btn-primary" id="filterButton" value="Filter">
            </div>
        </div>
        <table class="container" id="newsTable"
            style="margin: 30px; border: 1px solid;border-color: black; border-collapse: collapse;">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Content</th>
                    <th>Category</th>
                    <th>Date</th>
                    <th>Producer</th>
                </tr>
            </thead>
            <tbody id='tableBody'>
                <?php
                require_once '../../Repositories/Repository.php';
                $connection = new DBConnection();
                $result = $connection->getAllNews();
                foreach ($result as $key => $value) {
                    echo "<tr>";
                    echo "<td>" . $value['title'] . "</td>";
                    echo "<td>" . $value['news_text'] . "</td>";
                    echo "<td>" . $value['category'] . "</td>";
                    echo "<td>" . $value['date'] . "</td>";
                    echo "<td>" . $value['producer'] . "</td>";
                    echo "</tr>";
                }
                ?>
            </tbody>
            <form method="post">
                <input type="submit" class="btn btn-dark" name="backButton" value="Back" style=" margin: 30px">
            </form>
    </div>
    <script>
        $(document).ready(function () {
            $('#filterButton').click(function () {
                var date = $('#dateField').val();
                var category = $('#categoryField').val();
                $.ajax({
                    url: '../../Repositories/Repository.php',
                    type: 'GET',
                    data: {
                        date: date,
                        category: category,
                        action: 'getAllNewsByCategoryAndDate'
                    },
                    success: function (response) {
                        response = JSON.parse(response);
                        $('#tableBody').empty();
                        for (var i = 0; i < response.length; i++) {
                            var newRow = "<tr><td>" + response[i].title + "</td><td>" + response[i].news_text +
                                "</td><td>" + response[i].category + "</td><td>" + response[i].date +
                                "</td><td>" + response[i].producer + "</td></tr>";
                            $('#tableBody').append(newRow);
                        }
                    }
                });
            });
        });
    </script>
</body>

</html>