@foreach($lists as $row)
<th class="{!! @$row['key'] !!} {{ $row['key']=='id_number'?'sticky-col always-sticky' :"" }}  ">
    <div class="d-inlin-flex">
        <i class="fa-solid fa-filter filter-icon hidden filter-icon-field filter-icon-display-{!! @$row['key'] !!}"></i>
        <span class="labelclass">{!! @$row['label'] !!}</span>
        <div class="dropdown">
            <button class="btn dropdown-toggle btn-filter-dropdown data-no-load btn-filter-dropdown_{!! @$row['key'] !!}" type="button" data-bs-toggle="dropdown" aria-expanded="false" data-date="{!! @$row['search']['date'] !!}" data-column="{!! @$row['key'] !!}" data-field="{!! @$row['search']['field'] !!}" data-key="{!! @$row['search']['key'] !!}" data-value="{!! @$row['search']['value'] !!}" data-join="{!! @$row['search']['join'] !!}" data-label="{!! @$row['label'] !!}" data-url="{!! @$row['url'] !!}"><i class="fas fa-chevron-down"></i></button>
            <div class="dropdown-menu">
                <div class="dropdown-filter-search"><input type="text" class="dropdown-filter-menu-search form-control " placeholder="Search..." data-column="{!! @$row['key'] !!}" data-date="{!! @$row['search']['date'] !!}" data-field="{!! @$row['search']['field'] !!}" data-key="{!! @$row['search']['key'] !!}" data-value="{!! @$row['search']['value'] !!}" data-join="{!! @$row['search']['join'] !!}" data-url="{!! @$row['url'] !!}"></div>
                <div class="checkbox-container" id="{!! @$row['key'] !!}_options" ata-url="{!! @$row['url'] !!}" data-scroll-div="#{!! @$row['key'] !!}_options">
                    <small>Loading ... </small>
                </div>
            </div>
        </div>
        <div class="dropdown app-more-dropdown">
            <button class="btn btn-icon border-0 dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fa-solid fa-ellipsis-vertical"></i></button>
            <div class="dropdown-menu">
                <div class="dropdown-title">Settings</div>
                <button type="button" class="dropdown-item dropdown-item-with-icon btn-sort desc" data-value="ASC" data-key="{!! @$row['orderBy'] !!}" data-label="{!! @$row['label'] !!}"><i class="fa-solid fa-arrow-down-short-wide"></i><span>Sort Ascending</span></button>
                <button type="button" class="dropdown-item dropdown-item-with-icon btn-sort asc" data-value="DESC" data-label="{!! @$row['label'] !!}" data-key="{!! @$row['orderBy'] !!}"><i class="fa-solid fa-arrow-up-wide-short"></i><span>Sort Descending</span></button>
            </div>
        </div>
    </div>
</th>
@endforeach

<script>
    $(document).ready( function(){
        
        $(".input-search").on('keyup', function (e) {
            e.preventDefault();
            displayList();
        });
    
        $('.btn-search').on('click', function(e) {
           
            e.preventDefault();
            displayList();
        });
        
        $('.btn-danger').on('click', function(e) {
            e.preventDefault();
            $('#form-search').trigger("reset");
            displayList();
        });
       
        $('.btn-sort').on('click', function(e) {
            e.preventDefault();
            $('.btn-sort').removeClass("active");
            $(this).toggleClass("active");
            $('#form-search').val($(this).attr("data-sort"));
            orderBy['key']   = $(this).data('key');
            orderBy['value'] = $(this).data('value');
            orderBy['label'] = $(this).data('label');
     
            displayList();
        });

        $('.dropdown-filter-menu-search').on('keyup', function(e) {
            e.preventDefault();
        
            var url     = $(this).data('url');
            var column  = $(this).data('column');
            var date    = $(this).data('date');
            var field   = $(this).data('field');
            var key     = $(this).data('key');
            var value   = $(this).data('value');
            var join    = $(this).data('join');
            var slug    = $(this).val();
            
            $("#"+column+"_options").load("{!! guard_url('/') !!}"+"/"+url+"/"+column+"/?slug="+slug+"&&field="+field+"&&key="+key+"&&value="+value+"&&join="+join+"&&date="+date);
        });     

        $('.btn-filter-dropdown').on('click', function(e) {
            e.preventDefault();
            var url     = $(this).data('url');
            var column  = $(this).data('column');
            var date    = $(this).data('date');
            var field   = $(this).data('field');
            var key     = $(this).data('key');
            var value   = $(this).data('value');
            var join    = $(this).data('join');
            label       = $(this).data('label');
           
            var url     = "{!! guard_url('/') !!}"+"/"+url+"/"+column+"?field="+field+"&&key="+key+"&&value="+value+"&&join="+join+"&&"+"&&date="+date+"&&";
            url        += "sort=" + encodeURI($("#form-sort").val())+"&&"+ encodeURI($(".input-search").val())+'&&';
            $(".form-search-input:checked,.form-assign-input:checked").each( function(i, val) {
                url   +=  val.name + '=' + encodeURI(val.value)+'&&';
            });

            if($(this).hasClass('data-no-load')){
                $("#"+column+"_options").load(url);
                var tag = $("#"+column+"_options"); 
                stopLoading =false;                   
                tag.attr("data-url",url);
                pageNo = 2;
                app.doPageScroll(tag);
                $(this).removeClass('data-no-load');
            }
        });

    });    
    

</script>