#set($listid = $detail.getListId())
#set( $fid = $detail.getId() )
#set($current = $data.get($fid))
#set($fromrequest = $context.getRequestParameters(${param}))
#set($category = $testbench.getSearcher("$listid").getCategory($current))
#if(!$category)
    #set($category = $data.getDefaultCategory())
#end



<div class="categorypicker " data-detailid="${detail.id}">
    <input name="field" value="$fid" type="hidden">
    #set($rootcategory = $testbench.getSearcher($listid).getRootCategory())
    #set($children = $rootcategory.children)

    <div class="d-flex justify-content-between align-items-center mb-2">
        <div>
            Category: <h4 style="display: inline-block; vertical-align: middle;">
                <span id="category-${detail.id}-current" class="badge rounded-pill text-bg-secondary category-badge">
                    #if($category) $category #else None selected #end
                </span>
            </h4>
            <input id="category-${detail.id}-hidden" type="hidden" name="${fid}.value" value="$!category.getId()">
        </div>
    </div>

    <div class="modal  modal-xl fade" id="categorySelectModal-${detail.id}" tabindex="-1" aria-labelledby="categorySelectModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="categorySelectModalLabel">Select a Category</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                    <div id="categoryAccordion " class="">
                        <ul>#showtree($children)</ul>
                    </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
jQuery(document).ready(function() {
    // Open modal on category badge click
    jQuery(document).on('click', '.category-badge', function() {
        const detailId = jQuery(this).closest('.categorypicker').data('detailid');
        jQuery(`#categorySelectModal-${detailId}`).modal('show');
    });

    // Handle double-click to select a category
    jQuery(document).on('dblclick', '.catnode', function(event) {
        event.stopPropagation();
        
        const selectedNode = jQuery(this);
        const id = jQuery(this).attr("id");
        const fieldName = jQuery(this).clone().children().remove().end().text().trim();
        const detailId = jQuery(this).closest('.categorypicker').data('detailid');

        jQuery(`#category-${detailId}-hidden`).val(id);
        jQuery(`#category-${detailId}-current`).text(fieldName);
        jQuery(`#categorySelectModal-${detailId}`).modal('hide');
        
        // Move the green checkmark and strong element to the newly selected category
        // First, remove checkmark and bold styling from the previous category
        jQuery('.catnode strong i.bi-check2').remove();
        jQuery('.catnode strong').contents().unwrap();

        // Add checkmark and bold styling to the newly selected category
        if (!selectedNode.find('strong').length) {
            selectedNode.wrapInner('<strong></strong>');
        }

        selectedNode.find('strong').append(' <i class="bi bi-check2" style="color: green;"></i>');
        
        
        
    });

    // Toggle collapse and change icon
    jQuery(document).on('click', '.catnode > strong', function(event) {
        event.stopPropagation();  // Prevent bubbling up the tree

        const icon = jQuery(this).find('i');

        // Toggle icon between plus and dash
        if (icon.hasClass('bi-plus')) {
            icon.removeClass('bi-plus').addClass('bi-dash');
        } else if (icon.hasClass('bi-dash')) {
            icon.removeClass('bi-dash').addClass('bi-plus');
        }

        // Handle collapse toggle for the children
        const listItem = jQuery(this).closest('.catnode');
        const targetId = listItem.attr('href') || `#cat-${listItem.attr('id')}`;
        const target = jQuery(targetId);

        // Toggle visibility of the child categories
        if (target.length) {
            const expanded = target.hasClass('show');
            target.collapse(expanded ? 'hide' : 'show');
            jQuery(this).attr('aria-expanded', !expanded);
        }
    });
});


</script>

#macro(showtree $categories)
    #foreach($cat in $categories)
        #set($isSelected = $cat.isAncestorOf($category))
        <li class="catnode list-group-item Xlist-group-item-action #if($isSelected)open#end" data-bs-toggle="collapse" href="#cat-$cat.id" aria-expanded="$isSelected" aria-controls="cat-$cat.id" id="$cat.id">
           
            #if($cat.hasChildren() && !$isSelected)
               <strong> <i class="bi bi-plus"></i></strong>
            #elseif($cat.hasChildren() && $isSelected)
               <strong> <i class="bi bi-dash"></i></strong>
            #else
                <span class="toggler-icon">&nbsp;</span>
            #end
            
             #if ($current.contains($cat.id) || $fromrequest.contains($cat.id) || $category.id == $cat.id)
              <strong>$cat.name <i class="bi bi-check2" style="color: green;"></i></strong>
            #else
            $cat.name 
            #end
            
            #if($cat.hasChildren())
                <div class="collapse #if($isSelected) show #end" id="cat-$cat.id" aria-expanded="$isSelected">
                    <ul class="list-group list-group-flush">#showtree($cat.children)</ul>
                </div>
            #end
        </li>
    #end
#end