document.addEventListener('DOMContentLoaded', function () {
    const tableBody = document.querySelector('.table tbody');
    const alertContainer = document.getElementById('alert-container'); // Container for alerts

    // Function to display default Bootstrap alerts
    function showAlert(message, type = 'success') {
        const alertDiv = document.createElement('div');
        alertDiv.className = `alert alert-${type} alert-dismissible fade show`;
        alertDiv.setAttribute('role', 'alert');
        alertDiv.innerHTML = `
            <strong>${type === 'success' ? 'Success!' : 'Error!'}</strong> ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        `;
        alertContainer.appendChild(alertDiv);
        // Automatically remove the alert after 5 seconds
        setTimeout(() => {
            alertDiv.remove();
        }, 5000);
    }

    // Fetch and display banners
    function fetchBanners() {
        fetch(BASE_PHP_URL + 'home-banner-crud.php?action=read')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    renderBanners(data.data);
                } else {
                    console.error('Failed to fetch banners:', data.error);
                    showAlert(data.error, 'danger');
                }
            })
            .catch(error => {
                console.error('Error fetching banners:', error);
                showAlert('An unexpected error occurred while fetching banners.', 'danger');
            });
    }

    // Render banners in the existing table
    function renderBanners(banners) {
        tableBody.innerHTML = '';
        banners.forEach(banner => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${banner.id}</td>
                <td>${banner.title}</td>
                <td>${banner.description}</td>
                <td class="d-flex align-items-center">
                    <a class="btn-action-icon me-2 edit-btn" href="javascript:void(0);" data-id="${banner.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="${banner.id}">
                        <i class="fe fe-trash"></i>
                    </a>
                </td>
            `;
            tableBody.appendChild(row);
        });

        // Add event listeners for edit and delete buttons
        document.querySelectorAll('.edit-btn').forEach(button => {
            button.addEventListener('click', handleEdit);
        });
        document.querySelectorAll('.delete-btn').forEach(button => {
            button.addEventListener('click', handleDelete);
        });
    }
// Handle adding a new banner
document.getElementById('add-banner-form').addEventListener('submit', function (e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch(BASE_PHP_URL + 'home-banner-crud.php?action=create', {
        method: 'POST',
        body: formData
    })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showAlert(data.message);
                fetchBanners(); // Refresh the table
                this.reset(); // Reset the form
            } else {
                showAlert(data.error, 'danger');
            }
        })
        .catch(error => {
            console.error('Error adding banner:', error);
            showAlert('An unexpected error occurred while adding the banner.', 'danger');
        });
});
    // Handle editing a banner
    function handleEdit(e) {
        const id = e.currentTarget.dataset.id;
        fetch(BASE_PHP_URL + `home-banner-crud.php?action=read&id=${id}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const banner = data.data;
                    document.getElementById('edit-banner-id').value = banner.id;
                    document.getElementById('edit-banner-title').value = banner.title;
                    document.getElementById('edit-banner-description').value = banner.description;

                    // Display Multiple Image Previews with X marks
                    const multipleImagesPreviewContainer = document.getElementById('edit-banner-multiple-images-preview');
                    multipleImagesPreviewContainer.innerHTML = ''; // Clear previous images
                    if (banner.multiple_images && banner.multiple_images.length > 0) {
                        banner.multiple_images.forEach(image => {
                            const imgWrapper = document.createElement('div');
                            imgWrapper.style.position = 'relative';
                            imgWrapper.style.display = 'inline-block';
                            imgWrapper.innerHTML = `
                                <img src="home-banner/${image}" width="100" alt="Image">
                                <span class="delete-image" style="position: absolute; top: 0; right: 0; background: red; color: white; cursor: pointer; padding: 2px 6px; font-size: 12px;">X</span>
                            `;
                            multipleImagesPreviewContainer.appendChild(imgWrapper);

                            // Add click event to delete the image
                            imgWrapper.querySelector('.delete-image').addEventListener('click', function () {
                                deleteImageFromBanner(banner.id, image, imgWrapper);
                            });
                        });
                    } else {
                        multipleImagesPreviewContainer.innerHTML = 'No Images';
                    }
                    $('#edit').modal('show');
                } else {
                    console.error('Failed to fetch banner:', data.error);
                    showAlert(data.error, 'danger');
                }
            })
            .catch(error => {
                console.error('Error fetching banner:', error);
                showAlert('An unexpected error occurred while fetching the banner.', 'danger');
            });
    }

    // Delete an image from the banner
    function deleteImageFromBanner(bannerId, image, imgWrapper) {
        if (confirm('Are you sure you want to delete this image?')) {
            fetch(BASE_PHP_URL + `home-banner-crud.php?action=delete_image&banner_id=${bannerId}&image=${encodeURIComponent(image)}`, { method: 'GET' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert('Image deleted successfully.');
                        imgWrapper.remove(); // Remove the image preview from the DOM
                    } else {
                        showAlert(data.error, 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error deleting image:', error);
                    showAlert('An unexpected error occurred while deleting the image.', 'danger');
                });
        }
    }

    // Handle updating a banner
    document.getElementById('edit-banner-form').addEventListener('submit', function (e) {
        e.preventDefault();
        const formData = new FormData(this);

        // Validate the number of images being uploaded
        const existingImagesCount = document.querySelectorAll('#edit-banner-multiple-images-preview img').length;
        const newImagesCount = formData.getAll('multiple_images[]').length;

        if (existingImagesCount + newImagesCount > 10) {
            // Show SweetAlert2 for maximum image limit warning
            Swal.fire({
                icon: 'warning',
                title: 'Maximum Image Limit Reached!',
                text: 'You can only upload a maximum of 10 images.',
                confirmButtonText: 'OK'
            });
            return;
        }

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

    // Handle deleting a banner
    function handleDelete(e) {
        const id = e.currentTarget.dataset.id;
        if (confirm('Are you sure you want to delete this banner?')) {
            fetch(BASE_PHP_URL + `home-banner-crud.php?action=delete&id=${id}`, { method: 'GET' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert(data.message);
                        fetchBanners(); // Refresh the table
                    } else {
                        showAlert(data.error, 'danger');
                    }
                })
                .catch(error => {
                    console.error('Error deleting banner:', error);
                    showAlert('An unexpected error occurred while deleting the banner.', 'danger');
                });
        }
    }

    // Initial fetch
    fetchBanners();
});