Notes

$(document).ready(function () {
const $select = $('#ytd-store-name');
const $tabs = $('.ytd-country.nav-link'); // your two toggle buttons

// Cache all original options (so we can restore them)
const allOptions = $select.find('option').clone();

// Optional: fallback option when no stores match
const $noStoresOption = $('<option>', {
value: '',
text: 'No stores available',
disabled: true,
hidden: true
});

// Main filter function
function filterStoresByTab() {
const activeTab = $('.ytd-country.nav-link.active');

// Remove all current options
$select.empty();

let visibleOptions;

if (activeTab.hasClass('canadian_stores')) {
// Show ONLY Canadian stores
visibleOptions = allOptions.filter(function () {
return $(this).data('country')?.toString().toLowerCase() === 'canada';
});
} else {
// Show ALL stores (US + Canadian)
visibleOptions = allOptions;
}

// If no stores match → show fallback
if (visibleOptions.length === 0) {
$noStoresOption.prop({disabled: false, hidden: false});
$select.append($noStoresOption);
$select.val('');
$select.trigger('change'); // trigger your existing store change logic
return;
}

// Append filtered options
$select.append(visibleOptions);

// Try to keep current selection if still visible
const previousValue = allOptions.filter(':selected').val();
const stillExists = $select.find('option[value="' + previousValue + '"]').length > 0;

if (stillExists && previousValue) {
$select.val(previousValue);
} else {
// Otherwise auto-select the first visible store
$select.prop('selectedIndex', 0); // first option
}

// Always trigger change so your existing store logic runs
$select.trigger('change');
}

// Listen to Bootstrap tab change (most reliable way)
$('[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
const clickedTab = $(e.target); // the newly activated tab

if (clickedTab.hasClass('ytd-country')) {
filterStoresByTab();
}
});

// Also run on page load (in case default is "Canadian Stores")
filterStoresByTab();
});
$(document).ready(function () {
const $select = $('#user-stores');
const $tabs = $('.mtd-country.nav-link'); // your two toggle buttons

// Cache all original options (so we can restore them)
const allOptions = $select.find('option').clone();

// Optional: fallback option when no stores match
const $noStoresOption = $('<option>', {
value: '',
text: 'No stores available',
disabled: true,
hidden: true
});

// Main filter function
function filterStoresByTab() {
const activeTab = $('.mtd-country.nav-link.active');

// Remove all current options
$select.empty();

let visibleOptions;

if (activeTab.hasClass('canadian_stores')) {
// Show ONLY Canadian stores
visibleOptions = allOptions.filter(function () {
return $(this).data('country')?.toString().toLowerCase() === 'canada';
});
} else {
// Show ALL stores (US + Canadian)
visibleOptions = allOptions;
}

// If no stores match → show fallback
if (visibleOptions.length === 0) {
$noStoresOption.prop({disabled: false, hidden: false});
$select.append($noStoresOption);
$select.val('');
$select.trigger('change'); // trigger your existing store change logic
return;
}

// Append filtered options
$select.append(visibleOptions);

// Try to keep current selection if still visible
const previousValue = allOptions.filter(':selected').val();
const stillExists = $select.find('option[value="' + previousValue + '"]').length > 0;

if (stillExists && previousValue) {
$select.val(previousValue);
} else {
// Otherwise auto-select the first visible store
$select.prop('selectedIndex', 0); // first option
}

// Always trigger change so your existing store logic runs
$select.trigger('change');
}

// Listen to Bootstrap tab change (most reliable way)
$('[data-bs-toggle="tab"]').on('shown.bs.tab', function (e) {
const clickedTab = $(e.target); // the newly activated tab

if (clickedTab.hasClass('mtd-country')) {
filterStoresByTab();
}
});

// Also run on page load (in case default is "Canadian Stores")
filterStoresByTab();
});


// With this correct version:
$(document).on('shown.bs.tab', 'button[data-bs-toggle="tab"]', function (e) {
const $target = $(e.target); // the tab that just became active

// Check if it's one of our country tabs (YTD or MTD)
if ($target.hasClass('ytd-country') || $target.hasClass('mtd-country')) {

// Determine if we're in MTD or YTD mode
const is_mtd = $(".month-to-date-btn").hasClass("active");
const is_ytd = $(".year-to-date-btn").hasClass("active");

if (is_mtd) {
update_mtd_ranks();
} else if (is_ytd) {
update_ytd_ranks(); // make sure you have this function too!
}
}
});

function update_mtd_ranks() {
console.log("mtd function called'");
var loader_obj = document.getElementById("loader-wrapper");
loader_obj.style.display = "block"; // Show the loader initially


let is_all_store = $('#monthly-popup-wrapper').find('.all-stores').hasClass('active');
let is_same_store = $('#monthly-popup-wrapper').find('.same-stores').hasClass('active');
let all_country = $('#monthly-popup-wrapper').find('.us_canadian_stores').hasClass('active');
let canada = $('#monthly-popup-wrapper').find('.canadian_stores').hasClass('active');
let selected_month = $("#months").val();
var current_store_id = $("#user-stores").find(":selected").val() * 1;
var stores_region_mtd_ranks, stores_system_mtd_ranks;

let filters = {
"is_all_store": is_all_store,
"is_same_store": is_same_store,
"month": selected_month,
"all_country": all_country,
"canada": canada
};

if (is_same_store && stores_rank['same_stores']['stores_region_mtd_ranks'] !== null &&
stores_rank['same_stores']['stores_system_mtd_ranks'] !== null) {
stores_region_mtd_ranks = stores_rank['same_stores']['stores_region_mtd_ranks'];
stores_system_mtd_ranks = stores_rank['same_stores']['stores_system_mtd_ranks'];
updateMTDRanksUI(stores_region_mtd_ranks, stores_system_mtd_ranks, current_store_id);
showMTDTablePopUp();
loader_obj.style.display = "none"; // Hide loader as work is already done
} else if (is_all_store && stores_rank['all_stores']['stores_region_mtd_ranks'] !== null &&
stores_rank['all_stores']['stores_system_mtd_ranks'] !== null) {
stores_region_mtd_ranks = stores_rank['all_stores']['stores_region_mtd_ranks'];
stores_system_mtd_ranks = stores_rank['all_stores']['stores_system_mtd_ranks'];
updateMTDRanksUI(stores_region_mtd_ranks, stores_system_mtd_ranks, current_store_id);
showMTDTablePopUp();
loader_obj.style.display = "none"; // Hide loader as work is already done
} else {
$.ajax({
type: 'POST',
url: "/food/get_mtd_ranks/",
data: filters,
success: function (response) {
if (is_same_store) {
stores_rank['same_stores']['stores_region_mtd_ranks'] = response['stores_region_rank'];
stores_rank['same_stores']['stores_system_mtd_ranks'] = response['stores_system_rank'];
stores_region_mtd_ranks = stores_rank['same_stores']['stores_region_mtd_ranks'];
stores_system_mtd_ranks = stores_rank['same_stores']['stores_system_mtd_ranks'];
} else if (is_all_store) {
stores_rank['all_stores']['stores_region_mtd_ranks'] = response['stores_region_rank'];
stores_rank['all_stores']['stores_system_mtd_ranks'] = response['stores_system_rank'];
stores_region_mtd_ranks = stores_rank['all_stores']['stores_region_mtd_ranks'];
stores_system_mtd_ranks = stores_rank['all_stores']['stores_system_mtd_ranks'];
}
updateMTDRanksUI(stores_region_mtd_ranks, stores_system_mtd_ranks, current_store_id);
},
error: function (response) {
console.error("Error fetching MTD ranks:", response);
stores_region_mtd_ranks = null;
stores_system_mtd_ranks = null;
updateMTDRanksUI(stores_region_mtd_ranks, stores_system_mtd_ranks, current_store_id);
},
complete: function () {
showMTDTablePopUp();
loader_obj.style.display = "none"; // Hide loader after AJAX is complete
}
});
}
}