Mini Kabibi Habibi

<div id="schedule-of-activities">
    <h2>Schedule of Activities</h2>
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Activity</th>
                <th>Location</th>
                <th>Start Date</th>
                <th>End Date</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($scheduleofActivities as $activity): ?>
                <tr id="activity_<?= $activity['id'] ?>">
                    <td><?= htmlspecialchars($activity['name']) ?></td>
                    <td><?= htmlspecialchars($activity['activity']) ?></td>
                    <td><?= htmlspecialchars($activity['location']) ?></td>
                    <td><?= htmlspecialchars($activity['start_date']) ?></td>
                    <td><?= htmlspecialchars($activity['end_date']) ?></td>
                    <td>
                        <button class="complete-btn" data-id="<?= $activity['id'] ?>">Complete</button>
                        <button class="delete-btn" data-id="<?= $activity['id'] ?>">Delete</button>
                    </td>
                </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Handle Complete button click
        document.querySelectorAll('.complete-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const activityId = this.getAttribute('data-id');
                
                // Send AJAX request to complete the activity
                fetch('index.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'action=complete&id=' + activityId
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('activity_' + activityId).remove(); // Remove the row from the table
                    } else {
                        alert('Failed to complete activity');
                    }
                })
                .catch(error => alert('Error: ' + error));
            });
        });

        // Handle Delete button click
        document.querySelectorAll('.delete-btn').forEach(function (btn) {
            btn.addEventListener('click', function () {
                const activityId = this.getAttribute('data-id');
                
                // Send AJAX request to delete the activity
                fetch('index.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: 'action=delete&id=' + activityId
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        document.getElementById('activity_' + activityId).remove(); // Remove the row from the table
                    } else {
                        alert('Failed to delete activity');
                    }
                })
                .catch(error => alert('Error: ' + error));
            });
        });
    });
</script>