php_assessment_1/campaignListing.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">Campaigns</h2>
    
    <?php
    $userModel = new UserModel();
    $user = $userModel->get($_SESSION['user']);
    
    if (!$user->drive_refresh_token): ?>
        <div class="alert alert-warning">
            Connect your Google Drive to create campaigns
            <a href="/drive/authorize" class="btn btn-primary ml-3">
                Connect Drive
            </a>
        </div>
    <?php else: ?>
        <div class="mb-3 d-flex justify-content-between">
            <a href="/<?php echo $_SESSION['role']; ?>/campaign/add" class="btn btn-success">
                Add Campaign
            </a>
            
            <form action="/drive/disconnect" method="post" class="d-inline">
                <button type="submit" class="btn btn-warning">
                    Disconnect Drive
                </button>
            </form>
        </div>
    <?php endif; ?>
    
    <div class="row mt-2 mb-2 d-none">
        <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" 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>Name</th>
                    <th>Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($data['data'] as $campaign): ?>
                    <tr>
                        <td><?php echo $campaign->id; ?></td>
                        <td><?php echo htmlspecialchars($campaign->name); ?></td>
                        <td><?php echo $campaign->created_at; ?></td>
                        <td>
                            <a href="/<?php echo $_SESSION['role']; ?>/campaign/view/<?php echo $campaign->id; ?>" 
                               class="btn btn-sm btn-primary">View</a>
                            <a href="/<?php echo $_SESSION['role']; ?>/campaign/edit/<?php echo $campaign->id; ?>" 
                               class="btn btn-sm btn-info">Edit</a>
                            <a href="/<?php echo $_SESSION['role']; ?>/campaign/delete/<?php echo $campaign->id; ?>" 
                               class="btn btn-sm btn-danger" 
                               onclick="return confirm('Are you sure you want to delete this campaign?')">Delete</a>
                        </td>
                    </tr>
                <?php endforeach; ?>
            </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>