document.addEventListener('DOMContentLoaded', function () {
	const sidebarLinks = document.querySelectorAll('.bsd-settings-sidebar a');
	const sections = document.querySelectorAll('.bsd-settings-content section');

	if (!sidebarLinks.length || !sections.length) return;

	sidebarLinks.forEach(link => {
		link.addEventListener('click', function (e) {
			e.preventDefault();

			// Remove active class from all links
			sidebarLinks.forEach(l => l.classList.remove('active'));

			// Add active class to clicked link
			this.classList.add('active');

			// Get target section ID
			const targetID = this.getAttribute('href').replace('#', '');

			// Hide all sections
			sections.forEach(sec => sec.style.display = 'none');

			// Show the selected section
			const activeSection = document.getElementById(targetID);
			if (activeSection) {
				activeSection.style.display = 'block';
			}
		});
	});

	// Show only the first section initially
	sections.forEach((sec, index) => {
		sec.style.display = index === 0 ? 'block' : 'none';
	});
});


jQuery(document).ready(function ($) {
	let logoFrame, faviconFrame;

	// ====================
	// Upload Header Logo
	// ====================
	$('.bsd-upload-logo').on('click', function (e) {
		e.preventDefault();

		if (logoFrame) {
			logoFrame.open();
			return;
		}

		logoFrame = wp.media({
			title: 'Select or Upload Logo',
			button: { text: 'Use this logo' },
			multiple: false
		});

		logoFrame.on('select', function () {
			const attachment = logoFrame.state().get('selection').first().toJSON();
			$('#bsd_header_logo').val(attachment.url);
			$('#bsd-logo-preview').attr('src', attachment.url).show();
			$('.bsd-remove-logo').show();
		});

		logoFrame.open();
	});

	$('.bsd-remove-logo').on('click', function (e) {
		e.preventDefault();
		$('#bsd_header_logo').val('');
		$('#bsd-logo-preview').hide();
		$(this).hide();
	});

	// ====================
	// Upload Favicon
	// ====================
	$('.bsd-upload-favicon').on('click', function (e) {
		e.preventDefault();

		if (faviconFrame) {
			faviconFrame.open();
			return;
		}

		faviconFrame = wp.media({
			title: 'Select or Upload Favicon',
			button: { text: 'Use this favicon' },
			multiple: false
		});

		faviconFrame.on('select', function () {
			const attachment = faviconFrame.state().get('selection').first().toJSON();
			$('#bsd_header_favicon').val(attachment.url);
			$('#bsd-favicon-preview').attr('src', attachment.url).show();
			$('.bsd-remove-favicon').show();
		});

		faviconFrame.open();
	});

	$('.bsd-remove-favicon').on('click', function (e) {
		e.preventDefault();
		$('#bsd_header_favicon').val('');
		$('#bsd-favicon-preview').hide();
		$(this).hide();
	});
});