jQuery(document).ready(function($){
let currentFilters={
text: '',
author: '',
debt_help_solution: '',
content_type: '',
debt_types: '',
orderby: 'newest',
paged: 1
};
let isLoading=false;
let hasMorePosts=true;
init();
function init(){
$('.blog-search-dropdown').on('change', handleDropdownChange);
$('#blog-order-select').on('change', handleOrderChange);
$('#blog-text-search').on('keypress', handleTextSearchKeypress);
$('#blog-search-submit').on('click', handleTextSearchSubmit);
$(document).on('click', '.search-pill-remove', handlePillRemove);
$('#clear-all-filters').on('click', clearAllFilters);
$(document).on('click', '.load-more-btn', function(e){
e.preventDefault();
currentFilters.paged++;
searchPosts(false);
});
loadInitialContent();
}
function loadInitialContent(){
searchPosts(true);
}
function handleDropdownChange(e){
const $select=$(e.target);
const filterType=$select.data('filter-type');
const value=$select.val();
const text=$select.find('option:selected').text();
if(value){
currentFilters[filterType]=value;
addPill(filterType, value, text);
}else{
currentFilters[filterType]='';
removePill(filterType);
}
resetAndSearch();
}
function handleOrderChange(e){
currentFilters.orderby=$(e.target).val();
resetAndSearch();
}
function handleTextSearchKeypress(e){
if(e.which===13){
e.preventDefault();
handleTextSearchSubmit();
}}
function handleTextSearchSubmit(){
const searchText=$('#blog-text-search').val().trim();
if(searchText!==currentFilters.text){
currentFilters.text=searchText;
if(searchText){
addPill('text', searchText, searchText);
}else{
removePill('text');
}
resetAndSearch();
}}
function addPill(type, value, text){
const pillId='pill-' + type;
const existingPill=$('#' + pillId);
const pillHtml=`
<div class="search-pill" id="${pillId}" data-filter-type="${type}" data-value="${value}">
<span class="pill-text">${escapeHtml(text)}</span>
<button class="search-pill-remove" aria-label="Remove filter">×</button>
</div>
`;
if(existingPill.length){
existingPill.replaceWith(pillHtml);
}else{
$('#blog-search-pills').append(pillHtml);
}
updateClearAllButton();
}
function removePill(type){
$('#pill-' + type).remove();
updateClearAllButton();
}
function handlePillRemove(e){
e.preventDefault();
const $pill=$(e.target).closest('.search-pill');
const filterType=$pill.data('filter-type');
currentFilters[filterType]='';
if(filterType==='text'){
$('#blog-text-search').val('');
}else{
$(`[data-filter-type="${filterType}"]`).val('');
}
$pill.remove();
updateClearAllButton();
resetAndSearch();
}
function clearAllFilters(){
Object.keys(currentFilters).forEach(key=> {
if(key!=='orderby'&&key!=='paged'){
currentFilters[key]='';
}});
$('#blog-search-pills').empty();
$('#blog-text-search').val('');
$('.blog-search-dropdown').val('');
$('#clear-all-filters').hide();
resetAndSearch();
}
function updateClearAllButton(){
const hasPills=$('#blog-search-pills .search-pill').length > 0;
$('#clear-all-filters').toggle(hasPills);
}
function resetAndSearch(){
currentFilters.paged=1;
hasMorePosts=true;
searchPosts(true);
}
function searchPosts(replace=false){
if(isLoading) return;
isLoading=true;
if(replace){
$('#ajax-loading-indicator').show();
$('#main > .ast-row').empty();
}else{
$('.load-more-btn').text('Loading...').prop('disabled', true);
}
$.ajax({
url: blogSearchAjax.ajaxurl,
type: 'POST',
data: {
action: 'blog_search_filter',
nonce: blogSearchAjax.nonce,
filters: currentFilters
},
success: function(response){
if(response.success){
if(replace){
$('#ajax-loading-indicator').hide();
$('#main > .ast-row').html(response.data.html);
$('.load-more-container').remove();
if(response.data.has_more){
$('#main').after(getLoadMoreButton());
}}else{
$('.load-more-container').remove();
$('#main > .ast-row').append(response.data.posts_html);
if(response.data.has_more){
$('#main').after(getLoadMoreButton());
}}
hasMorePosts=response.data.has_more;
if(!hasMorePosts){
$('.load-more-container').remove();
}}
},
error: function(){
if(replace){
$('#ajax-loading-indicator').hide();
$('#main > .ast-row').html('<div class="error">Error loading posts.</div>');
}},
complete: function(){
isLoading=false;
$('.load-more-btn').text('Load More').prop('disabled', false);
}});
}
function replacePaginationWithLoadMore(){
$('.ast-pagination').remove();
}
function getLoadMoreButton(){
return `
<div class="load-more-container">
<button class="load-more-btn">Load More</button>
</div>
`;
}
function escapeHtml(text){
const map={
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#039;'
};
return text.replace(/[&<>"']/g, m=> map[m]);
}});