<script>
$(document).ready(function() {
    // Toggle filter dropdown on button click
    $('.list-filter-btn').click(function() {
        $('.filter-options').toggle();
    });

    // Initial hide for handle_multiple__options
    $('.filter-options').hide();
    $('.handle_multiple__options').hide();

    // Toggle visibility of handle_multiple__options on button click
    $('.handle-multiple-btn').click(function() {
        $('.handle_multiple__options').toggle();
    });

    // Initially disable all the buttons
    $('.handle_multiple__options .tags button').prop('disabled', true);

    // Enable/disable buttons based on the select all checkbox
    // $('#select-all').change(function() {
    //     if ($(this).is(':checked')) {
    //         $('.handle_multiple__options .tags button').prop('disabled', false);
    //     } else {
    //         $('.handle_multiple__options .tags button').prop('disabled', true);
    //     }
    // });

    // Show the modal when "Assign post" button is clicked
    $('.handle_multiple__options .tags button:contains("Assign post")').click(function(e) {
        e.preventDefault();
        $('#customModal').show();
    });

    // Show the modal when "Move" button is clicked
    $('.handle_multiple__options .tags button:contains("Move")').click(function(e) {
        e.preventDefault();
        $('#customModal2').show();
    });

    // Show the modal when "Reply to multiple" button is clicked
    $('.handle_multiple__options .tags button:contains("Reply to multiple")').click(function(e) {
        e.preventDefault();
        $('#customModal3').show();
    });

    // Close the modal when the close button or outside the modal is clicked
    $('.modal-close, .modal').click(function() {
        $('.modal').hide();
    });

    // Prevent modal content from closing the modal when clicked
    $('.modal-content').click(function(e) {
        e.stopPropagation();
    });

});

</script>

<div class="content chat-card-header d-flex align-items-center justify-content-between">
            <div class="header">Chats</div>
            <div class="data-actions d-flex justify-content-end">

                <button class="action-button bg-dark-green-color color-light handle-multiple-btn">
                    <img src="{{ asset('images/icons/Add_Plus.png') }}" alt="Plus Icon">
                    <span>Handle Multiple</span>
                </button>

            </div>

        </div>
<div class="handle_multiple__options">
   <div class="common_shre">
   <label for="select-all"> <input type="checkbox" name="" id="select-all"> Select all</label>
    <div class="tags">
        <button>Assign post</button>
        <button id="delete-posts">Delete</button>
        <!--<button>Move</button>-->
        <button data-status="open" class="update-posts-status">Open</button>
        <button data-status="waiting" class="update-posts-status">Waiting</button>
        <button data-status="done" class="update-posts-status">Done</button>
        <!--<button>Tag</button>-->
        <!--<button>Not spam</button>-->
        <button>Reply to multiple</button>
    </div>
   </div>
</div>
