//add multiple cards in carousel 
function addCarousel(e) {
        if (document.querySelectorAll(".slider-card").length === 5) {
            return;
        }

        // slider container
        hideShowSections("show", "carousel-container");


        const tempLength = document.querySelectorAll(".slider-card").length;

        // display crousel card
        const id = `carousel-${Date.now()}`;
        editContentId = id;
        const backgroundURL = "images/dummy-image.webp";
        $("#carousel-item-container").append(getCarouselItem(editContentId, backgroundURL, tempLength));


        swiper.appendSlide(getSliderItem(editContentId, backgroundURL, tempLength));

        carouselCardData[editContentId] = {
            mediaType: "image"
        };

        $("#carousel-card-length").html(document.querySelectorAll(".slider-card").length);

        $(`#${editContentId}`).click();


        if (document.querySelectorAll(".slider-card").length === 5) {
            $(".drag-and-drop-container").css({
                display: "none"
            })
        }
    }
    // remove cards from carousel
    const carouselCardData = {};

    function deleteCarouselCard(e) {
        $("#edit-carousel-section").css({
            display: "none"
        });

        const id = e.currentTarget.getAttribute("data-carousel-id");

        $(`#${id}`).remove();
        $(`div[data-slider-id=${id}]`).remove();

        delete carouselCardData[id];

        editContentId = "";

        if (document.querySelectorAll(".slider-card").length < 5) {
            $(".drag-and-drop-container").css({
                display: "flex"
            });
        }

        $("#carousel-card-length").html(document.querySelectorAll(".slider-card").length);
    }

    // add dynamic button 
    document.getElementById('carousel-addWebsiteCallButton').addEventListener('click', function () {
        const container = document.getElementById('carousel-add-button-container');
    
        // Limit the number of buttons to 2
        if (container.children.length >= 2) {
            alert("You can only add two buttons.");
            return;
        }
    
        const id = `carousel-button-${Date.now()}`;
        const wrapper = document.createElement('div');
        wrapper.className = 'card p-3 mb-3 position-relative';
        wrapper.style.border = '1px solid #ccc';
        wrapper.id = id;
    
        const idAndDataTargetAttribute = `button-${Date.now()}`;
    
        wrapper.innerHTML = `
            <div class="mb-2 d-flex gap-2 align-items-center">
                <select class="form-select w-25 button-type">
                    <option value="url">Visit Website</option>
                    <option value="quickReply">Quick Reply</option>
                </select>
                <input type="text" class="form-control w-50 button-text" placeholder="Button Text">
                <button type="button" class="btn btn-danger btn-sm delete-button">Delete</button>
            </div>
    
            <div class="link-section">
                <div class="d-flex gap-2 align-items-center">
                    <select class="form-select w-25 link-type">
                        <option value="static">Static</option>
                        <option value="dynamic">Dynamic</option>
                    </select>
                    <input type="text" class="form-control w-75 button-link" placeholder="Enter Link">
                </div>
            </div>
        `;
    
        const buttonTypeSelect = wrapper.querySelector('.button-type');
        const linkSection = wrapper.querySelector('.link-section');
        const deleteButton = wrapper.querySelector('.delete-button');
        
        // Toggle visibility of the link section based on button type
        const toggleFields = () => {
            if (buttonTypeSelect.value === 'quickReply') {
                linkSection.style.display = 'none'; // Hide link section when Quick Reply is selected
            } else {
                linkSection.style.display = 'block'; // Show link section when Visit Website is selected
            }
        };
    
        // Handle button type change (Visit Website / Quick Reply)
        buttonTypeSelect.addEventListener('change', function () {
            carousel_select(idAndDataTargetAttribute, this.value);
            toggleFields();
        });
    
        // Handle Delete
        deleteButton.addEventListener('click', () => {
            // Remove the preview content associated with this button
            const previewContent = document.getElementById(idAndDataTargetAttribute);
            if (previewContent) {
                previewContent.parentElement.remove();
            }
            // Now remove the button itself
            wrapper.remove();
        });
        // Set initial state
        toggleFields();
    
        container.appendChild(wrapper);
    
        carousel_select(idAndDataTargetAttribute, 'url'); // Default to 'url' for new buttons
    });
    //****************************************************** */

    function carousel_select(idAndDataTargetAttribute, value){
        // console.log(idAndDataTargetAttribute, value);
        // ####################################################
        if(document.getElementById(`${idAndDataTargetAttribute}`)){
            // remvove its parent
            document.getElementById(`${idAndDataTargetAttribute}`).parentElement.remove();
        }

        let slide_id = $('.slider-card.carousel-card-selected').attr('id')
        if (slide_id) {
            const slide_text_container = $(`[data-slider-id="${slide_id}"]`).children().last().children().last();
            slide_text_container.append(getPreviewContent(idAndDataTargetAttribute, "", value));
        }
        // ####################################################
    }