php_assessment_1/reportListing.php

<style>
    .dark-header thead th {
        background-color: #343a40;
        /* Dark gray background */
        color: white;
        /* White text color */
    }
</style>

<div class="container">
    <h2 class="text-left">Report &nbsp; <a class="btn btn-primary d-none" href="/admin/report/csv?format=csv&date=<?php echo $data['date']; ?>">Export</a></h2>
    <div class="row mt-2 mb-2">
        <div class="col-md-6 col-md-offset-3">
            <form action="?" method="GET">
                <div class="input-group">
                    <input type="date" name="date" class="form-control mr-2" placeholder="" value="<?php echo $data['date']; ?>">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="submit">Search</button>
                    </span>
                </div><!-- /input-group -->
            </form>
        </div><!-- /.col-md-6 -->
    </div><!-- /.row -->
    <!-- Table Responsive Wrapper -->
    <div class="table-responsive">
        <table class="table table-hover dark-header">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Project</th>
                    <th>Date</th>
                    <th>Type</th>


                    <!-- <th>New Lead</th>
                    <th>Outbound Dial</th>
                    <th>Pickup</th>
                    <th>Conversation</th>
                    <th>Booked Appointment</th>
                    <th>Callback Request</th> -->
                    <th></th>
                </tr>
            </thead>
            <tbody>

                <?php foreach ($data['data'] as $key => $value) {
                    echo '  <tr>';
                    // echo '    <td>' . $value->id . ' <br/><a class=" text-info" href="/admin/project/edit/' . $value->id . '">edit</a> <a class="text-danger" href="/admin/project/delete/' . $value->id . '">delete</a></td>';
                    // echo '    <td>' . $value->id . ' <br/><a class="text-danger" href="/admin/project/delete/' . $value->id . '">delete</a></td>';
                    echo '    <td>' . $value->id . ' </td>';
                    echo '    <td>' . $value->project . ' </td>';
                    echo '    <td>' . $value->date . ' </td>';
                    echo '    <td>' . $value->type . ' </td>';


                    // echo '    <td>' . $value->new_lead . ' </td>';
                    // echo '    <td>' . $value->outbound_dial . ' </td>';
                    // echo '    <td>' . $value->pickup . ' </td>';
                    // echo '    <td>' . $value->conversation . ' </td>';
                    // echo '    <td>' . $value->booked_appointment . ' </td>';
                    // echo '    <td>' . $value->callback_request . ' </td>';
                    echo ' <td>  
                      <form action="/admin/report/webhook/send/'. $value->id .'" method="POST">
                    
                            <button class="btn btn-primary" type = "submit">
                                Send Webhook
                              </button> 
                    </form>
                              </td>
                              ';

                    echo '</tr>';
                }
                ?>
            </tbody>
        </table>
    </div>


    <?php
    // Retrieve parameters
    $total = $data['total'];
    $currentPage = $data['page'];
    $perPage = 10;

    // Calculate the number of pages
    $totalPages = ceil($total / $perPage);

    // Define a range of pages to show at any given time
    $range = 2; // This can be adjusted as needed

    $startPage = ($currentPage - $range) > 0 ? ($currentPage - $range) : 1;
    $endPage = ($currentPage + $range) < $totalPages ? ($currentPage + $range) : $totalPages;

    ?>
    <!-- Pagination -->
    <nav aria-label="Page navigation">
        <ul class="pagination">
            <li class="ml-2">
                <a href="?page=1" aria-label="Previous">
                    <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
            </li>
            <li class="ml-2">
                <a href="?page=<?= ($currentPage - 1) > 0 ? $currentPage - 1 : 1 ?>" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            <?php
            for ($i = $startPage; $i <= $endPage; $i++) {
                echo '<li class="ml-2' . ($currentPage == $i ? ' active' : '') . '"><a href="?page=' . $i . '">' . $i . '</a></li>';
            }
            ?>
            <li class="ml-2">
                <a href="?page=<?= ($currentPage + 1) < $totalPages ? $currentPage + 1 : $totalPages ?>" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
            <li class="ml-2">
                <a href="?page=<?= $totalPages ?>" aria-label="Next">
                    <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>
</div>


<script>

function send(element, url, data) {

// Get the selected value (Yes or No)
var projectId = $(element).attr("data-id");
var selectedValue = $(element).val();
console.log(projectId)
console.log(selectedValue)
if (selectedValue == "On") {
    var values = "Off"
}
if (selectedValue == "Off") {
    var values = "On"
}
// Make an AJAX request to update the database
$.ajax({
    type: 'POST',
    url: '/alert-toggle', // Replace with the actual path to your update script
    data: {
        projectId: projectId,
        selectedValue: values
    },
    success: function(response) {
        // Handle the response from the server (if needed)
        console.log(response);
        window.location.reload()
    },
    error: function(error) {
        console.error('Error updating data:', error);
    }
});
};

</script>