{{-- Posts Section - Client-side DataTable; filter bar like conversation-guides/sort-filters --}}

<div class="card section-card mt-4">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h5 class="card-title mb-0">
            <i class="fas fa-newspaper me-2 text-primary"></i>
            {{ __('labels.group_posts') }}
        </h5>
        @can('create', App\Models\Post::class)
            <a href="{{ route('groups.posts.create', $group) }}" class="btn btn-sm btn-primary">
                <i class="fas fa-plus me-1"></i>{{ __('labels.new_post') }}
            </a>
        @endcan
    </div>

    {{-- Filter bar: same layout as conversation-guides/partials/sort-filters --}}
    <div class="card-body border-bottom">
        <div class="row g-3 mb-0">
            <div class="col-md-4">
                <label class="form-label fw-semibold">{{ __('datatable.search') }}</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0">
                        <i class="fas fa-search text-muted"></i>
                    </span>
                    <input type="text"
                        id="group-posts-search-input"
                        class="form-control border-start-0 ps-0"
                        placeholder="{{ __('datatable.search') }}"
                        aria-label="{{ __('datatable.search') }}">
                </div>
            </div>

            <div class="col-md-4">
                <label class="form-label fw-semibold">{{ __('labels.category') }}</label>
                <select id="post-category-filter" class="form-select">
                    <option value="">{{ __('labels.overview') }}</option>
                    @foreach($categories ?? [] as $id => $title)
                        <option value="{{ $id }}">{{ $title }}</option>
                    @endforeach
                </select>
            </div>

            <div class="col-md-4 d-flex align-items-end">
                <button class="btn btn-outline-secondary" type="button" id="group-posts-reset-filters">
                    <i class="fas fa-redo-alt me-1"></i>{{ __('labels.reset') }}
                </button>
            </div>
        </div>
    </div>

    <div class="card-body p-0">
        <div class="col-xl-12">
            <div class="table-responsive full-data">
                <table class="table-responsive-lg table display dataTablesCard student-tab dataTable no-footer" id="datatable-group-posts">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>{{ __('labels.title') }}</th>
                            <th>{{ __('labels.category') }}</th>
                            <th>{{ __('labels.created_at') }}</th>
                            <th>{{ __('labels.published_at') }}</th>
                            <th class="text-end">{{ __('labels.action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @include('pages.posts.partials.rows', ['listresults' => $posts ?? [], 'groupId' => $group->id ?? ''])
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

 
@push('js')
    <script>
        $(document).ready(function () {
            var table = initDataTable('#datatable-group-posts', {
                createdRow: function (row, data, index) {
                    $(row).addClass("selected");
                },
                searching: true,
                pageLength: 10,
                select: false,
                lengthChange: false,
                dom: 'rtip', // no default search box, we use custom
            });

            if (!table) return;

            // Main filter function - applies all filters automatically
            function filterTable() {
                var searchTerm = $('#group-posts-search-input').val().toLowerCase();
                // var selectedType = $('#type_filter').val();
                var selectedCategory = $('#post-category-filter').val();
                // var activeOnly = $('#active-filter-btn').hasClass('btn-primary');

                $('#datatable-group-posts tbody tr').each(function () {
                    var $row = $(this);
                    if ($row.attr('id') === 'no-results-message') return;
                    var showRow = true;

                    // Search filter (if search term exists)
                    if (searchTerm !== '') {
                        var rowText = $row.text().toLowerCase();
                        if (!rowText.includes(searchTerm)) {
                            showRow = false;
                        }
                    }

                    // // Type filter (if type is selected)
                    // if (showRow && selectedType !== '') {
                    //     var rowType = $row.attr('data-type') || $row.data('type') || '';
                    //     rowType = String(rowType);
                    //     if (rowType !== String(selectedType)) {
                    //         showRow = false;
                    //     }
                    // }

                    // Category filter (if category is selected)
                    if (showRow && selectedCategory !== '') {
                        var rowCategory = $row.attr('data-category-id') || $row.data('category-id') || '';
                        rowCategory = String(rowCategory);
                        if (rowCategory !== String(selectedCategory)) {
                            showRow = false;
                        }
                    }

                    // // Active filter (if active button is toggled)
                    // if (showRow && activeOnly) {
                    //     var isActive = $row.data('active');
                    //     if (!isActive) {
                    //         showRow = false;
                    //     }
                    // }

                    // Show or hide the row
                    $row.toggle(showRow);
                });

                // Show "no results" message if needed
                var visibleRows = $('#datatable-group-posts tbody tr:visible').not('#no-results-message').length;
                if (visibleRows === 0) {
                    if ($('#no-results-message').length === 0) {
                        $('#datatable-group-posts tbody').append('<tr id="no-results-message"><td colspan="100%" class="text-center py-4 text-muted">No results found</td></tr>');
                    }
                } else {
                    $('#no-results-message').remove();
                }
            }

            // AUTO-FILTER: Search input - filter as you type (with debounce)
            var searchTimeout;
            $('#group-posts-search-input').on('input', function () {
                clearTimeout(searchTimeout);
                searchTimeout = setTimeout(function () {
                    filterTable();
                }, 300); // Wait 300ms after user stops typing
            });

            // AUTO-FILTER: Type dropdown - filter immediately on change
            // $('#type_filter').on('change', function() {
            //     filterTable();
            // });

            // AUTO-FILTER: Category dropdown - filter immediately on change
            $('#post-category-filter').on('change', function () {
                filterTable();
            });

            // AUTO-FILTER: Select2 change event (if using select2)
            if ($.fn.select2) {
                $('#post-category-filter').on('select2:select select2:clear', function () {
                    filterTable();
                });
            }

            // // AUTO-FILTER: Active button toggle
            // $('#active-filter-btn').on('click', function() {
            //     // Toggle button state
            //     if ($(this).hasClass('btn-primary')) {
            //         $(this).removeClass('btn-primary').addClass('btn-outline-primary');
            //     } else {
            //         $(this).removeClass('btn-outline-primary').addClass('btn-primary');
            //     }

            //     // Apply filter immediately
            //     filterTable();
            // });

            // Optional: Pressing Enter in search also triggers filter
            $('#group-posts-search-input').on('keypress', function (e) {
                if (e.which === 13) { // Enter key
                    filterTable();
                }
            });

            $('#group-posts-reset-filters').on('click', function() {
                $('#group-posts-search-input').val('');
                $('#post-category-filter').val('');
                filterTable();
            });

            // Initial filter (if there are pre-selected values from request)
            filterTable();
        });
    </script>
@endpush