document.addEventListener('DOMContentLoaded', function () {
    const tableBody = document.querySelector('.table tbody');
    const alertContainer = document.getElementById('alert-container');
    $('#edit-about-description').summernote({
        height: 200,
        tabsize: 2
    });
    
    $('#add-about-description').summernote({
        height: 200,
        tabsize: 2
    });
    $('#edit-about-description2').summernote({
        height: 200,
        tabsize: 2
    });
    
    $('#add-about-description2').summernote({
        height: 200,
        tabsize: 2
    });
    
    // Function to display 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);
        setTimeout(() => { alertDiv.remove(); }, 5000);
    }

    // Fetch about content from the server
    function fetchAboutContent() {
        fetch(BASE_PHP_URL + 'view-founder-crud.php?action=read')
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    renderAboutContent(data.data);
                } else {
                    showAlert(data.error, 'danger');
                }
            })
            .catch(() => {
                showAlert('Error fetching about content.', 'danger');
            });
    }

    // Render about content in the table
    function renderAboutContent(aboutContent) {
        tableBody.innerHTML = '';
        aboutContent.forEach(about => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${about.id}</td>
                <td>${about.title}</td>
                <td>${about.description}</td>
                <td>
                    ${about.single_image ? `<img src="assets/img/about/${about.single_image}" alt="About" width="100">` : 'No Image'}
                </td>
                <td class="d-flex align-items-center">
                    <a class="btn-action-icon me-2 edit-btn" href="javascript:void(0);" data-id="${about.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="${about.id}">
                        <i class="fe fe-trash"></i>
                    </a>
                </td>
            `;
            tableBody.appendChild(row);
        });

        // Attach 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 form submission for adding a new about entry
    document.getElementById('add-about-form').addEventListener('submit', function (e) {
        e.preventDefault();
        const formData = new FormData(this);
formData.set('description', $('#add-about-description').summernote('code'));
formData.set('description2', $('#add-about-description2').summernote('code'));


        fetch(BASE_PHP_URL + 'view-founder-crud.php?action=create', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert(data.message);
                    fetchAboutContent();
                    this.reset();
                    $('#add-about-description').summernote('reset');
                    $('#add-about-description2').summernote('reset');
                } else {
                    showAlert(data.error, 'danger');
                }
            })
            .catch(() => {
                showAlert('Error adding about content.', 'danger');
            });
    });

    // Handle editing an about entry
    function handleEdit(e) {
        const id = e.currentTarget.dataset.id;

        fetch(BASE_PHP_URL + `view-founder-crud.php?action=read&id=${id}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const about = data.data;
                    document.getElementById('edit-about-id').value = about.id;
                    document.getElementById('edit-about-title').value = about.title;
                    document.getElementById('edit-about-description').value = $('#edit-about-description').summernote('code', about.description);
                    document.getElementById('edit-about-description2').value = $('#edit-about-description2').summernote('code', about.description2);
                    ;

                    // Display Single Image
                    const imageContainer = document.getElementById('edit-about-single-image-preview');
                    imageContainer.innerHTML = about.single_image
                        ? `<img src="assets/img/about/${about.single_image}" width="100">`
                        : 'No Image';

                    // Display Multiple Images with Delete Option
                    const multipleImagesContainer = document.getElementById('edit-about-multiple-images-preview');
                    multipleImagesContainer.innerHTML = '';
                    if (about.images.length > 0) {
                        about.images.forEach(image => {
                            multipleImagesContainer.innerHTML += `
                                <div class="image-wrapper d-inline-block position-relative me-2">
                                    <img src="uploads/${image}" width="100">
                                    <span class="delete-image position-absolute top-0 end-0 bg-danger text-white px-1" data-image="${image}" style="cursor:pointer;">X</span>
                                </div>
                            `;
                        });
                        document.querySelectorAll('.delete-image').forEach(deleteBtn => {
                            deleteBtn.addEventListener('click', handleImageDelete);
                        });
                    } else {
                        multipleImagesContainer.innerHTML = 'No Images';
                    }

                    $('#edit').modal('show');
                } else {
                    showAlert(data.error, 'danger');
                }
            })
            .catch(() => {
                showAlert('Error fetching about content.', 'danger');
            });
    }

    // Handle deleting an image using the "X" mark
    function handleImageDelete(e) {
        const imageName = e.target.dataset.image;
        if (confirm('Are you sure you want to delete this image?')) {
            fetch(BASE_PHP_URL + `view-founder-crud.php?action=delete_image&image=${encodeURIComponent(imageName)}`, {
                method: 'GET'
            })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert(data.message);
                        e.target.parentElement.remove();
                    } else {
                        showAlert(data.error, 'danger');
                    }
                })
                .catch(() => {
                    showAlert('Error deleting image.', 'danger');
                });
        }
    }

    // Handle deleting an entire about entry
    function handleDelete(e) {
        const id = e.currentTarget.dataset.id;
        if (confirm('Are you sure you want to delete this about content?')) {
            fetch(BASE_PHP_URL + `view-founder-crud.php?action=delete&id=${id}`, { method: 'GET' })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showAlert(data.message);
                        fetchAboutContent();
                    } else {
                        showAlert(data.error, 'danger');
                    }
                })
                .catch(() => {
                    showAlert('Error deleting about content.', 'danger');
                });
        }
    }

    // Handle form submission for updating an about entry
    document.getElementById('edit-about-form').addEventListener('submit', function (e) {
        e.preventDefault();
        const formData = new FormData(this);
        formData.set('description', $('#edit-about-description').summernote('code'));
        formData.set('description2', $('#edit-about-description2').summernote('code'));
        

        fetch(BASE_PHP_URL + 'view-founder-crud.php?action=update', {
            method: 'POST',
            body: formData
        })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showAlert(data.message);
                    fetchAboutContent();
                    $('#edit').modal('hide'); // Close the modal after successful update
                } else {
                    showAlert(data.error, 'danger');
                }
            })
            .catch(() => {
                showAlert('Error updating about content.', 'danger');
            });
    });
// Handle preview of multiple images for "Add About" with validation
const addMultipleImageInput = document.getElementById("add-about-multiple-images");
const addMultipleImagePreview = document.getElementById("add-about-multiple-images-preview");

addMultipleImageInput.addEventListener("change", function (event) {
    const files = Array.from(event.target.files);
    
    // Check if the user is uploading more than 3 images
    if (files.length > 3) {
        Swal.fire({
            icon: 'error',
            title: 'Upload Limit Exceeded',
            text: 'You can only upload a maximum of 3 images.',
        });
        addMultipleImageInput.value = ""; // Clear selection
        return;
    }

    // Clear previous previews before adding new images
    addMultipleImagePreview.innerHTML = '';

    files.forEach(file => {
        if (validateFile(file)) {
            const imgContainer = document.createElement("div");
            imgContainer.className = "image-wrapper d-inline-block position-relative me-2";
            const img = document.createElement("img");
            img.src = URL.createObjectURL(file);
            img.width = 100;
            const deleteBtn = document.createElement("span");
            deleteBtn.className = "delete-image position-absolute top-0 end-0 bg-danger text-white px-1";
            deleteBtn.style.cursor = "pointer";
            deleteBtn.textContent = "X";
            deleteBtn.addEventListener("click", () => imgContainer.remove());
            imgContainer.appendChild(img);
            imgContainer.appendChild(deleteBtn);
            addMultipleImagePreview.appendChild(imgContainer);
        } else {
            alert(`Invalid file: ${file.name}. Please upload images under 4MB.`);
        }
    });
});

// Validate file size and type
function validateFile(file) {
    return file.size <= 4 * 1024 * 1024 && ["image/jpeg", "image/png", "image/gif", "image/webp"].includes(file.type);
}

    // Handle preview of multiple images
   // Handle preview of multiple images with validation
const multipleImageInput = document.getElementById("edit-about-multiple-images");
const multipleImagePreview = document.getElementById("edit-about-multiple-images-preview");

multipleImageInput.addEventListener("change", function (event) {
    // Get existing images count
    const existingImagesCount = document.querySelectorAll("#edit-about-multiple-images-preview .image-wrapper").length;
    const files = Array.from(event.target.files);
    const allowedImagesCount = 3 - existingImagesCount;

    if (files.length > allowedImagesCount) {
        Swal.fire({
            icon: 'error',
            title: 'Upload Limit Exceeded',
            text: `You can only upload ${allowedImagesCount} more image(s).`,
        });
        multipleImageInput.value = ""; // Clear selection
        return;
    }

    // Preserve existing images in the preview
    // Preserve existing images in the preview
const existingImagesHTML = multipleImagePreview.innerHTML;

// Clear previous previews (only for new images)
multipleImagePreview.innerHTML = existingImagesHTML;

// Add new images to the preview
files.forEach(file => {
    if (validateFile(file)) {
        const imgContainer = document.createElement("div");
        imgContainer.className = "image-wrapper d-inline-block position-relative me-2";
        const img = document.createElement("img");
        img.src = URL.createObjectURL(file);
        img.width = 100;
        const deleteBtn = document.createElement("span");
        deleteBtn.className = "delete-image position-absolute top-0 end-0 bg-danger text-white px-1";
        deleteBtn.style.cursor = "pointer";
        deleteBtn.textContent = "X";
        deleteBtn.addEventListener("click", () => imgContainer.remove());
        imgContainer.appendChild(img);
        imgContainer.appendChild(deleteBtn);
        multipleImagePreview.appendChild(imgContainer);
    } else {
        alert(`Invalid file: ${file.name}. Please upload images under 4MB.`);
    }
});
});

// Validate file size and type
function validateFile(file) {
    return file.size <= 4 * 1024 * 1024 && ["image/jpeg", "image/png", "image/gif", "image/webp"].includes(file.type);
}
    // Initial fetch of about content
    fetchAboutContent();
});