/* Update the table to display */
function renderBanners(banners) {
    tableBody.innerHTML = '';
    banners.forEach(pooja => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${pooja.id}</td>
            <td>${pooja.title}</td>
            <td>${pooja.date}</td>
            <td>${pooja.time}</td>
            <td>${pooja.description}</td>
            <td class="d-flex align-items-center">
                <a class="btn-action-icon me-2 edit-btn" href="javascript:void(0);" data-id="${pooja.id}" data-bs-toggle="modal" data-bs-target="#edit">
                    <i class="fe fe-edit"></i>
                </a>
                <a class="btn-action-icon me-2 delete-btn" href="javascript:void(0);" data-id="${pooja.id}">
                    <i class="fe fe-trash"></i>
                </a>
            </td>
        `;
        tableBody.appendChild(row);
    });

    document.querySelectorAll('.edit-btn').forEach(button => {
        button.addEventListener('click', handleEdit);
    });
    document.querySelectorAll('.delete-btn').forEach(button => {
        button.addEventListener('click', handleDelete);
    });
}
/* Edit popup */
function handleEdit(e) {
    const id = e.currentTarget.dataset.id;
    fetch(BASE_PHP_URL + `upcoming-pooja-crud.php?action=read&id=${id}`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                const pooja = data.data;
                document.getElementById('edit-id').value = pooja.id;
                document.getElementById('edit-title').value = pooja.title;
                document.getElementById('edit-date').value = pooja.date;
                document.getElementById('edit-time').value = pooja.time;
                document.getElementById('edit-description').value = pooja.description;
                
                $('#edit').modal('show');
            } else {
                console.error('Failed to fetch poojas:', data.error);
                showAlert(data.error, 'danger');
            }
        })
        .catch(error => {
            console.error('Error fetching pooja:', error);
            showAlert('An unexpected error occurred while fetching the poojas.', 'danger');
        });
}

/* Update  */
document.getElementById('add-upcoming-pooja').addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch(BASE_PHP_URL + 'upcoming-pooja-crud.php?action=create', {
        method: 'POST',
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message);
                fetchBanners();
                this.reset();
            } else {
                showAlert(data.error, 'danger');
            }
        })
        .catch(error => {
            console.error('Error adding Data:', error);
            showAlert('An unexpected error occurred while adding the data.', 'danger');
        });
});

document.getElementById('edit-poojas').addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch(BASE_PHP_URL + 'upcoming-pooja-crud.php?action=update', {
        method: 'POST',
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message);
                fetchBanners();
                $('#edit').modal('hide');
            } else {
                showAlert(data.error, 'danger');
            }
        })
        .catch(error => {
            console.error('Error updating data:', error);
            showAlert('An unexpected error occurred while updating the data.', 'danger');
        });
});